最详细的JS学习笔记(连载)第二章、数组方法（数组遍历）

9、数组遍历

数组.forEach()

用于调用数组的每一个元素，并将元素传递给回调函数,不能用return，没有返回值。函数从头到尾把数组遍历一遍。

语法：array.forEach(function(currentValue, index, arr), thisValue) 

有三个参数分别是：数组元素，元素的索引，数组本身(如果是一个参数就是数组元素，也就是数组的值。

参数  currentValue      必需。当前元素

index     可选。当前元素的索引值。

arr       可选。当前元素所属的数组对象。

thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空，"undefined" 会传递给 "this" 值   

var  ary=[1,2,3,4,5,6]

ary.forEach(function(v){

    cosole.log(v);    // 1,2,3,4,5,6

});

// 和for循环一样；没有返回值;

  var arr = [111,222,333,444,555];

  var sum = 0;

  var aaa = arr.forEach(function (element,index,array) {

    console.log(element); // 输出数组中的每一个元素

    console.log(index); // 数组元素对应的索引值

    console.log(array); // 数组本身 [111, 222, 333, 444, 555]

    sum += element; //数组中元素求和;

  });

  console.log(sum); // 数组元素加起来的和

  console.log(aaa);//undefined；没有返回值 所以返回undefined

数组.map()  循环数组中的每一项，让每一项按照指定的函数操作，将原有的数组进行修改(适合修改数组某一项)

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。按照原始数组元素顺序依次处理元素。

语法：array.map(function(currentValue,index,arr), thisValue)

参数：

function(currentValue, index,arr)   必须。函数，数组中的每个元素都会执行这个函数函数参数:

currentValue    必须。当前元素的值

index           可选。当期元素的索引值，也就是第几个数组元素

arr             可选。当期元素属于的数组对象

    thisValue       可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

//对原数组元素进行乘2后再赋值给新数组

    let arr = [1, 2, 3, 4, 5];

        let sum = arr.map(function(val) {

            return val * 2;

        }) 

console.log(sum);  //2 4 6 8 10   计算完成后，映射一个新数组

// 对数组中每一项运行回调函数，返回该函数的结果组成的新数组

//  return什么新数组中就有什么; 不return返回undefined; 对数组二次加工

  var arr = [111,222,333,444,555];

  var newArr = arr.map(function (element, index, array) {

    if(index == 2){

      return element; // 这里return了 所以下面返回的值是333

    }

    return element*100; // 返回的元素值都乘上100后的值

  })

  console.log(newArr); // [11100, 22200, 333, 44400, 55500]

需要注意的点

1.map()的遍历会跳过空位置，但是它会保留空的元素！

const arr = [1, , , 3, ,2 ,]

console.log(arr.map((item) => item*2))

2.当有parseInt的时候,map显示NaN

          let arr = [1,2,3,4,5,6]

          console.log(arr.map(parseInt))

为什么会这样？

答：parseInt有两个参数(parse,radix),如果可能，该函数会把传入的parse转换为数字，map会把index的值传给parseInt的radix参数。

那怎么避免这种情况的发生？答：我在这里介绍一下我在一本书上看到的一个函数unary   。这个函数的作用是让多个参数的函数只写一个参数

const unary = (fn) =>fn.length === 1 ? fn : (arg) => fn(arg)

例子一：

const unary = (fn) =>fn.length === 1 ? fn : (arg) => fn(arg)

        btn.addEventListener('click', () => {

          let arr = [1,2,3,4,5,6]

          console.log(arr.map(unary(parseInt)))

for in  用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)   (适合遍历对象)

    语法： for(val in obj){}

参数  val：变量  指定的变量可以是数组元素，也可以是对象的属性。

obj：对象  

for…in 与字符串

    您还可以使用 for…in 循环来迭代字符串值。例如，

const string = 'code';

for (let i in string) {

    console.log(string[i]);

}

// c o d e

for…in 与数组

for...in 声明用于对数组或者对象的属性进行循环/迭代操作。

对于数组迭代出来的是数组元素，对于对象迭代出来的是对象的属性；

var arr = ["a", "b", "2", "3", "str"];

        for (val in arr) {

            console.log(val);        //索引  0 1 2 3 4

          console.log(arr[val]);  //a b 2 3 str

            }

var obj={ 

w:"wen", 

j:"jian", 

b:"bao" 

}

for(val in obj){

console.log(val);            // w  j   b  属性名

console.log(obj[val]);       //wen   jian   bao    属性值

}

判断对象是否为数组/对象的元素/属性：        格式：(变量 in 对象)

当"对象"为数组时，"变量"指的是数组的"索引"；当"对象"为对象是，"变量"指的是对象的"属性"。

var arr = ["a","b","2","3","str"];

console.log (('b' in arr))   //true

var obj={ 

         w:"wen", 

         j:"jian", 

         b:"bao" 

    }

console.log(2 in obj);   //false

for of()    遍历可迭代对象(数组、集合、映射、字符串等)不能遍历JSON

for-of循环不支持普通对象，但如果你想迭代一个对象的属性，你可以用for-in循环(这也是它的本职工作)或内建的Object.keys()方法：

语法：

for (element of iterable) {

        // body of for...of

}

iterable - 一个可迭代对象(数组、集合、字符串等)。

element - 可迭代的项。代码理解为：对于 iterable 中的每个 element，运行循环体。

for…of 与数组

    for…of 循环可用于遍历数组。例如，

const students = ['John', 'Sara', 'Jack'];

for ( let element of students ) {

    console.log(element);

}

// John Sara    Jack

    在上面的程序中，for…of 循环用于遍历 students 数组对象并显示其所有值。

for…of 与字符串

    您可以使用 for…of 循环来遍历字符串值。例如，

const string = 'code';

for (let i of string) {

    console.log(i);

}

//c o d e

for…of 与 Set

    您可以使用 for…of 循环遍历 Set 元素。例如，

const set = new Set([1, 2, 3]);

for (let i of set) {

    console.log(i);

}

//1 2 3

for…of 与 Map

    您可以使用 for…of 循环遍历 Map 元素。例如，

let map = new Map();

map.set('name', 'Jack');

map.set('age', '27');

for (let [key, value] of map) {

    console.log(key + '- ' + value);

}

//name- Jack        age- 27

用户定义的迭代器

    您可以手动创建迭代器并使用 for…of 循环遍历迭代器。例如，

const iterableObj = {

    [Symbol.iterator]() {

        let step = 0;

        return {

            next() {

                step++;

                if (step === 1) {

                    return { value: '1', done: false};

                 }

                else if (step === 2) {

                    return { value: '2', done: false};

                }

                else if (step === 3) {

                    return { value: '3', done: false};

                }

                return { value: '', done: true };

            }

        }

    }

}

for (const i of iterableObj) {

 console.log(i);

}

//1 2 3

for…of 与生成器

    由于生成器是可重用的，所以可以以更简单的方式实现迭代器。然后你可以使用 for…of 遍历生成器。例如，

function* generatorFunc() {

    yield 10;

    yield 20;

    yield 30;

}

const obj = generatorFunc();

for (let value of obj) {

    console.log(value);

}

//10 20 30

for…of Vs for…in

for…of	for…in
for…of 循环用于遍历 iterable 的值。	for…in 循环用于遍历对象的键。
for…of 循环不能用于遍历对象。	你可以用 for…in 来遍历一个可迭代的数组和字符串，但你应该避免将 for…in 用于 iterable

数组.filter() 用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter() 不会对空数组进行检测；不会改变原始数组

//  对数组中每一项运行回调函数，该函数返回结果是true的项组成的新数组

//   新数组是有老数组中的元素组成的，return为ture的项;

语  法: array.filter(function(currentValue,index,arr), thisValue)

返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

  //只要是奇数，就组成数组;(数组中辨别元素)

  var arr = [111,222,333,444,555];

  var newArr = arr.filter(function (element, index, array) {

    if(element%2 === 0){

      return true;

    }else{

      return false;

    }

  })

  console.log(newArr); // [222, 444]

// 对数组进行过滤，筛选出年龄大于 18岁的数据

const arr = [

    {

        name: 'tom1',

        age: 23

    },

    {

        name: 'tom2',

        age: 42

    },

    {

        name: 'tom3',

        age: 17

    },

    {

        name: 'tom4',

        age: 13

    },

]

const res = arr.filter(item => item.age > 18);

console.log(res);  //[{name: 'tom1',age: 23},{name: 'tom2',age: 42}]

console.log(arr);

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

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

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

如果没有满足条件的元素，则返回false。

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

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

语  法: 数组.some(function (element, index, array){ })

  var arr = [111,222,333,444,555];

  var bool = arr.some(function (ele,i,array) {

    if(ele%3 == 0){  //判断：数组中有3的倍数

      return true;

    }

    return false;

  })

  alert(bool); //true ; 有一个成功就是true

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

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

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

如果所有元素都满足条件，则返回 true。

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

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

语  法: 数组.every(function (element, index, array){ })

var arr = [111,222,333,444,555];

  arr.every(function (a,b,c) {

    console.log(a);  //元素

    console.log(b);  //索引值

    console.log(c);  //数组本身;

    console.log("-----");  //数组本身;

    //数组中元素赋值：c[b] = 值;   a=有时候无法赋值;

    return true;

  });

//every返回一个bool值，全部是true才是true；有一个是false，结果就是false

  var bool = arr.every(function (element, index, array) {

    //判断：我们定义所有元素都大于200;

    //if(element > 100){

    if(element > 200){

      return true;

    }else{

      return false;

    }

  })

  alert(bool); //false

---

本人是以网络视频与网络文章的方式自学的，并按自己理解的方式总结了学习笔记。有不正确之处请各位高手多多指点，一起学习进步。【VX：czlingyun    暗号：CSDN】