ES6&ES7 是现代 JavaScript 的重要版本，它们提供了大量的新特性，让开发者可以更加快速、高效地完成开发任务。其中，更新的方法属性能够很好地解决 JavaScript 中对象和数组的修改问题。在这篇文章中，我们将详细介绍 ES6&ES7 的更新的方法属性，并且为你提供一些实用的示例代码，帮助你掌握这些新特性。
对象的更新方法
在 ES6 中，我们可以使用 Object.assign() 来更新一个对象，也可以使用 ... 运算符来实现类似的效果。
Object.assign()方法
Object.assign() 方法能够将一个或多个源对象的属性复制到目标对象中，并返回目标对象。它的语法格式如下：
Object.assign(target, ...sources)
其中，target 表示目标对象，sources 表示一个或多个源对象，可以有多个源对象。这个方法会遍历每一个源对象中的所有可枚举属性，并将它们复制到目标对象中。
下面是一个使用 Object.assign() 方法的示例：
let obj1 = { name: 'Tom', age: 18 }
let obj2 = { gender: 'male', name: 'Jerry' }
let obj3 = Object.assign({}, obj1, obj2)
console.log(obj3) // { name: 'Jerry', age: 18, gender: 'male' }在这个示例中，我们创建了三个不同的对象。然后，我们使用 Object.assign() 方法将 obj1 和 obj2 的属性复制到一个空对象中，最终得到了 obj3。由于 obj2 中的 name 属性覆盖了 obj1 中的 name 属性，所以 obj3 中的 name 属性的值是 'Jerry'。
... 运算符
除了使用 Object.assign() 方法，我们也可以使用 ... 运算符来复制一个对象，并更新它的属性。这个运算符用于将可枚举的属性从一个对象复制到另一个对象中。它的语法格式如下：
let obj2 = { ...obj1, gender: 'male'}这段代码先复制 obj1 的属性到一个新的对象中，然后再添加一个 gender 属性，最终得到一个带有 gender 属性的新对象。
实例代码
下面是一个使用更新的方法属性来更新对象的示例代码：
-- -------------------- ---- ------- --- ---- - - ----- ------ ---- -- - --- ---- - - ------- ------- ----- ------- - -- -- --------------- -------- --- ---- - ----------------- ----- ----- ----------------- -- - ----- -------- ---- --- ------- ------ - -- -- --- --------- --- ---- - - -------- ------- ------ - ----------------- -- - ----- ------ ---- --- ------- ------ - -- ------ --- ---- - ----------------- ----- - ---- -- -- ----------------- -- - ----- ------ ---- -- - -- -- --- --------- --- ---- - - -------- ---- -- - ----------------- -- - ----- ------ ---- -- -
数组的更新方法
在 ES6&ES7 中，我们也能使用一些方法属性更新数组。这些方法很方便，而且能够让你更加方便地操作数组。
push() 和 unshift() 方法
push() 和 unshift() 方法能够往数组的末尾或开头新增一个或多个元素。其中，push() 方法会在数组的末尾添加元素，unshift() 方法会在数组的开头添加元素。这两个方法都会返回数组的新长度。
let arr1 = [1, 2, 3] arr1.push(4) console.log(arr1) // [1, 2, 3, 4] let arr2 = [1, 2, 3] arr2.unshift(0) console.log(arr2) // [0, 1, 2, 3]
pop() 和 shift() 方法
pop() 和 shift() 方法能够删除数组的末尾或开头一个元素。其中，pop() 方法会删除数组的末尾元素，shift() 方法会删除数组的开头元素。这两个方法都会返回删除的元素。
-- -------------------- ---- ------- --- ---- - --- -- -- --- ---- - ---------- ----------------- -- - ----------------- -- --- -- --- ---- - --- -- -- --- ----- - ------------ ------------------ -- - ----------------- -- --- --
splice() 方法
splice() 方法能够在数组的任意位置添加或删除元素。它的语法格式如下：
arr.splice(start, deleteCount, items)
其中，start 表示插入或删除元素的起始位置，deleteCount 表示要删除的元素个数，items 表示要插入到数组中的元素。
-- -------------------- ---- ------- --- ---- - --- -- -- -------------- -- -- -- -- --- - -- - ------ - - - ----------------- -- --- -- -- -- --- ---- - --- -- -- -------------- -- -- -- -- --- - -- - - - ----------------- -- --- -- -- -- -- --- ---- - --- -- -- -------------- -- -- --- - -- - --- ----------------- -- --- --
slice() 方法
slice() 方法能够从数组中指定的位置开始返回一个新的数组。它的语法格式如下：
arr.slice(start, end)
其中，start 和 end 分别表示新数组的起始位置和结束位置（不包括 end 位置的元素）。
let arr1 = [1, 2, 3, 4] let arr2 = arr1.slice(1, 3) // 返回从位置 1 到位置 3 的元素 console.log(arr2) // [2, 3]
实例代码
下面是一个使用更新的方法属性来更新数组的示例代码：
-- -------------------- ---- ------- -- ---- --- ---- - --- -- -- ------------ ----------------- -- --- -- -- -- --- ---- - --- -- -- --------------- ----------------- -- --- -- -- -- -- ---- --- ---- - --- -- -- --- ---- - ---------- ----------------- -- - ----------------- -- --- -- --- ---- - --- -- -- --- ----- - ------------ ------------------ -- - ----------------- -- --- -- -- ------- --- ---- - --- -- -- -------------- -- -- -- ----------------- -- --- -- -- -- --- ---- - --- -- -- -------------- -- -- -- ----------------- -- --- -- -- -- -- --- ---- - --- -- -- -------------- -- ----------------- -- --- -- -- ----- --- ---- - --- -- -- -- --- ---- - ------------- -- ----------------- -- --- --
总结
ES6&ES7 提供了许多新特性和更新的方法属性，能够很好地解决 JavaScript 中对象和数组的修改问题。在本文中，我们详细介绍了这些方法的语法、用法，并提供了一些实用的示例代码，希望对你有所帮助。如果你对这些内容有所了解，相信你可以更加高效地完成前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6521c92895b1f8cacd931e21