es6-数组，函数，对象学习总结

一、数组拓展

1.Array.of()

{
    // Array.of  将一组数据转换成数组
    var arr = Array.of(3,4,2,5);
    console.log('arr: ',arr);
    var empty = Array.of();   //空数组
    console.log(empty)
}

2.Array.from()

{
    //Array.from   将伪数组，集合转换为真正的数组，如document.querySelectorAll,p标签返回的集合
    let p =document.querySelectorAll('p');
    let pArr = Array.from(p);
    console.log(pArr)
    pArr.forEach(function(item){
        console.log(item.textContent);  //textContent是js原生获取dom节点文本内容
    })

    //Array.from   有类似map功能
    console.log(Array.from([1,3,5],function(item){return item*2}))   //把每个数组遍历输出
}

3.fill填充数组

{
    //fill 填充数组
    console.log('fill-7',[1,'s',undefined].fill(7)) 

    console.log('fill,pos',['a','s',6].fill(7,1,2))  //fill参数依次对应，填充值，填充起始位置，填充截止位置
}

4.获取数组下标和值

{

    for(let index of ['a','f','s'].keys()){    //keys 下标
        console.log('keys:',index)
    }
    for(let value of ['a','f','s'].values()){   //values 取值
        console.log('value',value)
    }
    for(let [index,value] of ['a','f','s'].entries()){   //entries 能取到下标和值
        console.log(index,value)
    }
}

5.其它API

{
    // 在当前数组内部，把指定位置的成员复制到其它位置，使用频率不高
    console.log([1,2,3,4,5].copyWithin(1,4,5))   //copyWithin参数依次表示 替换位置，替换值开始读取的位置，替换值结束读取的位置   【1，5，3，4，5】
}
{
    // 查找一个元素是否在数组内，可以写函数

    console.log([1,2,3,4,5].find(function(item){return item > 3}))  //4  只返回查找到的第一个元素
    console.log([1,2,3,4,5].findIndex(function(item){return item > 3}))  //3 只返回查找到的第一个元素下标
}

{
    //includes 包括了对NaN的判断
    console.log('number',[1,2,NaN].includes(1))   //true
    console.log('number',[1,2,NaN].includes(NaN))  //true
    console.log('number',[1,2,NaN].includes('s'))  //true
}

二、函数拓展

1.函数参数默认值

{
    function test(x,y='world'){   //默认值后面不能再有没有默认值的变量
        console.log('say',x,y)
    }
    test('hello');
    test('hello','kitty');
}

2.作用域

{
    //作用域的问题
    let x='test';
    function test(x,y=x){
        console.log('scope:',x,y)
    }
    test('kill');         //kill  kill
    test();             //undefined undefined

    function test2(c,y=x){
        console.log('scope:',c,y)
    }
    test2('kill');        //kill , test
}

3.rest参数

{
    //将一列参数转换成数组
    function test3(...arg){   //rest参数，后面不能有其它参数
        for(let v of arg){
            console.log('rest',v)
        }
    }
    test3(1,2,3,4)
}

4.扩展运算符

{
    // 扩展运算符 将数组转换成离散值,rest的逆运用
    console.log(...[1,2,3])
    console.log('a',...[1,2,3])
}

5.箭头函数

{
    // 箭头函数,使用箭头函数时，需要注意this指向

// this绑定（箭头函数在定义时的所在）,ES5 this是函数被调用时的所在
    let arrow = v => v*2;    //函数名，函数参数，返回值
    let arrow2 = () => 5;     //没有参数时，写个圆括号
    console.log('arrow',arrow(3))  //6
    console.log('arrow2',arrow2())   //5
}

6.伪调用

{
    // 伪调用，在最后一步调用函数,提高性能
    function tail(x){
        console.log('tail',x)
    }
    function fx(x){
        return tail(x);    //在最后一步调用函数
    }
    fx(111)         //111
}

三、对象

1.简洁表示

{
    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())
}

2.属性表达式

{
    // 属性表达式，用[]表示，属性是可变的
    let a='b';
    let es5_obj={
        a:'c',
        b:'c'
    };
    let es6_obj={
        [a]:'c'    //key值可以是一个变量或者表达式
    };
    console.log(es5_obj,es6_obj)
}

3.新增API

{
    // is判断两个值是否完全相等，与===一样
    console.log('string',Object.is('abc','abc'),'abc'==='abc') //true true
    console.log('array',Object.is([],[]),[]===[])  //false  false  引用类型
    // 拷贝 assign，浅拷贝
    // assign拷贝的是自身对象的属性（如果对象只有继承，他不会拷贝继承的属性），也不会拷贝不可枚举的属性。 
    // js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等 
    console.log('copy',Object.assign({a:'a'},{b:'b'}));
    // entries
    let test={k:123,o:456}
    for(let [key,value] of Object.entries(test)){  //与数组类似，数组：test.entries()
        console.log([key,value])
    }
}