js 如何动态添加数组

一、js 如何动态添加数组

1、在JavaScript中，数组的创建可以通过多种方式实现。使用new Array()可以创建一个数组，如果不传入参数，则数组为空。如果传入一个参数，则该参数表示数组的长度。值得注意的是，尽管可以指定长度，但这只是一个初始长度，数组的长度可以动态调整。例如：

2、var arrayObj= new Array();//创建一个空数组

3、var arrayObj= new Array(5);//创建一个长度为5的数组，但实际存储元素不受长度限制

4、var arrayObj= new Array("元素0","元素1","元素2");//创建并赋值数组

5、数组元素可以通过下标访问，例如：

6、var testGetArrValue= arrayObj[1];//获取数组第二个元素

7、arrayObj[1]="这是新值";//修改数组第二个元素

8、添加元素是通过push()、unshift()和splice()方法实现。push()用于在数组尾部添加一个或多个元素，返回数组的新长度：

9、arrayObj.push("新元素1","新元素2");//在数组尾部添加元素

10、unshift()则是在数组头部添加一个或多个元素，同样返回数组的新长度：

11、arrayObj.unshift("新元素1","新元素2");//在数组头部添加元素

12、splice()方法则更灵活，可以插入或删除数组中的元素：

13、arrayObj.splice(insertPos, 0,"新元素1","新元素2");//在指定位置插入元素

14、删除元素也有多种方式，如pop()、shift()和splice()。pop()和shift()分别移除数组尾部和头部元素，并返回被移除的元素：

15、arrayObj.pop();//移除并返回数组尾部元素

16、arrayObj.shift();//移除并返回数组头部元素

17、splice()方法可以同时移除和插入元素，返回被移除的元素：

18、arrayObj.splice(deletePos, deleteCount);//移除指定位置及其后的元素

19、数组截取和合并功能通过slice()和concat()实现。slice()方法可以获取数组的一部分，返回一个新的数组：

20、arrayObj.slice(start, end);//从start到end-1的数组部分

21、concat()方法可以合并多个数组或字符串，返回一个新的数组：

22、arrayObj.concat("字符串", ["数组元素1","数组元素2"]);//合并数组和字符串

23、数组的拷贝通常使用slice()或concat()方法：

24、arrayObj.slice(0);//返回一个新数组

25、arrayObj.concat();//返回一个新数组

26、数组排序使用reverse()和sort()方法，reverse()反转数组，sort()则对数组进行排序：

27、arrayObj.sort();//对数组进行排序

28、最后，数组元素可以通过join()方法转换为字符串，separator为分隔符：

29、arrayObj.join(separator);//使用separator连接数组元素

30、toString()、toLocaleString()和valueOf()方法可以看作是join()的变体，主要用于特定场景。

二、JS数组方法

1.字面量的形式： var arr=[1,2,3];

1.构造函数： var arr1=new Array();//不常用

Array构造函数有一个很大的缺陷，就是不同的参数，会导致它的行为不一致。

1.单个数值作为参数，参数表示数组的元素个数

可以看到，Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。

push/pop/unshift/shift//增加、删除元素（数组的方法，所以使用时应调用

无参数时，返回原数组，相当于数组的复制。

一个参数时，从参数作为下标的元素截取，至数组结束。

二个参数时，从第一个参数作为下标（索引）的元素开始截取，到第二个参数作为下标的元素结束，但不包括第二个参数作为下标的函数。（起始元素包含，结尾元素不包含）

多个参数时，前两个参数起效，后边的参数无效。

一个参数时，从参数作为下标的元素截取，至数组结束。

二个参数时，从第一个参数作为下标（索引）的元素开始截取，即表示截取的起始位置，第二个参数表示截取的元素个数。

多个参数时，前两个参数起效，后边的参数从原数组的截取起始位置开始填充，填充到原数组。

arr.reverse();//数组翻转(元素位置颠倒)

arr.sort();从小到大排序，但遵循的是字符串的按位比较规则，所以排序结果容易出现异常。

join()以指定参数作为连接符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

concat();//拼接数组不改变原数组

indexOf(item)返回元素在数组中对应的索引值，找不到的话，返回-1，用以测试元素是否存在于数组中

forEach(function(item,index))遍历数组,没有返回值

map(function(item,index))遍历数组,存在返回值

filter(function(item)){return item>2}返回大于2的元素

some返回布尔值，条件部分成立|| arr.some(function(item){return item>2})

every返回布尔值，条件全部成立&& arr.every(function(item){return item>2})

reduce(对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。)arr.reduce(function(a,b){return a+b;});

功能：将数组的每个元素转化为字符串，并且输出用逗号分隔的字符串列表。功能类似join()；

功能：搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1；lastIndexOf为反向搜索。

参数：元素的值，起点索引（可选）

功能：将两类对象转为真正的数组：类似数组的对象和可遍历的对象

参数：待转换的对象，第二个参数可选，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

功能：在当前数组内部，将指定位置的成员复制到其他位置，返回变化后的数组。

参数：索引（从该位置开始替换数据）；索引（从该位置开始读取数据，默认为0，负值表示倒数）；索引（到该位置前停止读取，默认为最大索引）

功能：找到第一个符合条件的数组成员。

参数：回调函数，所有数组成员依次执行该函数，直到找到第一个返回值为true的成员。回调函数可以接受三个参数，依次为值，位置，原数组。

输出：find()返回找到的成员；findIndex()返回成员的位置。

功能：使用给定的值，填充一个数组。

参数：第一个参数为待填充的值，第二和第三参数可选，分别表示填充的起始和结束位置(不包括)。

功能：用于遍历数组，可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。

功能：表示某个数组是否包含给定的值

参数：第一个参数必选（待检查的给定值），第二个参数可选，表示搜索的起始位置，默认为0，负数表示倒数的位置。

注意：和indexOf的区别，indexOf进行了运算符的强比对，会导致对NaN误判。

三、js深拷贝和浅拷贝的区别

1.浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据。

2.深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。

在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。

var arr= ["One","Two","Three"]; var arrto= arr; arrto[1]="test"; document.writeln("数组的原始值："+ arr+"<br/>");//Export:数组的原始值：One,test,Three document.writeln("数组的新值："+ arrto+"<br/>");//Export:数组的新值：One,test,Three

像上面的这种直接赋值的方式就是浅拷贝，很多时候，这样并不是我们想要得到的结果，其实我们想要的是arr的值不变，不是吗？

var arr= ["One","Two","Three"]; var arrtoo= arr.slice(0); arrtoo[1]="set Map"; document.writeln("数组的原始值："+ arr+"<br/>");//Export:数组的原始值：One,Two,Three document.writeln("数组的新值："+ arrtoo+"<br/>");//Export:数组的新值：One,set Map,Three

var arr= ["One","Two","Three"]; var arrtooo= arr.concat(); arrtooo[1]="set Map To"; document.writeln("数组的原始值："+ arr+"<br/>");//Export:数组的原始值：One,Two,Three document.writeln("数组的新值："+ arrtooo+"<br/>");//Export:数组的新值：One,set Map To,Three

var a={name:'yy',age:26}; var b=new Object(); b.name=a.name; b.age=a.age; a.name='xx'; console.log(b);//Object{ name="yy", age=26} console.log(a);//Object{ name="xx", age=26}

就是把对象的属性遍历一遍，赋给一个新的对象。

var deepCopy= function(source){ var result={}; for(var key in source){ result[key]= typeof source[key]==='object'? deepCoyp(source[key]): source[key];} return result;}

jQuery.extend= jQuery.fn.extend= function(){//1.将extend方法扩展到JQ（函数）下边：扩展静态方法//2. jQuery.fn.extend把extend扩展到jq.fn下且jQuery.fn= jQuery.prototype扩展实例方法// 1.2.功能相似 var options, name, src, copy, copyIsArray, clone,//定义一些变量 target= arguments[0]||{},//目标元素是【0】第一个元素$.extend( a,{ name:'hello'},{ age: 30}); i= 1,//第一个元素的位置 length= arguments.length,//第一个个对象的元素 deep= false;//是否是深拷贝默认 false不是// Handle a deep copy situation看是不是深拷贝情况 if( typeof target==="boolean"){//是布尔值 deep= target; target= arguments[1]||{};//目标元素是第二个$.extend( true, a, b)// skip the boolean and the target i= 2;}// Handle case when target is a string or something(possible in deep copy)看参数正确不 if( typeof target!=="object"&&!jQuery.isFunction(target)){//当目标不是对象或者不是函数的时候 target={};//变成一个空的jason}// extend jQuery itself if only one argument is passed看是不是插件情况 if( length=== i){//只写了一个对象要把这个对象扩展到jq源码上静态方法或者是实例方法 target= this;//this是$或者$();--i;}//可能有多个对象情况 for(; i< length; i++){// Only deal with non-null/undefined values if((options= arguments[ i ])!= null){//看后边的对象是否都有值// Extend the base object for( name in options){ src= target[ name ]; copy= options[ name ];// Prevent never-ending loop if( target=== copy){//防止循环引用 continue;//跳出本次循环继续执行//$.extend( a,{ name: a}));循环引用 a也是一个对象}// Recurse if we're merging plain objects or arrays深拷贝 if( deep&& copy&&( jQuery.isPlainObject(copy)||(copyIsArray= jQuery.isArray(copy)))){//是深拷贝且需有var b={ name:{ age: 30}};且b必须是对象自变量（jason）或者是个数组//递归 if( copyIsArray){//数组 copyIsArray= false; clone= src&& jQuery.isArray(src)? src: [];//定义一个空数组} else{//jason clone= src&& jQuery.isPlainObject(src)? src:{};//看原有的属性有没有且是不是jason定义一个空jason}// var a={ name:{ job:'it'}};看有没有原有的属性有的话在原有的上边添加// var b={ name:{age: 30}};//$.extend( true, a, b);//a继承b// console.log( a); a{ name：{ job:'it'，age: 30}}如果只有一个{}则只有，age: 30// Never move original objects, clone(a) them target[ name ]= jQuery.extend( deep, clone, copy);//调用函数本身进行进一步的递归处理// Don't bring in undefined values浅拷贝} else if( copy!== undefined){ target[ name ]= copy;//直接复制因为里边没有对象}}}}// Return the modified object return target;};