ES5新增的数组方法

  • 1.数组方法
  • 1.1 forEach()
  • 1.2 filter()
  • 1.3 some()
  • 1.4 map()
  • 1.5 every()
  • 1.6.6 filter和some、forEach()和some()、every()和some()的区别


1.数组方法

迭代(遍历)方法:forEach()、filter()、some()、map()、every()

1.1 forEach()

foreach()方法:用于遍历数组,调用数组的每个元素,并将元素传递给回调函数进行处理
基本语法

array.forEach(function(currentValue, index, arr))

参数

  • currentValue: 数组当前项的值(必须)
  • index: 数组当前项的索引(可选)
  • arr: 数组对象本身(可选)
// forEach 迭代(遍历) 数组
        let arr = [1, 2, 3]
        let sum = 0
        arr.forEach(function(value, index, array) {
            console.log('每个数组元素:' + value)
            console.log('每个数组元素的索引号:' + index)
            console.log('数组本身' + array)
            sum += value
        })
        console.log(sum)

控制台输出:

ES数组类型 es5数组的方法_迭代

1.2 filter()

filter() 方法 创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组基本语法

array.filter(function(currentValue, index, arr))

参数
参数:

  • currentValue: 数组当前项的值
  • index:数组当前项的索引
  • arr:数组对象本身
// filter 筛选数组
        var arr = [12, 66, 4, 88, 3, 7];
        var newArr = arr.filter(function(value, index) {
            // return value >= 20;
            return value % 2 === 0;
        });
        console.log(newArr); // 它直接返回一个新数组

ES数组类型 es5数组的方法_ES数组类型_02


注意:它直接返回一个新数组

1.3 some()

some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素基本语法

array.some(function(currentValue, index, arr))

参数
参数:

  • currentValue: 数组当前项的值
  • index:数组当前项的索引
  • arr:数组对象本身
var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
        console.log(flag1);
        // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
        // 2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

1.4 map()

map() 方法返回一个原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
map 在这里不是“地图”的意思,而是“映射”的意思。那map()的作用可以理解成 原数组被“映射”成对应的新数组。基本语法

array.some(function(currentValue, index, arr))

参数

  • currentValue: 数组当前项的值
  • index:数组当前项的索引
  • arr:数组对象本身
var arr = [1,2,3,4]
   var arrOfSquares = arr.map(function(item) {
   return item * item 
   })
   console.log(arrOfSquares)
// 添加说明:原数组[1,2,3,4]被“映射”成对应的新数组[1,4,9,16]

ES数组类型 es5数组的方法_数组_03


注意

function(currentValue, index, arr){}函数中需要有return 值,不然数组所有项都被映射成了undefined

var arr = [1,2,3,4]
   var arrOfSquares = arr.map(function(item) {
   })
   console.log(arrOfSquares)

ES数组类型 es5数组的方法_前端_04

1.5 every()

every()方法用于检测数组中的所有元素是否都满足指定条件
基本用法:

array.every(function(currentValue,index,arr), thisValue)
  • function(currentValue,index,arr) :第一个参数为一个回调函数,必传,数组中的每一项都会遍历执行该函数
  • currentValue:必传,当前项的值
  • index:选传,当前项的索引值
  • arr:选传,当前项所属的数组对象
  • 第二个参数 thisValue 为可选参数,回调函数中的this会指向该参数对象。
var array = [82, 99, 88, 80, 50]
            var flag = array.every(function(currentValue, index, arr) {
              //数组中的每个元素的值都要大于80,才会返回true
              return currentValue > 80; 
            })
            console.log(flag) //false
⭐every()使用注意点⭐:
every() 不会对空数组进行检测
every() 不会改变原始数组

1.6.6 filter和some、forEach()和some()、every()和some()的区别

1.filter()方法和some()方法的区别
(1). filter 是查找满足条件的元素,返回的是一个数组,而且是把所有满足条件的元素返回回来
(1). some 也是查找满足条件的元素是否存在,但返回的是一个布尔值,如果查找到第一个满足条件的元素就终止循环。

forEach()和some()的区别
(1). 在forEach 里面 return 不会终止迭代
(2). 在some()方法里面 遇到 return true 就是终止遍历 迭代效率更高

var arr = ['skyblue', 'deeppink', 'blue', 'pink'];
        // 1. forEach迭代 遍历
        // arr.forEach(function(value) {
        //     if (value == 'deeppink') {
        //         console.log('吖,我找到这个元素啦');
        //         return true; // 在forEach 里面 return 不会终止迭代
        //     }
        //     console.log(‘好棒吖’);
        // })
        // 如果查询数组中唯一的元素, 用some方法更合适,
        arr.some(function(value) {
            if (value == 'deeppink') {
                console.log('吖,我找到这个元素啦');
                return true; //  在some()方法里面 遇到 return true 就是终止遍历 迭代效率更高
            }
            console.log('好棒吖');
        });

every()和some()的区别 (1). every():一假即假,必须所有都返回 true才会返回true,哪怕有一个false,就会返回false
(2). some():一真即真, 只要其中一个为true 就会返回true

var arr = [1, 2, 3, 4, 5]
      console.log(arr.every(function (item, index) {
            console.log('item=' + item + ',index=' + index)
            return item > 2
        }))
        var arr = [1, 2, 3, 4, 5]
      console.log(arr.some(function (item, index) {
            console.log('item=' + item + ',index=' + index)
            return item > 2
        }))

ES数组类型 es5数组的方法_迭代_05