js数组循环常用的几种方法

js数组循环常用的几种方法

数组的filter的使用方法

filter循环：返回新数组，不会改变原数组，新数组由符合条件的数组组成。

let arr = [19, 29, 27, 20, 31, 32, 35];
let newArr = arr.filter((val) => {return val >= 30})
// 数组调用.filter()方法 - 传入一个函数体 (固定格式)
// 运行过程: filter会遍历数组里的每一项, 对每一项执行一次函数体(会把每个值传给形参)
// 作用: 每次遍历如果val值符合return的条件, 就会被filter收集起来
// 返回值: 当filter遍历结束以后, 返回收集到的符合条件的那些值形成的新数组
console.log(newArr);

forEach（） 方法对数组的每个元素执行一次给定的函数。（只能遍历数组）

forEach() 遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE，break无法跳出循环，retrun只能跳出当前循环，无法终止循环

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

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

map数组的循环方法 （只能遍历数组）

map循环：有返回值，支持return返回值，把每一次循环return返回的值组成一个新的数组，对原数组没有影响

<script>
  const arr = [1, 2, 3, 4, 5]
  const map = arr.map(x => x * 10)
  console.log(map)
</script>

every() 方法

every循环：给数组每一项都运行一个函数，如果每一项都符合条件，就返回true，否则返回false

注意： every() 不会对空数组进行检测，不会改变原始数组。

let ages = [32, 33, 16, 40];

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

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

some() 方法

some循环：给数组每一项都运行一个函数，同every相反，只要有一项符合条件，就跳出循环，返回true，否则返回false。

var ages = [3, 10, 18, 20];

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

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

结果：true

find ()

find循环：给数组每一项都运行一个函数，只要有一项符合条件，就跳出循环，返回第一个符合条件的元素，否则返回undefined。

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

结果：18

for … of循环

for of循环 ：ES6新增的循环方法，没有索引，它可以正确响应break、continue和return语句，而且，这个方法避开了for-in循环的所有缺陷。for-in循环虽然可以循环数组，但是会有好多坑，它主要用于循环对象，今天我总结的是数组的循环，就把for-in排除在外了

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

findIndex() 方法

findIndex() 方法数组中的每个元素都调用一次函数执行，返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1

let ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}