美文网首页
es7-10语法糖学习记录

es7-10语法糖学习记录

作者: 凌寒水羽 | 来源:发表于2018-12-20 14:15 被阅读0次

    1.JavaScript Array includes() 方法

    [1, 2, 3].includes(2); // true

    [1, 2, 3].includes(4); // false

    [1, 2, 3].includes(3, 3); // false

    [1, 2, 3].includes(3, -1); // true

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

    第一个参数是要搜索的值,第二个参数(可选,默认为0)表示开始搜索的位置,0为从头开始,当为负数时,表示只搜索最后一个,例如-1就搜索最后一个,这个方法相比于之前使用的indexof方法在速度更快,includes方法在搜索到值的时候会直接返回true并不需要从头到尾搜索一遍,并且可以选择索引位置,性能更好,速度更快。

    2.求幂运算符(**)

    let squared = 3 ** 2; // 9

    这个属性使用的场景比较少,但他确实代替了Math.pow(x, y)方法,使代码更简洁了

    3.Object.entries方法

    var obj = { foo: 'bar', baz: 42 };

    Object.entries(obj)

    // [ ["foo", "bar"], ["baz", 42] ]

    该方法用于便利出对象中的键值对,可接受数组和对象和字符串作为参数,字符串的话会将字符分割成数组的形式(每个字符作为一项)

    const obj=Object.entries('lc');

    console.log(obj)//[["0","l"],["1","c"]]

    const arr=Object.entries([1,2]);

    console.dir(arr);//[["0","1"],["1","2"]] 

    当对象的键值明是数值时,返回的数组会进行排序

    4.padStart 和 padEnd

    console.log('react'.padStart(10, '_')) // "_____react"

    console.log('backbone'.padStart(10, '*')) // "**backbone"

    console.log('react'.padEnd(10, ':-)')) // "react:-):-" is 10

    console.log('backbone'.padEnd(10, '*')) // "backbone**" is 10  

    分别从字符串的左边或右边使用指定字符填充到指定长度(若第二个参数没有则使用空格填充),


    5.Rest/Spread 属性

    const myObject = { a: 1, b: 2, c: 3};

    const { a, ...x } = myObject;

    // a = 1

    // x = { b: 2, c: 3 }

    const obj1 = { a: 1, b: 2, c: 3 };

    const obj2 = { ...obj1, z: 26 };

    // obj2 is { a: 1, b: 2, c: 3, z: 26 } 

    三点(...)方法在es9以后支持对对象使用了,之前的只能对数组使用,使用方法和数组类似。

    可以使用扩展运算符拷贝一个对象,像是这样obj2 = {...obj1},但是 这只是一个对象的浅拷贝。如果一个对象A的属性是对象B,那么在克隆后的对象cloneB中,该属性指向对象B。

    6.async/await

    function say() {

    return new Promise(function(resolve, reject) {

    setTimeout(function() {

    resolve(`hello, world`);

    }, 1000);

    });

    }

    async function demo() {

    const v = await say();

    // 输出:hello, world

    }

    demo().then(function(v){

    console.log('222',v)

    });

    为了解决js中的异步问题,在es6时出现了promise,经过改良,现在可以使用async和await来实现了

    那么async/await借用阮一峰的话简单来说就是

    async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句

    可以使用更类似同步的写法来实现异步,需要注意的是,async定义的函数会返回一个promise对象,可以用then方法来处理,await方法只能使用在async定义的方法内部,使用在别的函数中会报错

    7.Array的flat()方法和flatMap()方法

    flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。基本用法是数组降纬和去除空项

    var arr1 = [1, 2, [3, 4]];

    arr1.flat(); // [1, 2, 3, 4]

    var arr2 = [1, 2, [3, 4, [5, 6]]];

    arr2.flat(); // [1, 2, 3, 4, [5, 6]]

    var arr3 = [1, 2, [3, 4, [5, 6]]];

    arr3.flat(2); // [1, 2, 3, 4, 5, 6]

    //使用 Infinity 作为深度,展开任意深度的嵌套数组

    arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]

    var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5] 

    flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

    var arr1 = [1, 2, 3, 4];

    arr1.map(x => [x * 2]);// [[2], [4], [6], [8]]

    arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8]

    // 只会将 flatMap 中的函数返回的数组 “压平” 一层

    arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

    8.String的trimStart()方法和trimEnd()方法

    分别去除字符串首尾空白字符

    9.Object.fromEntries()

    Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

    而Object.fromEntries() 则是 Object.entries() 的反转。

    Object.fromEntries() 函数传入一个键值对的列表,并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象,返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象,第一个元素是将用作属性键的值,第二个元素是与该属性键关联的值。

    10.新的基本数据类型BigInt

    相关文章

      网友评论

          本文标题:es7-10语法糖学习记录

          本文链接:https://www.haomeiwen.com/subject/wunekqtx.html