- [-] 内的参数代表可选参数
添加或删除元素
1.splice
- 可以用于添加,删除 或插入元素。 返回值是被删除的数组元素组成的数组
- 语法:arr.splice(start [,deleteCount, el1, ..., elN ])
- 返回值:被删除的数组元素所组成的数组
- 会破坏原数组
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(2);//只输入开始索引 会从该索引开始删除后面全部元素(包括当前索引)
console.log(arr); //['I', 'study']
----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(2, 2);//从索引2开始删除两个元素
console.log(arr); // ['I', 'study', 'now']
----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(0, 3, "三只羊", "四只羊"); //从索引0开始删除3个元素并加入"三只羊","四只羊"
console.log(arr); // ['三只羊', '四只羊', 'right', 'now']
----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(1, 0, "三只羊", "四只羊"); //要删除的元素个数设置为0 就可以完成插入效果
console.log(arr); // ['I', '三只羊', '四只羊', 'study', 'JavaScript', 'right', 'now']
----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(-2); //索引为负是被允许的,他们从数组末尾开始计算 从倒数第二个元素开始删除直到最后一个元素
console.log(arr); //['I', 'study', 'JavaScript']
2.slice
- 将所有从start到end(不包括end)的数组元素复制到一个新数组
- 语法:arr.slice([start],[end])
- 返回值:返回一个新数组
let arr = ["I", "study", "JavaScript", "right", "now"];
console.log(arr.slice(1, 3));//['study', 'JavaScript']
--------------------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
console.log(arr.slice(-3, -1)); //['study', 'JavaScript'] 索引可以为负从末尾开始数
--------------------------------------------------------------------
arr.slice()//不加参数的时候可以用于赋值一个新的数组 与原数组内容相同地址不同
--------------------------------------------------------------------
arr
3.concat
- 用于将数组与其他值进行拼接
- 语法:arr.concat(arg1, arg2...)
- 返回值:返回拼接后的新数组
let arr = [1, 2, 3, 4];
console.log(arr.concat([3, 2, 1], "三只羊"));//[1, 2, 3, 4, 3, 2, 1, '三只羊']
遍历:forEach
- 允许对数组每个元素都运行一次函数
- 语法:arr.forEach((item, index, array) => {do smoething with item})
- 返回值:该函数的返回值(如果有返回)会被抛弃和忽略
let arr = [1, 2, 3, 4];
arr.forEach((item) => {
console.log(item + 1);//控制台依次输出 2 3 4 5
});
console.log(arr);//[1, 2, 3, 4] 原数组不会被破坏
搜索
1. indexOf / lastIndexOf 和 includes
- 语法:
-
- arr.indexOf( item, from) 从索引from 开始搜索item 如果找到则返回索引,未找到返回-1
- arr.lastIndexOf与与arr.indexOf类似 但是从右向左查找
- arr.includes(item, from) 从索引from开始搜索item,如果找到则返回true,未找到返回false
let arr = [1, 2, 3, 4, "三只羊"];
console.log(arr.indexOf("三只羊")); // 4
console.log(arr.indexOf("四只羊")); // -1
console.log(arr.includes(1)); //true
console.log(arr.includes(5)); //false
-----------------------------------------------------------------------
let arr = [1, 2, 3, 4, 1];
console.log(arr.indexOf(1)); // 0 从左向右查找
console.log(arr.lastIndexOf(1)); // 4 从右向左查找
2.find 和 findeIndex / findLastIndex
- 用于在对象数组中查找具有特定条件的对象
- 语法:
let result = arr.find(function(item, index, array)) {//如果返回true则返回item并停止迭代 对于假值的情况则返回undefined}) - findIndex与find类似,但是不反回元素本身,返回索引 如果没找到则返回-1
- findLastIndex与findIndex类似 但从右向左搜索
let users = [
{ id: 1, name: "John" },
{ id: 2, name: "Pete" },
{ id: 3, name: "Mary" },
];
let user = users.find((item) => item.id == 1);
console.log(user);//{id: 1, name: 'John'}
3. filter
- 与find类似,但是可以返回一个或多个符合条件的元素
- 语法
let results = arr.filter((item, index, array) => {//如果返回true则返回item并停止迭代 对于假值的情况则返回undefined})
let users = [
{ id: 1, name: "John" },
{ id: 2, name: "Pete" },
{ id: 3, name: "Mary" },
];
let user = users.filter((item) => item.id > 1);
console.log(user); // {id: 2, name: 'Pete'} {id:3, name:"Mary"}
转换数组
1.map
- 对数组每个元素都调用函数并返回结果数组
let users = ["ABC", "BC", "C"];
let lengths = users.map((item) => item.length);
console.log(lengths); //[3, 2, 1]
2.sort
- 对数组元素顺序进行更改
- 语法:arr.sort((a,b)=> a-b)
- 会破坏原数组
let arr = [1, 3, 2, 0, 5];
arr.sort((a, b) => a - b);// a-b 升序排序, b-a降序排序
console.log(arr);//[0, 1, 2, 3, 5]
3.reverse
- 翻转数组
- 语法:arr.reverse()
- 会破坏原数组
let arr = [1, 3, 2, 0, 5];
arr.reverse();
console.log(arr); //[5, 0, 2, 3, 1]
4.split
- 将一个字符串分割成数组
- 语法:str.split(delim) delim是给定的分隔符
- 返回值:一个数组
let str = "haha-lala-huhu";
console.log(str.split("-"));// ['haha', 'lala', 'huhu']
5.join
- 将数组拼接成字符串
- 语法:str.join('delim') 没有分隔符的时候默认用','拼接
- 返回值:返回一个字符串
let arr = [1, 2, 3, 4, 5];
console.log(arr.join("-")); //1-2-3-4-5
6.reduce
- 当我们需要遍历数组的时可以用formach for 或for..of 当我们需要遍历并返回每个元素的数据时可以用map
arr.reduce与上述方法差不多,但稍微复杂一点。它用于根据数组计算单个值
- 语法:
let value = arr.reduce(() => {accumulator, item, index, array}){},[innitial])
-
- accumulator 上一个函数调用的结果,第一次等于innitial(如果提供了innitial的话)
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, item) => sum + item, 5);//累加数组 innitial为5
console.log(result);//20