Js中数组的常用操作

常见的数组操作

push / pop / unshift / shift

1. push

例：var arr=[1,2,3,4];
var a=arr.push(9,8,7);
输出：console.log(a,arr);1,2,3,4,9,8,7；
push属性：可以将一个或者更多的参数添加在数组的尾部；返回添加后的数组的长度，原数组发生改变。

2. unshift

例：var arr=[1,2,3,4];
var a=arr.unshift(9,8,7);
输出：console.log(a,arr);9,8,7,1,2,3,4；
unshift属性：可以将一个或者更多的参数添加在数组的头部；返回添加后的数组的长度，原数组发生改变。

3. pop

例：var arr=[1,2,3,4];
var a=arr.pop();
输出：console.log(a,arr)4；1,2,3，
pop属性：从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变

4. shift

例：var arr=[1,2,3,4];
var a=arr.pop();
输出：console.log(a,arr)1； 2,3,4，
shift属性：从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。

slice && splice

1. slice用法：

• 如果不传参数，会返回原数组，如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变
• 两个参数，从第一个参数对应的索引开始截取，到第二个参数对应的索引结束，但包括第二个参数对应的索引上值，原数组不改变 &最多接受两个参数

2.splice

• 没有参数，返回空数组，原数组不变
• 一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的 数组，原数组改变
• 两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组，原数组改变
• 三个或者更多参数，第三个及以后的参数表示要从截取位插入的值

reverse && sort

1.reverse

• reverse()属性不接受参数，数组顺序翻转。

2. sort

• 按顺序排列

Array.sort(function(a,b){
	return a - b; //从小到大
	return b-a; //从大到小
}

join&& concat

1.join

• 接受一个参数，将数组以参数拼接为字符串；

var arr = [1,2,3,4];
arr.join('-') //'1-2-3-4'

2. concat

• 接受一个或多个参数，将参数中的值放到操作的数组后边，返回拼接的数组，原数组不变。
• 如果参数是一个数组，则先把值提取出来再操作。

var arr = [1,2,3,4];
arr.concat([5,6,7])//[1,2,3,4,5,6,7]

ES5新增的数组方法

1. indexOf

• 接受一个参数，返回这个参数在数组里面的索引值，如果参数不在操作的数组中，则返回 -1.

var arr = [1,2,3,4];
arr.indexOf(1) // 0
arr.indexOf(5) // -1 

2. forEach

• 遍历一个数组，没有返回值或返回值为 undefined

var arr = [1,2,3,4,5];

arr.forEach((item,index,arr)=>{
	//item 为当前数组元素
	// index 为当前索引
	// arr 为数组名字
})

3. map

• 用来接收一个返回值。不改变原数组

var arr = [1,2,3,4,5,6];
arr.map(function(item,index,arr){
	return item * 2
})
// [2,4,6,8,10,12]

4.filter

• 过滤出一些符合条件的元素，返回一个新数组。

arr.filter(item=>{
	return item>2
})

5.some

• 返回一个布尔值，如果数组中有任意一个元素满足给定的条件，结果就为 true

6.every

• 返回一个布尔值,数组中所有的元素都满足给定的条件，结果就为 true

7.reduce

• 对数组中的所有元素调用指定的回调函数，该回调函数的返回值为累计结果。并且把返回值在下一次回调函数时作为参数提供

ES6新增的数组方法

1. Array.from

• 这个东西就是把一些集合，或者长的像数组的伪数组转换成真的数组，比如arguments，js选择器找到dom集合和对象模拟的数组

var obj = {
'0' : 1,
length : 1
}
Array.from(obj / arguments / 伪数组) //返回的是一个数组
[].slice.call(arguments, 0) //这种方式根from方法是一样的效果
//Array.from还有第二个参数，是一个回掉函数，功能类似map
Array.from( [1, 2, 3], item => item * 2 )

2. Array.of

• 把参数合并成一个数组返回，如果参数为空，则返回一个空数组

Array.of(1, 2, 3, 4) 

3. copyWithin

• 接受三个参数，
• 参数一: 被替换的起始位置；
• 参数二: 选取替换值的起始位置；
• 参数三: 选取替换值得结束位置

let arr = [1, 'c', 'd', 'a', 'b'];  //假如我想把a，b替换到1的位置
arr.copyWithin(0, 3, 5)   // ["a", "b", "d", "a", "b"]

4. find / findIndex

• 返回数组中第一个符合条件的元素, findIndex返回索引

[1, 2, 3, 4, 5].find(function(item){
    return item > 3
})

5. fill

• 替换

//功能一： 字面意思填满，实际功能就是把数组中的每一个元素替换成指定值
let arr = [1, 2, 3, 4]
arr.fill(5)        //arr全变成了5

//功能二：指定范围替换，这功能似曾相识啊
arr.fill(6, 1, 3) //使用6 替换数组中 下表为1-3范围的值， 范围是下标>=1 && <3 的位置。
//猛的一看以为功能和splice一样呢，又去巩固了一下。splice是删除某一个元素，然后增加指定的个数，并且它第一个参数是下标起点，第二个参数是个数，而不是结束下标。

6.entries / keys / values

• 取值

let arr=['a', 'b', 'c']
for(let key of arr.keys()){}                     //取键
for(let value of arr.values()){}                //取值；不能直接使用，有兼容性问题，甚至谷歌
for(let [key, value] of arr.entries()){}       //都取

7.inludes

• 检测数组中是否包含一个值

var a = function(){}
[1, 2, 3, 4, a].includes(a)    //true
[1, 2, 3, 4, NaN].includes(NaN)    //true