本文已参与「新人创作礼」活动,一 起开启掘金创作之路。
for循环 (ES5)
优点
- 可以递增循环也可以递减循环
- 可以使用break、continue控制是否跳出循环 例:
let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘,‘e‘];
for (var i = 0; i < list.length; i++) {
console.log(list[i])
}
// a、b、c、d、e
let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘];
for (var i = list.length - 1; i > 0; i--) {
if (i === 0) {
continue;
}
if (i === 2) {
break;
}
console.log(list[i])
}
// e、d
while(){} (ES5)
while 循环会在指定条件为真时循环执行代码块。 优点
- 没有兼容问题
- 可以使用break、continue 例:
let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
let i = 0;
while (i < list.length){
console.log(list[i]);
i++
} //‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘
do{}while() (ES5)
do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环 优点
- 没有兼容问题
- 可以使用break、continue 例:
let list = [‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘];
let i = 0;
do {
console.log(list[i])
i++;
} while (i < list.length) //‘a‘, 12, ‘c‘, ‘d‘, ‘e‘, ‘a‘
forEach (ES5)
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。 优点:
- 函数式编程方便使用
- 返回值是undefined 缺点:
- 有兼容性问题,不兼容ie9以下 例:
let list = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘];
list.forEach((item,index,ary) => {
console.log(`item:${item}----index:${index}----ary:${ary}`)
})
every(ES5)
用于检测数组所有元素是否都符合指定条件 every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。 注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
缺点:
- 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 4, 5, 11];
const result = arr.every((item) => item < 10)
console.log(result);
// false
some(ES5)
用于检测数组中的元素是否满足指定条件 some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。 注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
缺点:
- 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 4, 5, 11];
const result = arr.some((item) => item < 10)
console.log(result);
// true
indexOf(ES5)
返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。 注意: indexOf() 方法区分大小写。
优点: 无兼容性问题。
例:
var arr = [1, 2, 3, 4, 5, 11];
const result = arr.indexOf(11)
console.log(result);
// 5
lastIndexOf(ES5)
返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索 注意: 该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。
如果没有找到匹配字符串则返回 -1 。
注意: lastIndexOf() 方法是区分大小写的! 优点: 无兼容性问题。
例:
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.lastIndexOf(11)
console.log(result);
// 3
filter(ES5)
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。 缺点:
- 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.filter((item) => item > 3);
console.log(result);
// [11, 5]
map(ES5)
返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
按照原始数组元素顺序依次处理元素。 注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。 缺点:
- 有兼容性问题,不兼容ie9以下 例:
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.map((item,) => item * 2);
console.log(result);
// [2, 4, 6, 22, 10, 2]
reduce(ES5)
接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 缺点:
- 有兼容性问题,不兼容ie9以下 优点:
- 累计计算非常好用 注意: reduce() 对于空数组是不会执行回调函数的。
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.reduce((total, item) => total + item)
console.log(result);
//23
for...in (ES5)
for/in 语句用于循环对象属性。 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。主要用来遍历对象 优点:
- 可以循环对象
- 兼容所有浏览器 例:
var obj = { name: '张三', age: 20, sex: '男' }
for (let key in obj) {
console.log(key);
}
// '张三','age','男'
find(ES6)
返回通过测试(函数内判断)的数组的第一个元素的值。 为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined 缺点:
- 兼容性差,不兼容ie
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.find(item => item > 5)
console.log(result);
//11
findIndex(ES6)
返回传入一个测试条件(函数)符合条件的数组第一个元素位置。 findIndex() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1 缺点:
- 兼容性差,不兼容ie
var arr = [1, 2, 3, 11, 5, 1];
const result = arr.findIndex(item => item > 5)
console.log(result);
//3
for...of(ES6)
可以迭代数组、类数组以及任何可以迭代的对象(
maps、sets、DOM集合) 缺点:
- 兼容性差,不兼容ie 例:
var arr = [1, 2, 3, 11, 5, 1];
for (let item of arr) {
console.log(item);
}
//1, 2, 3, 11, 5, 1