js数组复制（不改变原数组）

Posted 2023-04-18

参考技术A 需要从后台取出数据，在前台接收并要保存在一个全局变量，因为之后还要对此使用此全局变量。

全局变量 var globalarr = [];

后台取出的数组变量 var arr = [ 'id' : 1, 'price' : '5.0' , 'id' : 2, 'price' : '10.00' , 'id' : 3, 'price' : ' 20.00 ' ];

一般情况下如果使用等号赋值，会连同原数级的地址复制，如果在此后操作原数组，会影响原数组的元素。

例 1：（赋值且复制数组地址）

var globalarr = arr;     // 此处globalarr 和 arr 一样拥有三个对象数组元素，且globalarr和arr 同享内存地址。

console.log( globalarr );  

console.log( arr );

// 上面的打印结果如下：

// 新建一个对象数组ms，并push进globalarr，打印出，看到globalarr和arr都改变。

var ms = ;

ms.id="10";

ms.price='1000.00';

globalarr.push(ms);

console.log(globalarr);

console.log(arr);

// 再打印的结果如下：

这时，发现只单独push元素到gloalarr中，原数组arr 也发生了改变。

例 2：（只赋值不复制数组地址方法一）

var globalarr = [];

var arr =  ['id':1,'price':'5.0','id':2,'price':'10.00','id':3,'price':' 20.00 '];

globalarr = arr.slice();    // 我们用slice函数来赋值数组

var ms = ;

ms.id="10";

ms.price='1000.00';

globalarr.push(ms);

console.log('ms-globalarr=>',globalarr);

console.log('ms-arr=>',arr);

我们发现slice函数赋值是不会影响原数组的。

例 3：（只赋值不复制数组地址方法二）

var globalarr = [];

var arr =  ['id':1,'price':'5.0','id':2,'price':'10.00','id':3,'price':' 20.00 '];

for(vari in arr )



var v = arr[i];

var obj = ;

obj.id= v.id;

obj.price= v.price;

globalarr.push(obj);



var ms = ;

ms.id="10";

ms.price='1000.00';

globalarr.push(ms);

console.log('ms-globalarr=>',globalarr);

console.log('ms-arr=>',arr);

例4：（只赋值不复制数组地址方法三）

var globalarr = [];

var arr =  ['id':1,'price':'5.0','id':2,'price':'10.00','id':3,'price':' 20.00 '];

var x = globalarr.concat(arr);

var ms = ;

ms.id="10";

ms.price='1000.00';

x.push(ms);

console.log('after=>x',x);

console.log('after=>arr',arr);

js数组方法大全

修改器方法(9)

copyWithin(target: number, start: number, end?: number): this;
// 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

fill(value: T, start?: number, end?: number): this;
// 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

pop(): T | undefined;
// 后删，返回被删元素。

push(...items: T[]): number;
// 后加，返回length。

shift(): T | undefined;
// 前删，返回被删元素。

unshift(...items: T[]): number;
// 前加，返回length。

splice(start: number, deleteCount?: number): T[];
// 在任意的位置给数组添加或删除任意个元素。

reverse(): T[];
// 反转。

sort(compareFn?: (a: T, b: T) => number): this;
// 排序。

访问方法(11)

flat();
// 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

flatMap();
// 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

concat(...items: ConcatArray<T>[]): T[];
// 返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。

slice(start?: number, end?: number): T[];
// 抽取当前数组中的一段元素组合成一个新数组。

join(separator?: string): string;
// 连接所有数组元素组成一个字符串。

toString(): string;
// 返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法。

toLocaleString(): string;
// 返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 Object.prototype.toLocaleString() 方法。

indexOf(searchElement: T, fromIndex?: number): number;
// 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 - 1。

lastIndexOf(searchElement: T, fromIndex?: number): number;
// 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 - 1。

includes(searchElement: T, fromIndex?: number): boolean;
// 判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false。

toSource();
// 返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 Object.prototype.toSource() 方法。

迭代方法(12)

在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方。所以迭代时慎重改变数组长度。

forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
// 为数组中的每个元素执行一次回调函数。

map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
// 返回一个由回调函数的返回值组成的新数组。

filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
// 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

every(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
// 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false。

some(callbackfn: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
// 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
// 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
// 从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;
find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;
// 找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。

findIndex(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): number;
// 找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 - 1。

entries(): IterableIterator<[number, T]>;
// 返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。

keys(): IterableIterator<number>;
// 返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。

values(): IterableIterator<T>;
// 返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。

数组检测

1. ECMAScript 3 instanceof

   instanceof 操作符的问题在于，它假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的 Array 构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

2. ECMAScript 5 isArray