JavaScript数组的最佳实践

扩展运算符

数组克隆
数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组
扩展运算符提供了数组克隆的新写法( 当然这只是浅克隆 )

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

扩展运算符提供了数组合并的新写法。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// 将上述三个数组合并为一个新数组，当然也可以在原数组上合并
const arr = [...arr1, ...arr2, ...arr3];

扩展运算符还可以将字符串转为真正的数组。

[...'hello']	//['h', 'e', 'l', 'l', 'o'];

扩展运算符与 Set 结构结合使用，可以快速实现数组去重

[...new Set(array)];
// 其原理就是利用Set 成员的值都是唯一的，没有重复的值,并且扩展运算符可以将 Set 结构转为数组

map()

map 方法可以让数组的每个成员依次执行某个函数，如将数组的所有数组转为字符串

[1, 2, 3, 4].map(String);
// ['1', '2', '3', '4']
// 同理也可以反过来将字符串转为数字
['1', '2', '3', '4'].map(Number);
// [1, 2, 3, 4]

将不规范的英文名字，变为首字母大写，其他小写的规范名字

const arr = ['adam', 'LISA', 'barT'];
arr.map((x) => {
  return x.substring(0,1).toUpperCase() + x.substring(1).toLowerCase();
});

filter()

filter 也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素.
利用filter，可以巧妙地去除Array的重复元素

const arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
arr.filter((element, index, arr) => {
  return arr.indexOf(element) === index;
});
// ['apple', 'strawberry', 'banana', 'pear', 'orange']
// 去除重复元素依靠的是indexOf总是返回第一个元素的位置，
// 后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了

reduce()

reduce方法依次处理数组的每个成员，最终累计为一个值( 数组求和 )

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

上面代码中，reduce方法求出数组所有成员的和。第一次执行，a是数组的第一个成员1，b是数组的第二个成员2。第二次执行，a为上一轮的返回值3，b为第三个成员3。第三次执行，a为上一轮的返回值6，b为第四个成员4。第四次执行，a为上一轮返回值10，b为第五个成员5。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15

要把[1, 3, 5, 7, 9]变换成整数13579，reduce()也能派上用场

const arr = [1, 3, 5, 7, 9];
arr.reduce((x, y) => {
  return x * 10 + y;
});
// 13579

如找出数组中字符长度最长的数组成员

const arr = ['aaa', 'bb', 'c'];
arr.reduce((longest, str) => {
  return str.length > longest ? str : longest;
}, '');
// 'aaa'

sort()

JavaScript的Array的sort()方法就是用于排序的，但是排序结果可能让你大吃一惊

// 看上去正常的结果
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// 此时 apple 为何排在了最后？
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple'];

无法理解的结果
[10, 20, 1, 2].sort(); // [1, 10, 2, 20];

第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。第三个排序结果是什么鬼？简单的数字排序都能错？
这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小

如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！
幸运的是，sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。
要按数字大小排序，我们可以这么写:

const arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return -1;
  }
  if (x > y) {
    return 1;
  }
  return 0;
});
// [1, 2, 10, 20]

回到上面字符串的排序( apple为何排在了最后？ )，只需将字符串都转成大写或者小写再进行排序

const arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
  // 将字母都转成大写
  x1 = s1.toUpperCase();
  x2 = s2.toUpperCase();
  if (x1 < x2) {
    return -1;
  }
  if (x1 > x2) {
    return 1;
  }
  return 0;
}); // ['apple', 'Google', 'Microsoft']

JavaScript数组的最佳实践

猜你喜欢