ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで配列を複製する方法の紹介(コード付き)
この記事では、JavaScript で配列を複製する方法 (コード付き) を紹介します。参考になると思います。困っている友人は参考にしてください。お役に立てれば幸いです。
js は主に 2 つのカテゴリに分類されます: 基本データ型 と 参照データ型
基本データ型には、数値、文字列、未定義、 null、boolean、Symbol (es6 の新機能)
参照データ型: オブジェクト、配列、関数、データなど
注: 基本的なデータ型はスタック領域に配置され、値によって保存され、読み取ることができます。直接取得して操作します。
参照データ型は **ヒープ領域** (ドア) に格納されます。変数の値は実際にはヒープ領域のアドレス (キー) を指します。したがって、この変数をクローンすると、それは等価になりますキーをコピーします。
let arr = [1,2,3,4,5] let arr1 = arr // 这一步相当于把arr栈空间的地址赋给了arr1,其实arr和arr1操作的是同一个堆空间的对象 arr1.push(6) // arr1 = [1,2,3,4,5,6] console.log(arr) //[1,2,3,4,5,6]
したがって、参照型のコピーの場合は、オブジェクトをヒープ領域にコピーする必要があります
配列の浅いコピー
1. concat メソッドは新しい配列の Characteristics of a new array
let arr = [1,2,3,4,5] let arr1 = arr.slice() //[1,2,3,4,5] let arr2 = arr.concat() //[1,2,3,4,5]
2. シンプルで粗雑なメソッド - traversal
let arr = [1,2,3,4,5] let arr2 = [] arr.forEach(item=>{ arr2.push(item) } ) console.log(arr2)
3.es6 新しいメソッド展開演算子
let arr = [1,2,3,4,5] let arr1 = [...arr] //[1,2,3,4,5]
4.es6 新しいメソッド-Object.assign
let arr = [1,2,3,4,5]
let arr1 = []
Object.assign(arr1,arr )
console.log(arr1) //[1,2,3.4,5]
配列とオブジェクトが配列内でネストされている場合、浅いコピーは配列またはオブジェクトのみをコピーし、それをスタック空間に格納します。アドレス です。したがって、このアドレスが指すオブジェクトが古い配列で変更されたか新しい配列で変更されたかに関係なく、両方の配列 が変更されます。したがって、そのような配列をコピーするにはディープコピーが必要です。
配列のディープ コピー1. 通常のトラバーサル、参照型へのトラバース時に参照型をコピー
let arr = [1,2,3,4,5,{name:'bob'},['a','b']] function clone (arr) { let arr1 = [] arr.forEach(item=>{ //如果不是object,将该值插入到新数组 if(typeof(item) !== 'object') { arr1.push(item) } else { //根据遍历的对象新建一个相同类型的空对象 let obj = item instanceof Array ? [] : {} for(var key in item){ if(item.hasOwnProperty(key)){ obj[key] = item[key] } } arr1.push(obj) } }) return arr1 } let arr1 = clone(arr) arr1[5].name = 'js' console.log(arr,'arr',arr1,'arr1')2. シンプルかつ粗雑 (配列とコピーが可能)オブジェクトはありますが、関数はコピーできません)
let arr = [1,2,3,4,5,{name:'bob'},['a','b']] let arr1 = JSON.parse(JSON.stringify(arr))この記事はここで終了しています。その他の興味深いコンテンツについては、PHP 中国語 Web サイトの
JavaScript チュートリアル ビデオ 列に注目してください。
以上がJavaScriptで配列を複製する方法の紹介(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。