JavaScript 系列之数组(三)

399 阅读4分钟

这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战

四、数组排序

4.1 sort

sort() 方法用原地算法对数组的元素进行排序,并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串 Unicode 码点。

arr.sort([compareFunction])

  • @params:函数
  • @return:排序后的数组
  • 是否改变原数组:改变
var arr = [1,3,9,2,5,3,7,4,5];
// 升序
var res1 = arr.sort((a, b) => a - b);
console.log(res1)  // [1, 2, 3, 3, 4, 5, 5, 7, 9]
// 降序
var res2 = arr.sort((a, b) => b - a);
console.log(res2)  // [9, 7, 5, 5, 4, 3, 3, 2, 1]

console.log(arr)  // [9, 7, 5, 5, 4, 3, 3, 2, 1]

4.2 reverse

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

arr.reverse()

  • @params:无
  • @return:倒转排序后的数组
  • 是否改变原数组:改变
var arr = [1, 2, 3, 3, 4, 5, 5, 7, 9]
console.log(arr.reverse())  // [9, 7, 5, 5, 4, 3, 3, 2, 1]
console.log(arr)  // [9, 7, 5, 5, 4, 3, 3, 2, 1]

五、转字符串

5.1 join

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

arr.join([separator])

  • @params:指定的分隔符
  • @return:转换后的字符串
  • 是否改变原数组:不改变
var arr = [1, 2, 3, 3, 4, 5, 5, 7, 9];
console.log(arr.join('-'));  // "1-2-3-3-4-5-5-7-9"
console.log(arr);  // [1, 2, 3, 3, 4, 5, 5, 7, 9]

5.2 toString

toString() 返回一个字符串,表示指定的数组及其元素。

arr.toString()

  • @params:无
  • @return:转换后的字符串
  • 是否改变原数组:不改变
var arr = [1, 2, 3, 3, 4, 5, 5, 7, 9];
console.log(arr.toString());  // "9,7,5,5,4,3,3,2,1"
console.log(arr);  // [1, 2, 3, 3, 4, 5, 5, 7, 9]

六、遍历映射

6.1 for

for 循环性能最佳,内部可以阻塞

// 长度一般尽量先用赋值于变量,提升性能
for(let i = 0; i < len; i++) {
  // ...
  continue;    // 打断当次循环,进入下次循环
  break;       // 直接打断循环,跳出循环
}

6.2 forEach

forEach() 方法对数组的每个元素执行一次给定的函数。

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

  • @params:函数
  • @return:无/undefined
  • 是否改变原数组:改变

注意:除了抛出异常以外,没有办法中止或跳出 forEach() 循环,即break、continue、async/await都无效

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

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

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

6.3 map

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

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

  • @params:函数
  • @return:新的数组
  • 是否改变原数组:不改变
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

6.4 filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

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

  • @params:函数
  • @return:满足条件的元素组成的新数组
  • 是否改变原数组:不改变
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter(num => num > 5);
console.log(res);  // [6, 7, 8, 9, 10]

6.5 every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

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

  • @params:函数
  • @return:Boolean 值
  • 是否改变原数组:不改变
let arr = [1, 2, 3, 4, 5]
console.log(arr.every((item, index, array) => item > 3))  // false

6.6 some

some() 测试一个数组内的是不是至少有一个元素是否都能通过某个指定函数的测试。它返回一个布尔值。

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

  • @params:函数
  • @return:Boolean 值
  • 是否改变原数组:不改变
let arr = [1, 2, 3, 4, 5]
console.log(arr.some((item, index, array) => item > 3))  // true

6.7 reduce

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。

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

  • @params:函数
  • @return:函数累计处理的结果
  • 是否改变原数组:不改变
// 1. 数组求和
let sum = [0, 1, 2, 3].reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); //  6

// 2. 数组去重
let arr = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd'];
let newArr = arr.reduce((acc, current) => {
  if (acc.indexOf(current) === -1) {
    acc.push(current);
  }
  return acc;
}, []);
console.log(newArr); // ["a", "b", "c", "e", "d"]

// 3. 数组扁平化
let flat = [[1, 2, 3], [4, 5, 6], [7, 8, 9]].reduce((prev, cur, index, array) => {
  return [...prev, ...cur];
});
console.log(flat); //  [1, 2, 3, 4, 5, 6, 7, 8]

6.8 reduceRight

reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

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

  • @params:函数
  • @return:函数累计处理的结果
  • 是否改变原数组:不改变
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1); // [4, 5, 2, 3, 0, 1]