Fork me on GitHub

es6

发表于

搭建环境 // ok
写页面 // ok
js //

es6

es6 默认就是 严格模式 ‘use strict’

let const

let

{} 内的变量只有在{}内部才有效,且不能重复声明

const

const 声明值类型 只读,引用类型可变,且必须赋值

解构赋值

解构赋值：左边一种结构，右边一种结构，一一对应赋值

分类

数组解构赋值 对象解构赋值 字符串解构赋值 布尔值解构赋值 函数参数解构赋值 数组解构赋值

数组解构赋值
  1. 支持默认值 // [a,b=3];
  2. …只能用在最后一个参数，表示 其他的元素组成一个数组
  3. ，表示空缺的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
	let a,b,rest;
	[a,b] = [1,2] //1,2
}
{
  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest); // 1,2,[3,4,5,6]
}
{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  console.log(a,b,c); // 1,2,3
}
{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b); // 2,1 =>数值交换
}
{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}
对象解构赋值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  let a,b;
  ({a,b}={a:1,b:2})
  console.log(a,b); //1,2
}
{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b); //1,2
}
{
  let {a=10,b=5}={a:3};
  console.log(a,b); //3,5
}
{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle); // 'abc',test

正则表达式

修饰符 i
1
2
let regex3 = new RegExp(/abc/ig, 'i');
console.log(regex3.flags); // i
修饰符 g/y
g => 全局查找 从上一次匹配的位置继续寻找直到找到匹配的位置开始，不一定是第一个就匹配上
y => 全局查找 但是 必须是匹配成后紧跟着的第一个字符就要匹配成功才算

1
2
3
4
5
6
7
8
9
10
11
{
    // y修饰符
    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
    console.log(a1.sticky, a2.sticky); //表示是否开启了粘连模式  false true
}
修饰符 u
1. Unicode字符 要加上 u 才可以识别
2. . 不能识别 大于 0xffff(即两个字符)的Unicode 字符,必须加上 u 修饰
3. 量词大于 0xffff 要用 u 修饰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    console.log('u修饰符',/^\uD83D/.test('\uD83D\uDC2A')); // true
    console.log('u修饰符',/^\uD83D/u.test('\uD83D\uDC2A')); // false
    // 大括号表示Unicode字符，只有加上u才能识别
    console.log(/\u{61}/.test('a')); // false
    console.log(/\u{61}/u.test('a')); // true
    console.log(/\u{20BB7}/u.test('𠮷')); // true
    // 点（.）字符不能识别码点大于0xFFFF(两个字符)的Unicode字符，必须加上u修饰符。
    let s = '𠮷';
    console.log('大于0xFFFF的Unicode字符',/^.$/.test(s)); // false
    console.log('使用u字符',/^.$/u.test(s)); // true
    // 使用u修饰符后，所有量词都会正确识别大于码点大于0xFFFF的Unicode字符。
    console.log('量词',/a{2}/.test('aa')); // true
    console.log('量词',/a{2}/u.test('aa')); // true
    console.log('量词',/𠮷{2}/.test('𠮷𠮷')); // false
    console.log('量词',/𠮷{2}/u.test('𠮷𠮷')); // true
}

字符串

  1. 大于0xffff 要用{}

    {
    console.log(‘a’,\u0061); //a
    console.log(‘s’,\u20BB7); // ₻7
    console.log(‘s’,\u{20BB7}); //𠮷
    }

  2. codePointAt

    {
    let s=’𠮷’;
    console.log(‘length’,s.length);
    console.log(‘0’,s.charAt(0));
    console.log(‘1’,s.charAt(1));
    console.log(‘at0’,s.charCodeAt(0));
    console.log(‘at1’,s.charCodeAt(1));

    let s1=’𠮷a’;
    console.log(‘length’,s1.length); // 3
    console.log(‘code0’,s1.codePointAt(0)); // 134071 => 全部的Unicode(占4个字符)
    console.log(‘code0’,s1.codePointAt(0).toString(16)); //20bb7
    console.log(‘code1’,s1.codePointAt(1));
    console.log(‘code2’,s1.codePointAt(2));
    }

  3. fromCodePoint 可以超过 0xffff fromCharCode 不能

    {
    console.log(String.fromCharCode(“0x20bb7”)); // ஷ
    console.log(String.fromCodePoint(“0x20bb7”)); // 𠮷
    }

  4. let of

    {
    let str=’\u{20bb7}abc’;
    for(let i=0;i<str.length;i++){

    console.log('es5',str[i]); // � � a b c

    }
    for(let code of str){

    console.log('es6',code); // 𠮷 a b c

    }
    }

  5. 包含 头部 尾部 重复

1
2
3
4
5
6
7
8
9
10
11
{
  let str="string";
  console.log('includes',str.includes("c"));  // false
  console.log('start',str.startsWith('str')); // true
  console.log('end',str.endsWith('ng'));      // true
}
{
  let str="abc";
  console.log(str.repeat(2)); // abcabc
}

  1. 拼接

    {
    let name=”list”;
    let info=”hello world”;
    let m=i am ${name},${info};
    console.log(m); // i am list,hello world
    }

  2. 补充

    {
    console.log(‘1’.padStart(2,’0’)); // 01
    console.log(‘1’.padEnd(2,’0’)); // 10
    }

  3. String.raw 不换行 与 。。。

    {
    let user={

    name:'list',
info:'hello world'

    };
    console.log(abci am ${user.name},${user.info});
    function abc(s,v1,v2){

    console.log(s,v1,v2);
return s+v1+v2

    }
    }

    {
    console.log(String.rawHi\n${1+2}); // 不换行
    console.log(Hi\n${1+2});
    }

数值扩展

ob/oB => 二进制开头
Oo    => 八进制开头
Number.isFinite 判断又穷
Number.isNaN 判断是否为数
Number.isInteger 判断是否为整数
Number.isSafeInteger 判断是否安全
Math.trunc 只取整数部分(Math.floor 向下取整,负数时有区别)   
Math.sign 判断是否为整数 -1,0,1,NaN
Math.cbrt 立方根

数组扩展

Array.of() 转成数组
Array.from() 将nodeList 转成数组
[].fill(content,start,end) 前闭后开
[].copyWithin(target,start,end)前闭后开
[].find 返回第一个符合条件的value
[].findIndex 返回第一个符合条件的Index
[].includes(content) 是否包含content 

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

函数扩展

默认值 设置默认值的参数后面参数不能没有默认值
...arg 扩展参数
...[1,2,3] 展开数组
箭头函数 let arrow = v => v*2; 
伪调用 提升性能 代替递归

对象扩展

简洁表示法 let o=1;let es6={o}; es6=> {o:1}
属性表达式 let a ='b';let es6 = {[a]:'c'}; es6=>{b:'c'}

Object.is(a,b) a===b
Object.assign{({},{....}} 浅拷贝
Object.entries 同 Array.entries

扩展运算符
let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};

Symbol

1.声明唯一变量
2.Symbol.for() 不唯一
3.Symbol.for()可以与{}中的属性重复

  let a1=Symbol.for('abc');
  let obj={
    [a1]:'123',
    'abc':345,
    'c':456
  };
  console.log('obj',obj);  // {abc: 345, c: 456, Symbol(abc): "123"}
4. 怎样查找带有Symbol项的obj
      for(let [key,value] of Object.entries(obj)){
        console.log('let of',key,value);
      }

      Object.getOwnPropertySymbols(obj).forEach(function(item){
        console.log(obj[item]);
      })

      Reflect.ownKeys(obj).forEach(function(item){
        console.log('ownkeys',item,obj[item]);
      })

数据结构

Set WeakSet Map WeakMap
Set
类似数组 但是 成员的值都是唯一的，没有重复。
可以用来 去重，但是类型不同不会去重。
  // 去除数组的重复成员
  [...new Set(array)]

长度 .size
方法 add delete clear has 
获取值 .keys .values .entries .forEach
new Set(content) content 必须为数组或类数组
weakSet
weakSet的元素只能是对象,
对象是弱引用，引用地址。不会检测这个对象是否在其他地方用过。因此WeakSet是不可遍历的
Map
值-值 的对应 各种类型的值(包括对象)都可以当做键
Map.set() Map.get()
方法 add delete clear has

set map array obj 增删改查

let set = new Set();
let map = new Map();
let arr = [];
let obj={};
// 增
set.add({'t':1});
map.set('t',1);
arr.push({t:1});
obj['t']=1;
// 删
set.forEach(item=>item.t?item.t=2:'');
map.delete('t');
let index = arr.findIndex(item=>item.t);
arr.splice(index,1);
delete obj['t'];
// 改
map.set('t',2);
set.forEach(item=>item.t?item.t=2:'')
arr.forEach(item=>item.t?item.t=2:'');  // .map()也可以
obj.t=2;
// 查
map.has('t');
set.has(Item);  Item ==> {t:1} 并且一定要 set.add(I)才可以 set.add({t:1})不行
arr.find(item=>item.t);
't' in obj
-------------本文结束感谢您的阅读-------------