ES6语法重点1

一. let和const

①let声明的变量只在它的块作用域有效（{ }括起来）
②let不能重复声明同一变量
③const声明的常量不能改（但对象可以加属性）
④const也有块作用域概念
⑤const声明时必须赋值

二. 解构赋值

左右一 一对应赋值，主要是数组和对象两种
①数组：
若解构赋值左右没配对上则为undefined；

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

使用场景：
变量交换 [a,b] = [b,a];

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

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

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

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

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

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

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

②对象：
赋值可以覆盖默认值，key相等则value相等

1
{
2
  let o={p:42,q:true};
3
  let {p,q}=o;
4
  console.log(p,q);//42 true
5
}

使用场景：
嵌套赋值

1
{
2
  let metaData={
3
    title:'abc',
4
    test:[{
5
      title:'test',
6
      desc:'description'
7
    }]
8
  }
9
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
10
  console.log(esTitle,cnTitle);//abc test
11
}

三.正则扩展

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

1
{
2
  let regex = new RegExp('xyz', 'i'); //第一个参数是字符串，第二个是修饰符
3
}
4
{
5
  let regex3 = new RegExp(/abc/ig, 'i');
6
  console.log(regex3.flags);//i,找修饰符
7
}
8
{ 　 
9
　let s = 'bbbb_bbb_bb_b'; 
10
　var a1 = /b+/g; 
11
　var a2 = /b+/y; 
12
　console.log(a1.exec(s), a2.exec(s)); // ["bbbb"],["bbbb"] 
13
　console.log(a1.exec(s), a2.exec(s)); // ["bbb"],null  /g再次调用往下匹配，/y则不会  
14
　console.log(a1.sticky, a2.sticky); //false,true表示是否开启了粘连模式/y 
15
}
16
{
17
　console.log(/\u{61}/.test('a')); // false
18
  console.log(/\u{61}/u.test('a')); // true
19
// 使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符 
20
}

四.字符串扩展

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

1
{
2
  console.log(`\u0061`);//a  Unicode表示
3
}
4
{
5
  let s1='𠮷a';
6
  console.log(s1.length);//3
7
  console.log(s1.codePointAt(0));//134071  取一个字节
8
  console.log(s1.codePointAt(0).toString(16));//20bb7
9
  console.log(s1.codePointAt(1));//57271
10
  console.log(s1.codePointAt(2));//97  
11
}
12
{
13
  console.log(String.fromCodePoint("0x20bb7"));//𠮷
14
}
15
{
16
  let str="string";
17
  console.log(str.includes("c"));//false  包含
18
  console.log(str.startsWith('str'));//true  起始
19
  console.log(str.endsWith('ng'));//true  结束
20
}
21
{
22
  let str="abc";
23
  console.log(str.repeat(2));//abcabc  重复
24
}
25
{
26
  let name="list";
27
  let info="hello world";
28
  let m=`i am ${name},${info}`;
29
  console.log(m);//i am list,hello world  模板字符串
30
}

五.数值扩展

Math对象很多方法移植到Number对象上
新增特性：新增方法 方法调整

1
{
2
  console.log(Number.isFinite(15));//true 判断一个数是否有尽
3
  console.log(Number.isFinite(NaN));//false
4
  console.log(Number.isFinite('true'/0));//false
5
}
6
{
7
  console.log(Number.isNaN(NaN));//true 判断是否不是数
8
  console.log(Number.isNaN(0));//0 false
9
}
10
{
11
  console.log(Number.isInteger(25.1));//25.1 false 是否为整数
12
}
13
{
14
  console.log(Math.trunc(4.1));//4.1 4  取整数部分
15
  console.log(Math.trunc(4.9));//4.9 4
16
}
17
{
18
  console.log(Math.sign(-5));//-1  判断正负数，结果有-1,0,1
19
}
20
{
21
  console.log(Math.cbrt(8));//2  开立方根  
22
}

六.数组扩展

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

1
{
2
  let arr = Array.of(3,4,7,9,11);
3
  console.log(arr);//[3,4,7,9,11] 数变数组
4
}
5
{
6
  let p = document.querySelectorAll('p');
7
  let pArr = Array.from(p);
8
  pArr.forEach(function(item){
9
    console.log(item.textContent);//伪元素或集合变数组
10
  });
11
  console.log(Array.from([1,3,5],function(item){return item*2}));//[2,6,10] 可以当Map用
12
}
13
{
14
  console.log([1,'a',undefined].fill(7));//[7,7,7]
15
  console.log(['a','b','c'].fill(7,1,3));//["a",7,7] 从第1位到第3位前填满7
16
}
17
{
18
  for(let index of ['1','c','ks'].keys()){
19
    console.log(index);//0 1 2
20
  }
21
  for(let value of ['1','c','ks'].values()){
22
    console.log(value);//1 c ks 值
23
  }
24
  for(let [index,value] of ['1','c','ks'].entries()){
25
    console.log(index,value);//0 1    1 c    2 ks
26
  }
27
}
28
{
29
  console.log([1,2,3,4,5].copyWithin(0,3,4));//[4,2,3,4,5] 从位0开始替换，换成从位3到位4前的数
30
}
31
{
32
  console.log([1,2,3,4,5,6].find(function(item){return item>3}));//4 找到一个就不找了
33
  console.log([1,2,3,4,5,6].findIndex(function(item){return item>3}));//3 返回下标
34
}
35
{
36
  console.log([1,2,NaN].includes(1));//true 包含1吗？
37
}

七.函数扩展

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

1
{
2
  function test(x, y = 'world'){//没默认值的变量放前面
3
    console.log(x,y);
4
  }
5
  test('hello');//hello world
6
  test('hello','kill');//hello kill
7
}
8
{
9
  let x='test';
10
  function test2(x,y=x){
11
    console.log(x,y);
12
  }
13
  test2('kill');//kill kill 作用域
14
}
15
{
16
  function test3(...arg){
17
    for(let v of arg){
18
      console.log(v);
19
    }
20
  }
21
  test3(1,2,3,4,'a');//1 2 3 4 a
22
}
23
{
24
  console.log(...[1,2,4]);//1 2 4
25
  console.log('a',...[1,2,4]);//a 1 2 4  rest
26
}
27
{
28
  let arrow = v => v*2;
29
  let arrow2 = () => 5;
30
  console.log(arrow(3));//6 箭头函数
31
  console.log(arrow2());//5
32
}
33
{
34
  function tail(x){
35
    console.log(x);
36
  }
37
  function fx(x){
38
    return tail(x)
39
  }
40
  fx(123)//123 尾调用，代替递归
41
}

八.对象扩展

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

1
{
2
  // 简洁表示法
3
  let o=1;
4
  let k=2;
5
  let es5={
6
    o:o,
7
    k:k
8
  };
9
  let es6={
10
    o,
11
    k
12
  };
13
  console.log(es5,es6);//{o: 1, k: 2} {o: 1, k: 2}
14
  let es5_method={
15
    hello:function(){
16
      console.log('hello');
17
    }
18
  };
19
  let es6_method={
20
    hello(){
21
      console.log('hello');
22
    }
23
  };
24
  console.log(es5_method.hello(),es6_method.hello());
25
}
26
{
27
  // 属性表达式
28
  let a='b';
29
  let es5_obj={
30
    a:'c',
31
    b:'c'
32
  };
33
  let es6_obj={
34
    [a]:'c'
35
  }
36
  console.log(es5_obj,es6_obj);//{a: "c", b: "c"} {b: "c"}
37
}
38
{
39
  // 新增API
40
  console.log(Object.is('abc','abc'),'abc'==='abc');//true true
41
  console.log(Object.is([],[]),[]===[]);//false false
42
  console.log(Object.assign({a:'a'},{b:'b'}));//{a: "a", b: "b"} 拷贝
43
  let test={k:123,o:456};
44
  for(let [key,value] of Object.entries(test)){
45
    console.log([key,value]);//["k", 123]  ["o", 456]
46
  }
47
}

九.Symbol

这种数据类型提供一个独一无二的值

1
{
2
  // 声明
3
  let a1=Symbol();
4
  let a2=Symbol();
5
  console.log(a1===a2);//false
6
  let a3=Symbol.for('a3');
7
  let a4=Symbol.for('a3');
8
  console.log(a3===a4);//true
9
}
10
{
11
  let a1=Symbol.for('abc');
12
  let obj={
13
    [a1]:'123',
14
    'abc':345,
15
    'c':456
16
  };
17
  console.log(obj);//{abc: 345, c: 456, Symbol(abc): "123"}
18
  for(let [key,value] of Object.entries(obj)){
19
    console.log(key,value);//abc 345    c 456
20
  }
21
  Object.getOwnPropertySymbols(obj).forEach(function(item){
22
    console.log(obj[item]);//123
23
  })
24
  Reflect.ownKeys(obj).forEach(function(item){
25
    console.log(item,obj[item]);//abc 345    c 456    Symbol(abc) 123
26
  })
27
}

十.数据结构

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

1
{
2
  let list = new Set();
3
  list.add(5);
4
  list.add(7);
5
  console.log(list.size);//2
6
}
7
{
8
  let arr = [1,2,3,4,5];
9
  let list = new Set(arr);
10
  console.log(list.size);//5
11
}
12
{
13
  let list = new Set();
14
  list.add(1);
15
  list.add(2);
16
  list.add(1);
17
  console.log(list);//{1, 2}
18
  let arr=[1,2,3,1,'2'];
19
  let list2=new Set(arr);
20
  console.log(list2);//{1, 2, 3, "2"}
21
}
22
{
23
  let arr=['add','delete','clear','has'];
24
  let list=new Set(arr);
25
  console.log(list.has('add'));//true
26
  console.log(list.delete('add'),list);//{1, 2}
27
  list.clear();
28
  console.log(list);//{}
29
}
30
{
31
  let arr=['add','delete','clear','has'];
32
  let list=new Set(arr);
33
34
  for(let key of list.keys()){
35
    console.log(key);//add delete clear has
36
  }
37
  for(let value of list.values()){
38
    console.log(value);//add delete clear has
39
  }
40
  for(let [key,value] of list.entries()){
41
    console.log(key,value);//add add  delete delete  clear clear  has has
42
  }
43
44
  list.forEach(function(item){console.log(item);})//add delete clear has
45
}
46
{
47
  let weakList=new WeakSet();//元素只能是对象，不会检测引用地址是否被回收，没有.size属性和clear()方法，不能遍历，其他和Set一样
48
}
49
{
50
  let map = new Map();
51
  let arr=['123'];
52
  map.set(arr,456);
53
  console.log(map,map.get(arr));//{Array(1) => 456} 456
54
}
55
{
56
  let map = new Map([['a',123],['b',456]]);
57
  console.log(map);//{"a" => 123, "b" => 456}
58
  console.log(map.size);//2
59
  console.log(map.delete('a'),map);//{"b" => 456}
60
  console.log(map.clear(),map);//{}
61
}
62
{
63
  let weakmap=new WeakMap();//类似WeakSet()，Map简化版
64
}

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

办法总比困难多