這篇文章主要介紹JavaScript中拷貝數(shù)組的技巧，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

目前成都創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、靜寧網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

數(shù)組拷貝經(jīng)常被誤解，但這并不是因?yàn)榭截愡^(guò)程本身，而是因?yàn)槿狈?duì) JS 如何處理數(shù)組及其元素的理解。JS 中的數(shù)組是可變的，這說(shuō)明在創(chuàng)建數(shù)組之后還可以修改數(shù)組的內(nèi)容。

這意味著要拷貝一個(gè)數(shù)組，咱們不能簡(jiǎn)單地將舊數(shù)組分配給一個(gè)新變量，它也是一個(gè)數(shù)組。如果這樣做，它們將共享相同的引用，并且在更改一個(gè)變量之后，另一個(gè)變量也將受到更改的影響。這就是我們需要克隆這個(gè)數(shù)組的原因。

接著來(lái)看看一些關(guān)于拷貝和克隆數(shù)組的有趣方法和技巧。

技巧 1 - 使用Array.slice方法

const numbers = [1, 2, 3, 4, 5]

const copy = numbers.slice()
copy.push(6) // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy)
console.log(numbers)

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 2 - 使用Array.map方法

const numbers = [1, 2, 3, 4, 5]

const copy = numbers.map( num => num )
copy.push(6) // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 3 - 使用Array.from 方法

const numbers = [1, 2, 3, 4, 5];

const copy = Array.from(new Set(numbers));
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 4 - 使用展開操作符

const numbers = [1, 2, 3, 4, 5];

const copy = [...numbers];
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 5 - 使用 Array.of 方法和展開操作符

const numbers = [1, 2, 3, 4, 5];

const copy = Array.of(...numbers);
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

Array.of() 方法創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例，而不考慮參數(shù)的數(shù)量或類型。Array.of() 和 Array 構(gòu)造函數(shù)之間的區(qū)別在于處理整數(shù)參數(shù)：Array.of(7) 創(chuàng)建一個(gè)具有單個(gè)元素 7 的數(shù)組，而 Array(7) 創(chuàng)建一個(gè)長(zhǎng)度為7的空數(shù)組（注意：這是指一個(gè)有7個(gè)空位(empty)的數(shù)組，而不是由7個(gè)undefined組成的數(shù)組）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

技巧 6 - 使用 Array 構(gòu)造函數(shù)和展開操作符

const numbers = [1, 2, 3, 4, 5];

const copy = new Array(...numbers);
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出 
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 7 - 使用解構(gòu)

const numbers = [1, 2, 3, 4, 5];

const [...copy] = numbers;
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 8 - 使用 Array.concat 方法

const numbers = [1, 2, 3, 4, 5];

const copy = numbers.concat();
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 9 - 使用 Array.push 方法和展開操作符

const numbers = [1, 2, 3, 4, 5];

let copy = [];
copy.push(...numbers);
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 10 - 使用 Array.unshift 方法和展開操作符

const numbers = [1, 2, 3, 4, 5];

let copy = [];
copy.unshift(...numbers);
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 11 - 使用 Array.forEach 方法和展開操作符

const numbers = [1, 2, 3, 4, 5];

let copy = [];
numbers.forEach((value) => copy.push(value));
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 12 - 使用 for 循環(huán)

const numbers = [1, 2, 3, 4, 5];

let copy = [];
for (let i = 0; i < numbers.length; i++) {
    copy.push(numbers[i]);
}
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 13 - 使用 Array.reduce 方法

這個(gè)做法是可行，但比較多余，少用

const numbers = [1, 2, 3, 4, 5];

const copy = numbers.reduce((acc, x) => { acc.push(x); return acc; }, []);
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

技巧 14 - 使用古老的 apply 方法

const numbers = [1, 2, 3, 4, 5];

let copy = [];
Array.prototype.push.apply(copy, numbers);
copy.push(6); // 添加新項(xiàng)以證明不會(huì)修改原始數(shù)組

console.log(copy);
console.log(numbers);

// 輸出
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]

總結(jié)

請(qǐng)注意，上面這些方法執(zhí)行的是淺拷貝，就是數(shù)組是元素是對(duì)象的時(shí)候，咱們更改對(duì)象的值，另一個(gè)也會(huì)跟著變，就能技巧4來(lái)說(shuō)，如果咱們的數(shù)組元素是對(duì)象，如下所示：

const authors = [
  { name: '歐陽(yáng)克', age: 25 }, 
  { name: '王大冶', age: 30 }, 
]

const copy = [...authors ]
copy[0].name = '被更改過(guò)的歐陽(yáng)克'

console.log(copy)
console.log(authors)

輸出

以上是“JavaScript中拷貝數(shù)組的技巧”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：JavaScript中拷貝數(shù)組的技巧
URL標(biāo)題：http://sd-ha.com/article12/iecogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、微信小程序、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、搜索引擎優(yōu)化

廣告

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