[TOC]
for
⭐️⭐️⭐️⭐️⭐️⭐️
break、continue、async等皆正常使用
let array = [10, 20, 30, 40];
for (let i = 0; i < array.length; i++) {
if(array[i] === 20) continue;
if(array[i] === 40) break;
console.log(array[i])
}
// 输出 10 30
let arrayObj = [
{a: 10, b: 11},
{a: 20, b: 21},
{a: 30, b: 31},
];
let j = 0;
for (; j < arrayObj.length; j++)
{
// TODO...
}
forEach
对数组的每个元素执行一次提供的函数。总是返回undefined；可以使用return来跳过当前循环；
- forEach返回永远是 undefined，内部的return与foreach无关
- forEach使用async和await是无效的，它的内部实现是直接调用回调方法
callback();如有需要可以用for...of - break和continue 无效
let array = [10, 20, 30, 40];
let arrayObj = [
{a: 10, b: 11},
{a: 20, b: 21},
{a: 30, b: 31},
];
array.forEach(val=>{
console.log(val);
});
array.forEach((val, index)=>{
console.log(val, index);
});
// 使用return跳过当前循环
array.forEach((item, idx) => {
if(item === 20) return
console.log(array[idx])
})
// 输出 10, 30, 40
for…in
for-in语句循环遍历对象的(可枚举)属性
- for … in是为遍历对象属性而构建的
- 不建议与数组一起使用，数组可以用Array.prototype.forEach()和for … of
- break和continue 可用
let obj = {a: 10, b: 11, c: 12}
for (let key in obj) {
console.log(key, obj[key]);
}
/*
输出
a 10
b 11
c 12
*/
let array = [10, 20, 30, 40];
for (let index in array) {
console.log(index, array[index]);
}
/*
输出
0 10
1 20
2 30
3 40
*/
let arrayObj = [
{a: 10, b: 11},
{a: 20, b: 21},
{a: 30, b: 31},
];
for (let index in arrayObj) {
console.log(index, arrayObj[index]);
}
/*
输出
0 {a: 10, b: 11}
1 {a: 20, b: 21}
2 {a: 30, b: 31}
*/
for…of
- ES6新增
- 不推荐用来遍历对象{}，遍历对象可以使用 for in
- 可以使用async+await
- break和continue 可用
// 遍历数组
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
for (let value of arr) {
console.log(value);
}
// a b c d e f
// 遍历字符串
let str = "Hello World!";
for (let value of str) {
console.log(value);
}
// H e l l o W o r l d !
// 遍历数组对象; 无法知道index，可以用entries() 方法
// entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)
let arrayObj = [{"name": "Clark", "surname": "Kent", "age": "36"}]
for (let [key, value] of arrayObj.entries()) {
console.log(key, value);
}
// 输出
// 0 {name: 'Clark', surname: 'Kent', age: '36'}
Array.map
Array.map()和Array.forEach()是常用的数组遍历方法
- map() 方法*返回一个全新的数组**
- map() 不会改变原始数组
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
let newArr = arr.map((currentValue, index, arr) => {
return new-${currentValue}
})
console.log(newArr) // ['new-a', 'new-b', 'new-c', 'new-d', 'new-e', 'new-f']
Map,Set
- ES6新增
let set = new Set();
set.add("10").add("20").add("30").add("40");
for (let val of set) {
console.log(val);
}
console.log("--------------------");
var map = new Map();
map.set("a",100).set("b",200).set("c",300);
for(let [index, val] of map) {
console.log(index, val);
}
/*结果
10
20
30
40
--------------------
a 100
b 200
c 300
*/
forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined；
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组；
过滤、筛选
some
array.some(function(currentValue,index,arr), thisValue)
- some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
- some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素，则返回false。
注意：
- some() 不会对空数组进行检测。
- some() 不会改变原始数组。
let ages = [3, 10, 18, 20];
let isHas = ages.some((val)=>{
return val >= 18;
})
console.log(isHas);
// 输出 true
every
array.every(function(currentValue,index,arr), thisValue)
- every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
- every() 方法使用指定函数检测数组中的所有元素
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
filter
array.filter(function(currentValue,index,arr), thisValue)
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num, idx) => {
return num > 5;
});
console.log(res); // [6, 7, 8, 9, 10]
findIndex
- 返回符合条件的数组第一个元素位置
- 如果没有符合条件的则返回 -1
let ages = [3, 10, 18, 20];
let idx = ages.findIndex((currentValue, index) => {
return currentValue > 10
})
console.log(idx) // 2
Array.from()
对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
console.log(Array.from('foo'));
// ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// [2, 4, 6]
// 数组去重
let arr = [1,1,2,2,4,4,4,5];
function unique(arr){
return Array.from(new Set(arr));
}
console.log(unique(arr));
// [1, 2, 4, 5]