JavaScript關(guān)于數(shù)組的方法有哪些區(qū)別

小編給大家分享一下JavaScript關(guān)于數(shù)組的方法有哪些區(qū)別，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計,響應(yīng)式網(wǎng)站建設(shè),網(wǎng)頁設(shè)計師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:18982081108

在JavaScript里，有很多新增，移除，替換數(shù)組元素的方法，很多方法都能實現(xiàn)同一個功能，但是他們卻有很大的不同之處，今天我們就來對比一下，JavaScript里的數(shù)組方法到底有什么奧秘。

在JavaScript 提供了多種新增，移除，替換數(shù)組元素的方法，但是有些會影響原來的數(shù)組；有些則不會，它是新建了一個數(shù)組。

注意：區(qū)分以下兩個方法的不同點：

array.splice() 影響原來的數(shù)組

array.slice() 不影響原來的數(shù)組

I. 新增：影響原數(shù)組

使用 array.push() 和 array.ushift() 新增元素會影響原來的數(shù)組。

let mutatingAdd = ['a', 'b', 'c', 'd', 'e'];
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f']

II. 新增：不影響原數(shù)組

兩種方式新增元素不會影響原數(shù)組，第一種是 array.concat() 。

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  （注：原文有誤，我做了修改 “.” ---> “,”）
console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

第二種方法是使用 JavaScript 的展開（spread）操作符，展開操作符是三個點（…）

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

展開操作符會復(fù)制原來的數(shù)組，從原數(shù)組取出所有元素，然后存入新的環(huán)境。

III. 移除：影響原數(shù)組

使用 array.pop() 和 array.shift() 移除數(shù)組元素時，會影響原來的數(shù)組。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.pop(); // ['a', 'b', 'c', 'd']  
mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() 和 array.shift() 返回被移除的元素，你可以通過一個變量獲取被移除的元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];
const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']  
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();  
console.log(mutatingRemove); // ['b', 'c', 'd']  
console.log(returnedValue2); // 'a'

array.splice() 也可以刪除數(shù)組的元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

像 array.pop() 和 array.shift() 一樣，array.splice() 同樣返回移除的元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];  
let returnedItems = mutatingRemove.splice(0, 2);  
console.log(mutatingRemove); // ['c', 'd', 'e']  
console.log(returnedItems) // ['a', 'b']

IV. 移除：不影響原數(shù)組

JavaScript 的 array.filter() 方法基于原數(shù)組創(chuàng)建一個新數(shù)組，新數(shù)組僅包含匹配特定條件的元素。
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']（注：原文有誤，我做了修改）  
// 或者
const arr2 = arr1.filter(a => {  
  return a !== 'e';
}); // ['a', 'b', 'c', 'd']（注：原文有誤，我做了修改）

以上代碼的條件是“不等于 ‘e’ ”，因此新數(shù)組（arr2）里面沒有包含 ‘e’。

箭頭函數(shù)的獨特性：

單行箭頭函數(shù)，’return’ 關(guān)鍵字是默認自帶的，不需要手動書寫。

可是，多行箭頭函數(shù)就需要明確地返回一個值。

另一種不影響原數(shù)組的方式是 array.slice()（不要與 array.splice() 混淆）。

const arr1 = ['a', 'b', 'c', 'd', 'e'];  
const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
const arr3 = arr1.slice(2) // ['c', 'd', 'e']

V. 替換：影響原數(shù)組

如果知道替換哪一個元素，可以使用 array.splice() 。

let mutatingReplace = ['a', 'b', 'c', 'd', 'e'];  
mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e']  
// 或者
mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e']

VI. 替換：不影響原數(shù)組

可以使用 array.map() 創(chuàng)建一個新數(shù)組，并且可以檢查每一個元素，根據(jù)特定的條件替換它們。

const arr1 = ['a', 'b', 'c', 'd', 'e']  
const arr2 = arr1.map(item => {  
  if(item === 'c') {
    item = 'CAT';
  }
  return item;
}); // ['a', 'b', 'CAT', 'd', 'e']

使用 array.map() 轉(zhuǎn)換數(shù)據(jù)

array.map() 是個強力方法，可以用于轉(zhuǎn)換數(shù)據(jù)，而不污染原先的數(shù)據(jù)源。

const origArr = ['a', 'b', 'c', 'd', 'e'];  
const transformedArr = origArr.map(n => n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!']  
console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原數(shù)組毫發(fā)無損

看完了這篇文章，相信你對JavaScript關(guān)于數(shù)組的方法有哪些區(qū)別有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱：JavaScript關(guān)于數(shù)組的方法有哪些區(qū)別
文章地址：http://muchs.cn/article22/pisecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、Google、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計公司、網(wǎng)頁設(shè)計公司、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站