ES6基础笔记（待续）

Posted 2020-10-05

ES6
1，for...of 循环,
    使用范围：数组、Set和Map结构、某些类似数组的对象（比如arguments对象、DOMNodeList对象）、后文的Generator对象，以及字符串
    数组，类数组，返回键值for (let value of arr)
    Set,返回值 for (let value of set)
    Map,返回键值对的数组for (var [name,value] of set)
    对象，必须部署了iterator接口后才能使用，一种解决方法使用Object.keys(obj)让键名组成数组，for of 遍历，另一种放方法，在对象
        上面部署接口。exp,jQuery.prototype[Symbol.iterator]=Array.prototype[Symbol.iterator];
    javascript 几种遍历语法的比较,以数组为例：
    for():写法麻烦
    forEach：arr.forEach(function(v){...}),无法中途跳出循环，break,return不奏效。
    for...in: 只遍历键名，并且会遍历原型链上可枚举的属性
    for...of：最简单，可遍历所有数据结构
2，变量解构赋值
    数组的解构赋值：(按次序赋值)
    var [a,b,c]=[1,2,3];
    let [a,[b],c]=[1,[2,3],4]//a=1,b=2,c=3
    var [a=2]=[];//指定默认值
    只要某种数据结构具有iterator接口，就可以使用数组形式的解构赋值
    对象的解构赋值：（变量名必须和键名一样，才能取到值）
    var {foo,bar}={foo:"aaa",bar:"bbb"}//foo="aaa",bar:"bbb"
    字符串的解构赋值：
    var [a,b,c,d,e]="hello"
    let {length:len}="hello"//len=5,对字符串对象的length属性解构
    函数参数的解构赋值：
    function add([x,y]){
        return x+y
    }
    add([2,3])//5,函数参数不是数组，实际上是解构赋值
    用处：
    （1）[x,y]=[y,x]//交换变量的值
    （2）接收函数返回的数组，或对象赋值给变量
    （3）函数参数定义 function f([x,y,z]){};f([1,2,3])
    （4）输入模块的指定方法 const{SourceMapConsumer,SourceNode}=require("source-map")
3,字符串扩展
    1，超出\uFFFF的字符串unicode表示,ES6放入花括号就能正确解析
    "\u{20BB7}"//吉
    2，codePointAt()
    javascript内部默认utf-16存储，每个字符2个字节，对于需要4个字节存储的字符（字符编码大于0xffff）,也认为是2个字符；
    charAt,charCodeAt方法都无法正确获取结果。
    ES6的codePointAt()可以正确处理4个字节存储的字符，返回10进制码点。可以使用toString(16),转为16进制
    3，字符串的遍历器接口
    4，at() 返回字符串给定位置的字符，能识别大于0xffff的字符，如汉字
    5，includes().startsWith().endsWith(),连同之前的indexOf来判断一个字符串是否包含在另一个字符串中。
    6，repeat()//"oh".repeat(3),返回一个新字符串，元字符串重复3次，"ohohoh"
    7, 模版字符串 ``//可以写入变量`....${a}...`,多用于字符串拼接，*******最常用到*******
4，**指数运算符
    ES7新增，2**2//4 2**3//8
5,数组的扩展
    1，Array.from()//将类数组的像，Set,Map对象转为真正的数组。
        let arrayLike={
            ‘0‘:‘a‘,
            ‘1‘:‘b‘,
            ‘2‘:‘c‘,
            length:3
        }
        //ES5的写法
        var arr1=[].slice.call(arrayLike)//[1,2,3]
        //ES6的写法
        var arr1=Array.from(arrayLike)//[1,2,3]
    2,Array.of()//将传入的参数值转为数组
        Array.of(3,4,5,6)//[3,4,5,6]
    3,Array.prototype.copyWith(target,start=0,end=this.length)//start-end位置的数字copy到target位置，覆盖原位置，返回新数组
        [1,2,3,4,5].copyWith(0,3,4)//[4,2,3,4,5]
    4,Array.prototype.find(callback)//数组成员依次执行回调，直到找出第一个返回值为true的成员。
        [1,2,3,4,5].find((m) => m>4)//5
    5,Array.prototype.findIndex(callback)//同上，返回位置
    6,Array.prototype.fill(‘填充数据‘,start,end)//填充数组
        [‘a‘,‘b‘,‘c‘].fill(7)//[7,7,7]
    7,Array.prototype.entries(),Array.prototype.keys(),Array.prototype.values()//分别遍历键值对，键名，键值
        for(let index of [‘a‘,‘b‘].keys()){
            console.log(index)
        }
        //0
        //1
        for(let values of [‘a‘,‘b‘].values()){
            console.log(values)
        }
        //‘a‘
        //‘b‘
        for(let [index,value] of [‘a‘,‘b‘].entries()){
            console.log(`${index}:${value}`)
        }
        //0:‘a‘
        //1:‘b‘
    8,Array.prototype.includes()//判断数组是否包含某元素
        [1,2,3].includes(2)//true
    9,ES6明确将数组空位转化为undefined
6,函数扩展
    1，函数参数默认值
        //ES5写法
        function log(x,y){
            y=y||‘world‘;
            console.log(x,y)
        }
        log(‘hello‘)//hello world
        //ES6写法
        function log(x,y=‘world‘){
             console.log(x,y)
        }
        log(‘hello‘)
    2, reset参数,用于获取函数多余的参数，代替arguments对象
       （...变量名）的方式
       function add(...values){
            let sum=0;
            for(let v of values){
                sum+=v;
            }
            return sum
       }
       add(0,1,2)//3
       add(1,2,3,4,5)//15
    3,扩展运算符...将数组参数转化为序列
        console.log(...[1,2,3])//1 2 3
        可以用来替代apply方法，传入一个数组
        //ES5写法
        function(x,y,z){ }
        var args=[1,2,3];
        f.apply(null,args)
        //ES6写法
        function(x,y,z){ }
        var args=[1,2,3];
        f.(...args)
    4,箭头函数=>
        var f=v=>v;
        等于：
        var f=function(v){return v};
        需要多个参数可用()括起来
        var sum=(x,y)=> x+y
        函数体语句多于一条，用花括号{}括起来,用return语句返回
        var sum=(x,y) => {return x+y}
        若要返回一个对象需要用()括起来
        var getId=id => ({id:id,name="paul"})

        使用注意点
        箭头函数有几个使用注意点。
        （1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
        （2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
        （3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
        （4）不可以使用 yield 命令，因此箭头函数不能用作Generator函数。
        上面四点中，第一点尤其值得注意。 this 对象的指向是可变的，但是在箭头函数中，它是固定的。
7,Symbol
    ES5对象属性名都是字符串，容易造成重复，Symbol类型表示独一无二的值，是javascript第7中数据类型
    let s=Symbol();//注意不能用new命令,可传入参数进行描述
    typeof s
    //"Symbol"
    var s1=Symbol("foo");
    var s2=Symbol("foo");
    s1===s2//false
    常用于对象属性，不能用.读取obj.s1//报错
    obj[s1]
8,Set和Map结构
    Set结构类似数组，但是值是不重复的。
    实例方法：操作方法和遍历方法
    操作：
    add(value),向set结构添加值
    delete(value):删除某个值，返回一个布尔值，表示删除是否成功
    has(value):返回布尔值，表示结构总是否包含该值
    clear():没有参数，清楚结构中所有成员

    Array.from(new Set(arr))//*************************高逼格数组去重方法***********************
    遍历：
    keys()
    values()
    entries()
    forEach()


    Map:键名可以不为字符串的对象。
    var m=new Map();
    var o={p:"hello world"};
    m.set(o,"content")//对象o作为属性
    属性方法：
    size属性：返回成员数
    set(key ,value)，增加键值对
    get(key),取值
    has(key),判断
    delete(key),删除键
    clear()；清除结构
    遍历方法同Set
    与其他数据结构转换
    转为数组
        使用扩展运算符
        var myMap=new Map();
        myMap.set(true,7).set({foo:3},[‘abc‘]);
        var arr=[...myMap]//[ [true,7],[{foo:3},[‘abc‘]] ]
    数组转Map
        new Map(arr)//{true => 7, {foo:3} => [‘abc‘]}
9,iterator和for of
    ES6中原生有iterator接口的数据结构：数组、某些类似数组的对象、Set和Map结构
    可以直接for of遍历。没有的话需要在结构或者原型部署Symbol.iterator
    exp:obj.prototype[Symbol.iterator]=Array.prototype[Symbol.iterator];
10 Generator函数
    function*helloWorldGenerator(){
        yield "hello";
        yield "World";
        return ‘ending‘;
    }
    var hw=helloWorldGenerator();//返回一个遍历器对象