1. 程式人生 > >JavaScript複製物件和陣列

JavaScript複製物件和陣列

JavaScript 中,資料型別分為兩大型別,基本型別和引用型別。

簡述一下,基本型別是指我們常見的Undefined、Null、String、Number、Boolean,是儲存在 棧記憶體 中的簡單資料段;而引用型別則是指Object、Array、RegExp、Date、Function、特殊的基本包裝型別(String、Number、Boolean)以及單體內建物件(Global、Math)。

先來了解一下最常見的Object和Array,作為最常用引用型別,Object本身是個鍵值對的集合,組成一個擁有多屬性的資料。Array則是個有序的資料列表。兩者都能儲存各種基本型別資料。

在JavaScript宣告變數的過程中,對Object和Array的宣告實際上並不是給變數賦值,而是類似於C語言中的指標,將變數指向於

堆記憶體 中,通過變數名定址找到相應的物件。當沒有任何變數指向於該物件時,現代瀏覽器會進行銷燬回收記憶體空間。

所以在對JavaScript瞭解不夠的時候,經常會對引用型別進行類似於以下的操作:

var a = { key: 'test' }
var b = a

// 更改key的值
b.key = 1

這種操作會直接導致兩個變數引用的物件值發生變化,當重新訪問 a.key 的,實際拿到的就是 1 了,這個就是我們常說的淺複製。

那麼怎麼操作才能複製好一個物件出來呢?不妨思考一下,上文可以得知,物件和陣列的組成其實就是我們常用的基本型別或引用型別組成的,要複製他們,其實就是創建出相同的資料結構,把對應的值賦上去,,而引用型別中包含引用型別,則也可以執行上述操作,直到複製出兩個物件。

以下用遞迴實現一下原理。

/** 
 * 深度複製樸素物件和陣列
 * 除此之外都做淺複製處理
 * @author chen-rongliang@qq.com
 * @param obejcts
 * 待複製變數
 * @return 合併的物件
 * @example
 * 
 *  var extend = require('./extend')
 *  var y = {
 *          a: 1,
 *          b: '2',
 *          c: { d: [3] }
 *      },
 *      z = {
 *          a: 2,
 *          e
: 6, * f: { * g: 7 * } * } * * var x = extend(y, z) * * x.c.d = 999 * z.f.g = 8 * * */ const Extend = (obj, temp) => { // 型別 let typeStr = obj.constructor.name // 型別為樸素物件或陣列 if (typeStr === 'Object' || typeStr === 'Array') { // 副本初始化型別 if (temp === undefined) { temp = obj instanceof Array ? [] : {} } // 遍歷 for (let key in obj) { // 如果遍歷子也是複雜型別,遞迴呼叫 if (obj[key] instanceof Object) { temp[key] = Extend(obj[key]) } else { // 直接賦值 temp[key] = obj[key] } } } else { // 簡單型別 / 非陣列 / 非樸素物件 直接複製 temp = obj } return temp } module.exports = (...objs) => { let concats = {} for (let obj of objs) { Extend(obj, concats) } return concats }

除了這種方法,程式碼實現還有各種各樣的,這個就不一一介紹了。

相關推薦

JavaScript複製物件陣列

JavaScript 中,資料型別分為兩大型別,基本型別和引用型別。 簡述一下,基本型別是指我們常見的Undefined、Null、String、Number、Boolean,是儲存在 棧記憶體 中的簡單資料段;而引用型別則是指Object、Array、Reg

js複製物件陣列的幾種方法

js中的基本資料型別可以直接進行復制 例如: var str1 = '123456' var str2 = str1 console.log(str2)  //123456 str1 = '123' console.log(str2)  //123 如果是引用型別

如何用sessionStorage儲存物件陣列

sessionStorage、localStorage詳解 webstorage是本地儲存,儲存在客戶端,包括localStorage和sessionStorage。在JavaScript語言中可通過 window.sessionStorage 或 sessionStorage 呼叫

JavaScript 建立物件繼承

首先宣告下,本人不擅長文字表達,文采不行,所以文章中文字較少,請看程式碼 本人 GitHub連結,個人部落格網站,部落格園 郵箱地址:[email protected] 建立物件 JS中可以有許多設計模式,在這些中推薦使用組合建構函式和原型模式; 因

es6語法淺克隆物件陣列

廢話不多說直接上演示 1.克隆物件: const json1={"a":"1"}; let jsonnew={...json1}; jsonnew.b="2"; console.log(jsonnew,json1); 2.克隆陣列: const arr1=["1"]; let arr

js物件陣列的定義

以下是三種建立空物件的方法: var emptyObj1 = {}; var emptyObj2 = new Object(); var emptyObj2 = Object.create(Object.prototype); 他們對Javascript來說是一樣的,新建立的三個物件會繼承obj

JavaScript——Dom物件jQuery

JavaScript是一種直譯式指令碼語言,一種動態型別、弱型別、基於原型的語言,內建支援型別;廣泛用於Web應用開發,常用來為網頁新增各式各樣的動態功能,為使用者提供更流暢美觀的瀏覽效果; Dom物件

PHP全站開發工程師-第14章 JavaScript DOM物件BOM物件

第一階段(A)(前端) 20天 120學時 第14章 JavaScript DOM物件和BOM物件(6) [學習課時] 本章共需要學習  6  課時 [目的要求]  掌握JavaScript DOM物件 掌握JavaScript BOM物件 [教學內容

js中 json字串 json物件 以及 物件陣列的區別

json 字串轉json 物件 轉換後就可以取出物件中的值 json字串: var jsonString = '{"bar":"property","baz":3}' ; json物件: var jsObject =

javaScript刪除物件陣列中的null,undefined,空物件,空陣列方法

這兩天在專案中遇到後臺需要傳的資料為不能有null,不能有空值,而這個資料又是一個龐大的物件,對組集合,所以寫了個方法來解決這個問題。為了兼具所有的種類型別,封裝了方法,程式碼如下: var obj = {        a: {            a_1: 'qwe',            a_2: 

引用型別----物件陣列

 1. 建立物件:物件(引用型別的值,是引用型別的一個例項)          建立Object例項。         &

[JSP]EL表示式JSTL標籤遍歷取值物件陣列與原來的對比

》》取出放進了request的key裡list,list含有物件 原: <%@page import="com.yiki.dbutil.*"%> <%@ page languag

Java集合物件陣列物件的轉換

    在開發中,我們經常需要將集合物件(List,Set)轉換為陣列物件,或者將陣列物件轉換為集合物件。Java提供了相互轉換的工具,但是我們使用的時候需要注意,不能亂用濫用。 1、陣列物件轉換為集合物件     最暴力的方式是new一個集合物件,然後遍歷陣列,依次將陣列中的元素放入到新的集合中,但是這樣

JS的物件陣列的區別使用

JS宣告物件或陣列 JS物件:{ } JS陣列:[ ] 1. 物件 var b={    m:'123',    n:'abc' } alert(b.m); alert(b.n); 2.一維陣列 var a=[1,2,3] alert(a[1]); alert(a.length);3.二維陣列 var ar

js操作json物件陣列讀取內容

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式,採用完全獨立於語言的文字格式,是理想的資料交換格式。同時,JSON是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON資料不須要任何特殊的 A

javaScript中變數陣列

全域性變數和區域性變數 全域性變數 javascript裡面 1.      在函式外部宣告的變數 2.      在函式內部不使用”var”宣告的變數(函式呼叫之後起作用) 區域性變數 在函式內部

js中區分物件陣列

console.log(Object.prototype.toString.call([]));//[object Array] console.log(Object.prototype.toStri

js中 json字串 json物件 以及 物件陣列的區別

json 字串轉json 物件 轉換後就可以取出物件中的值 json字串:var jsonString = '{"bar":"property","baz":3}'; json物件:var jsOb

js將字串轉換成物件陣列

一個物件,但如何把文字轉為物件呢。使用eval();注意一定要加括號,否則會轉換失敗 程式碼如下:var test='{ colkey: "col", colsinfo: "NameList" }'把文字轉化為物件var test='{ colkey: "col", col

js(2) javascript物件陣列、字串合併的方法

一、js中物件合併的方法1)第一種方法var a = { a : '1', b : '2' } var content = { c: '3', ...a } console.log(content) //content = {c: "3", a: "1", b: "