数组常用方法总结

Tom2023-05-252023-05-25

数组常用方法及兼容性总结

数组的的方法名

方法的作用
方法的参数（方法运行的时候需要什么值或变量）
方法的返回值
是否会改变原有数组
兼容性

`push`

var ary = ['a','b','c'];
var res = ary.push('d','e');
console.log(ary); // ["a", "b", "c", "d", "e"]
console.log(res); // 5

向数组的末尾添加项
参数就是要新增的项（如果增加多项就在参数位置逗号隔开）
返回值是数组的新长度
原有数组改变
所有主要浏览器都支持

`unshift`

var ary = ['a','b','c'];
var res = ary.push('d','e');
console.log(ary); // [ "d", "e","a", "b", "c"]
console.log(res); // 5

向数组的开头增加项
参数就是要新增的项（如果增加多项就在参数位置逗号隔开）
返回值是数组的新长度
原有数组改变
所有主要浏览器都支持

`pop`

var ary = ['a','b','c'];
var res = ary.pop();
console.log(ary); // ["a","b"];
console.log(res); // "c"

删除数组的末尾项
不使用参数（因为删除就是删除最后一个）
返回值是删除的最后一项
原有数组改变
所有主要浏览器都支持

`shift`

var ary = ['a','b','c'];
var res = ary.shift();
console.log(ary); // ["b","c"];
console.log(res); // "a"

删除数组的开头项
不使用参数
返回值是删除的第一项
原有数组改变
所有主要浏览器都支持

`splice`( 可以实现 push,pop,shift,unshift 的功能 )

var ary = ['a','b','c','d','e'];
var res = ary.splice( 2 , 2 ); // ary=>['a','b','e']; res=>['c','d']
var res = ary.splice( 2 ); // ary=>['a','b']; res=>['c','d','e']
var res = ary.splice( 0 ); // ary=>[]; res=>['a','b','c','d','e']
var res = ary.splice( 2 , 2 ,'x','y'); // ary=>["a", "b", "x", "y", "e"] res=>['c','d']
var res = ary.splice(ary.length-1, 1 ) // 从最后一项的索引开始删除一个(模拟pop) ary=>['a','b','c','d'] res=>['e']
var res = ary.splice(ary.length, 0 ,'f') // 从数组的最后一项开始删除 0 个增加'f'(模拟push) ary=>['a','b','c','d','e','f'] r
es=>[]
var res = ary.splice( 0 , 1 ) // 从数组的第一项开始删除一个（模拟shift）ary=>['b','c','d','e'] res=>['a']
var res = ary.splice( 0 , 0 ,'1') // 从数组的第一项开始删除 0 个新增’ 1 ‘(模拟unshift) ary=>['1','a','b','c','d','e'] res=>[]

删除数组的某些项
参数为 0 到多个
- splice(n,m) 从索引n开始删除m个（包括n）
- splice(n) 如果第二个参数没有写那么就是从n索引开始删除到末尾
- splice(0) 从第一个开始删除到末尾（可以达到克隆数组的目的，但是靠的是返回值）
- splice(n,m,x,y) 从索引n开始删除m个，然后用x,y顶替删除的位置（从第三个参数开始都是用来顶替的）
返回值是删除的数组项目组合成的新数组
原有数组改变
所有主要浏览器都支持

`slice`

var ary = ['a','b','c','d','e'];
// var res = ary.slice( 2 , 3 ); // ary=>['a','b','c','d','e'] res=>['c'];
// var res = ary.slice( 2 ); // ary=>['a','b','c','d','e'] res=>['c','d','e'];
// var res = ary.slice( 0 ); // ary=>['a','b','c','d','e'] res=>['a','b','c','d','e'];
// var res = ary.slice(); // ary=>['a','b','c','d','e'] res=>['a','b','c','d','e'];

用来复制数组的
0 到 2 个参数
- slice(n,m) 从索引n开始复制到索引m (不包含m，其实也是复制到m-1)
- slice(n) 从索引n开始复制到末尾
- slice(0) 从开头复制到末尾，克隆数组
- slice() 从开头复制到末尾，克隆数组
返回值是新复制的数组
原有数组不变
所有主要浏览器都支持

`concat`

var ary1 = ['a','b'];
var ary2 = ['c','d'];
var ary3 = ['e','f'];
var res = ary1.concat(ary2,ary3);
console.log(ary1); // ['a','b'];
console.log(ary2); // ['c','d'];
console.log(res); // ["a", "b", "c", "d", "e", "f"]

把两个或两个以上的数组拼接在一起
你要拼接的数组（多个数组用逗号隔开）
拼接好的数组
原有数组不变
所有主要浏览器都支持

`join`

var ary1 = ['a','b','c','d'];
var res = ary1.join('-'); // res=>'a-b-c-d'
var res = ary1.join(); // res=>'a,b,c,d'
console.log(ary1); // ['a','b','c','d'];

把数组里的每一项按照指定的分隔符拼接成一项字符串
参数是指定的分隔符（如果没有指定参数那么默认是逗号）
返回值是拼接好的字符串
原有数组不变
所有主要浏览器都支持

`reverse`

var ary = ['a','b','c','d'];
var res = ary1.reverse();
console.log(ary); // ['d','c','b','a'];
console.log(res); // ['d','c','b','a'];

倒序数组
不用参数
返回值是经过倒序的原有数组
原有数组顺序改变
所有主要浏览器都支持

`sort`( 参数变成了函数 )

var ary = [ 2 , 1 , 3 , 4 , 6 , 3 , 1 , 2 , 11 , 19 , 13 ];
var res = ary.sort(function(a,b){return a-b}); // 升序
var res = ary.sort(function(a,b){return b-a}); // 降序
console.log(ary); // [1, 1, 2, 2, 3, 3, 4, 6, 11, 13, 19
console.log(res); // [1, 1, 2, 2, 3, 3, 4, 6, 11, 13, 19
console.log(ary === res); // true

是把数组按照指定规则去排序（升序或降序）
参数就是规则，这个规则是一个函数（不加参数只能排序 10 以内的）
排好序的原有数组
原有数组顺序改变
所有主要浏览器都支持

sort其他排序用法

`indexOf`

var ary = ['b','c','a','d','a'];
var res = ary.indexOf('a');
console.log(ary); // ['b','c','a','d','a'];
console.log(res); // 2

查找某一项在数组是否出现，出现返回索引位置，没有返回-
参数就是查找的那一项
元素第一次出现的索引位置
原有数组不变
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	yes	yes	yes

`lastIndexOf`

var ary = ['b','c','a','d','a'];
var res = ary.lastIndexOf('a');
console.log(ary); // ['b','c','a','d','a'];
console.log(res); // 4

查找某一项在数组是否出现，出现返回索引位置，没有返回-
参数就是查找的那一项
元素最后一次出现的索引位置
原有数组不变
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	yes	yes	yes

`forEach`

let arr = [{ a: 1 }, {}];
arr.forEach(function(item, idx) {
item.b = idx;
});
console.log(arr); // [{a: 1 , b: 0 }, {b: 1 }]

循环遍历数组的每一项
- 是一个函数(必选)函数有三个参数
- item 循环时的每一项
- index 对应每一项的索引
- ary 原有数组
- 指定函数的this参数
undefined
对原数组操作有影响
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	1.5	yes	yes

`map`

var ary = ['b','c','a','d','a'];
var res = ary.map(function(item,index,ary){
return item+ 1
})
console.log(ary); // ["b", "c", "a", "d", "a"]
console.log(res); // ["b1", "c1", "a1", "d1", "a1"]

循环遍历数组的每一项

是一个函数(必选)函数有三个参数
item 循环时的每一项
index 对应每一项的索引
ary 原有数组
指定函数的this参数

每次return的值组成的新数组
原有数组不变
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	1.5	yes	yes

`filter`

var ages = [ 32 , 33 , 16 , 40 ];
function checkAdult(age) {
return age >= 18 ;
}
var res = ages.filter(checkAdult)
console.log(ages); // [32, 33, 16, 40]
console.log(res); // [32, 33, 40]

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
- callback 用来测试数组的每个元素的函数。
- 调用时使用参数 (element, index, array)。返回 true 表示保留该元素（通过测试），false 则不保留。接受三个参数
- element:当前在数组中处理的元素
- index:可选正在处理元素在数组中的索引
- array:可选调用了 filter 筛选器的数组
- 执行函数时的this指向
原有数组不变
通过测试的元素的集合的数组，如果没有通过测试则返回空数组
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	1.5	yes	yes

`some`

let arr = [ 1 , 2 , 3 , 4 , 5 ];
let arr1 = arr.some((item, index, arr) => {
return item >= 4 ;
});
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr1); //true

用于检测数组中的元素是否有满足指定的条件
- callback
- item 循环时每一项
- index 对应每一项的索引
- arr 原有数组
- 回调函数执行时的this指向
原有数组不变
布尔值（如果数组中有一个元素满足条件返回 true，否则返回 false）
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	1.5	yes	yes

`every`

const isBigEnough = (element, index, array) => {
return element >= 10 ;
};
let passed1 = [ 12 , 5 , 8 , 130 , 44 ].every(isBigEnough);
let passed2 = [ 12 , 54 , 18 , 130 , 44 ].every(isBigEnough);
console.log(passed1); // false
console.log(passed2); // true

用于检测数组所有元素是否都符合指定条件（通过函数提供）
- callback
- item 循环时每一项
- index 对应每一项的索引
- arr 原有数组
- 回调函数执行时的this指向
原有数组不变
布尔值（如果所有元素都通过检测返回 true，否则返回 false）
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	1.5	yes	yes

`reduce`

作用

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let arr = [ 1 , 2 , 3 ]
let num = arr.reduce(function(prev,next){
return prev*next
}, 1 );
console.log(arr); // [1,2,3]
console.log(num); // 6

可以作为一个高阶函数，用于函数的compose

function sum(a,b){
return a+b;
}
function toUpper(str){
return str.toUpperCase();
}
function add(str){
return str+'ab';
}
// 聚合函数es5写法
function compose(...fns){
return fns.reduce(function(prev,next){
return function(...args){
return prev(next(...args))
}
})
}

1 2	// 聚合函数es6进化版 let compose = (...fns) => fns.reduce((a,b)=> (...args)=>a(b(...args)))

1
2
3

let composefn = compose(add,toUpper,sum)
let res = composefn('a','b');
console.log(res); // 'ABab'

callback
prevent
current
currentIndex
arr
initialValue(可选)
1. 返回计算结果
2. 原有数组不变
3. 主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	3.0	yes	yes

reduce 模拟实现

Array.prototype.reduce = function(fn,prev){
for(let i = 0 ;i<this.length;i++){
if(prev!=null){
prev = fn(prev,this[i],i,this);
}else{
prev = fn(this[i],this[i+ 1 ],i+ 1 ,this);
i++;
}
}
return prev;
}

25 个数组reduce高级用法

`reduceRight`

接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值。
可以作为一个高阶函数，用于函数的compose
- callback
- prevent
- current
- currentIndex
- arr
- initialValue(可选)
返回计算结果
原有数组不变
主流浏览器兼容性（支持该方法的第一个浏览器版本号）

Chrome	IE	Firefox	Safari	Opera
yes	9	3.0	yes	yes

// reduceRight 实现聚合函数
let compose = (...fns)=>(...args)=>{
let fn = fns.pop();
let res = fn(...args);
return fns.reduceRight((prev,next)=> next(prev),res)
}

数组常用方法及兼容性总结

push

unshift

pop

shift

splice( 可以实现 push,pop,shift,unshift 的功能 )

slice

concat

join

reverse

sort( 参数变成了函数 )

indexOf

lastIndexOf

forEach

map

filter

some

every

reduce

reduceRight

`push`

`unshift`

`pop`

`shift`

`splice`( 可以实现 push,pop,shift,unshift 的功能 )

`slice`

`concat`

`join`

`reverse`

`sort`( 参数变成了函数 )

`indexOf`

`lastIndexOf`

`forEach`

`map`

`filter`

`some`

`every`

`reduce`

`reduceRight`