原生Javascript（数组操作方法总结）-更新
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生Javascript（数组操作方法总结）-更新相关的知识，希望对你有一定的参考价值。
原生javascript数组
当在数组中查找时
如果需要判断有没有这个数值或者字符或者布尔值这种非引用地址的元素时 使用includes
如果需要获取这个数值或者字符或者布尔值这种非引用地址元素的下标时 使用indexOf
如果需要从后向前获取这个数值或者字符或者布尔值这种非引用地址元素的下标时 使用lastIndexOf
如果需要获取数组中某个引用元素是否满足某个条件的元素，使用find
如果需要获取数组中某个引用元素是否满足某个条件的元素下标，使用findIndex
如果需要从后向前获取数组中某个引用元素是否满足某个条件的元素，使用findLast
如果需要从后向前获取数组中某个引用元素是否满足某个条件的元素下标，使用findLastIndex
如果需要获取到数组中所有满足条件的元素时，使用筛选 filter
创建数组
创建字面量数组
var arr=[];
创建数组对象
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
根据对象创建数组
var arr=new Object([])
访问元素
arr[0],arr[1]
数组的属性
length 设置或返回数组中元素的数目。
length也是可以设置的，如果设置为0，表示清空数组，如果设置为3，表示保留到第三位
var arr=[];
console.log(arr);//[]
arr[4]=3;//当下标大于原长度时，自动扩展数组的长度为当前下标+1
console.log(arr.length);//数组的长度
console.log(arr.length-1)//数组最后一个下标
arr[arr.length]=3; //在数组的尾部添加一个新的数据
arr.length--;//删除数组尾部的最后一个元素
arr.length=0;
强引用将每个地址回收
var arr=[
a:1,
a:2,
a:3,
]
for(var i=0;i<arr.length;i++)
arr[i]=null;
arr.length=0;
//下标变量
arr[0]也代表数组的开始
再例如：
// arr[0]
var o=a:1;
var o1=a:2;
var o2=a:3;
var arr=[o,o1,o2];
console.log(o===arr[0])//true
o=null;//虽然给o一个新的null，但是arr[0]地址指向不变
console.log(arr[0].a) //null
console.log(arr[1]); //1
console.log(arr); //[…, …, …]
对象的下标如果可以隐式转换为数值时，自动作为下标数值
如果隐式转换后是非数值时，则作为对象key插入属性
var arr=[];
arr["1"]=3;
arr["a"]=2;
console.log(arr) //[empty, 3, a: 2]
delete 数组的元素删除
var arr=[1,2,3,4,5];
// 不改变数组的长度，将对应的值设置为空元素
delete arr[2];
console.log(arr);//[1, 2, empty, 4, 5]
while操作
var arr=[];
while(arr.push(1)<10);//[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
console.log(arr)
数组的方法
concat()
// 具备有复制数组兼添加新元素的功能
var arr=[1,2,3];
var arr1=arr.concat(4);
var arr1=arr.concat();
arr[0]=10;
console.log(arr1,arr)
at()
// 获取数组指定下标对应的元素，可以使用负数，负值代表倒数，也就是arr.length+(负数)
console.log(arr.at(-2));
copyWithin()
Array.copyWithin(), 用于在当前的数组内部，将指定的位置成员复制到其他位置，然后返回当前数组。特别注意: 会改变原数组
array. copyWithin(x,y,z)
x（必填） ： =>表示要替换的位置，从该位置开始替换，负数的话就倒数。
y（可选） ： =>表示该位置开始读取元素，拿这个(段)位置的元素去换，负数的话就倒数。
z（可选） ： =>表示该位置结束读取元素，拿这个(段)位置的元素去换，负数的话就倒数。默认是数组的长度。含头不含尾 含y不含z
var arr=[1,5,6,9,25];
arr.copyWithin(0,2,4); //[6, 9, 6, 9, 25]
every()
arr.every(回调函数,回调函数中this的指向)
var arr=[1,2,3];
var bool=arr.every(function(item,index)
console.log(this);//要是不写第二个参数，默认this指向window
return item>1;
,a:1);
console.log(bool);//false
fill()
arr.fill( 要填充在数组中的值,从什么位置开始填充,到什么位置结束 )
var arr=Array(6);
var arr=[1,2,3,4,5,6];
arr.fill(0);//[0, 0, 0, 0, 0, 0]
arr.fill(1,3,-1)//[0, 0, 0, 1, 1, 0]
console.log(arr);//[0, 0, 0, 1, 1, 0]
filter()
var arr=[1,2,3,4];
var arr1=arr.filter(function(item)
return item >2;
);
console.log(arr1)//[3, 4]
console.log(arr);// [1, 2, 3, 4]
桥接模式（回调概念）
function filter(array,fn)
var arr=[];
for(var i=0;i<array.length;i++)
if(i in array && fn(array[i],i,array)) arr.push(array[i]);
//我觉得浅层次应用的话就是函数的嵌套
return arr;
find()
找见并返回这一项，多用与引用类型元素配合查找
var arr=[1,0,3];
var item=arr.find(function(item,index)
return item==0;
);
console.log(item)//0
findIndex()
查找数组中元素是引用类型的下标
var arr=[
id:1001,name:"商品1",price:3000,
id:1002,name:"商品2",price:4000,
id:1003,name:"商品3",price:5000,
id:1004,name:"商品4",price:6000,
id:1005,name:"商品5",price:7000
]
var item=arr.find(function(item)
return item.id===1003;
)
console.log(item);// id:1003,name:"商品3",price:5000
//arr.indexOf() 查找数组中元素是非引用元素的下标
var arr=[
[1,2,3],
[11,22,33],
[111,222,333]
]
var arr1=arr.find(function(item)
return ~item.indexOf(22);
);
console.log(arr1)//[11, 22, 33]
var arr=[
id:1001,name:"商品1",price:3000,
id:1002,name:"商品2",price:4000,
id:1003,name:"商品3",price:5000,
id:1004,name:"商品4",price:6000,
id:1002,name:"商品6",price:8000,
id:1005,name:"商品5",price:7000
]
var item=arr.findLast(function(item)
return item.id===1002
)
console.log(item);//id: 1002, name: '商品6', price: 8000
var index=arr.findLastIndex(function(item)
return item.id===1002
)
console.log(index)//4
flat()
flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。也就是我们所说的数组降维。
function arrayFlat(array,maxLv,currentLv,result)
if(!array || array.constructor!==Array) throw new TypeError(array+"not is Array!");
if (maxLv === undefined) maxLv = 1;
if (currentLv === undefined) currentLv = 0;
if(result===undefined) result=[];
for(var i=0;i<array.length;i++)
if(maxLv>currentLv && Array.isArray(array[i])) arrayFlat(array[i],maxLv,currentLv+1,result);
else result.push(array[i]);
return result;
console.log(arr1)
map（）
改变原数组中所有元素结果，并且返回一个新数组
var arr1=arr.map(function(item)
return item+10;
)
console.log(arr1)
includes()
var arr=[1,2,3,4];
var bool= arr.includes(1);
console.log(bool)
判断引用类型数组中某元素是否存在
if(arr.find(function(item)return item.id===1002))
var a="a";
if(a==="a" || a==="b" || a==="c" || a==="d")
if(["a","b","c","d"].includes(a))
indexOf()
arr.indexOf(要查找的元素,从哪个下标开始查找);
//arr.indexOf(要查找的元素,从哪个下标开始查找);
var arr=[1,2,3,1,2,3,4,1,2,3,4];
var index= arr.indexOf(2,3);
console.log(index)
var index=-1;
while(~(index=arr.indexOf(2,index+1)))
console.log(index);
lastIndexOf(2)
console.log(arr.lastIndexOf(2))
reduce()
var sum=arr.reduce(function(v,t)
return v+t;
)
console.log(sum)
var arr=[1,2,3,4,5];
var arr1=arr.reduce(function(v,t)
v.push(t+10);
return v;
,[]);
console.log(arr1)//[11, 12, 13, 14, 15]
遍历数组
函数中的call和apply
function fn()
// 将非数组的列表转换为数组
var arr=[].concat.apply([],arguments);
console.log(arr)
fn(1,2,3,4);//[1, 2, 3, 4]
// 将3号位复制到0号位
[].copyWithin.call(length: 5, 3: 1, 0, 3)
// 0: 1, 3: 1, length: 5
//特别注意 对象强借数组方法 此时私下转数组length: 5, 3: 1 => [,,,1,] 相当于[x,x,x,1,x]
//此时将key值为3位置复制到下标0号位置成为对象即成为现在的样子
var arr=[1,2,3,4,5];
var arr1=arr.reduce(function(v,t)
if(t>3) v.push(t);
return v;
,[]);
console.log(arr1);
var bool=arr.reduce(function(v,t)
if(t>3) v=true;
return v;
,false);
console.log(bool)
var arr=[
id:1001,name:"商品1",price:3000,
id:1002,name原生JavaScript的DOM操作方法总结