es7-10语法糖学习记录

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容