数组的一些方法总结

209 阅读4分钟

一、filter 

定义:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 

注意:filter方法不会对空数组进行检测,不会改变原数组。 

语法: Array.filter(function(currentValue, index, arr){}, this.value) 

参数说明: 

 1. function(currentValue, index, arr) =》 (函数参数)必须。函数,数组中的每个元素都会执行这个函数; 

     currentValue : 必须,当前元素的值; 

     index : 可选,当前元素的索引值; 

     arr : 可选,当前元素所属的数组对象; 

 2. this.value =》 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值; 如果省略了 thisValue ,"this" 的值为 "undefined"。 

例子: let ages = [24, 32, 54]

 let new_agesA = ages.some((item) => item > 30 ) 

 let new_agesB = ages.some((item) => item < 20 ) 

 console.log(new_agesA) // [32, 54]

 console.log(new_agesB) // []  

二、some 

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

注意: some方法不会对空数组进行检测,不会改变原数组。 

语法: Array.some(function(currentValue, index, arr){}, this.value) 

参数说明: 同filter方法一样 

 例子: let ages = [24, 32, 54] 

 let new_agesA = ages.some((item) => item > 30 ) 

 let new_agesB = ages.some((item) => item < 20 ) 

 console.log(new_agesA) // true 

 console.log(new_agesB) // false 

 三、 find 

 定义: find方法用于检测数组中的元素是否满足指定条件(函数提供; find方法会依次执行数组的每个元素: 如果有一个元素满足条件,则表达式会返回当前元素,剩余的元素不会在执行检测; 如果没有满足条件的元素,则返回 undefined 

 注意: find方法不会对空数组进行检测,不会改变原数组。

 语法: Array.find(function(currentValue, index, arr){}, this.value) 

 参数说明: 同filter方法一样 

 例子: let ages = [24, 32, 54] 

 let new_agesA = ages.find((item) => item > 30 ) 

 let new_agesB = ages.find((item) => item < 20 ) 

 console.log(new_agesA) // 32 

 console.log(new_agesB) // undefined 

 四、findIndex

 定义: findIndex方法用于检测数组中的元素是否满足指定条件(函数提供; findIndex方法会依次执行数组的每个元素: 如果有一个元素满足条件,则表达式会返回当前元素,剩余的元素不会在执行检测; 如果没有满足条件的元素,则返回 -1 

 注意:  findIndex方法不会对空数组进行检测,不会改变原数组。

 语法:   Array.findIndex(function(currentValue, index, arr){}, this.value)

参数说明: 同filter方法一样 

 例子:  let ages = [24, 32, 54] 

 let new_agesA = ages.findIndex((item) => item > 30 ) 

 let new_agesB = ages.findIndex((item) => item < 20 ) 

 console.log(new_agesA) // 32 

 console.log(new_agesB) // -1 

 五、 reduce 

 定义: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 reduce() 可以作为一个高阶函数,用于函数的 pipe。 

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

 语法: Array.reduce(function(total, currentValue, index, arr){}, initValue) 

 参数说明: 

 1. function(currentValue, index, arr) =》 (函数参数)必须。函数,数组中的每个元素都会执行这个函数; 

     total : 必须,初始值,或者计算后的结果; 

     currentValue : 必须,当前元素的值; 

     index : 可选,当前元素的索引值; 

     arr : 可选,当前元素所属的数组对象; 

 2. initValue =》 可选。设置初始值; 

 例子: let nums = [1, 2, 3, 4] 

         let sum = nums.reduce((a, b) => a + b ) 

         console.log(sum) // 10 

 进阶用法: 

 1. 数组去重 

 let arrg = [1,2,3,4,4,1] 

 let newArrs = arrg.reduce((pre,cur)=>{ 

     return !pre.includes(cur) ? pre.concat(cur) :  pre

 },[]) 

 console.log(newArrs) // [1, 2, 3, 4]

 2. 计算数组中每个元素出现的次数 

 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; 

 let nameNum = names.reduce((pre,cur)=>{ 

     (cur in pre) ? pre[cur]++ : pre[cur] = 1

     return pre 

 },{}) 

 console.log(nameNum);  //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1} 

 3. 实现pipe函数 

 // 从左到右执行 

 function pipe(...fns){

      return function(x){

      return fns.reduce(function(arg,fn){

             return fn(arg);

       },x)

      } 

 } 

 let splitIntoSpaces = str => str.split(' '); 

 let count = array => array.length; 

 let countWordsPipe = pipe(splitIntoSpaces, count); 

 let result = countWordsPipe('hello your reading about composition')

 console.log(result) // 5 

 六、 reduceRight 

 reduceRight用法和reduce方法相同,

 唯一不同点: 与reduce执行方向相反: 

 reduce执行方向: 从左到右 

 reduceRight执行方向: 从右到左 

 进阶用法: 实现compose函数:

 // 从右到左执行

function compose(...fns){

      return x => {

           return fns.reduceRight((arg,fn) => {

                   return fn(arg)

          },x)

     }

}

let splitIntoSpaces = str => str.split(' ');

let count = array => array.length; 

let countWordsCompose = compose(count,splitIntoSpaces); 

let results = countWordsCompose('hello your reading about composition')  console.log(results) // 5