Includes
- 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1
- 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false
const arr = [1, 2, 3]
const str = 'Hello World'
// includes可以使用在数组对象上
console.log(arr.includes(2)) // => true
console.log(arr.includes(2, 2)) // => false
// includes可以使用在字符串对象上
console.log(str.includes('H')) // => true
console.log(str.includes('H', 1)) // => false
指数exponentiation运算符
- 在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成
- 在ES7中，增加了 ** 运算符，可以对数字来计算乘方
Object.keys/Object.values/Object.entries
// Object.keys/Object.values/Object.entries 可以被用于在数组, 对象 和 字符串上
// Object.keys/Object.values/Object.entries 获取的属性名和属性值 是自身的属性名和属性值
// 不包含原型对象上的对应属性名和属性值
// 用于数组
const arr = ['Klaus', 'Alex', 'Steven']
console.log(Object.keys(arr)) // => [ '0', '1', '2' ]
console.log(Object.values(arr)) // => [ 'Klaus', 'Alex', 'Steven' ]
// entries方法返回entry数组，而每一个entry为由key和value组成的数组
console.log(Object.entries(arr)) // => [ [ '0', 'Klaus' ], [ '1', 'Alex' ], [ '2', 'Steven' ] ]
// 用于字符串
const str = 'Hello World'
console.log(Object.keys(arr)) // => [ '0', '1', '2' ]
console.log(Object.values(arr)) // => [ 'Klaus', 'Alex', 'Steven' ]
console.log(Object.entries(arr)) // => [ [ '0', 'Klaus' ], [ '1', 'Alex' ], [ '2', 'Steven' ] ]
// 用于对象
const user = {
name: 'Klaus',
age: 23
}
console.log(Object.keys(user)) // => [ 'name', 'age' ]
console.log(Object.values(user)) // => [ 'Klaus', 23 ]
console.log(Object.entries(user)) // => [ [ 'name', 'Klaus' ], [ 'age', 23 ] ]
String Padding
某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的
const str = 'Hello'
// 默认填充符为空格
// 第二个参数需要是字符串
// 如果不是字符串会尝试将其转换为字符串后，使用转换后形成的字符串的第一个字符作为填充字符
console.log(str.padStart(10, 'a')) // => aaaaaHello
console.log(str.padEnd(10, 'a')) // => Helloaaaaa
// 无法正常填充的时候 会静默失效
console.log(str.padStart(2, 'a')) // => Hello
console.log(str.padEnd(2, 'a')) // => Hello
const phoneNumber = '13155053328'
console.log(phoneNumber.slice(0, 4).padEnd(phoneNumber.length - 4, '*') + phoneNumber.slice(-4))
// => 1315***3328
获取属性描述符
const user = {
name: 'Klaus',
age: 23
}
console.log(Object.getOwnPropertyDescriptor(user, 'name'))
console.log(Object.getOwnPropertyDescriptors(user))
数组扁平化
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
const nums = ['1-1', '1-2', ['2-1', '2-2'], [['3-1', '3-2'], ['3-3', '3-4']]]
// 参数默认值为1
console.log(nums.flat()) // => [ '1-1', '1-2', '2-1', '2-2', [ '3-1', '3-2' ], [ '3-3', '3-4' ] ]
console.log(nums.flat(2))
/*
=>
[
'1-1', '1-2',
'2-1', '2-2',
'3-1', '3-2',
'3-3', '3-4'
]
*/
// 超出最大深度 就按照最大深度进行平铺
console.log(nums.flat(3))
/*
=>
[
'1-1', '1-2',
'2-1', '2-2',
'3-1', '3-2',
'3-3', '3-4'
]
*/
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组
即先执行map方法，在执行flat方法
const msgs = ['Hello Wolrd', 'Klaus', 'Hello EcmaScript 2022']
console.log(msgs.flatMap(item => item.split(' '))) // => [ 'Hello', 'Wolrd', 'Klaus', 'Hello', 'EcmaScript', '2022' ]
// 上述操作等价于
console.log(msgs.map(item => item.split(' ')).flat())
Object fromEntries
我们可以通过 Object.entries 将一个普通对象转换成 entries
同样，我们可以通过Object fromEntries 将 entries 转回 普通对象
const obj = {
name: 'Klaus',
age: 23
}
const entries = Object.entries(obj)
console.log(entries) // => [ [ 'name', 'Klaus' ], [ 'age', 23 ] ]
console.log(Object.fromEntries(entries)) // => { name: 'Klaus', age: 23 }
const searchStr = '?name=klaus&age=23'
const searchParams = new URLSearchParams(searchStr)
console.log(searchParams) // => URLSearchParams { 'name' => 'klaus', 'age' => '23' }
// 调用entries方法可以将 URLSearchParams实例对象 转换为 一个entries结构的可迭代对象
console.log(searchParams.entries()) // => URLSearchParams Iterator { [ 'name', 'klaus' ], [ 'age', '23' ] }
// entries是可迭代的， 所以可以使用for-of方法进行遍历
for (const [key, value] of searchParams.entries()) {
console.log(key, value)
/*
=>
name klaus
age 23
*/
}
// 事实上，直接对URLSearchParams实例进行for-of遍历的时候，其会自动调用实例的entries方法
for (const [key, value] of searchParams) {
console.log(key, value)
/*
=>
name klaus
age 23
*/
}
// 同样，既然URLSearchParams.prototype.entries方法返回的是一个entries
// 我们就可以通过Object.fromEntries方法将entries转换为普通对象
console.log(Object.fromEntries(searchParams.entries()))
// => { name: 'klaus', age: '23' }
去除空格
const str = ' World '
// 去除首尾空格
console.log(str.trim()) // => World (首尾空格皆被移除)
// 去除首部空格
console.log(str.trimStart()) // => World （尾部有未移除的空格）
// 去除尾部空格
console.log(str.trimEnd()) // => World （首部有未移除的空格）
