在 ES9 中,JavaScript 新增了 Rest/Spread 属性运算符。这些新的运算符可以帮助我们更轻松、方便地进行数组和对象的操作和处理。
1. Rest 属性运算符
Rest 属性运算符可以将已有的数组或对象中的剩余项转换为一个新的数组或对象。
1.1 数组中的 Rest 属性运算符
当我们需要获取数组中的某些项之外的所有项时,可以使用 Rest 属性运算符。例如,以下代码中,我们将数组 a 的第一项和最后两项赋值给变量 x 和 y,剩余的项则被合并为一个新的数组 z:
const a = [1, 2, 3, 4, 5]; const [x, ...z, y] = a; console.log(x); // 1 console.log(y); // 5 console.log(z); // [2, 3, 4]
1.2 对象中的 Rest 属性运算符
同样地,当我们需要获取一个对象中除了已有属性之外的所有属性时,也可以使用 Rest 属性运算符。例如,以下代码中,我们将对象 person 的 name 和 age 属性赋值给变量 name 和 age,其余属性则被合并为一个新的对象 info:
-- -------------------- ---- ------- ----- ------ - - ----- ----- ---- --- ------- ---- -------- ------ -- ----- - ----- ---- ------- - - ------- ------------------ -- ---- ----------------- -- -- ------------------ -- - ------- ---- -------- ----- -
2. Spread 属性运算符
Spread 属性运算符可以将一个数组或对象中的所有项展开为单独的项。这个过程类似于解构赋值中的逆向操作,也可以非常方便地用于数组和对象的合并和拷贝。
2.1 数组中的 Spread 属性运算符
在数组中使用 Spread 属性运算符可以将数组中的所有项展开为单独的项。例如,以下代码中,我们将数组 b 和数组 c 展开,然后存储到一个新的数组 a 中:
const b = [1, 2, 3]; const c = [4, 5, 6]; const a = [...b, ...c]; console.log(a); // [1, 2, 3, 4, 5, 6]
2.2 对象中的 Spread 属性运算符
同样地,我们也可以在对象中使用 Spread 属性运算符,将一个对象中的所有属性展开为单独的属性。例如,以下代码中,我们将对象 info1 和对象 info2 展开,然后存储到一个新的对象 person 中:
-- -------------------- ---- ------- ----- ----- - - ----- ----- ---- --- -- ----- ----- - - ------- ---- -------- ------ -- ----- ------ - - --------- -------- -- -------------------- -- - ----- ----- ---- --- ------- ---- -------- ----- -
3. 总结
在 ES9 中,Rest/Spread 属性运算符的出现,大大简化了 JavaScript 数组和对象的操作和处理。通过 Rest 属性运算符,我们可以更方便、细致地取出数组或对象中的部分内容,并将其转换为新的数组或对象。而通过 Spread 属性运算符,我们则可以将一个数组或对象中的所有项展开为单独的项,并用于数组和对象的合并和拷贝。
这些新的运算符,不仅操作起来方便、快捷,也让我们的代码可读性更强、逻辑更清晰,对于提高代码的可维护性和可扩展性都有很大的帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6495428848841e989428046d