JavaScript进阶讲解十三—>es6~es12(三)

195 阅读2分钟

Includes(es7)

判断一个数组或者字符串中是否包含某个元素,包含则返回 true,否则返回false。(在es7之前,可以用indexOf判断,不存在返回-1)

const arr = ['a', 'b', 'c']

console.log(arr.includes('a')); // true
console.log(arr.includes('d')); // false

const str = 'abc'
console.log(str.includes('a')); // true
console.log(str.includes('d')); // false

指数(乘方) 运算符 **(es7)

在ES7之前,计算数字的乘方需要通过 Math.pow 方法来完成,在ES7中,增加了 ** 运算符,可以对数字来计算乘方。

const res1 = Math.pow(2, 2)
const res2 = 2 ** 2 // es7

console.log(res1); // 4
console.log(res2); // 4

Object values 和 Object entries(es8)

这es5中有个Object.keys方法,可以获取一个对象所有的key

Object values获取所有的value值

Object.entries 可以获取到一个数组,数组中会存放可枚举属性的键值对数组

Object.formEntries(es10)

将entries转换成对象

在这里插入代码片

padStart,padEnd(es8)

对字符串的首尾进行填充

const message = 'xt'

// String.padStart(maxLength: number, fillString?: string): string   maxLength:总长度
console.log(message.padStart(4,'a')); // aaxt
console.log(message.padEnd(4,'a')); // xtaa

flat,flatMap(es10)

flat():按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

flatMap() :首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

const arr = [1, 2, [3, 4,],[[10, 11], [5, 15]], 100]

console.log(arr.flat()); // [ 1, 2, 3, 4, [ 10, 11 ], [ 5, 15 ], 100 ]
console.log(arr.flat(2)); // [ 1, 2,  3,   4, 10, 11, 5, 15, 100 ]


const arr1 = [10, 20, 30]
const newArr1 = arr1.flatMap(item => {
    return item + 1
})
console.log(newArr1); // [ 11, 21, 31 ]

const arr2 = ['hello xt', 'my name is xt']
const newArr2 = arr2.flatMap(item => {
    return item.split(' ')
})
console.log(newArr2); // [ 'hello', 'xt', 'my', 'name', 'is', 'xt' ]

空值合并操作符 ??(es11)

const val = false
const val1 = 0
const val2 = undefined
const val3 = null

console.log(val || 'xt'); // xt
console.log(val1 || 'xt'); // xt
console.log(val2 || 'xt'); // xt
console.log(val3 || 'xt'); // xt

// ??能更精准的判断类型  只有为undefined与null时才会用后面的值
console.log(val ?? 'xt'); // false
console.log(val1 ?? 'xt'); // 0
console.log(val2 ?? 'xt'); // xt
console.log(val3 ?? 'xt'); // xt

可选链 ?(es11)

代码在进行null和undefined判断时更加清晰和简洁

const obj = {
    friend: {
        girlFriend: {
            name: 'tx'
        }
    }
}

console.log(obj.friend?.girlFriend?.name); // tx
console.log(obj.friendone?.girlFriend?.name); // undefined

globalThis(es11)

获取JavaScript环境的全局对象,以前不同的环境获取的方式是不一样的,比如在浏览器中可以通过this、window来获取,比如在Node中我们需要通过global来获取,所以在es11中统一了用法:globalThis

console.log(this); // 浏览器上
console.log(global); // node
console.log(globalThis); // 都可以

WeakRefs(es12)

默认将一个对象赋值给另外一个引用,这个引用是一个强引用,如果希望他是一个弱引用,可以使用WeakRef。

let obj = { 
    name: 'xt'
}

let obj1 = new WeakRef(obj)

console.log(obj1.deref()); // { name: 'xt' }

||= &&= ??=(es12)

let message = ''

// 逻辑或赋值运算
message ||= 'xt'  // message = message || xt
console.log(message); // xt

// 逻辑与赋值运算 &&=
let num = 1
const obj = {
    num: 3
}
num  &&= obj.num // num = num && obj.num

console.log(num); // 3

// 逻辑空赋值运算 ??=

let foo = null
foo ??= 'xt' // foo = foo ?? 'xt'
console.log(foo); // xt