一、数组的迭代方法
常用的数组迭代方法：every，some，filter，map，foreach
1.every 方法
every语法接收两个参数，以第一个参数是每一个数据项都要执行的函数, 第二个参数是运行函数的作用域对象(可选)，其中数据项执行的函数接收三个参数，第一个是当前数据项，第二个是当前下标值，第三个是数组本身。如果每个数据项都返回true，则every方法返回true，否则返回false。如下：
const arr = [1, 2, 3, 4, 5, 6];
const res1 = arr.every((item: any, inde: number, array) => {
console.log('item=' + item + ',index=' + inde + ',array=' + array);
return item > 3;
});
console.log(res1);
打印结果
item=1,index=0,array=1,2,3,4,5,6
false
2、some方法
some方法接收两个参数，第一个参数是每个数据项都要执行的函数和运行该函数的作用域对象（可选），其中数据项执行的函数接收三个参数，第一个是当前数据项，第二个是当前下标，第三个是数组本身。如果有一个数据项返回true，则some方法返回true，否则返回false。如下：
const arr = [1, 2, 3, 4, 5, 6];
const res = arr.some((item: any, inde: number, array ) => {
console.log( 'item=' + item + ',index=' + inde + ',array=' + array );
return item > 3;
});
console.log(res);
打印结果
item=1,index=0,array=1,2,3,4,5,6
item=2,index=1,array=1,2,3,4,5,6
item=3,index=2,array=1,2,3,4,5,6
item=4,index=3,array=1,2,3,4,5,6
true
3.filter方法
filter方法接收两个参数，第一个参数是每个数据项都要执行的函数和运行该函数的作用域对象（可选），其中数据项执行的函数接收三个参数，第一个是当前数据项，第二个是当前下标，第三个是数组本身。filter方法返回所有返回true的数据项组成的新数组。如下：
const result = arr.filter((item, inde, array) => {
return item > 2;
});
console.log(result);
打印结果
[3,4,5,6]
4、forEach方法
forEach方法接收两个参数，第一个参数是每个数据项都要执行的函数和运行该函数的作用域对象（可选），其中数据项执行的函数接收三个参数，第一个是当前数据项，第二个是当前下标，第三个是数组本身。forEach方法不返回值，跟for循环一样，可以在forEach中进行一些操作
arr.forEach((item, inde, array) => {
// 一些操作
});
5、map方法
map方法接收两个参数，第一个参数是每个数据项都要执行的函数和运行该函数的作用域对象（可选），其中数据项执行的函数接收三个参数，第一个是当前数据项，第二个是当前下标，第三个是数组本身。map方法返回每个数据项经过相应的操作后组成的新数组。如下：
const result3 = arr.map((item, inde, array) => {
return item * 2;
});
console.log(result3);
打印结果：
[2,4,6,8,10,12]
二、数组的遍历
1.for...in 2.forEach 3.map 4.for循环遍历 5.for...of(es6)
三、数组中元素的增、删、改、查
1. 增加
1>. splice 多个参数（起始位置、删除长度、插入的元素1、元素2...）
const arr = [1, 2, 3, 4, 5, 6];
arr.splice(1, 2, 9, 10, 15 , 17);
console.log(arr);
打印结果
[1, 9, 10, 15, 17, 4, 5, 6]
2>. unshift：将参数添加到原数组开头，并返回数组的长度
const arr = [{ "name": "张三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];
const b = arr.unshift(-2,-1);
console.log('arr=', arr);
console.log('b=', b);
打印结果：
arr= [-2,-1,1,2,3,4,5]
b=7
3>. push：将参数添加到原数组末尾，并返回数组的长度
var a = [1,2,3,4,5];
var b = a.push(6,7);
//a：[1,2,3,4,5,6,7] b：7
2. 删除
1>. splice方式 两个参数（起始位置、删除长度）
const arr = [1, 2, 3, 4, 5, 6];
arr.splice(1, 2);
console.log(arr);
打印结果
[1, 4, 5, 6]
2>. delete 删除掉数组中的元素后，会把该下标出的值置为undefined,数组的长度不会改变
const arr = [1, 2, 3, 4, 5, 6];
delete arr[1];
console.log(arr);
答应结果
[1, empty, 3, 4, 5, 6]
3>. shift() 删除数组的第一项
const arr = [{ "name": "张三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];
const b = arr.shift();
console.log('arr=', arr);
console.log('b=', b);
打印结果
arr=[{name: "王明", gender: "男", age: 20}1: {name: "李四", gender: "男", age: 20}]
b= {name: "张三", gender: "男", age: 20}
4>. pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
const arr = [{ "name": "张三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];
const b = arr.pop();
console.log('arr=', arr);
console.log('b=', b);
打印结果
arr= [{name: "张三", gender: "男", age: 20}1: {name: "王明", gender: "男", age: 20}]
b= {name: "李四", gender: "男", age: 20}
3. 数组元素修改（替换）
splice方式 三个参数（起始位置、修改长度、新元素）
const arr = [1, 2, 3, 4, 5, 6];
arr.splice(1, 2, 9);
console.log(arr);
打印结果
[1, 9, 4, 5, 6]
4. 数组元素的查找
4.1 根据下标查找
const arr = [1, 2, 3, 4, 5, 6];
const a = arr[3];
console.log(a);
答应结果
4
4.2 indexOf 函数 arr.indexOf(find,start); find:要找的内容 start:查找开始下标，可选参数 函数返回值：查找数据所在的下标，如果没找到，返回-1
const arr = [1, 2, 3, 4, 5, 6];
const a1 = arr.indexOf(3, 1);
const a2 = arr.indexOf(3, 5);
console.log(a1, a2);
答应结果
2 -1
4.3 find()和findIndex()的函数使用
find() 主要是在数组--对应属性--对应的对象
findIndex() 主要是在数组中对象对应的下标
const arr =[{ "name": "张三","gender": "男","age": 20},{ "name": "王明","gender": "男","age": 20},{ "name": "李四","gender": "男","age": 20}];
const a1 = arr.find(item => item.name === '王明').gender;
const a2 = arr.find((element) => (element.name == '李四'));
const a3 = arr.findIndex((element)=>(element.name =='李四'));
console.log(a1);
console.log(a2);
console.log(a3);
打印结果
男
{name: "李四", gender: "男", age: 20}
2
四、数组的其他操作
1、concat：返回一个新数组，是将参数添加到原数组中构成的
var b = a.concat(6,7); //a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]
2、reverse：将数组反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]
3、sort(orderfunction)：按指定的参数对数组进行排序
var a = [1,2,3,4,5];
var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
4、slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5];
var b = a.slice(2,5);
输出结果： a：[1,2,3,4,5] b：[3,4,5]
5. join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
var a = [1,2,3,4,5];
var b = a.join("|");
输出结果：a：[1,2,3,4,5] b："1|2|3|4|5"
网友评论