ES6

ES全程ECMAScript，是一项脚本语言的标准化规范

1.ES6新增了用于声明变量的关键字

 let

（1）let声明的变量只在所处的块级有效

（2）let声明的变量不存在变量提升，只能先声明再使用

（3）暂时性死区特性，在块级作用域使用let声明的变量，这个变量会和块级区整体绑定，块级区内let变量和块级区外面的变量没有任何关系。

作用：防止循环变量变成全局变量

比如:

if(true){

   let a=10;

   if(true){

    let b=10;

   }

   console.log(b);//会报错，b is not defined

}

console.log(a); //报错 a is not defined

 

var tmp='123;

if(true){

   console.log(tmp); //会报错，因为let 声明的tmp和这个块整体绑定，声明前使用会报错

   tmp='abc';

   let tmp;

}

 

经典面试题：

var arr=[];

for(var i=0;i<2;i++){

    arr[i]=function(){

      console.log(i);

   }

}

arr[0](); //输出2

arr[1](); //输出2

 

let arr=[];

for(let i=0;i<2;i++){

    arr[i]=function(){

      console.log(i);

   }

}

arr[0](); //输出0

arr[1](); //输出1

 

新增const关键字

作用：声明常量，常量就是内存地址（值）不能变化的量

（1）const声明的变量具有块级作用域

（2）const声明的常量必须赋初始值

（3）const声明的常量，赋值后，值不能更改

例1：

const PI=3.14;

PI=100;//报错

 

const arr=[1,2];

arr[0]=2;

arr[1]=3;

console.log(arr);//输出【2，3】

arr=['a','b']；//会报错

 

let、const、var声明的变量的区别：

var声明的变量，作用域在该语句所在的函数内，【函数级作用域】存在变量提升现象。

let声明的变量，作用域在该语句所在的代码内【块级作用域】，不存在变量提升现象。

const声明的变量是常量，不能更改常量的值。【块级作用域】

 

解构赋值(分解数据结构，为变量赋值)

 ES6中允许我们按照一一对应方式从数组或对象中提取值，再将提取来的值赋值给变量。解构赋值能让我们简便地从数组或对象当中提取值。

数组解构

let [a,b,c]=[1,2,3];

console.log(a);

console.log(b);

console.log(c);

如果解构不成功，也就是等号左边的变量数不等于右边的变量数。变量值会变成undefined

对象解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功，就将对象属性的值赋值给变量。

写法一：变量名字和对象中属性名字必须一样

let person={ name:'zhangsan‘，age:20};

let {name,age}=person;

console.log(name);

console.log(age);

写法二：支持变量名字和对象中属性名字不一样

let {name:myName,age:myAge}=person;//起别名,匹配:左边的属性，匹配成功就把值赋值给myName

console.log(myName);

console.log(myAge);

箭头函数（作用：简化函数定义语法）

ES6中新增的定义函数的方式

()=>{}

比如：

const fn=()=>{

  console.log(123);

}

fn（）;

注意1：如果函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号。

传统方式：

  function sum(num1,num2){

      return num1+num2;

 }

箭头函数方式：

const sum=(num1,num2)=>num1+num2;

注意2：如果形参只有一个，可以省略小括号

传统方式：

function fn(v){

   return v;

}

const fn=v=>v;

注意3：箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const obj={name:'张三'}

function fn(){

  console.log(this);

  return ()=>{ //箭头函数被定义在了fn函数内部，所以箭头函数的this指向fn内部this

   console.log(this);

  }

}

const resFn=fn.call(obj);//接收匿名函数

resFn();

案例：

 var obj={

    age:20,

    say:()=>{

     alert(this.age);//这里定义在obj对象里，但obj是个对象，不能产生作用域，所以箭头函数实际上是定义在全局作用域下，this                                    //指向window，即undefined

     }

  }

 obj.say();

剩余参数（允许将一个不定数量的参数表示为一个数组）

function sum(first,...args){

    console.log(first);

    console.log(args);

 }

sum(10,20,30）；

 

const sum=(...args)=>{//表示接受所有参数

   let total=0;

    args.forEach(item=>total+=item)

   return total;

};

剩余参数和解构配合使用

let students=['lkq','zyy','250'];

let [s1,...s2]=students;

console.log(s1);

console.log(s2);

 

扩展运算符（将数组或对象转为用逗号分割的参数序列）

let arr=[1,2,3];

...arr

console.log(..arr); //逗号被当做参数分隔符，所以输出没有逗号 1 2 3

 

扩展运算符的应用

Array的扩展方法

1.合并数组

方法一：

let arr1=[1,2,3];

let arr2=[2,3,4];

let arr3=[...arr1,...arr2];

方法二：

arr1.push(...arr2);

2.将类数组或可遍历对象转换为真正的数组后，就可以调用数组的那些方法

let o=document.getElementByTagName('div');

o=[...o];

3.Array.from()

意义同2

let arr={

  '0':'a',

  '1':'b',

  '2':'c',

  length:3

};

let arr2=Array.from(arr);

注意：还可以加第二个参数，可以对每个元素进行处理，将处理后的值放入返回的数组

let newArr=Array.from(arr,item=>item*2)

4.find（）找到第一个符合条件的数组成员，没有返回Undefined

let arr=[ {

  id:1,

  name:'zs'

},{

  id:2,

 name:'ls'

}];

let target=arr.find((item,index)=>item.id==2);

 

5.findIndex()：查找第一个符合数组成员的位置，如果没有找到返回-1

let arr=[1,5,10,15];

let index=arr.findIndex((value,index)=>value>9);

console.log(index);

6.includes()：表示某个数组是否包含给定的值，参数是想判断的那个数，true代表包含

[1,2,3].includes(2); ---------true

 

String的扩展方法

1、模板字符串

是ES6中新增的声明字符串的方法，反引号定义

let name=`zhangsan`;

(1)模板字符串中可以解析变量

let name='张三';

let sayHello=`hello,my name is ${name}`;

(2)模板字符串内容可以换行

let str=`第一行

 第二行

        第三行`;//``这里怎么写就怎么显示

(3)模板字符串中可以调用函数

const sayHello=function(){

 return "来啊，客官，里面请";

};

let greet=`${sayHello()} `请`;

console.log(greet);//返回  请来啊，客官，里面请

2.startsWith()和endsWith()

startsWith():表示参数字符串是否在原字符串的头部，返回布尔值

endsWith():表示参数字符串是否在原字符串尾部，返回布尔值

比如：

let str='hello world!';

console.log(startsWith('hello')); -----true

console.log(endsWith('!'));-------true

3.repeat()：将原字符串重复n次，返回一个新的字符串

'x'.repeat(2); ------返回'xx'

 

set数据结构

ES6提供新的数据结构set，它类似于数组，但成员值唯一，没有重复的值。

Set本身是一个构造函数，用来生成Set数据结构

比如：

const s=new Set(["a","b"]);

应用：数组去重

const s=new Set(["a","a","b","b"]);

const arr=[...s];

console.log(arr);

实例方法：

add(value):添加某个值，返回set结构本身

delete(value):删除某个值，返回一个布尔值

has(value):返回一个布尔值，表示该值是否为set成员

clear():清除所有成员，没有返回值

Set的遍历：

const s=new Set(['a','a','b','c']);

s.forEach(value=>console.log(value))