十二种循环

最新推荐文章于 2022-05-11 17:34:41 发布

五毒幽泉

最新推荐文章于 2022-05-11 17:34:41 发布

阅读量326

点赞数

分类专栏： JavaScript面试题文章标签： javascript

本文链接：https://blog.csdn.net/CZW2181119177/article/details/119610236

版权

JavaScript面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、for

二、forEach

三、for (x in array){} 循环遍历对象的属性

四、while 循环会在指定条件为真时循环执行代码块。

五、do ... while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

一、for

<script>
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
	document.write(cars[i] + "<br>");
}
// BMW
// Volvo
// Saab
// Ford
</script>

二、forEach

用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

<body>

<p>点击按钮列出数组的每个元素。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>

<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];

function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
// index[0]: 4
// index[1]: 9
// index[2]: 16
// index[3]: 25
</script>

</body>

菜鸟教程演示：https://www.runoob.com/try/try.php?filename=tryjsref_foreach

三、for (x in array){} 循环遍历对象的属性

<body>

<p>点击按钮循环对象属性。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction() {
    var person = {fname:"John", lname:"Doe", age:25}; 
    
    var text = "";
    var x;
    for (x in person) {
        text += person[x] + " ";
    }
    document.getElementById("demo").innerHTML = text;
}
// John Doe 25
</script>

</body>

四、while 循环会在指定条件为真时循环执行代码块。

<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4
</body>

五、do ... while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	do{
		x=x + "该数字为 " + i + "<br>";
	    i++;
	}
	while (i<5)  
	document.getElementById("demo").innerHTML=x;
}
</script>

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4
</body>

六、every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

<body>

<p>点击按钮检测数组的所有元素是否都大于 18 :</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
</script>

false
</body>

七、some（）

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

<body>

<p>点击按钮检测数组中是否有元素大于 18。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
</script>

true
</body>

八、filter()

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

<body>

<p>点击按钮获取数组中大于 18 的所有元素。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
</script>

32,33,40
</body>

九、find()

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

<body>

<p>点击按钮获取数组中年龄大于 18 的第一个元素。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<p><strong>注意:</strong> IE 11 及更早版本不支持 find() 方法。</p>

<script>
var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
</script>

18
</body>

十、map() 浅遍历

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

<body>

<p>点击按钮获取数组元素的平方根。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}
</script>

2,3,4,5
</body>

十一、flatMap() 数组深度遍历

先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

// 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
// 参数2：指定遍历函数中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

十二、reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

<body>

<p>点击按钮计算数组元素相加后的总和。</p>
<button onclick="myFunction()">点我</button>

<p>数组元素总和: <span id="demo"></span></p>

<script>
var numbers = [65, 44, 12, 4];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
</script>

125
</body>

五毒幽泉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
十二种循环

目录一、for二、forEach三、for (xin array){} 循环遍历对象的属性四、while循环会在指定条件为真时循环执行代码块。五、do ... while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。六、every()七、some（）八、filter()九、find()十、map() 浅遍历十一、flatMap() 数组深度遍历十二、reduce()一、for..
复制链接

扫一扫