前端数组方法汇总,暂不包含迭代器方法(不常用且舍近求远)，基本用不到的不列举。
一、Array.isArray 方法
描述： 1. 判断数组最好的方法
- 用法
const a = { name: "min"};
console.log(Array.isArray(a)); // false
二、Array.from 方法
描述： 1. 数组转换方法(很常用) 2. 第一个参数支持：伪数组对象(拥有length属性对象且key为"0","1"等)、可迭代对象
- 用法1 (转换类数组结构)
function say(){
const arr = Array.from(arguments);
console.log(arr); // [1,2,3]
}
say(1,2,3);
- 用法2 (转换String, Set, Map等结构)
/* String */
Array.from("min"); // ["m","i","n"];
/* Set */
const set = new Set([1, 2, 3, 1]);
Array.from(set); // [1,2,3]
/* Map */
const map = new Map([[1,2],[3,4],[5,6]]);
Array.from(map); // [[1,2],[3,4],[5,6]]
Array.from(map.keys()); // [1, 3, 5]
Array.from(map.values()); // [2, 4, 6]
- 用法3 (数组处理)
Array.from([1,2,3], v=> 2*v); // [2,4,6]
- 用法4 (简单构建数组)
Array.from({length: 5}, (item, index)=> 2*index); // [0, 2, 4, 6, 8]
三、Array.of 方法
描述： 1. 普通参数转数组
- 用法
Array.of(1,2,3); // [1,2,3]
- Array.of 方法实现
Array.of = function() {
return Array.prototype.slice.call(arguments);
};
四、push方法
描述： 1. 老牌栈方法 2. 数组尾部操作 3. 改变原有数组
- 用法
const list = [1,2,3]; // 备注：const 定义，不可变的为地址
list.push(4);
console.log(list); // [1,2,3,4]
list.push(5,6,7);
console.log(list); // [1,2,3,4,5,6,7]
五、pop方法
描述： 1. 老牌栈方法 2. 数组尾部操作 3. 改变原有数组
- 用法
const list = [1,2,3];
const value = list.pop();
console.log(value); // 3
console.log(list); // [1,2]
六、unshift方法
描述： 1. 老牌队列方法 2. 数组头部操作 3. 改变原有数组
- 用法
const list = [1,2,3];
list.unshift(4);
console.log(list); // [4,1,2,3]
list.unshift(5,6,7); // 与单个插入不同
console.log(list); // [5, 6, 7, 4, 1, 2, 3]
七、shift方法
描述： 1. 老牌队列方法 2. 数组头部操作 3. 改变原有数组
- 用法
const list = [1,2,3];
const value = list.shift();
console.log(value); // 1
console.log(list); // [2,3]
八、splice方法
描述： 1. 更加灵活的数组操作 2. 改变原有数组
- 用法 (参数1：删除位置下标， 参数2：删除个数， 参数3-N: 新增项)
const list = [1,2,3];
list.splice(1,2,7,8,9);
console.log(list); // [1, 7, 8, 9]
九、concat方法
描述： 1.数组连接 2.不改变原有数组
- 用法
const a = [1,2,3];
const b = [4,5,6];
console.log(a.concat(b)); // [1, 2, 3, 4, 5, 6]
console.log(a.concat("m", "i", b)); // [1, 2, 3, "m", "i", 4, 5, 6]
十、join 方法
描述： 1.转换为某一字符连接的字符串
- 用法
const a = [1,2,3];
console.log(a.join("-")); // "1-2-3"
十一、slice 方法
描述： 1.数组截取 2.不改变原有数组
- 用法(参数1：截取开始下标， 参数2：截取结束下标)( >=startIndex && < endIndex)
const list = [1,2,3,4,5,6];
const a = list.slice(2);
console.log(a); // [3, 4, 5, 6]
const b = list.slice(1, 5);
console.log(b); // [2, 3, 4, 5]
const c = list.slice(-2); // 等效于 slice(-2 + list.length)
console.log(c); // [5, 6]
const d = list.slice(-3,-1);
console.log(d); // [4, 5]
- 应用
function say(){
const arr = Array.prototype.slice.call(arguments);
console.log(arr); // [1,2,3]
}
say(1,2,3);
十二、reverse 方法
描述： 1. 颠倒数组 2.改变原有数组
- 用法1
const list = [1,2,3,4,5,6];
list.reverse();
console.log(list); // [6, 5, 4, 3, 2, 1]
- 用法2：颠倒数组类数组结构
const person = {
0: "hejiamin",
1: 27,
length: 2
}
Array.prototype.reverse.call(person);
console.log(person); // {0: 27, 1: "hejiamin", length: 2}
十三、sort 方法
描述： 1. 排序方法 2. 改变原有数组 3. v8内部采样插入排序+三路快速排序实现
- 用法1 (默认不指明参数function，采样Unicode位点排序)
const list = [13,12,9,80];
list.sort();
console.log(list); // [12, 13, 80, 9]
- 用法2 (定义function)
const list = [13,12,9,80];
list.sort((a,b)=> a-b);
console.log(list); // [9, 12, 13, 80]
备注：return 返回值 < 0, a排b之前；返回值 > 0, a排b之后；返回值 = 0, a和b位置不变；
十四、toString 方法
描述： 1. 返回逗号分割字符串
- 用法
const list = [1,2,3];
console.log(list.toString()); // 1,2,3
console.log(list); // [1,2,3]
十五、includes 方法
描述： 1. 判断数组中是否存在某一元素
- 用法 (参数1：查找数据， 参数2：从什么下标开始查找)
const list = ["min",1,"age"];
console.log(list.includes("min")); // true
console.log(list.includes("min", 1)); // false
十六、 indexOf方法
描述： 1. 查找数组中存在元素下标 2. 返回查找到的第一个下标 3.不存在返回-1
- 用法(参数1： 查找元素 ， 参数2：起始下标)
const list =[1,2,3,2];
console.log(list.indexOf(2)); // 1
- 思考
const persons = [ { name: "min", age: 21 }, { name: "hi", age: 23 }, { name: "hi", age: 23 }]
console.log(persons.indexOf({name: "hi",age: 23})) // -1 (=== 严格比较)
十七、 lastIndexOf方法
描述： 1. 逆向查找数组中存在元素下标 2. 返回查找到的第一个下标 3.不存在返回-1 4.默认从arr.length-1 开始查找
- 用法(参数1： 查找元素 ， 参数2：起始下标)
const list =[1,2,3,2];
console.log(list.lastIndexOf(2)); // 3
十八、fill 方法
描述： 1.填充数据 2.改变原有数组
- 用法(参数1： 填充内容， 参数2：开始下标， 参数3：结束下标)
Array(6).fill(1) // [1, 1, 1, 1, 1, 1]
[1,2,3,4,5,6].fill(0, 1, 2) // [1, 0, 3, 4, 5, 6]
十九、some 方法
描述：1.判断数组是否满足某项条件，一项满足即返回true
- 用法
[2,6,9,12,3].some((item,index)=> item>10) // true
二十、every 方法
描述：1.数组中每一项都满足条件才返回true
- 用法
[2,6,9,12,3].every((item,index)=> item>10) // false
二十一、forEach 方法
描述：1.遍历方法 2.每次循环总是返回undefined 3.不可链式调用
- 用法(参数1： callback, 参数2：thisArg)
const list = [1,2,3];
list.forEach((item,index, arr)=> {console.log(item)})
- 注意: 除抛出异常以外，没办法中止或跳出 forEach() 循环, (return, break, continue 关键字无效)
二十二、map 方法
描述：1. 用于生成新数组(不打算生成新数组，请用forEach) 2. map每轮循环必须配合return返回
- 用法(参数1： callback, 参数2：thisArg)
const list = [1,2,3];
const newList = list.map((item,index,arr) => 2*item);
console.log(newList); // [2,4,6]
console.log(list); // [1,2,3]
- 常见问题
const list = [1,2,3];
const newList = list.map(parseInt);
console.log(newList); // [1, NaN, NaN]
/* 真实过程： parseInt(string, radix) ---> list.map((item,index)=> parseInt(item,index)) */
二十三、find 方法
描述：1.数组查找方法返回找到内容 2. 返回满足条件的第一个值
- 用法：
const persons = [
{
name: "min",
age: 21
},
{
name: "hi",
age: 23
},
{
name: "hi",
age: 23
}
]
console.log(persons.find((item,index,arr)=> item.age === 23)); // {name: "hi", age: 23}
二十四、findIndex 方法
描述：1.数组查找方法返回找到内容下标 2. 返回满足条件的第一个下标值 3. 不存在返回-1
- 用法：
const persons = [
{
name: "min",
age: 21
},
{
name: "hi",
age: 23
},
{
name: "hi",
age: 23
}
]
console.log(persons.findIndex((item,index,arr)=> item.age === 23)); // 1
二十五、 reduce方法
描述：1.迭代执行
-
用法(参数1：reducer函数：(累计器,当前值,当前索引,源数组); 参数2：初始值-可不传)
-
说明： 如果没有初始值：reduce会从索引1地方开始执行,以索引0处为初始值，所以需满足索引0处存在值
-
用法：求和
const list = [3,1,2];
const total = list.reduce((now,item,index)=> now+item);
console.log(total);
- 用法：对象
const list = ["name","age"];
const values = ["min", 21]
const obj = list.reduce((now,item,index)=> {
now[item]= values[index];
return now
},{})
console.log(obj); // {name: "min", age: 21}
- 手动实现
Array.prototype.myReduce = function(fn, initialValue) {
var arr = Array.prototype.slice.call(this);
var res, startIndex;
res = initialValue ? initialValue : arr[0];
startIndex = initialValue ? 0 : 1;
for(var i = startIndex; i < arr.length; i++) {
res = fn.call(null, res, arr[i], i, this);
}
return res;
}
二十六、 reduceRight方法
描述：1.逆向迭代执行 2. 用法与reduce一致
- 用法(参数1：reducer函数：(累计器,当前值,当前索引,源数组); 参数2：初始值-可不传)
- 说明： 如果没有初始值：reduce会从索引(arr.length-2)地方开始执行,以索引(arr.length-1)处为初始值
- 用法：
const list = ['1', '2', '3', '4', '5'];
const left = list.reduce(function(now, item) { return now + item; });
const right = list.reduceRight(function(now, item) { return now + item; });
console.log(left); // "12345"
console.log(right); // "54321"
二十七、 filter方法
描述：1.过滤筛选方法 2.不改变原有数组
- 用法
const list = [{age: 1}, {age: 2}, {age:3}];
const filterList = list.filter(item=> item.age> 2);
console.log(filterList); // [{age:3}]
二十八、 flat方法
描述： 1. 数组扁平化方法
- 用法 (参数：depth提前数组深度，默认值为1)
const list = [0,1, [2], [[3]]];
console.log(list.flat()); // [0, 1, 2, [3]]
console.log(list.flat(2)); // [0, 1, 2, 3]
- 常用(二维数组转为一维数组)
const list = [[1,2,3], [4,5,6], [7,8,9]];
console.log(list.flat()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
