js循环基础

Derlii

已于 2023-08-03 15:34:49 修改

阅读量85

点赞数

文章标签： javascript 前端开发语言

于 2023-07-29 22:32:25 首次发布

本文链接：https://blog.csdn.net/Derlii/article/details/131999722

版权

1. 循环

1.1 for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

for(let 初始化变量;条件表达式;条件控制语句)
{
   //循环体
}

案例：

输入10句 "早上好"

<script>
//基本写法
for(var i = 1; i<=10; i++  )
    {
         console.log('早上好');
    }
// 用户输入次数
var num = prompt('请输入次数:');
for(var i = 1; i<= num ;i++)
    {
        console.log('早上好');
    }
</script>

1.2 for in循环

for in循环是用来遍历对象的。要知道JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。（注意：遍历时不仅能读取对象自身上面的成员属性，也能遍历出对象的原型属性）

<script>
let obj = {a:1, b:2, c:3};
for (let prop in obj) {    //prop指对象的属性名
console.log(prop, obj[prop]);
}
</script>

输出为：

1.3Array forEach循环

forEach循环里面没办法用break跳出循环。而且在IE中无法实现，需要做兼容处理。)

<script>
let arr = ['123','sfdf','hjtghrt'];
arr.forEach(function (value, index) {
    console.log(value,index);
});
</script>

输出为：

1.4 for of循环

这个方法避开了for-in循环的所有缺陷。而且，它可以正确响应break、continue和return语句。

<script>
let arr = ['123','sfdf','hjtghrt'];
for(let item of arr) {
    console.log(item);
}
</script>

输出为：

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。但是for of也有一个致命伤，就像例子看到的，没有索引。对，这是优点也是缺点。遍历数组对象，直接就是item.属性(或者item[属性]),而不用像for循环那样arr[index].属性(arrindex)。但是你有的时候真的就得用到index。只能把数组转成Map()。如果真的需要用到index，还是换成forEach吧。

1.5 Array map（）

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象

<script>
let arr = [1,2,3];
let tt = arr.map(function(i){
 console.log(i)
 return i*2;
})
</script>

输出为：

1.6 Array filter（）

创建一个新数组，其中包含通过所提供函数实现测试的所有元素

语法：var newArray = arr.filter(callback(element[,index[,array]])[,thisArg])

callback:
	用来测试数组中的每个元素的函数；返回true表示该元素通过测试，保留该元素，false则不保留。他接受三个参数：
		element：数组中当前正在处理的元素。
		index：正在处理元素在数组中的索引
		array：调用了filter的数组本身
thisArg：
	执行callback时，用于this的值

返回值：

一个新的、由通过测试的元素组成的数组，如果没有任何元素通过测试，则返回空数组

1.7 while 循环

执行思路：

先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

执行循环体代码

循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
	console.log(cars[i])
	i++;
};
</script>

输出为：

注意：

使用 while 循环时一定要注意，它必须要有退出条件，否则会称为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

1.8 do while循环

执行思路：

先执行一次循环体代码
再执行表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码
先执行再判断循环体，所以dowhile循环语句至少会执行一次循环体代码

需求：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问

<script>
do {
	var love = prompt('你爱我吗？');
} while (love != '我爱你');
	alert('登录成功');
</script>

结果：

输入不爱

进入循环

输入我爱你

显示登录成功

1.9 some（）

some() 方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

注意：

some() 不会对空数组进行检测。
some() 不会改变原始数组。

语法：

实例1：
 
        let arr = [10, 21, 32, 45, 5];
        let flag = arr.some(item => {
            if (item == 0) {
                return item;
            }
        });
        console.log(flag); //输出结果false
 
实例2：
 
        let arr = [1, 22, 37, 34, 45];
        let flag = arr.some(item => {
            if (item == 1) {
                return item;
            }
        });
        console.log(flag); //输出结果true

返回值：

some() 方法有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测，所有元素都不满足条件时才返回false

some一般使用场景大多都是用在：判断一个字段是否存在在某个数组中

1.10 every（）

every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true；只要有一个不满足就返回false；

注意：

若收到一个空数组，此方法在一切情况下都会返回true

语法：

实例1：
 
        let arr = [10, 20, 30, 40, 52];
        let flag = arr.every(item => item < 60);
        console.log(flag); //输出结果true
 
实例2：
 
        let arr = [11, 21, 31, 42, 51];
        let flag = arr.every(item => item < 51);
        console.log(flag); //输出结果false

返回值：

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

1.11 reduce（）

对数组中的每个元素执行一个由你提供的reducer函数(升序执行)，将其结果汇总为单个返回值

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：执行数组中的每个值（如果没有提供initaValue）的函数，包含四个参数：
	accmulator：累计器累计回调的返回值；它是上一次调用回调时返回的累积值
	currentValue：数组中处理的元素
	index：数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始
	array：调用reduce（）的数组

返回值：

函数累计处理的结果

1.12 reduceRight ()

方法接受一个函数作为累加器和数组的每个值（从右到左）将其减少为单个值

语法：

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：一个回调函数，用于操作数组中的每个元素，它可接受四个参数：
	accumulator：累加器，上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果initiaValue存在，累加器即为initiaValue，否则须为数组中的最后一个元素
	currentValue：当前元素，当前被处理的元素
	index：数组中当前被处理的元素的索引
	array：调用reduceRight（）的数组
initialValue：首次调用 callback 函数时，累加器 accumulator 的值。如果未提供该初始值，则将使用数组中的最后一个元素，并跳过该元素。如果不给出初始值，则需保证数组不为空

返回值：执行之后的返回值