ES6-ES12
2022-03-21 17:14:07 18 举报
AI智能生成
ECMAScript(ES6-ES12)
作者其他创作
大纲/内容
ES7
1. Array.prototype.includes()
定义:用来判断一个数组是否包含一个指定的值
返回值:返回Boolean,包含返回true,不包含返回false
使用方法:arr.includes(valueToFin:待查找值 [, fromIndex:可选,起始索引])
示例:
const arr = [1, 2, 3, 4]
console.log(arr.includes(3, 2)) // true
console.log(arr.includes(3, 2)) // true
扩展:可识别NaN,indexOf不能识别NaN
2. 幂运算符 **
Math.pow(2, 10) // 1024
2 ** 10 // 1024
ES8
1. Object.values()
返回一个由该对象的所有value值(不含继承的所有可遍历的)组成的数组
const obj = {
name: "jimmy",
age: 18,
height: 188,
};
console.log(Object.values(obj)); // [ 'jimmy', 18, 188 ]
name: "jimmy",
age: 18,
height: 188,
};
console.log(Object.values(obj)); // [ 'jimmy', 18, 188 ]
2. Object.entries()
返回一个由该对象的所有key与value(不含继承的所有可遍历的)组成的数组
传入数组,则key是索引
const obj = {
name: "jimmy",
age: 18,
height: 188,
};
console.log(Object.entries(obj)); // [ [ 'name', 'jimmy' ], [ 'age', 18 ], [ 'height', 188 ] ]
console.log(Object.entries([1, 2, 3])); // [ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ] ]
name: "jimmy",
age: 18,
height: 188,
};
console.log(Object.entries(obj)); // [ [ 'name', 'jimmy' ], [ 'age', 18 ], [ 'height', 188 ] ]
console.log(Object.entries([1, 2, 3])); // [ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ] ]
3. Object.getOwnPropertyDescriptors()
方法用来获取一个对象的所有自身属性的描述符,如writable,enumerable等
const obj = {
name: "jimmy",
age: 18,
};
const desc = Object.getOwnPropertyDescriptors(obj);
console.log(desc);
// 打印结果
{
name: {
value: 'jimmy',
writable: true,
enumerable: true,
configurable: true
},
age: {
value: 18,
writable: true,
enumerable: true,
configurable: true
}
}
name: "jimmy",
age: 18,
};
const desc = Object.getOwnPropertyDescriptors(obj);
console.log(desc);
// 打印结果
{
name: {
value: 'jimmy',
writable: true,
enumerable: true,
configurable: true
},
age: {
value: 18,
writable: true,
enumerable: true,
configurable: true
}
}
value: 表示当前对象的默认值
writable: 表示对象属性是否可以修改
enumerable: 表示当前这个属性是否可以出现在对象的枚举属性中
configurable: 表示当前对象的属性能否用delete删除
修改方法:可用 ES5 Object.defineProperty() 修改
4. padStart
把指定字符串填充到字符串头部
返回新字符串
语法:str.padStart(targetLength [, padString])
targetLength: 填充后的字符串总长度,如果比当前字符串长度小,则返回当前字符串
padString: 填充字符串,默认值为'',从左开始
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc
使用场景:
日期前导0填充
手机号,银行卡号 数字 替换 *
5. padEnd
把指定字符串填充到字符串尾部
返回新字符串
语法:str.padEnd(targetLength [, padString])
6. 尾逗号
允许函数的最后一个参数有尾逗号
好处:代码比对的时候,新添加一个参数时只会显示当前行的修改,而不是两行变动(第一行是上一次最后一个参数后面需加一个逗号)
7. async/await
Promise 链式调用,解决回调地狱,但流程复杂的话.then变多,语义化不明显
添加了 async 的函数在执行后会自动返回一个Promeise对象
async function foo() {
return 'jimmy' // Promise.resolve('jimmy')
}
console.log(foo()) // Promise
return 'jimmy' // Promise.resolve('jimmy')
}
console.log(foo()) // Promise
await 后面接 Promise 对象时会等当前Promise执行完毕才会继续往下执行
function timeout() {
return new Promise(resolve => {
setTimeout(() => {
console.log(1)
resolve()
}, 1000)
})
}
// 不加async和await是2、1 加了是1、2
async function foo() {
await timeout()
console.log(2)
}
foo()
return new Promise(resolve => {
setTimeout(() => {
console.log(1)
resolve()
}, 1000)
})
}
// 不加async和await是2、1 加了是1、2
async function foo() {
await timeout()
console.log(2)
}
foo()
优点:解决同步的需求,逻辑更加清楚
缺点:大量的await会使代码运行变慢,因为是同步,必须一个个执行
优化方案:通过将Promise对象存储在变量中来同时开始他们,然后等它们全部执行完毕
ES9
1. Object Rest & Spread
Spread 扩展运算符
将一个对象的数据添加到另一个对象中,重名则最后一个生效
const input = {
a: 1,
b: 2,
c: 3,
}
const output = {
...input,
c: 4
}
console.log(output) // {a: 1, b: 2, c: 4}
a: 1,
b: 2,
c: 3,
}
const output = {
...input,
c: 4
}
console.log(output) // {a: 1, b: 2, c: 4}
Object Rest 解构赋值
从一个对象中提取指定值并赋值给另一个对象
const input = {
a: 1,
b: 2,
c: 3
}
let { a, ...rest } = input
console.log(a, rest) // 1 {b: 2, c: 3}
a: 1,
b: 2,
c: 3
}
let { a, ...rest } = input
console.log(a, rest) // 1 {b: 2, c: 3}
2. for await of
for of 不能编辑异步迭代器,所以就有了 for await of方法
编辑异步迭代器,使其同步执行
function TimeOut(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(time)
}, time)
})
}
async function test() {
let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]
for await (let item of arr) {
console.log(Date.now(), item)
}
}
test()
// 1560092345730 2000
// 1560092345730 1000
// 1560092346336 3000
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(time)
}, time)
})
}
async function test() {
let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)]
for await (let item of arr) {
console.log(Date.now(), item)
}
}
test()
// 1560092345730 2000
// 1560092345730 1000
// 1560092346336 3000
3. Promise.prototype.finally
返回一个Promise,在Promise执行结束后,无论是任何状态,都会执行finally指定的回调函数
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
// reject('fail')
}, 1000)
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
}).finally(() => {
console.log('finally')
})
setTimeout(() => {
resolve('success')
// reject('fail')
}, 1000)
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
}).finally(() => {
console.log('finally')
})
使用场景:loading关闭,在接口请求结束后,无论是成功还是失败,loading都需要关闭
4. String 扩展: 放松对标签模板里字符串转义的限制
以前会报错,现在不合法会返回undefined
ES10
1. Object.fromEntries()
把一个键值对列表转换成一个对象,这个方法与Object.entries相对
案例1:Object转换操作
const obj = {
name: 'jimmy',
age: 18
}
const entries = Object.entries(obj)
console.log(entries)
// [Array(2), Array(2)]
// ES10
const fromEntries = Object.fromEntries(entries)
console.log(fromEntries)
// {name: "jimmy", age: 18}
name: 'jimmy',
age: 18
}
const entries = Object.entries(obj)
console.log(entries)
// [Array(2), Array(2)]
// ES10
const fromEntries = Object.fromEntries(entries)
console.log(fromEntries)
// {name: "jimmy", age: 18}
案例2: Map转Object
const map = new Map()
map.set('name', 'jimmy')
map.set('age', 18)
console.log(map) // {'name' => 'jimmy', 'age' => 18}
const obj = Object.fromEntries(map)
console.log(obj)
// {name: "jimmy", age: 18}
map.set('name', 'jimmy')
map.set('age', 18)
console.log(map) // {'name' => 'jimmy', 'age' => 18}
const obj = Object.fromEntries(map)
console.log(obj)
// {name: "jimmy", age: 18}
案例3:过滤
先转数组进行过滤,然后再转回来
const course = {
math: 80,
english: 85,
chinese: 90
}
const res = Object.entries(course).filter(([key, val]) => val > 80)
console.log(res) // [ [ 'english', 85 ], [ 'chinese', 90 ] ]
console.log(Object.fromEntries(res)) // { english: 85, chinese: 90 }
math: 80,
english: 85,
chinese: 90
}
const res = Object.entries(course).filter(([key, val]) => val > 80)
console.log(res) // [ [ 'english', 85 ], [ 'chinese', 90 ] ]
console.log(Object.fromEntries(res)) // { english: 85, chinese: 90 }
案例4:url的search参数转换
// let url = "https://www.baidu.com?name=jimmy&age=18&height=1.88"
// queryString 为 window.location.search
const queryString = "?name=jimmy&age=18&height=1.88";
const queryParams = new URLSearchParams(queryString);
const paramObj = Object.fromEntries(queryParams);
console.log(paramObj); // { name: 'jimmy', age: '18', height: '1.88' }
// queryString 为 window.location.search
const queryString = "?name=jimmy&age=18&height=1.88";
const queryParams = new URLSearchParams(queryString);
const paramObj = Object.fromEntries(queryParams);
console.log(paramObj); // { name: 'jimmy', age: '18', height: '1.88' }
2. Array.prototype.flat()
拉平,将高维数组变成低维数组,返回一个新数组
该方法会移除数组中的空项
let newArray = arr.flat([depth])
depth:指定要提取嵌套数组的结构深度,默认值为1
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]
//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// `flat()` 方法会移除数组中的空项:
var arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]
console.log(arr1.flat()); // [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]
//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// `flat()` 方法会移除数组中的空项:
var arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]
3. Array.prototype.flatMap()
与float方法基本一致,只不过是先进行map方法,返回一个新数组,拉平深度为1
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
// 返回新数组的元素
}[, thisArg])
// 返回新数组的元素
}[, thisArg])
const numbers = [1, 2, 3]
numbers.map(x => [x * 2]) // [[2], [4], [6]]
numbers.flatMap(x => [x * 2]) // [2, 4, 6]
numbers.map(x => [x * 2]) // [[2], [4], [6]]
numbers.flatMap(x => [x * 2]) // [2, 4, 6]
4. String.prototype.trimStart()
字符串的开头删除空格,trimLeft()是此方法的别名。
let str = ' foo '
console.log(str.length) // 8
str = str.trimStart() // 或str.trimLeft()
console.log(str.length) // 5
console.log(str.length) // 8
str = str.trimStart() // 或str.trimLeft()
console.log(str.length) // 5
5. String.prototype.trimEnd()
从一个字符串的右端移除空白字符,trimRight 是此方法的别名。
let str = ' foo '
console.log(str.length) // 8
str = str.trimEnd() // 或str.trimRight()
console.log(str.length) // 6
console.log(str.length) // 8
str = str.trimEnd() // 或str.trimRight()
console.log(str.length) // 6
6. 可选的Catch Binding
catch 后可以不写参数
ES10之前
try {
// tryCode
} catch (err) {
// catchCode
}
// tryCode
} catch (err) {
// catchCode
}
ES10之后
try {
console.log('Foobar')
} catch {
console.error('Bar')
}
console.log('Foobar')
} catch {
console.error('Bar')
}
7. JSON.stringify() 增强能力
修复了对于一些超出范围的 Unicode 展示错误的问题
因为 JSON 都是被编码成 UTF-8,
所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。
在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式
所以遇到 0xD800–0xDFFF 之内的字符会因为无法编码成 UTF-8 进而导致显示错误。
在 ES10 它会用转义字符的方式来处理这部分字符而非编码的方式
// \uD83D\uDE0E emoji 多字节的一个字符
console.log(JSON.stringify('\uD83D\uDE0E')) // 打印出笑脸
// 如果我们只去其中的一部分 \uD83D 这其实是个无效的字符串
// 之前的版本 ,这些字符将替换为特殊字符,而现在将未配对的代理代码点表示为JSON转义序列
console.log(JSON.stringify('\uD83D')) // "\ud83d"
console.log(JSON.stringify('\uD83D\uDE0E')) // 打印出笑脸
// 如果我们只去其中的一部分 \uD83D 这其实是个无效的字符串
// 之前的版本 ,这些字符将替换为特殊字符,而现在将未配对的代理代码点表示为JSON转义序列
console.log(JSON.stringify('\uD83D')) // "\ud83d"
8. 修订 Function.prototype.toString()
返回源代码字符串
以前函数的toString方法来自Object.prototype.toString(),
现在的 Function.prototype.toString() 方法返回一个表示当前函数源代码的字符串。
以前只会返回这个函数,不包含注释、空格等。
现在的 Function.prototype.toString() 方法返回一个表示当前函数源代码的字符串。
以前只会返回这个函数,不包含注释、空格等。
9. Symbol.prototype.description
增加 description API来读取 Symbol 的描述
ES11
1. ?? 空值合并运算符
空值合并操作符( ?? )是一个逻辑操作符,当左侧的操作数为 null或者undefined 时,返回其右侧操作数,否则返回左侧操作数。
与 || 不同,逻辑或操作符会在左侧造作书为假值的时候返回右侧操作数,如 '',0,false,NaN
注意:将 ?? 直接与 AND(&&)和 OR(||)操作符组合使用是不可取的。
2. ?. 可选链
读取多层对象的时候可以链式写法,不必每一层进行判断是否为空
功能类似于 . 链式操作符,不同之处在于,
在引用为 null 或者 undefined 的情况下不会引起错误,该表达式短路返回值是 undefined。
与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
在引用为 null 或者 undefined 的情况下不会引起错误,该表达式短路返回值是 undefined。
与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
可以与 空值合并符 一起操作
注意:可选链不能用于赋值
const user = {
address: {
street: 'xx街道',
getNum() {
return '80号'
}
}
}
address: {
street: 'xx街道',
getNum() {
return '80号'
}
}
}
以前
const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()
console.log(street, num)
const num = user && user.address && user.address.getNum && user.address.getNum()
console.log(street, num)
现在
const street2 = user?.address?.street
const num2 = user?.address?.getNum?.()
console.log(street2, num2)
const num2 = user?.address?.getNum?.()
console.log(street2, num2)
3. globalThis 全局对象
可获得不同环境下的全局对象
web 的 window和self
node 的 global
以前兼容写法
const getGlobal = () => {
if (typeof self !== 'undefined') {
return self
}
if (typeof window !== 'undefined') {
return window
}
if (typeof global !== 'undefined') {
return global
}
throw new Error('无法找到全局对象')
}
const globals = getGlobal()
console.log(globals)
if (typeof self !== 'undefined') {
return self
}
if (typeof window !== 'undefined') {
return window
}
if (typeof global !== 'undefined') {
return global
}
throw new Error('无法找到全局对象')
}
const globals = getGlobal()
console.log(globals)
现在可以直接用 globalThis对象
4. BigInt
用于提供大于 2的35次方 \- 1 的整数
写法一:数字后面直接加n
const bigInt = 9007199254740993n
console.log(bigInt)
console.log(typeof bigInt) // bigint
// `BigInt` 和 [`Number`]不是严格相等的,但是宽松相等的。
console.log(1n == 1) // true
console.log(1n === 1) // false
console.log(bigInt)
console.log(typeof bigInt) // bigint
// `BigInt` 和 [`Number`]不是严格相等的,但是宽松相等的。
console.log(1n == 1) // true
console.log(1n === 1) // false
写法二:使用 BigInt 函数
let number = BigInt(2);
let a = number + 2n; // 4n
let b = number * 10n; // 20n
let c = number - 10n; // -8n
let a = number + 2n; // 4n
let b = number * 10n; // 20n
let c = number - 10n; // -8n
5. String.prototype.matchAll()
返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';
const array = [...str.matchAll(regexp)];
console.log(array[0]); // ["test1", "e", "st1", "1"]
console.log(array[1]); // ["test2", "e", "st2", "2"]
const str = 'test1test2';
const array = [...str.matchAll(regexp)];
console.log(array[0]); // ["test1", "e", "st1", "1"]
console.log(array[1]); // ["test2", "e", "st2", "2"]
6. Promise.allSettled()
Promise.all() 的优化方法,无论任意一个任务正常嚯异常,都会返回对应的状态,不会直接进入reject状态
7. Dynamic Import(按需 import)
import()可以在需要的时候,再加载某个模块。
import()方法放在click事件的监听函数之中,只有用户点击了按钮,才会加载这个模块。
ES12
1. 逻辑运算符和赋值表达式(&&=,||=,??=)
&&=
a &&= b (a &&(a=b))
a 为真的时候 a=b
let a = 1;
a &&= 2; // 2
a &&= 2; // 2
||=
a ||= b (a || (a=b))
a 为假的时候 a=b
let a = 1;
a ||= 2; // 1
let b = 0
b ||= 2; // 2
a ||= 2; // 1
let b = 0
b ||= 2; // 2
??=
a ??= y (a ??(a=b))
a 为 null或undefined 的时候 a=b
注意: 三个符号不能有间隔
2. String.prototype.replaceAll()
把所有满足条件的部分全部替换掉, 返回一个新字符串
示例:'aabbcc'.replaceAll('b', '.'); // 'aa..c
注意:使用正则表达式搜索值时,它必须是全局的。
'aabbcc'.replaceAll(/b/, '.');
TypeError: replaceAll must be called with a global RegExp
TypeError: replaceAll must be called with a global RegExp
3. 数字分隔符 _
可使用 _ 分割数字,增加可读性
let budget = 1_000_000_000_000;
budget === 10 ** 12 // true
budget === 10 ** 12 // true
注意点:
1. 不能放在数值的最前面(leading)或最后面(trailing)
2. 不能两个或两个以上的分隔符连在一起
3. 小数点的前后不能有分隔符
4. 科学计数法里面,表示指数的e或E前后不能有分隔符
4. Promise.any
接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例返回。
Promise.any([promise1(), promise2(), promise3()])
.then((first) => {
// 只要有一个请求成功 就会返回第一个请求成功的
console.log(first); // 会返回promise2
})
.catch((error) => {
// 所有三个全部请求失败 才会来到这里
console.log("error", error);
});
.then((first) => {
// 只要有一个请求成功 就会返回第一个请求成功的
console.log(first); // 会返回promise2
})
.catch((error) => {
// 所有三个全部请求失败 才会来到这里
console.log("error", error);
});
参考链接:
ES7-ES12
ES6笔记
0 条评论
下一页