[JavaScript知识库]es6新增语法

一、let关键字 ?不存在变量提升
? ? ?es6中新增的声明变量的关键字
? ? ?let声明的变量只在所处于的块级有效
? ? ?在一个大括号中，使用let关键字声明的变量才具有块级作用域，var关键字是不具备这个特点的
? ? ? 防止变量变成全局变量 ?
? ? ?使用let关键字声明的变量具有暂时性死区特性

二、const ?声明常量 常量就是值不能变化的量 ?具有块级作用域 必须赋初始值?
? ? ? ? 常量赋值后不能更改 ?基本数据类型不能更改 ?复杂数据类型比如数组，可以更改数组里面的? ? ? ? 值，但是不能直接更改数组
三、let const var的区别
? ? 使用var声明的变量，作用域为该语句所在的函数内，存在变量提升现象
? ? 使用let声明的变量，作用域为该代码所在的代码块内，不存在变量提升
? ? 使用const声明的变量，在后面出现的代码中不能修改常量的值

四、解构赋值 ?es6中允许从数组或对象中提取值，按照对应位置，对变量赋值。
? ? 数组解构：

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

对象解构： ??

        let person={name:'zs',age:20};               
        let {name,age}=person;                              
        console.log(name);//zs                
        console.log(age);//20

五、箭头函数 ?es6新增定义函数的方式
（形参）=>{函数体}

const fn=()=>{
  console.log(123)
}
 fn();

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

const sum=(num1,num2)=>num1+num2;
const result=sum(10,20);
console.log(result)

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

   const fn=v=>alert(v)
   fn(20);

箭头函数不绑定this 箭头函数中的this，指向的是函数定义位置的上下文this

六、剩余参数 ?当函数实参个数大于形参个数时，可以将剩余的实参放到数组中

 function sum(1,...args){
     console.log(1);//10
     console.log(args);//[20,30]
  }
  sum(10,20,30);

?剩余参数和结构配合使用

 let ary1=['wu','zs','ls']
 let [s1,...s2]=ary1

七、es6的内置对象扩展
? ?扩展运算符 ?可以将数组或者对象转为用逗号分隔的参数序列

    let ary=[1,2,3];
    ...ary  //1,2,3
    console.log(...ary);//1 2 3  在console.log 方法中逗号会被去掉

扩展运算符应用于合并数组

     let ary1=[1,2,3];
     let ary2=[4,5,6];
     let ary3=[...ary1,...ary2]
     console.log(ary3);//[1,2,3,4,5,6]

将伪数组转换为真正的数组

     let oDivs=document.getElementByTagName('div');
     console.log(oDivs)
     var ary=[...oDivs]
     console.log(ary);

八、构造函数方法：Array.from ?将类数组或可遍历对象转换为真正的数组

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

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放回原数组

  let arrayLike={
      '0':'a',
      '1':'b',
      length:2
   }
   let arr2=Array.from(arrayLike，()=>{
      return item*2
   });
   console.log(arr2)//[2,4] 改变原数组

九、实例方法：

? ? ? ? ? ? ?find() ?用于找出第一个符合条件的数组成员，如果没有找到返回undefined
? ? ? ? ? ? ?findIndex() ?用于找到第一个符合条件的数组成员的位置，如果没有找到返回-1
? ? ? ? ? ? ?includes() ?表示数组中是否包含给定的值，返回布尔值 ?[1,2,3].includes(2)//true

十、模板字符串
? es6新增的创建字符串的方式，使用反引号定义?

可以解析变量

   let name=`这是一个模板字符串`
   console.log(name)//这是一个模板字符串
   let sayHello=`Hello,我的名字叫${name}`
   console.log(sayHello);//Hello,我的名字叫这是一个模板字符串

十一、set数据结构 类似于数组，但是成员的值都是唯一的，没有重复的值
? ?set本身是一个构造函数，用来生成set数据结构

   const s1=new Set();
   console.log(s1.size)//0

   const s2=new Swt(['a','b'])
   console.log(s1.size)//2

十二、利用set数据结构可以进行数组去重

   const s3=new Set["a","a","b","b"]
   console.log(s3.size)//2  
   const s4=[...s3]
   console.log(s4)//["a","b"]

实例方法
? ?add(value):添加某个值，返回set结构本身
? ?delete(value):删除某个值，返回一个布尔值，表示删除是否成功
? ?has(value):返回一个布尔值，表示该值是否为set成员
? ?clear():清除所有成员，没有返回值

     const s5=new Set();
     //添加值
     s5.add('a').add('b');
     console.log(s5.size)//2
     //删除值
     const r1=s5.delete('a');
     console.log(s5.size)//1
     console.log(r1);//true 
     //判断某一个值是否是数据结构中的成员
     const r2=s5.has('a')
     console.log(r2)//true
     //清空set数据结构中的值
     s5.clear();
     console.log(s5.size)//0

遍历set数据结构

   const s6=new Set(['a','b','c'])
   s6.foreach(value=>{
      console.log(value)//a b c
   })

十二、Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

let obj={
    name:"zhangsan",
    age:12
}
//遍历键值对组成的数组
let arr=Object.entries(obj);
console.log(arr);
//将数组作为参数放到Map中
let map=new Map(arr)
console.log(map);

// 添加元素
map.set('1','1');
console.log(map);
// 删除元素
map.delete('name');
console.log(map);
// 获取元素
console.log(map.get('age'));
// 遍历
let keys=map.keys()
let values=map.values()
let entries=map.entries();
console.log(keys,values,entries);
map.forEach((value,key)=>{
    console.log(value,key)
})