ES6扩展

模板字符串和标签模板

const getCourseList = function() {
        // ajax
        return {
            status: true,
            msg: '获取成功',
            data: [{
                id: 1,
                title: 'Vue 入门',
                date: 'xxxx-01-09'
            }, {
                id: 2,
                title: 'ES6 入门',
                date: 'xxxx-01-10'
            }, {
                id: 3,
                title: 'React入门',
                date: 'xxxx-01-11'
            }]
        }
    };

    const { data: listData, status, msg } = getCourseList();

    function foo(val) {
        return val.replace('xxxx', '2020');
    }

    if (status) {
        let arr = [];

        listData.forEach(function({ date, title }) {

            arr.push(
                `
                    

                        ${ `课程名: ${ title }` }
                        ${ foo(date) }
                    
                `
            );

        });

        let ul = document.createElement('ul');
        ul.innerHTML = arr.join('');

        document.body.appendChild(ul);

    } else {
        alert(msg);
    }

padStart padEnd

    {
        let str = 'i';
        // 插入在5的位置
        let str1 = str.padStart(5, 'mooc');
        console.log(str1);
        // 倒序插入在5的位置
        let str2 = str.padEnd(5, 'mooc');
        console.log(str2);
    }

repeat

    {
        function repeat(str, num) {
            return new Array(num + 1).join(str);
        }
        console.log(repeat('s', 3));
    }

startsWith endsWith

    {
        const str = 'A promise is a promsie';

        console.log(str.startsWith('B'));
        console.log(str.startsWith('A pro'));

        console.log(str.endsWith('promsie'));
        console.log(str.endsWith('A'));
    }

includes

    {
        const str = 'A promise is a promise';
        if (~str.indexOf('promise')) {
            console.log('存在"promise"');
        }

        if (str.includes('a promise')) {
            console.log('存在"a promise"');
        }
    }

字符串转数组+遍历

    let str = 'PROMISE';
    // 四种方法：转成数组后遍历
    var oStr = Array.prototype.slice.call(str);
    var oStr = str.split('');
    const oStr = [...str];
    const [...oStr] = str;
    console.log(oStr);
    //单个字符输出
    oStr.forEach(function(word) {
        console.log(word);
    });

对全是英文的字符串中的大写字符加密 A -> 100  B -> 99

    const map = {A: '100', B: '99', C: '98', D: '97', E: '96', F: '95', G: '94', H: '93', I: '92', J: '91', K: '90', L: '89', M: '88', N: '87', O: '86', P: '85', Q: '84', R: '83', S: '82', T: '81', U: '80', V: '79',W: '78',X: '77',Y: '76', Z: '75'};
    const words = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    oStr.forEach(function(word, index) {
        if (words.includes(word)) oStr[index] = map[word];
    });
    console.log(oStr.join(''));

使用for-of遍历字符串

    let str = 'PROMISE';
    let newStr = '';
    const map = {A: '100', B: '99', C: '98', D: '97', E: '96', F: '95', G: '94', H: '93', I: '92', J: '91', K: '90', L: '89', M: '88', N: '87', O: '86', P: '85', Q: '84', R: '83', S: '82', T: '81', U: '80', V: '79',W: '78',X: '77',Y: '76', Z: '75'};
    for (let word of str) {
        if (str.includes(word)) newStr += map[word];
    }
    console.log(newStr);

Unicode是一项标准，包括字符集、编码方案等
解决传统的字符编码方案的局限
\u1f436 unicode码(点) emoji

    console.log('\u1f436');
    console.log('\u{1f436}');

正则扩展

uy修饰符

u.  unicode

    console.log(/^\ud83d/.test('\ud83d\udc36')) //\ud83d\udc36识别为\ud83d和\udc36两个字符
    console.log(/^\ud83d/u.test('\ud83d\udc36')) //\ud83d\udc36识别为一整个字符

y 粘连修饰符   sticky

    const r1 = /imooc/g;
    const r2 = /imooc/y;
    const str = 'imoocimooc-imooc';
    console.log(r1.exec(str));
    console.log(r1.exec(str));
    console.log(r1.exec(str));
    console.log(r1.exec(str));
    console.log('-----------------');
    console.log(r2.exec(str));
    console.log(r2.exec(str));//imooc后面必须紧跟imooc，不能有其他字符
    console.log(r2.exec(str));

数值扩展
新的进制表示法

    console.log(0o16);//十六进制
    console.log(0b1111);//二进制

新的方法与安全数
挂载在Number上：Number.parseInt Number.parseFloat

    console.log(window.parseInt('1.23'));
    console.log(parseFloat('1.23'));
    console.log(Number.parseInt(1.23));
    console.log(Number.parseFloat(1.23));

Number.isNaN

    console.log(Number.isNaN(NaN));
    function isNaN(value) {
        return value !== value;
    }

Number.isFinite
isFinite() 函数用于检查其参数是否是无穷大。
如果 number 是 NaN（非数字），或者是正、负无穷大的数，则返回 false

    console.log(Number.isFinite(Infinity));
    console.log(Number.isFinite(2 / 0));
    console.log(Number.isFinite(1234));
    console.log(Number.isFinite('1234'));
    console.log(Number.isFinite(true));
    console.log(Number.isFinite(NaN));

Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER 安全数范围
Number.isSafeInteger(); 是否在安全范围内

    console.log(Number.MAX_SAFE_INTEGER);
    console.log(Number.MIN_SAFE_INTEGER);
    console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER - 1));
    console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1));

幂运算 **

    let a = (2 ** 10) ** 0;
    console.log(a);
    let b = 2 ** 10 ** 0;//从后往前计算
    console.log(b);

函数扩展

函数参数的默认值

    function People({ name, age = 38 } = {name: 1}) {
        console.log(name, age);
    };
    People({ name: 3 });

结合扩展运算符(剩余参数...)

    function sum(...args) {
        console.log(args);
    }
    sum(1, 2, 321, 4354, 'fdafsd');

    function op(type, b, ...nums) {
        console.log(type);
        console.log(nums);
    }
    op('sum', 1, 23, 454, 3, 67, 234);

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

    function sum(...numbers) {
        return numbers.reduce(function(a, b) {
            return a + b;
        }, 0);
    }
    console.log(sum(1, 2, 3, 4));

箭头函数

    const add1 = (a, b) => {
        a += 1;
        return a + b;
    };

    const add2 = function(a, b) {
        a += 1;
        return a + b;
    }
    console.log(add1(2, 2));
    console.log(add2(2, 2));

函数返回值

    const pop = arr => arr.pop();//返回去掉的数值
    console.log(pop([1, 2, 3]));//3
    const pop = arr => void arr.pop();//void没有返回值
    console.log(pop([1, 2, 3]));

箭头函数中没有arguments，需要用到扩展函数

    const log = () => {
        console.log(arguments);
    };
    log(1, 2, 3);//报错
    const log = (...arguments) => {
        console.log(arguments);
    };
    log(1, 2, 3);

箭头函数没有this，this指向自身所处环境的this
此处指向window

    const xiaoming = {
        name: '小明',
        say1: function() {
            console.log(this);
        },
        say2: () => {
            console.log(this);
        }
    }
    xiaoming.say1();
    xiaoming.say2();

    const xiaoming = {
        name: 'xiaoming',
        age: null,
        getAge: function() {
            // ...ajax模拟1s之后得到服务器的响应获取到数据
            // 箭头函数没有this，默认指向当前对象xiaoming
            setTimeout(() => {
                this.age = 14;
                console.log(this);
            }, 1000);

        }
    };
    xiaoming.getAge();

对象扩展
简洁表示法

    const getUserInfo = (id = 1) => {
        const name = 'xiaoming';
        const age = 10;

        return {
            name,
            age,
            say() {
                console.log(this.name + this.age);
            }
        };
    };
    const xiaoming = getUserInfo();

属性名表达式

    const key = 'age';
    const xiaoming1 = {
        name: 'xiaoming1',
        key: 14
    };
    const xiaoming2 = {
        name: 'xiaoming2',
        [`${key}123`]: 14
    };

复制对象 - 浅拷贝

    const obj1 = {
        a: 1,
        b: 2,
        d: {
            aa: 1,
            bb: 2
        }
    };
    const obj2 = {
        c: 3,
        a: 9
    };
    const cObj1 = { ...obj1 };
    cObj1.d.aa = 999;
    console.log(cObj1.d.aa);//999
    console.log(obj1.d.aa);//999

合并对象（浅拷贝）

    const newObj = {
        ...obj2,
        ...obj1
    };
    newObj.d.aa = 22;
    console.log(obj1);

部分新的方法和属性Object.is
+0 -0

    console.log(Object.is(+0, -0));
    console.log(+0 === -0);
    console.log(Object.is(NaN, NaN));
    console.log(Object.is(true, false));
    console.log(Object.is(true, true));

Object.assign类似于对象合并

    const obj = Object.assign({a: 1}, {b: 2}, {c: 3}, {d: 4, e: 5});

    const obj = {
        a: 1,
        b: {
            c: 2
        }
    };
    let newObj = Object.assign({a: 3}, obj);//类似对象合并,a=1会替换掉a=3
    console.log(newObj.a);
    console.log(newObj.b.c);
    newObj.b.c = 100;
    console.log(obj.b.c);

Object.keys 所有键组成的数值
Object.values 所有值组成的数组
Object.entries 所有键值对组成的数组
for - of

    const obj = {
        a: 1,
        b: 2,
        c: 3,
        d: 4
    };
    console.log(Object.keys(obj));
    console.log(Object.values(obj));
    console.log(Object.entries(obj));

    for (let [k, v] of Object.entries(obj)) {
        console.log(k, v);
    }

__proto__
Rest 解构赋值不会拷贝继承自原型对象的属性

    let obj1={a:1};
    let obj2={b:2};
    obj2.__proto__=obj1;
    let obj3={...obj2};
    console.log(obj2); //{b:2}
    console.log(obj3); //{b:2}

Object.setPrototypeOf
修改对象的原型属性，性能低下，不建议使用

    const obj1 = {a: 1};
    const obj2 = {b: 1}
    const obj = Object.create(obj1);
    console.log(obj.__proto__);
    Object.setPrototypeOf(obj, obj2);
    console.log(obj.__proto__);

Object.getPrototypeOf
获取原型属性

    const obj1 = {a: 1};
    const obj = Object.create(obj1);
    console.log(obj.__proto__);
    console.log(Object.getPrototypeOf(obj));
    console.log(obj.__proto__ === Object.getPrototypeOf(obj));

super访问原型对象上的属性和方法

    const obj = {name: 'xiaoming'};
    const cObj = {
        say() {
            console.log(`My name is ${super.name}`);
        }
    }
    Object.setPrototypeOf(cObj, obj);
    cObj.say();

数组扩展
结合扩展运算符使用

    const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友'];
    function say(name, age, hobby, desc) {
        console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join('和') }, ${ desc }`);
    }
    say(...user);

apply

    const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友'];
    function say(name, age, hobby, desc) {
        console.log(`我叫${ name }, 我今年${ age } 岁, 我喜欢${ hobby.join('和') }, ${ desc }`);
    }
    say.apply(null, user);

Math.max()
Math.min()

    const arr = [1, 2, 233, 3, 4, 5];
    console.log(Math.max(...arr));//推荐的ES6新方法
    console.log(Math.max.apply(null, arr));//老方法

数组操作

    const arr1 = [1, 2, 3, 4];
    const arr2 = [4, 2, 2, 1];
    const arr3 = [2.2, '123', false];

    const cArr1 = [1, 2, 3, ...arr3];//数组添加数据
    const cArr2 = [...arr1];//拷贝数组
    const [...cArr3] = arr3;//拷贝数组
    const cArr4 = [...arr1, ...arr2, ...arr3];//合并数组

生成器函数
定位点yield

    function *g() {
        console.log(1);
        yield 'hi~';
        console.log(2);
        yield 'imooc~';
    }
    const gg = g();
    gg.next();//1
    setTimeout(function() {
        gg.next();//2
    }, 1000);

Set中元素不能重复
可以将一些元素变为数组

    let set = new Set([1, 2, 2, 3]);
    console.log([...set]);

Array.from对象转数组
该类数组对象的属性名必须为数值型或字符串型的数字
该类数组对象的属性名可以加引号，也可以不加引号

    const obj = {
        0: 1,
        1: '22',
        2: false,
        length: 2 //只取前两个数据
    };
    console.log(Array.from(obj));//1 22
    console.log(Array.from(obj, item => item * 2));//2 44

Array.of将参数合成数组

    console.log(Array.of(1, 2, '123', false));

Array#fill填充数组

    let arr = new Array(10).fill(0, 0, 3);//从0开始，到3结束，都用0填充
    console.log(arr);
    console.log([1, 2, 3].fill(0));

Array.includes判断数组中是否存在某个值

    var arr = [1, 2, 3, 4];
    console.log(arr.includes(1));
    console.log(arr.includes(55));

keys values entries

    const arr = [1, 2, 3, 444];
    console.log(arr.keys());
    for (let i of arr.keys()) {
        console.log(i);
    }

    for (let v of arr.values()) {
        console.log(v);
    }

    for (let [i, v] of arr.entries()) {
        console.log(i, v);
    }

find 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的值

    const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);
    console.log(res);

findIndex 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的下标

    const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));
    console.log(res);