Es6新增内容

前言

Es6(2015)
使用ES6原因：变量提升特性增加了程序运行的不可预测性；语言过于松散，实现相同的功能，不同的人可能写出不同的代码

let

let (Es6新增的声明变量的关键字)

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

注意:使用let关键字声明的变量才具有块级作用域的，使用var 声明的变量不具备块级作用域特性

2.let不存在变量的提升（先定义后使用）

3.let暂时性死区

const

作用:声明常量，常量就是值（内存地址）不能变化的量
具有块级作用域

1.声明常量时必须赋值

2.常量赋值后，值不能修改
情况一:
基本数据类型值不能更改

const y=12;
y=30    //✘

情况二:
复杂数据类型，内部值可以更改，但数据值本身不能更改

const arr=[12,13]
arr[0]=5;  //✔  

arr=[1,2];   //✘
console.log(arr);  // [5,13]

解构赋值

Es6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构
数组解构

let [a,b,c]=[1,2,3]
console.log(a);  //1

let [a,b,c]=[1,2]
console.log(c);   //undefined

对象解构

let obj={name:'wzm',age:22}

写法一

let {name,age}=obj={name:'wzm',age:22}
console.log(name);  //'wzm'
console.log(age);    //22

写法二

let {name:myName,age:myAge}=obj
console.log(myName);   //'wzm'
console.log(myAge);      //22

箭头函数

语法:

() => { }

const fn=() => { }    //把函数交给fn
fn();                 //调用函数

1.函数中只有一句代码，且代码的执行结果就是返回值，可以省略大括号{ }

const num=(a,b) => a+b;

2.在箭头函数中，如果形参只有一个，形参外侧的小括号也是可以省略的

const fn=a => a

3.箭头函数不绑定this,箭头函数没有自己的this关键字，如果在箭头函数中使用this,this关键字将指向箭头函数定义位置中的this

function fn(){
    console.log(this)   //将fn中的this指向obj
   return () =>{
       console.log(this);  //this指向fn中的this,而fn中的this指向obj
     }
}
const obj={name:'wzm'};
const res=fn.call(obj);
res();   

剩余参数

1.剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function fn(first,...args){
     //...args表示剩余参数
    console.log(first);   //12
    console.log(args);  // [13,14]
}
fn(12,13,14)

2.剩余参数和解构配合使用

let arr=[11,12,13];
let [s1,...s2] =arr;
console.log(s1);    //11
console.log(s2);   //[12,13]

Array的扩展方法

扩展运算符
1.扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let arr=[12,13,14]
...arr    //12,13,14
console.log(...arr);   //12 13 14

2.扩展运算符可以应用于合并数组
方法一

let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1,...arr2];

方法二

arr1.push(...arr2);

3.将类数组或可遍历对象转换为真正的数组
方法一

let lis = document.querySelectorAll('li')
lis=[...lis];

方法二

let arrayLike={
       '0' : 'a',
       '1' : 'b',
       '2' : 'c',
       length:3
};
let arr2 = Array.from(arrayLike);   //[a,b,c]

let arr2 = Array.from(arrayLike,item => item＊2);
 //[ 2a , 2b , 2c ]

4.用于找出第一个符合条件的数组成员，如果没找到会返回一个undefined

let ary=[{
   id:1,
   name:'wzm'
},...]
let target = ary.find(item => item.id == 2);
//undefined

5.用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

let ary =[1,5,10,15];
let index = ary.findIndex(item => item>9);  
console.log(index);     //2  

includes ()

表示某个数组是否包含给定的值，返回布尔值

[1,2,3].includes(2)  //true
[1,2,3].includes(4)   //false

String的扩展方法

模板字符串
1.Es6新增的创建字符串的方式，使用反引号定义

let name = `lzy`;

2.模板字符串中可以解析变量

let name='wzm';
let g=`my name is ${name}`;   //my name is wzm

3.模板字符串可以换行

let html=`
           <p></p>
           <p></p>
`

4.模板字符串中可以调用函数

const g=function (){
    return   +++;
};
let y=`${g()}`;
console.log(y); //+++

startsWith和endWith

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

let str = 'wdszzsss';
str.startsWith('w');   //true
str.endsWith('s');     //true

repeat()

repeat()
此方法表示将原字符串重复n次，返回一个新字符串

'dog'.repeat(2);        //dogdog