ECMAScript6（五） 内置对象的扩展和箭头函数

1.模版字符串

let bOn = false;
let html = `<ul>
                 <li>
                    <span>首页</span>
                    <span>${`首页`}</span>     // 字符串的拼接
                    <span class = "${bOn ? 'show' : 'hidden'}">${`子页`}</span>   // 执行语句
                    <span></span>
                  </li>
          </ul>`
console.log(html);
let body = document.querySelector('body');
body.innerHTML = html;

2.字符串新增方法

// repeat 对字符串进行重复操作
let str1 = 'a';
let str2 = str1.repeat(4);
console.log(str2);      // aaaa

let str = 'hello world';
// includes 字符串中是否包含该字母，返回 boolean 值
console.log(str.includes('o w'));  // ture
console.log(str.includes('ld'));  // ture
console.log(str.includes('lr'));  // false
// startsWith 字符串的开头是否包含该字母，返回 boolean 值
console.log(str.startsWith('he'));  // ture
console.log(str.startsWith('heo'));  // false
// endsWith 字符串的开头是否包含该字母，返回 boolean 值
console.log(str.endsWith('d'));  // ture
console.log(str.endsWith('sd'));  // false

3.数组的扩展

// 数组的扩展 Array.from()转为数组
        let lis = document.querySelectorAll('li');
        console.log(Array.isArray(lis))    // false

        let lis2 = Array.from(lis);
        console.log(Array.isArray(lis2))    // ture;

        // 创建数组
        const arr = Array.of(1,2,3,4);
        console.log(arr);       // [1, 2, 3, 4]

        // fill 对数组进行填充
        const arr2 = [1,2,3,4,5];
        arr2.fill('ab',1,3)         // 将数组中的第1，2个填充为 ab,不包括第三个
        console.log(arr2);          // [1, "ab", "ab", 4, 5]

4.对象的扩展

// 对象的简洁表示法
let a = 1;
let obj = {
    a : a
}
console.log(obj);       // {a: 1}

let obj2 = {a};         // 相同名称，可简写
console.log(obj2);      // {a: 1}

let obj3 = {
    fn1 : function(){
        console.log(1);
    },
    fn2(){
        console.log(2);
    }
}
obj3.fn1();      // 1
obj3.fn2();      // 2
// Object.is() 判断数据是否一样
console.log(Object.is(NaN,NaN))  // ture;
console.log(Object.is(+0,-0))    // false;
// Object.assign() 用于对象的合并，将原对象的所有可枚举属性，复制到目标对象
let obj4 = { a : 1 };
let obj5 = { a : 2 , b : 3 };
let obj6 = { c : 4 };
Object.assign(obj4,obj5,obj6);
console.log(obj4);  // {a: 2, b: 3, c: 4}

5.函数的扩展

function fn(a, b){
            a = a || 10;
            b = b || 20;
            console.log(a+b);
        }
        fn();       // 30
        fn(0, 20)   // 30 传入0 后， || 会将0判断为非，进行10+20的运算

        function fn2 (a = 10, b = 20){
            console.log(a+b);
        }
        fn2();      // 30
        fn2(0,20);  // 20

        function sum(){
            let s = 0;
            for(let i=0;i<arguments.length;i++){
                s += arguments[i];
            }
            return s;
        }
        console.log(sum(1,1,1,1,1));

        function sum2(a,...arr){        // ...arr 后不可以再传入参数
            let s = 0
            for(let i=0;i<arr.length;i++){
                s += arr[i];
            }
            return s+a;
        }
        console.log(sum(2,1,1,1,1,1));

        // 箭头函数
        const f1 = a => a;
        console.log(f1(1));     // 1

        const f2 = function(a){
            return a;
        }
        console.log(f2(2));     // 2

        const f3 = (a,b) => {
            a = a * 3;
            b = b * 4;
            return a*b;
        }
        console.log(f3(1,2));       // 24

        const f4 = (a,b) => ({a,b});
        console.log(f4(2,3));       // {a: 2, b: 3}

        const newarr = [1,4,5.6,5,2,6];
        newarr.sort((a,b) => a-b);
        console.log(newarr);    // [1, 2, 4, 5, 5.6, 6]

6.箭头函数

function fn(a, b){
            a = a || 10;
            b = b || 20;
            console.log(a+b);
        }
        fn();       // 30
        fn(0, 20)   // 30 传入0 后， || 会将0判断为非，进行10+20的运算

        function fn2 (a = 10, b = 20){
            console.log(a+b);
        }
        fn2();      // 30
        fn2(0,20);  // 20

        function sum(){
            let s = 0;
            for(let i=0;i<arguments.length;i++){
                s += arguments[i];
            }
            return s;
        }
        console.log(sum(1,1,1,1,1));

        function sum2(a,...arr){        // ...arr 后不可以再传入参数
            let s = 0
            for(let i=0;i<arr.length;i++){
                s += arr[i];
            }
            return s+a;
        }
        console.log(sum(2,1,1,1,1,1));

        // 箭头函数
        const f1 = a => a;
        console.log(f1(1));     // 1

        const f2 = function(a){
            return a;
        }
        console.log(f2(2));     // 2

        const f3 = (a,b) => {
            a = a * 3;
            b = b * 4;
            return a*b;
        }
        console.log(f3(1,2));       // 24

        const f4 = (a,b) => ({a,b});
        console.log(f4(2,3));       // {a: 2, b: 3}

        const newarr = [1,4,5.6,5,2,6];
        newarr.sort((a,b) => a-b);
        console.log(newarr);    // [1, 2, 4, 5, 5.6, 6]

箭头函数体内没有自己的this对象，所以在使用的时候，其内部的this就是定义是所在环境的对象，而不是使用时所在环境的对象

不能给箭头函数使用call apply bind 去改变其内部的this指向

function fn5(){
            setTimeout(function(){
                console.log(this);      // window
            },1000);
            setTimeout(()=>{console.log(this)},1000);       // {a:1}
        }

        let obj = {a:1};
        fn5.call(obj);

箭头函数体内没有arguments 对象，如果要使用，可以用Rest参数代替

function fn6(){
            setTimeout(() => {
                console.log(arguments);     // Arguments(3) [1, 3, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]  打印出的是fn6 的arguments 对象
            },1000)
        }
        fn6(1,3,5);

不可以当作构造函数，不可以使用new 命令，否则会被抛出一个错误

let Fn = (a,b) => a+b;
        let f = new Fn(1,2);            // Fn is not a constructor 报错

箭头函数不能当作 Generator 函数