ES6新特性使用小结（二）

六、Array 扩展

/*
 *   Array Api Array.of          数组的构建
 * */
{
    let arr = Array.of(3, 4, 5, 6, 7, 8);
    console.log(arr);                       //[3,4,5,6,7,8]

    let empty = Array.of();
    console.log(empty);                     // []
}

/*
 *   Array API Array.from         *将伪数组或一些集合转化为真正的数组
 *                                *类似map方法
 * */

{
    let p = document.querySelectorAll('p');             //拿到的是一个伪数组
    let pArr = Array.from(p);
    pArr.forEach(function (item) {
        console.log(item.textContent);          //依次输出每个 p 元素的文本内容
    });

    console.log(Array.from([1, 2, 3, 4, 5], function (item) {
        return item * 2;                                 //  对要构建的数组成员进行处理
    }))
    //  [2,4,6,8,10]
}

/*
 *   Array API   Array.fill(*,startIndex,endIndex)      数组的填充
 * */

{
    console.log('fill-5', [1, 0, 2, undefined].fill(5));     //[5,5,5,5]

    console.log('fill,pos', ['a', 'b', 'c', 'd', 'e'].fill(7, 1, 3));  //[a,7,7,d,e]       *含头不含尾
}

/*
 *   Array   遍历相关API  keys()
 *                   values()[需要编译,最新版的Chrome还未支持]
 *                   entries()
 * */
{
    for (let index of ['1', 'a', 'b', '2'].keys()) {
        console.log(index);                             //0 1 2 3
    }

    //for (let v of ['1', 'a', 'b', '2'].values()) {
    //    console.log(v);                             //1 2   b   2
    //}

    for (let [index,value] of ['1', 'a', 'b', '2'].entries()) {
        console.log(index, value);           //0 1     1 a       2 b     3 2
    }
}

/*
 *   Array API   Array.copyWithin(target, start, end = this.length)
 *               最后一个参数为可选参数，省略则为数组长度。
 *               该方法在数组内复制从start(包含start)位置到end(不包含end)位置的一组元素覆盖到以target为开始位置的地方
 * */

{
    console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 5));          //[4,5,3,4,5]
    //将 5>index>=3的成员   4,5
    //从 index=0的位置开始覆盖
}

/*
 *   Array API Array.find(fun)   *找出符合fun条件的  第一个 数组中成员的值
 *             Array.find(fun)   *找出符合fun条件的  第一个 数组中成员的下标
 *             Array.includes(target)       *寻找数组中是否包含 target   **可以处理NaN
 * */
{
    console.log([1, 2, 3, 4, 5, 6].find(function (item) {            //4
        return item > 3;
    }));

    console.log([1, 2, 3, 4, 5, 6].findIndex(function (item) {       //3
        return item > 3;
    }));

    console.log([1,2,NaN].includes(2));      //true

    console.log([1,2,NaN].includes(NaN));     //true            *ES5中 NaN!=NaN
}

七、function 扩展　　　　　　*尾调用相关　　参考：http://www.ruanyifeng.com/blog/2015/04/tail-call.html

/*
 *   函数参数默认值
 * */

{
    function test(x, y = 'world') {         //  *如果 参数y 不存在 则为y指定默认值
        console.log(x, y);
    }

    test('hello');          //hello world
    test('hello', 'kill');       //hello kill

    function testError(x, y = 'world', c) {     //  *在设置了默认值的参数后面不能再有没有默认值的变量
        //  **  错误写法
    }
}

/*
 *   函数作用域       ...   rest参数  把离散的值变成一个数组
 * */

{
    let x = 'test';

    function test2(x, y = x) {                     //  * 作用域存在x时 y的取值
        console.log('作用域', x, y);
    }

    test2('kill');      //kill kill
    test2();            //'作用域', undefined  undefined

    function test3(c, y = x) {                     //  * 作用域不存在x时 y的取值
        console.log('作用域', c, y);
    }

    test3('kill');       //'作用域', kill  test

    function test4(...arg) {             //* rest参数后面不能再有其他的参数
        for (let v of arg) {
            console.log('rest', v);
        }
    }

    test4(1, 2, 3, 4, 'a');             //依次输出了所以的参数
}

/*
 *   扩展运算符       将一个数组变成 离散的值
 * */

{
    console.log(...[1, 2, 4]);        //1 , 2 , 4
}

/*
 *   箭头函数    函数名   =   参数 =>  返回值
 * */

{
    let arrow = v=>v * 2;
    console.log('arrow', arrow(2));          //arrow     4

    let arrow2 = ()=>5;
    console.log('arrow2', arrow2());         //'arrow2'  5
}

/*
 *   尾调用    某个函数的最后一步是调用另一个函数。
 *                          提升性能 解决函数地址嵌套
 * */

{
    function tail(x) {
        console.log('tail', x);
    }

    function fx(x) {
        return tail(x);
    }
    fx(123);                //tail  123
}

八、Object 扩展

/*
*   obj 简洁表示法
* */

{
    let o =1;
    let k =2;
    let es5 = {
        o:o,
        k:k
    }
    let es6 = {
        o,
        k
    }
    console.log(es5,es6);

    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'
    }

    let es6_obj={
        [a]:'c'                         //[]表达式  使用变量作为key      b:'c'
    }

    console.log(es5_obj,es6_obj);
}

/*
*   Obj API Object.is(arg1,arg2)        判断两个参数是否相等 功能上等于    ===
* */

{
    console.log('String',Object.is('abc','abc'));       //true
    console.log('Array',Object.is([],[]),[]===[])       //false     false       对于引用类型判断和 === 一致
}

/*
*   Obj API Object.assign(源对象,要拷贝到的对象)         对象的拷贝        *浅拷贝    只修改引用地址 不会拷贝继承和不可枚举的属性
* */

{
    console.log('拷贝',Object.assign({a:'c'},{b:'b'}));       //｛a:'c',b:'b'｝
}

/*
*   Obj API Object.entries(obj)     对象遍历法
* */

{
    let test = {a:'a',b:'b'};
    for(let [key,value] of Object.entries(test)){
        console.log(key,value);
    }
}

/*
*   Obj  扩展运算符
* */

{
    let {a,b,...c}={a:'test',b:'bbb',c:'ccc',d:'ddd'}
    console.log(c);                             //{c:'ccc',d:'ddd'}
}