JavaScript学习日记 : Day22 - 数组方法(二)

1. 过滤数组 filter

filter()方法返回一个新数组，包含通过callback function测试的所有element。
语法如下:

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

thisArg为可选参数，执行callback时，用於指定this的值。

const arr1 = [1, 4, 5, 6, 2, 3, 8, 9, 0];

const arr2 = arr1.filter((item, index, array) => {
  return item > 5;
});
console.log(arr2);//>> [6, 8, 9]

callback函数只要return true就会保留当前的element。

2. 查找方法 find

find()方法会返回通过callback function测试的第一个值，如果没有就返回undefined。

语法如下:

var item = arr.find(callback(element[, index[, array]])[, thisArg])

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const value = arr.find((item, index, array) => {
    return item > 5
});
console.log(value); //>> 6

与find类似的方法是findIndex()，区别在於find返回值，而findIndex返回index，如果没有就返回-1。

3. some

some()方法测试数组中是不是有任何一个element通过测试，如果有的话返回true。

语法如下:

arr.some(callback(element[, index[, array]])[, thisArg])

如果对空array进行测试，任何状况下都是返回fasle。

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const isTrue = arr.some((item, index, array) => {
  return item > 5;
});
console.log(isTrue); //>> true

与filter和find相比，除了返回值有区别外，还有一个区别是:如果原数组中存在被删除或是没有被赋值的索引，则callback function不会在该element上调用。

const arr = new Array(4);
arr[0] = 1;
const isTrue = arr.some((item,index) => {
    console.log(`test ${index}`)
    return item > 5;
});
console.log(isTrue); //>> false

上面的例子只有在index = 0的element callback有调用。

4. sort

语法:

var newArray = arr.sort([compareFunction]);

参数:

compareFunction: 可选，指定一个函式来定义排序顺序。假如省略此参数，阵列将根据各个元素转为字串後的每一个字元之 Unicode 编码位置值进行排序。

let arr = [1, 4, 5, 6, 2, 3, 8, 9, 0];
arr.sort((a, b) => {
  return a - b;
});
console.log(arr);
//>> [0, 1, 2, 3, 4, 5, 6, 8, 9]

sort()的compare function接收两个参数，这两个参数会按照function的返回值进行排序:

• 如果返回值小於0，a会排在b前面
• 如果返回值大於0，a会排在b後面
• 如果相等，则a与b的相对位置不变

let arr = [2, 40, 11, 5, 10];
console.log(arr.sort());
//>> [10, 11, 2, 40, 5]

上述例子中，因为没有传入callback function，所以在Unicode中，1在2前面，所以10在2前面，以此类推。

5. reduce

reduce()方法对数组中的每一项执行所提供的call back function後，最後回传一个单个值。

语法:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数说明:

1. accumulator : 等於上一次call back function的返回值，或是initialValue。
2. currentValue : 数组中正在处理的element。
3. currentIndex : 可选，当前正在处理的element的index，如果提供了initialValue，则index从0开始，否则从1开始。
4. array : 可选，调用reduce的数组。
5. initailValue : 可选，如果没有提供初始值，则将使用数组的第一个element(也就是针对数组的循环少一次，从index 1 开始做循环)，如果没有初始值的空数组会报错。

reduce的定义比较抽象，开发中比较少用到，但若是用的好可以大大提升工作效率，以下提供一个简单的例子。

拥有一个已下数组:

const arr  = [
    {
        username:    'John',
        displayname: 'John',
        email:       '[email protected]'
    },
    {
        username:    'David',
        displayname: 'David',
        email:       '[email protected]'
    },
    {
        username:    'Sarah',
        displayname: 'Sarah',
        email:       null
    },
];

透过reduce转换为object

function callback(acc, person){
    return {...acc,[person.username] : person}
}

const obj = arr.reduce(callback, {})

console.log(obj)

// 
David: {username: "David", displayname: "David", email: "[email protected]"}
John: {username: "John", displayname: "John", email: "[email protected]"}
Sarah: {username: "Sarah", displayname: "Sarah", email: null}