for
- 通过遍历数组元素的索引，获得对应的数组值
-
var array = [1, 2] for (var i = 0; i < array.length; i++) { if (array[i] === 1) { break; // continue; // return false;使用return将报错 } } console.log(i) //由于break则符合条件后中断循环得到i为0for of
- 遍历的是数组元素值，可以遍历数组，伪数组(argument)，Map，Set，String等
for(var o of array) {
if(o === 1) {
break;
}
}
console.log(o) //由于break则符合条件后中断循环得到o为1for in
- 一般用于对象遍历，由于其遍历输出顺序不固定，不建议用于遍历数组。
- 对象遍历的是键名，数组遍历时则是数组的索引值
- 若对象值是undefined，null则不执行函数循环
- 会遍历出原型上的属性，可使用hasOwnProperty过滤（或使用Object.keys()）
var obj = {name: 1,data: '111'}
for(var key in obj) {
if (obj[key] === 1) {
break;
// continue;
// return false;
}
}
console.log(key) //由于break则符合条件后中断循环得到key为nameswitch
switch 语句用于基于不同的条件来执行不同的动作。
switch 语句通常与 break 或 default 关键字一起使用
switch(expression) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}do/while
do/while 循环是 while 循环的变体. 在检查条件是否为真之前，该循环会执行一次代码块，然后如果条件为真的话，就会重复这个循环。
var text = ""
var i = 0;
do {
text += "<br>数字为 " + i;
i++;
} while (i < 5);
document.getElementById("demo").innerHTML = text;//text 输出结果为:
//数字为 0
//数字为 1
//数字为 2
//数字为 3
//数字为 4for，for of 和 for in
for，for of 和 for in都可以识别到continue和break
1、continue：指的是跳出当前循环，即不执行continue后的语句，直接进入下次循环。
2、break：指的是跳出for循环本身，不再进行之后的循环，但可以执行for循环之外的语句。（break语句只有在循环语句和switch语句中使用才是合法的，经常用来跳出循环，不会执行后续循环，但是会继续执行循环之后的）
3、return：指的是跳出for循环，且不执行for循环之外的语句，直接跳出当前函数，返回return后的值。
foreach
在forEach的设计中并没有中断循环的设计，而使用try-catch包裹时，当循环体过大性能会随之下降，这是无法避免的，所以抛出异常可以作为一种中断forEach的手段
let arr = [0, 1, "stop", 3, 4];
try {
arr.forEach(element => {
if (element === "stop") {
throw new Error("forEachBreak");
}
console.log(element); // 输出 0 1 后面不输出
});
} catch (e) {
console.log(e.message); // forEachBreak
};for：常用于执行次数确定的循环。先判断，后执行；
while：当型循环，常用于循环次数不确定时。先判断，后执行；
do-while：直到型循环，常用于循环次数不确定时。先执行，后判断；
foreach： es6新增数组方法，增强for循环，常用于对数组或集合的遍历。foreach不能识别continue和break。缺点：（1.除抛出异常之外，没有其他方法可以停止或中断循环2.在需要使用数组或者集合索引时，foreach就不好用了。）
我们可以在遍历数组时使用for..of..，在遍历对象时使用for..in..，而官方也在forEach文档下列举了其它一些工具函数，这里不做过多展开：
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.every()
Array.prototype.some()8种在JavaScript数组中查找指定元素的方法
1、Array.prototype.includes()
includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。
该方法支持两个参数valueToFind，fromIndex（可选），第一个参数是‘需要查找的元素值’,第二个参数是‘从哪个索引处开始查找’，第二个参数如果为负数，则会按升序从 array.length + fromIndex 的索引开始查找（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。
var a = [1,2,3,4,5,6]
a.includes(2) // true
a.includes(2,3) // false
a.includes(5,-2) // true
a.includes(5,-1) // false2、 Array.prototype.indexOf()
indexOf() 方法返回指定元素在数组中的第一个索引，如果不存在，则返回-1。
该方法支持两个参数searchElement，fromIndex （可选），第一个参数是‘要查找的元素’，第二个参数是‘开始查找的索引位置’，如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。
如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。
注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0。
var array = [2, 5, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 03、Array.prototype.lastIndexOf()
astIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
该方法支持两个参数 searchElement，fromIndex（可选），第一个参数是‘被查找的元素’。第二个参数是‘从此位置开始逆向查找’，默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。
如果该值大于或等于数组的长度，则整个数组会被查找。
如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。
如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
var array = [2, 5, 9, 2];
array.lastIndexOf(2); // 3
array.lastIndexOf(7); // -1
array.lastIndexOf(2, 3); // 3
array.lastIndexOf(2, 2); // 0
array.lastIndexOf(2, -2); // 0
array.lastIndexOf(2, -1); // 34、Array.prototype.some()
some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
语法：arr.some(callback(element[, index[, array]])[, thisArg])「参数」：
callback：用来测试每个元素的函数，接受三个参数：
-
element 数组中正在处理的元素。
-
index 可选，数组中正在处理的元素的索引值。
-
array 可选，被遍历的数组本身。
thisArg：可选，执行 callback 时使用的 this 值。
下面的例子检测在数组中是否有元素大于 10。
function isBiggerThan10(element, index, array) {
return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true还可以使用箭头函数实现相同的效果。
[2, 5, 8, 1, 4].some(x => x > 10); // false
[12, 5, 8, 1, 4].some(x => x > 10); // true5、 Array.prototype.every()
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
该方法的参数与 Array.prototype.some() 方法一样，这里就不再介绍了。
它们两不同的是，some()只要数组中有一个元素满足条件就为真，every()要全部满足条件才为真。检测数组中的所有元素是否都大于 10。
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true6、Array.prototype.filter()
filter() 方法创建一个新数组, 包含通过所提供函数实现的测试的所有元素。
该方法的参数与 some(),every()相同，callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。
下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 35].filter(isBigEnough); // filtered is [12, 130, 35]
7、Array.prototype.find()
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
用对象的属性查找数组里的对象。
var inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'orange', quantity: 5}
];
function findOranges(fruit) {
return fruit.name === 'orange';
}
console.log(inventory.find(findOrange));
// { name: 'orange', quantity: 5 }8、Array.prototype.findIndex()
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
该方法参数与 find() 相同，只是一个返回该元素，一个返回该元素在数组中的索引值。查找 name 为 orange 的对象在数组中的的索引。
var inventory = [
{name: 'apple', quantity: 2},
{name: 'banana', quantity: 0},
{name: 'orange', quantity: 5}
];
function findOrange(fruit) {
return fruit.name === 'orange';
}
console.log(inventory.findIndex(findOrange));//2总结
为了方便查找和记忆，我将这些方法总结成了一张表格
| 方法名 | 参数 | 描述 | 返回值 |
|---|---|---|---|
| includes | searchElement，fromIndex | 判断数组中是否包含指定的值 | 布尔值 |
| indexOf | searchElement，fromIndex | 查找元素在数组中首次出现的索引值 | 索引值，或者-1 |
| lastIndexOf | searchElement，fromIndex | 查找元素在数组中最后一次出现的索引值 | 索引值，或者-1 |
| some | callback[, thisArg] | 判断数组中是否有符合条件的元素 | 布尔值 |
| every | callback[, thisArg] | 判断数组中是否每个元素都符合条件 | 布尔值 |
| filter | callback[, thisArg] | 返回符合条件的所有元素组成的数组 | 数组 |
| find | callback[, thisArg] | 返回数组中符合条件的第一个元素 | 数组中的元素，或者undefined |
| findIndex | callback[, thisArg] | 返回符合条件的第一个元素的索引 | 索引值，或者-1 |
扫一扫
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
