js 循环

2023-01-12 14:45:53 浏览数 (2)

这是我参与8月更文挑战的第26天，活动详情查看:8月更文挑战

1. for循环最常用

代码语言：javascript复制
const arr=[1,33,444,6,7];
for (let i=0;i<arr.length;i  ){
    console.log(arr[i]);
}

2. forEach()

2.1 三个参数

function(currentValue,index,arr)

  • currentValue 必填 当前元素
  • index 可选 当前元素的索引
  • arr 可选 当前元素所属数组对象

2.2 遍历普通数组

代码语言：javascript复制
let arr = ["aaa","bh","word"]; 
arr.forEach(function(item,index,arr){ 	
  console.log(item,index,arr);
})

2.3 遍历对象类型数组

代码语言：javascript复制
let arr = [{"province":"ln","cityId":12},{"province":"sh","cityId":122}]; 
arr.forEach(function(item,index,arr){
            console.log(item.province,index,arr);
        })

2.4 是否改变原数组

（1）基本数据类型 不改变const array = [1, 2, 3, 4];

代码语言：javascript复制
array.forEach(ele => {
   ele = ele * 3
})
console.log(array); // [1,2,3,4]

（2）引用类型 -> 类似对象数组 改变原数组

代码语言：javascript复制
const objArr = [{
    name: 'wxw',
    age: 22
}, {
    name: 'wxw2',
    age: 33
}]
objArr.forEach(ele => {
    if (ele.name === 'wxw2') {
        ele.age = 88
    }
})
console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]

（3）引用类型 -> 改变整个单次循环的item 不改变

代码语言：javascript复制
const changeItemArr = [{
    name: 'wxw',
    age: 22
}, {
    name: 'wxw2',
    age: 33
}]
changeItemArr.forEach(ele => {
    if (ele.name === 'wxw2') {
        ele = {
            name: 'change',
            age: 77
        }
    }
})
console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]

3. map() 方法

map---》 映射 即原数组被“映射”成新的数组 。为一个回调函数，数组中的每个元素都会执行这个函数。

  • map 不会对空数组检测
  • map返回新数组，不会改变原数组

3.1 三个参数

function(currentValue,index,arr)

  • currentValue 必填 当前元素
  • index 可选 当前元素的索引
  • arr 可选 当前元素所属数组对象

（1）回调函数中使用parseInt

代码语言：javascript复制
let arr = [1.0,2.2,3]; 
let newArr = arr.map(function(item,index,arr){  
console.log(parseInt(item),arr)  // 打印遍历的值及原数组 	
return parseInt(item) }) 
console.log(arr)   // 原数组并不改变值 
console.log(newArr) // 新的数组经过parseInt处理

（2）parseInt()被作为回调函数 被传入了 currentValue,index,arr三个参数

代码语言：javascript复制
let arr = [1.0,2.2,3]; // [parseInt(1,0),parseInt(2.2,1),parseInt(3,2)))] 
let newArr = arr.map(parseInt)
console.log(arr)
console.log(newArr)

parseInt的第二个参数为数字基数，即几进制

  • 省略该参数或值为0，则按照十进制解析
  • 以“0x”或“0X”开头 按16进制
  • 此参数小于 2 或者大于 36，则 parseInt() 将返回NaN 四、for in 方法 for in 是es5标准，此方法遍历数组效率低，主要用来循环遍历对象的属性

1.遍历数组 获得的是索引

代码语言：javascript复制
let arr = [1.0,2.2,3];
for(let i in arr){            //i是索引
console.log(arr[i])
}

3.2 遍历对象 获得的是key

代码语言：javascript复制
let arr ={"aaa":12,"bbb":233};
for(let i in arr){
console.log(i);     // aaa    bbb
console.log(arr[i]);   // 12 233
}

4. for in 方法

for in 是es5标准，此方法遍历数组效率低，主要用来循环遍历对象的属性

4.1 遍历数组 获得的是索引

代码语言：javascript复制
let arr = [1.0,2.2,3];
for(let i in arr){            //i是索引
console.log(arr[i])
}

4.2 遍历对象 获得的是key

代码语言：javascript复制
let arr ={"aaa":12,"bbb":233};
for(let i in arr){
console.log(i);     // aaa    bbb
console.log(arr[i]);   // 12 233
}

5. for of 方法

是es6新增

5.1 对于数组直接使用

代码语言：javascript复制
let arr = [1,8,9,10];
for(let value of arr ){
    console.log(value);
}

5.2 对于普通对象就要使用

代码语言：javascript复制
Object.keys()let arr ={"aaa":12,"bbb":233};
for(let key of Object.keys(arr)){
console.log(arr[key]);
}

Object.values()

代码语言：javascript复制
et arr ={"pp":123,"dd":99};
console.log(Object.values(arr));        // [123,99]
ecmascript 编程算法

0 人点赞