🌟5个值得学习的JavaScript使用技巧或方法

1,207 阅读3分钟

一、...运算符高级用法

我们应该都知道,当需要进行对象或者数组的解构赋值时,可以使用...运算符进行操作,那么以下的一些解构赋值高级用法,你是否已经知道并运用到实际项目中了呢?

1.1 解构对象剩余值

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}
const { a, b, ...restObj } = obj
console.log(restObj) // { c: 3, d: 4 }

// ×错误用法
const {  ...restObj1, a1, b1 } = obj
// error: A rest element must be last in a destructuring pattern.
// rest元素必须位于解构模式的最后。

以上例子的解构剩余值属性名必须位于所有解构属性的最后位置,否则将报错。下文解构的例子也同样适应。

1.2 对象解构属性值赋值给已存在属性

const o = {a: 1, b: 2};
const p = { a: 'a', b: 'b' };

// 回顾正常解构对象的属性a,b; 赋值给const定义的变量a1,b1
const { a: a1, b: b1 } = o;
console.log(a1, b1); // 1 2

// 解构对象o的属性a,b; 赋值给对象p的属性a,b
({a: p.a, b: p.b} = o);
console.log(p);  // {a: 1, b: 2}

由于{}前没有使用const/let/var来定义变量,所以需要使用()包括解构语句使其成为一个整体,避免{}被认为是一个块级作用域导致的语法错误。

1.3 解构数组剩余值

const arr = [1, 2, 3, 4]
const [a1, b1, ...restArr] = arr
console.log(restArr) // [3, 4]

1.4 数组解构属性值赋值给已存在属性

// 数组解构属性值赋值给已存在属性
const arr = [1, 2];

// 交换数组元素
[arr[1], arr[0]] = [...arr];
console.log(arr); // [2, 1]

1.5 解构方法参数的剩余值

// 解构方法参数的剩余值
function foo(a, b, ...restArgs) {
  console.log(restArgs)
}
foo(1, 2, 3, 4) // [3, 4]

需要注意,以上剩余参数名必须写在其他参数的最后。

二、使用Symbol模拟定义对象的私有属性

当你需要为一个对象定义一个唯一的属性或者不可迭代的属性时,可以使用Symbol作为对象的属性名。

const obj = { a: 1, b: 2 }
const a = Symbol('a')
const b = Symbol('b')
const c = Symbol('a')
const d = Symbol('a')
obj[a] = 'a'
obj[b] = 'b'
obj[c] = 'c'
console.log(obj)  // {a: 1, b: 2, Symbol(a): 'a', Symbol(b): 'b', Symbol(a): 'c'}
console.log(obj[a]) // a
console.log(obj[b]) // b
console.log(obj[c]) // c
console.log(obj[d]) // undefined

以上通过Symbol定义的属性是不可迭代的

// for...in循环只遍历对象自身的和继承的可枚举属性
for(let key in obj) {
  console.log(key)  // a b
}
console.log(Object.keys(obj)) // [ 'a', 'b' ]

只能迭代到obj对象的普通属性ab,其他Symbol属性无法迭代。

三、使用for...of和for...in遍历数组元素和索引

当我们只需遍历数组中的或者索引时,可以使用for...of或者for...in来快速简洁地遍历数组。

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

// 遍历数组的元素
for(let value of arr) {
  console.log(value) // a b c
}

// 遍历数组的索引
for(let key in arr) {
  console.log(key)  // 0 1 2
}

四、at()方法取数组的倒数值

数组Array原型上的at()方法可接收负数索引,来取数组中指定的倒数索引的值。

const arr = [1, 2, 3, 4, 5]
console.log(arr.at(-1)) // 5
console.log(arr.at(-2)) // 4
console.log(arr.at(-10)) // undefined

五、flat()数组扁平化方法

flat()Array原型上的一个方法,该方法创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中。

const arr1 = [1, [2, [3, [4, [5]]]]]
// 默认只展开一层
console.log(arr1.flat())  // [1, 2, [3, [4, [5]]]]
// 展开两层
console.log(arr1.flat(2))  // [1, 2, 3, [4, [5]]]
// 展开所有层
console.log(arr1.flat(Infinity)) // [1, 2, 3, 4, 5]