##ECMAScript6知识点

ECMAScript6知识点

let关键字

1. 作用：与var类似，用于声明一个变量
2. 特点：
   
   • 在块作用域内有效
   • 在同一个块级作用域中，不能重复声明
   • 不会预处理，不存在变量提升
3. 应用
   
   • 循环遍历加监听

在*ECMAScript5*为按钮循环绑定事件的时候，会出现先循环绑定完成之后，再触发事件，这时触发的事件总是绑定的最后一个
//获取所有的按钮事件
var btn=document.getEelementByTagName("button");
for(var i=0;i<btn.length;i++){
    btn[i].onclick=function(){
    alert(i)//3
    //弹出的总是3，因为加载页面的时候，循环遍历完成之后，并没有触发事件，当触发事件的时候就是最后绑定的内容。
    }
}
***解决方案一：使用自调函数***
for(var i=0;i<btn.length;i++){
    (function(i){
    btn[i].onclick=function(){
        alert(i)
    }
    })(i);
}
***解决方案二：为按钮增添一个属性***
for(var i=0;i<btn.length;i++){
    btn[i].index=i;
    btn[i].onclick=function(){
        alert(this.index);
    }
}
***在ECMAScript6中，使用let声明变量就不会出现这种问题***
//因为let不会预处理
for(let i=0;i<btn.length;i++){
    btn[i].onclick=function(){
        alert(i)
}

const定义常量

1. 作用：定义一个常量
2. 特点：
   
   • 不能修改
   • 其他的特点和let一样
3. 应用
   
   • 通常保存不会改变的数据

变量的解构赋值

1. 理解：从对象或数组中提取数据，并赋值给变量（多个）
2. 对象的解析赋值
   
   • let {key1,key2……}={key1:value1,key2:value2….}(左边为对象的属性名，右边为对象)
3. 数组的解析赋值
   
   • let [a,b]=[value1,value2…….]
   • 要想取到想要的值，通常使用逗号来占位，比如：let [，，d,e]=[value1,value2.,value3,value4……];表示取到的值为value3,value4
4. 函数的解析赋值
   形参使用对象来传
   function person( { key1,key2…. } ){
   //执行的逻辑代码
   }

例如：
对象：
let {n, a} = {n:'tom', a:12}
数组：
let [a,b] = [1, 'atguigu'];

模板字符串

作用：简化字符串的拼接
- 模板字符串必须使用 “ 包含
- 变化的部分使用 ${变量} 定义

let obj = {
        name : 'anverson',
        age : 41
    };
    普通字符串拼接：
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);
    简化字符串拼接：
    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);

简化的对象写法

• 省略同名的属性值
• 省略方法的function

例如：
let obj={
x,
y,
fun(){
    return this.x;
    }
}

箭头函数

• 作用：定义匿名函数 ( )=>{ }
• 基本语法：
  
  • 没有参数： （）=>console.log(“xxx”);
  • 一个参数：i =>i+2;
  • 大于一个参数：（i，j）=>i+j;
  • =>右边表示为函数体，函数体不用大括号的：默认自动返回结果
  • 当没有参数时，必须有（），当有一个参数时可以不使用（），当有多个参数时也必须使用（）。函数体中只有一条语句或是一个表达式时可以不用{ }；当函数体中有多个语句，需要使用{ }来包围，如果需要有返回的内容，需要手动return 来返回
  • 使用场景：多用来定义回调函数（将箭头函数作为另一个函数的参数，称之为回调函数）
• 箭头函数的特点：
  
  1. 简洁
  2. 箭头函数没有自己的this，箭头函数的this不是在调用的时候决定的，而是在定义的时候所处的那个对象就是他的this
  3. 自己的理解：箭头函数的this看外层是否有函数
     
     • 如果有：外层函数的this就是内部箭头函数的this
     • 如果没有，则this就是window

例如：
let obj={
    username:"xiaoming",
    fun1:()=>{
        btn.onclick=()=>{
            console.log(this)//window
        }
    }
}
obj.fun1();

…运算符

1. rest（可变）参数
   用来获取所有的实参，会存放在数组里面。用来取代arguments，他更加的灵活，只能放在形参的最后面，获取剩下的所有实参。

    function fun(a,b,...value){
    value.forEach(function(item,index){
    //他接收的是a,b占位之后剩下的所有实参
        console.log(item)//3,4,5
    })
}
fun(1,2,3,4,5);

形参默认值

当不传入参数的时候，默认使用形参里面的默认值

function Number(x=1,y=1){
    this.x=x;
    this.y=y;
}
let number=new Number(10,20);

class定义类

1. 通过class定义类和实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法

定义类的常用模板：
//使用class关键字定义一个类
class Person(){
//使用构造器，定义这个类的直接属性
    constructor(username,age){
    this.username=username;
    this.age=age;
    };
//不在构造器中定义的属性和方法，全都定义在了该对象的原型中
//类的一般方法
message(){
    console.log(this.username,this.age);
    }
}
let person1=new Person("xiaoming",18);
person1.message();//message这个方法在原型上
//定义一个子类
class Sons extends Person{
//定义类的构造方法，并将在父类上定义的形参继承下来，同时添加自己定义的形参
constructor(username,age,gender){
    super(username,age)//调用父类的构造方法
    this.gender=gender;
    this.message=function(){
    console.log(this.username,this.age,this.gender);
    //这里面定义的属性和方法都是在子类的直接属性上面
    }
    }；
//父类方法重写
message(){
    console.log(this.username,this.age,this.gender)
    }
}
let son=new Sons("xiangwan",20,"male");
console.log(son);

Promise对象

• Promise对象代表了将来要发生的事件（通常是一个异步操作）
• 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（回调地狱）
• ES6的Promise是一个构造函数，用来生成promise实例

使用promise基本步骤

1. 创建promise对象
2. 调用promise的then()

//创建promise对象，使用回调函数，回调函数的两个参数，分别表示的是成功的回调和失败的回调
let promise=new Promise((resolve,reject)=>{
//初始化promise的状态为pending------初始化状态
//执行异步操作（发送AJAX请求）
//这里使用定时器做异步操作，
setTimeout(function(){
    console.log("xxx");
//根据异步任务的状态来确定promise对象的状态
//执行异步任务成功---修改promise的状态为成功状态（resolve），data为请求到的数据
resolve（data）；//调用这个函数表示已经将状态修改为成功状态了
reject（data）;//状态为失败状态了
    },1000)
})；
//调用promise对象的then()方法
//then()方法中有两个回调函数，第一个回调函数表示成功时调用，第二个回调函数表示失败时调用
//meg,error表示传递来的数据
promise.then((msg)=>{
    console.log(msg，“成功了)；
},(error)=>{
    console.log(error,"失败了");
})

字符串扩展

1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数

数值扩展

1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分

数组扩展

1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

3,4的例子：
let arr1 = [1,3,5,2,6,7,3];
let result = arr1.find(function (item, index) {
    return item >3
});

对象扩展

1. Object.is(v1, v2)
   
   • 判断2个数据是否完全相等
2. Object.assign(target, source1, source2..)
   
   • 将源对象的属性复制到目标对象上
3. 直接操作__proto__属性
   let obj2 = {};
   obj2.__proto__= obj1;

for(let value of target)循环遍历

for(let value of target){}循环遍历
1. 遍历数组
2. 遍历Set
3. 遍历Map
4. 遍历字符串
5. 遍历伪数组
- Set,Map为容器