ES6最详细/易懂教程

ES6是什么

• ECMAScript6简称ES6,是JavaScript语言的下一带标准，在2015年6月进行发布，也可以称为ES2015。ES6简化了JavaScript的开发，随后的每一年都会更新一版。
• ES2016-ES7
• ES2017-ES8
• ES2018-ES9
• ES2019-ES10
• 2020年已经发布ES11 详情请见link前端大牛公羊无衣的技术文章

ES6更新了什么

变量以及常量的声明

• 在ES6以前，声明变量的方法都是使用var，ES6更新了let和const。let是声明变量的方法，const是声明常亮的方法。
• let的特性
  1、作用域：块级作用域
  在括号内用let声明的变量只能在括号内使用

  if(true){  
      let a = 10;
  }
  console.log(a);//报错a is not defined
  

  2、变量在声明之前无法使用

  console.log(a);//报错Cannot access 'a' before initialization
  let a = 10;
  

  3、在for循环中用let定义自动形成闭包
• const的特性
  1、书写方式：声明的常量要全部大写
  2、必须要在声明的时候赋值

  const LIST//报错Missing initializer in const
  

  3、声明之后不允许被再次赋值

  const LISt = 20;
  LISt = 10;//报错Assignment to constant variable
  

  4、常量一般用来存储 对象的地址，字符串表达的地址，根据需求定义的常量

箭头函数

• 箭头函数简写了function函数
  ES5的函数写法

  function sum(a,b){
      console.log(a+b)
  }
  sum(10,20)//结果 30
  

  ES6箭头函数写法

  let sum = (a,b)=>{
      console.l0g(a+b)
  }
  sum(10,20)//结果30
  

• 参数容器和代码容器之间用=>连接
• 参数只有一个的话可以省略小括号，代码只有一行可以省略大括号和return，自动返回。

  let foo = a => a * 10;
  console.log(foo(2));//结果 20
  

• 与数组的API配合使用

  let  arr = [1,2,3,3,4,5,5,5,66,5,3,3,2,2,2];
  arr = arr.filter( item => item % 2 === 0 )//将数组中的偶数返回
  console.log(arr);//结果[2,4,66,2,2,2]
  

解构赋值

• 解构赋值适用于数组的值，对象的属性值，对象方法和类的静态方法
  1、数组的解构赋值

  let [a,b,c] = [1,2,3]
  console.log(a,b,c);//结果 1 2 3
  
  
  //可以随意嵌套
  let [[a,b],c,d] = [ [ 1 , 2 ] , [3,33,333] , 4]
  console.log(a,b,c,d);//结果 1 2 [3,33,333] 4
  
  //交换
  let a = 10;
  let b = 20;
  [a,b] = [b,a];
  console.log(a,b) //结果  20 10
  

  2、对象的解构赋值 是按照属性名的

  let obj = {
                a : 20 ,
                b : 30,
                d : {
                      c : 50
                }
          }
  let { a : aaaa } = obj;
  console.log(aaaa);//结果 20
  

Set和Map

• Set的方法和特性
  1、Set是一个不重复的列表。
  2、所有的数据都不是按照索引排列的，没有索引。不能使用for和for in遍v历，可以使用for of。

  let set = new Set([1,2,3,4,5,1,2,3,4,5]);
  console.log(set.has(5));//查看是否含有5结果为true
  for(let value of set){
      console.log(value);// 1 2 3 4 5
  }
  set.add(10);//添加元素
  set.delete(5);//删除元素
  set.clear();//清除所有元素
  

• Map的方法和特性
  1、Map是键值对存储数据
  2、Map有长度，map中key可以任何类型，包括索引类型，value也可以任何类型

  var map=new Map();
  map.set("name","xietian");//set 是设置属性
  map.set(3,10);
  map.set(true,false);
  var arr=[1,2,3]
  map.set(arr,[1,2,3]);
  var o={a:1};
  map.set(o,{a:2});
  console.log(map.get(true));//get 是获取属性
  console.log(map.get(arr));
  console.log(map.get(o));
  map.delete(3);//key按照key来删除
  console.log(map.has("name"));//判断有没有这个属性
  console.log(map.size) //长度，有多少个数据
  map.clear();//清楚所有
  

  预知后事如何收藏加关注