class Person{
constructor
}
class Worker extends Person{
constructor(name,age,job){
//super 超类(父类)
super(name,age);
this.job = job;
}
showJob(){
alert()
}
}
- 箭头函数
箭头函数两种格式：
1.只包含一个表达式，可以省略{ }和return,包含多条语句，这时候就不能省略
2.如果有且仅有一个参数，()可以省略
3.箭头函数会改变this
例子：
const add = (a, b) => a + b;
const anotherAdd = (a, b) => { return a + b; };
- 默认参数
//原来的写法，让b有默认值 function show(a,b,c){ b = b||5 或者b ||= 5 或者if(!b){b = 5} } //es6写法 function show(a,b=8,c=4){ console.log(a,b,c) } show(1) - 剩余参数（参数展开）
function show(a,...args){
console.log(a,args)
}
show(1,2,3)
//三个点的第一个用途，用来接收剩余 参数
//第二个用途，用来展开一个数组
- 数组新方法(这几个方法都不会改变原数组)
map
let arr=[62, 55, 82, 37, 26]; let arr2=arr.map(function (item){ if(item>=60){ return true; }else{ return false; } });filter
let arr=[12,5,88,37,21,91,17,24]; let arr2=arr.filter(item=>item%2); alert(arr2);forEach
let arr=[12,5,88,37,21,91,17,24]; let sum=0; arr.forEach(item=>{ sum+=item; }); alert(sum);-
reduce(一堆到一个)
-处理类数组let arr=[12,5,88,37,21,91,17,24]; let ave=arr.reduce((tmp,item,index)=>{ if(index<arr.length-1){ return tmp+item; }else{ //最后一次迭代 return (tmp+item)/arr.length; } });
let aDiv=document.getElementsByTagName('div'); Array.from(aDiv).forEach(div=>{ div.style.background='yellow'; });//可以使用数组的方法了
-json
//简写1
let a=12;
let b=5;
let json={a, b};
console.log(json);
//简写2
let json={
a: 12,
b: 5,
show(){
alert(this.a+this.b);
}
};
json.show();
- 模板字符串
let json={name: 'blue', age: 18};
//alert('我叫：'+json.name+'，我今年'+json.age+'岁');
alert(`我叫：${json.name}，我今年${json.age}岁`);
//原样输出
alert(`ab
cde
f
d`);
//startsWith和endsWith
if(num.startsWith('135')){
alert('移动')
}else{
alert('联通')
}
if(fileName.endsWith('.txt')){
alert('文本文件')
}else{
alert('图片文件')
}
- 面向对象
- es6之前
//没有类，用函数实现对象，方法用```prototype```来加 function Person(name, age){ this.name=name; this.age=age; } Person.prototype.showName=function (){ alert('我叫'+this.name); }; Person.prototype.showAge=function (){ alert('我'+this.age+'岁'); }; //继承，非官方，很麻烦 function Worker(name, age, job){ Person.call(this, name, age); this.job=job; } Worker.prototype=new Person(); Worker.prototype.constructor=Worker; Worker.prototype.showJob=function (){ alert('我是做：'+this.job); }; let w=new Worker('blue', 18, '打杂的'); w.showName(); w.showAge(); w.showJob();- es6写法，代码统一了，性能也提升了
class Person{
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
alert('我叫'+this.name);
}
showAge(){
alert('我'+this.age+'岁');
}
}
//```super```把属性带到子类，```extends```把方法代发哦子类
class Worker extends Person{
constructor(name, age, job){
//super-超类(父类)
super(name, age);
this.job=job;
}
showJob(){
alert('我是做：'+this.job);
}
}
let w=new Worker('blue', 18, '打杂的');
w.showName();
w.showAge();
w.showJob();
-
关于
this- 普通函数：根据调用我的人
- 箭头函数：根据我所在的环境
//window let arr=[1,2,3]; arr.a=()=>{ alert(this); }; arr.a(); //document document.onclick=function (){ let arr=[1,2,3]; arr.a=()=>{ alert(this); }; arr.a(); }; -
什么叫语法糖
语法糖实际上是让你写起来更方便，写起来是一种写法，但到了内部会被编译成别的东西。
例如解构赋值:let[a,b] = [1,2] //到了内部还是会编译成```let a =1;letb = 2```，但是写起来更方便了 -
编译和打包
编译是把一个语言变成另一个
打包是把一堆文件合成一个，可以减少http请求次数 -
js会预解析
var a=12;
function show(){
// 预解析时这里会有var a
alert(a);
var a=5;
}
show(); //undefined
-
Promise
同步 - 串行 简单方便
异步 - 并发 性能高、体验好
//p1,p2,p3都执行了才会执行```then```
Promise.all([p1,p2,p3]).then()
Promise.all() //所有都成功
Promise.race() //只要有一个完成
- 回调和轮询
轮询好比每隔一段时间上前台查看快递，回调就好像快递到了前台来通知。
Promise有用-解除异步操作
Promise有局限 -带逻辑的操作麻烦
-
Promise改进版generator实际上只是一个过渡的版本，如今用async、await
function sleep(sec){
return new Promise((resolve, reject)=>{
setTimeout(function (){
resolve();
}, sec*1000);
})
}
async function show(){
alert('a');
await sleep(1);
alert('b');
await sleep(2);
alert('c');
}
show();
async function(){
...
...
let 结果 = await 异步操作(promise、generator、或另一个astnc函数)
...
}
-
Array.of方法用于将一组值，转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of方法可以用下面的代码模拟实现。
function ArrayOf(){
return [].slice.call(arguments);
}
延伸：Array.prototype.slice的一个重要应用就是将类似数组的对象转化为真正的数组。例如：
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);
网友评论