ECMAScript6语法重点（一）

一. let和const

①let声明的变量只在它的块作用域有效（{ }括起来）

②let不能重复声明同一变量

③const声明的常量不能改（但对象可以加属性）

④const也有块作用域概念

⑤const声明时必须赋值

二. 解构赋值（左右一 一对应赋值，主要是数组和对象两种）

①数组：

若解构赋值左右没配对上则为undefined；

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];//可以用默认值 
  console.log(a,b,c);//1 2 3
}

使用场景：

变量交换 [a,b] = [b,a];

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

函数fn返回值赋给变量 [a,b] = fn( );

{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);//1 2
}

fn返回多个值 [a, , ,b] = fn( );（逗号中间占一个数）

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b);//1 4
}

不知道fn返回多少个值，我只关心某一个 [a, ,...b] = fn( );（...b是数组）

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b);//1 [3,4,5]两逗号之间占一个数
}

②对象：

赋值可以覆盖默认值，key相等则value相等

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);//42 true
}

使用场景：

嵌套赋值

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//abc test
}

三.正则扩展

新增特性：构造函数的变化  正则方法的扩展  u修饰符  y修饰符  s修饰符

{
  let regex = new RegExp('xyz', 'i'); //第一个参数是字符串，第二个是修饰符
}

{
  let regex3 = new RegExp(/abc/ig, 'i');
  console.log(regex3.flags);//i,找修饰符
}

{ 　 
　let s = 'bbbb_bbb_bb_b'; 
　var a1 = /b+/g; 
　var a2 = /b+/y; 
　console.log(a1.exec(s), a2.exec(s)); // ["bbbb"],["bbbb"] 
　console.log(a1.exec(s), a2.exec(s)); // ["bbb"],null  /g再次调用往下匹配，/y则不会  
　console.log(a1.sticky, a2.sticky); //false,true表示是否开启了粘连模式/y 
}

{
　console.log(/\u{61}/.test('a')); // false
  console.log(/\u{61}/u.test('a')); // true
// 使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符 
} 

四.字符串扩展

新增特性：Unicode表示法  遍历接口  模板字符串  新增方法

{
  console.log(`\u0061`);//a  Unicode表示
}

{
  let s1='?a';
  console.log(s1.length);//3
  console.log(s1.codePointAt(0));//134071  取一个字节
  console.log(s1.codePointAt(0).toString(16));//20bb7
  console.log(s1.codePointAt(1));//57271
  console.log(s1.codePointAt(2));//97  
}

{
  console.log(String.fromCodePoint("0x20bb7"));//?
}

{
  let str="string";
  console.log(str.includes("c"));//false  包含
  console.log(str.startsWith('str'));//true  起始
  console.log(str.endsWith('ng'));//true  结束
}

{
  let str="abc";
  console.log(str.repeat(2));//abcabc  重复
}

{
  let name="list";
  let info="hello world";
  let m=`i am ${name},${info}`;
  console.log(m);//i am list,hello world  模板字符串
}

五.数值扩展（Math对象很多方法移植到Number对象上）

新增特性：新增方法  方法调整

{
  console.log(Number.isFinite(15));//true 判断一个数是否有尽
  console.log(Number.isFinite(NaN));//false
  console.log(Number.isFinite('true'/0));//false
}

{
  console.log(Number.isNaN(NaN));//true 判断是否不是数
  console.log(Number.isNaN(0));//0 false
}

{
  console.log(Number.isInteger(25.1));//25.1 false 是否为整数
}

{
  console.log(Math.trunc(4.1));//4.1 4  取整数部分
  console.log(Math.trunc(4.9));//4.9 4
}

{
  console.log(Math.sign(-5));//-1  判断正负数，结果有-1,0,1
}

{
  console.log(Math.cbrt(8));//2  开立方根  
}

六.数组扩展

新增特性：Array.from  Array.of  copyWithin  find/findIndex  entries/keys/values  includes

{
  let arr = Array.of(3,4,7,9,11);
  console.log(arr);//[3,4,7,9,11]  数变数组
}

{
  let p = document.querySelectorAll('p');
  let pArr = Array.from(p);
  pArr.forEach(function(item){
    console.log(item.textContent);//伪元素或集合变数组
  });
  console.log(Array.from([1,3,5],function(item){return item*2}));//[2,6,10]  可以当Map用
}

{
  console.log([1,'a',undefined].fill(7));//[7,7,7]
  console.log(['a','b','c'].fill(7,1,3));//["a",7,7]  从第1位到第3位前填满7
}

{
  for(let index of ['1','c','ks'].keys()){
    console.log(index);//0 1 2
  }
  for(let value of ['1','c','ks'].values()){
    console.log(value);//1 c ks 值
  }
  for(let [index,value] of ['1','c','ks'].entries()){
    console.log(index,value);//0 1    1 c    2 ks
  }
}

{
  console.log([1,2,3,4,5].copyWithin(0,3,4));//[4,2,3,4,5]  从位0开始替换，换的是从位3开始到位4前
}

{
  console.log([1,2,3,4,5,6].find(function(item){return item>3}));//4  找到一个就不找了
  console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));//3  返回下标
}

{
  console.log([1,2,NaN].includes(1));//true  包含1吗？
}

七.函数扩展

新增特性：参数默认值  rest参数  扩展运算符  箭头函数  this绑定  尾调用

{
  function test(x, y = 'world'){//没默认值的变量放前面
    console.log(x,y);
  }
  test('hello');//hello world
  test('hello','kill');//hello kill
}
{
  let x='test';
  function test2(x,y=x){
    console.log(x,y);
  }
  test2('kill');//kill kill  作用域
}
{
  function test3(...arg){
    for(let v of arg){
      console.log(v);
    }
  }
  test3(1,2,3,4,'a');//1 2 3 4 a
}
{
  console.log(...[1,2,4]);//1 2 4
  console.log('a',...[1,2,4]);//a 1 2 4  rest
}
{
  let arrow = v => v*2;
  let arrow2 = () => 5;
  console.log(arrow(3));//6  箭头函数
  console.log(arrow2());//5
}
{
  function tail(x){
    console.log(x);
  }
  function fx(x){
    return tail(x)
  }
  fx(123)//123  尾调用，代替递归
}

八.对象扩展

新增特性：简洁表示法  属性表达式  扩展运算符  新增方法

{
  // 简洁表示法
  let o=1;
  let k=2;
  let es5={
    o:o,
    k:k
  };
  let es6={
    o,
    k
  };
  console.log(es5,es6);//{o: 1, k: 2} {o: 1, k: 2}

  let es5_method={
    hello:function(){
      console.log('hello');
    }
  };
  let es6_method={
    hello(){
      console.log('hello');
    }
  };
  console.log(es5_method.hello(),es6_method.hello());
}
{
  // 属性表达式
  let a='b';
  let es5_obj={
    a:'c',
    b:'c'
  };
  let es6_obj={
    [a]:'c'
  }
  console.log(es5_obj,es6_obj);//{a: "c", b: "c"} {b: "c"}
}
{
  // 新增API
  console.log(Object.is('abc','abc'),'abc'==='abc');//true true
  console.log(Object.is([],[]),[]===[]);//false false
  console.log(Object.assign({a:'a'},{b:'b'}));//{a: "a", b: "b"}  拷贝

  let test={k:123,o:456};
  for(let [key,value] of Object.entries(test)){
    console.log([key,value]);//["k", 123]  ["o", 456]
  }
}

九.Symbol（这种数据类型提供一个独一无二的值）

{
  // 声明
  let a1=Symbol();
  let a2=Symbol();
  console.log(a1===a2);//false
  let a3=Symbol.for('a3');
  let a4=Symbol.for('a3');
  console.log(a3===a4);//true
}
{
  let a1=Symbol.for('abc');
  let obj={
    [a1]:'123',
    'abc':345,
    'c':456
  };
  console.log(obj);//{abc: 345, c: 456, Symbol(abc): "123"}

  for(let [key,value] of Object.entries(obj)){
    console.log(key,value);//abc 345    c 456
  }

  Object.getOwnPropertySymbols(obj).forEach(function(item){
    console.log(obj[item]);//123
  })
  Reflect.ownKeys(obj).forEach(function(item){
    console.log(item,obj[item]);//abc 345    c 456    Symbol(abc) 123
  })
}

十.数据结构

Set用法  Map用法  WeakSet用法  WeakMap用法

{
  let list = new Set();
  list.add(5);
  list.add(7);
  console.log(list.size);//2
}
{
  let arr = [1,2,3,4,5];
  let list = new Set(arr);
  console.log(list.size);//5
}
{
  let list = new Set();
  list.add(1);
  list.add(2);
  list.add(1);
  console.log(list);//{1, 2}

  let arr=[1,2,3,1,'2'];
  let list2=new Set(arr);
  console.log(list2);//{1, 2, 3, "2"}
}
{
  let arr=['add','delete','clear','has'];
  let list=new Set(arr);
  console.log(list.has('add'));//true
  console.log(list.delete('add'),list);//{1, 2}
  list.clear();
  console.log(list);//{}
}
{
  let arr=['add','delete','clear','has'];
  let list=new Set(arr);

  for(let key of list.keys()){
    console.log(key);//add delete clear has
  }
  for(let value of list.values()){
    console.log(value);//add delete clear has
  }
  for(let [key,value] of list.entries()){
    console.log(key,value);//add add  delete delete  clear clear  has has
  }

  list.forEach(function(item){console.log(item);})//add delete clear has
}
{
  let weakList=new WeakSet();//元素只能是对象，不会检测引用地址是否被回收，没有.size属性和clear()方法，不能遍历，其他和Set一样
}
{
  let map = new Map();
  let arr=['123'];
  map.set(arr,456);
  console.log(map,map.get(arr));//{Array(1) => 456} 456
}
{
  let map = new Map([['a',123],['b',456]]);
  console.log(map);//{"a" => 123, "b" => 456}
  console.log(map.size);//2
  console.log(map.delete('a'),map);//{"b" => 456}
  console.log(map.clear(),map);//{}
}
{
  let weakmap=new WeakMap();//类似WeakSet()，Map简化版
}

转载于:https://www.cnblogs.com/M-M-Monica/p/10017742.html