简介
常用方法
1.filter() - 创建一个新的数组，添加符合条件数据
注意：
1、不会对空数组进行检测
2、不会改变原始数组
3、有{} 必须有return
let agesList = [10, 20, 30, 40];
// 写法1
let newAgesList1 = agesList.filter(value => value > 20);
// 写法2 需要{} 和return
let newAgesList2 = agesList.filter(value => {
return value > 20;
});
// 完整写法 需要有return
let newAgesList3 = agesList.filter((value, index, arr) => {
return value > 20;
});
// 输出 [33, 40]
2.map() - 处理数组的每个元素，并返回处理后的新数组
写法1 - 改变原有数组
写法2：不改变原有数组
let listData = [{ size: 10 }, { size: 20 }];
// 写法1 - 改变原有数组
let newListData = listData.map(item => {
item.size = item.size + 5;
return item;
});
console.log('listData', listData); // 都是输出 { size: 15 }, { size: 25 }
console.log('newListData', newListData); // 都是输出 { size: 15 }, { size: 25 }
//-----------------------------------------------------------------------------------------------------
// 写法2：不改变原有数组
let newListData = listData.map(item => {
let newItem = {
ageNew: item.size + 5
};
return newItem;
});
console.log('listData', listData); // 都是输出 { size: 10 }, { size: 20 }
console.log('newListData', newListData); // 都是输出 { ageNew: 15 }, { ageNew: 25 }
3.forEach() - 遍历每个元素
注意
1、不改变原有数组
2、不支持 continue 、 break
3、使用 return 实现 continue 效果
let listData = [10, 20, 30];
let newListData = [];
listData.forEach(item => {
newListData.push(item + 2);
});
console.log('newListData', newListData); // 输出 [12, 22, 32]
let listData = [10, 20, 30];
let newListData = [];
listData.forEach((value, index, arr) => {
console.log(value, index, arr)
newListData.push(value + 2);
});
console.log('newListData', newListData); // 输出 [12, 22, 32]
// 输出
// 10 0 (3) [10, 20, 30]
// 20 1 (3) [10, 20, 30]
// 30 2 (3) [10, 20, 30]
4.find() - 查找符合条件的item
注意： 找不到返回undefined
let listData = ['a', 'b', 'c', 'd'];
let item1 = listData.find(value => value == 'b1');
if (item1) {
console.log('item1', item1); // 返回b
}
let item2 = listData.find((value, index, arr) => {
return index == 2; // 序号为1的
});
if (item2) {
console.log('item2', item2); // 返回c
}
5.findIndex() - 查找符合条件的下标index
注意： 找不到返回 -1
let listData = ['a', 'b', 'c', 'd'];
let index1 = listData.findIndex(value => value == 'd');
if (index1 != -1) {
console.log('index1', index1); // 返回 3
}
let index2 = listData.findIndex((value, index, arr) => {
return value == 'bbbb';
});
if (index2 != -1) {
console.log('index2', index2); // 返回 -1
}
let listData = ['a', 'b', 'c', 'd'];
let listStr1 = listData.join(); // listStr1 输出 a,b,c,d
let listStr2 = listData.join(''); // 输出 listStr2 abcd
let listStr3 = listData.join('/'); // listStr3 a/b/c/d
7.indexOf() - 搜索元素，返回下标index
注意：object对象必须指针一样才能查找
let listData = [10, 20, 30];
let value1 = listData.indexOf(30);
let value2 = listData.indexOf(101);
console.log('value1', value1); // 输出 2
console.log('value2', value2); // 输出 -1
let item1 = { age: 10 };
let item2 = { age: 20 };
let listData = [];
listData.push(item1);
listData.push(item2);
let item3 = { age: 20 };
let value1 = listData.indexOf(item2);
let value2 = listData.indexOf(item3);
console.log('value1', value1); // 输出 1 对象object必须等同一个指针
console.log('value2', value2); // 输出 -1 内容用一样也不行
8、splice(index, howmany, item1, ....., itemX) - 删除或指定index添加元素
注意：可以【删除】、【替换】、【添加】
// 删除index=1开始所有数据
let dataList = ['0aa', '1bb', '2cc', '3dd'];
dataList.splice(1);
console.log('dataList', dataList); // 返回["0aa"]
// 删除index=1开始1个数据
dataList = ['0aa', '1bb', '2cc', '3dd'];
dataList.splice(1, 1);
console.log('dataList', dataList); // 返回["0aa", "2cc", "3dd"]
// 删除index=1开始2个数据
dataList = ['0aa', '1bb', '2cc', '3dd'];
dataList.splice(1, 2);
console.log('dataList', dataList); // 返回["0aa", "3dd"]
// 删除并插入, 删除index=1开始2个数据, 并插入2个数据
dataList = ['0aa', '1bb', '2cc', '3dd'];
dataList.splice(1, 2, '4ee插入', '5ff插入');
console.log('dataList', dataList); // 返回["0aa", "4ee插入", "5ff插入", "3dd"]
// 只插入不删除,只插入2个数据
dataList = ['0aa', '1bb', '2cc', '3dd'];
dataList.splice(1, 0, '4ee插入', '5ff插入');
console.log('dataList', dataList); 返回["0aa", "4ee插入", "5ff插入", "1bb", "2cc", "3dd"]
9、sort() - 排序
比较两个值时，将值发送给比较函数，根据返回（负、零、正）进行排序。
举例：
比较 40 和 100 时，sort() 方法调用比较函数(40,100)
函数计算 40-100，并返回 -60（负值）sort 会将 40 排序为小于 100 的值
let list = [40, 100, 1, 5, 25, 10];
// 升序
list.sort((a, b) => {
return a - b;
});
console.log('list', list); // [1, 5, 10, 25, 40, 100]
// 降序
list.sort((a, b) => {
return b - a;
});
console.log('list', list); // [100, 40, 25, 10, 5, 1]
9.其他
concat() - 连接两个或多个数组，并返回结果
unshift() - 添加一个或多个元素到数组的【开头】，并返回新的长度
push() - 添加一个或多个元素到数组的【末尾】，并返回新的长度
pop() - 删除最后一个元素并返回删除的元素
10、例子：
元素置顶
let dataList = ['cat', 'pig', 'dog'];
let item = null;
let idx = -1;
dataList.forEach((value, index) => {
if (value == 'pig') {
item = value;
idx = index;
}
});
if (item && idx > 0) {
dataList.splice(idx, 1);
dataList.unshift(item);
}
console.log('dataList', dataList); //返回 ["pig", "cat", "dog"]
网友评论