一. 交集：合并去重 Set(),Array.from()

  1. let a = [1, 2, 5];
  2. let b = [2, 5, 7];
  3. let c = new Set([...a, ...b]);
  4. console.log(Array.from(c)); //[1,2,5,7]

二. 并集：找出数组中相同的元素 filter(),has()

  1. let a = [1, 2, 5];
  2. let b = [2, 5, 7];
  3. let c = a.filter(x => new Set(b).has(x));
  4. console.log(c); //[2,5]

三. 数组四种遍历方法：

  • keys()
  1. //未转化成Set()时，结果item是key值也就是数组的下标
  2. console.log("未转化Set()");
  3. let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  4. for (let item of arr.keys()) {
  5.     console.log(item);
  6. }
  7. //转化成Set()时，结果item就是数组的元素
  8. console.log("转化Set()");
  9. arr = new Set(arr);
  10. for (let item of arr.keys()) {
  11.     console.log(item);
  12. }
  • values()：必须使用 Set()转化后才能使用
  1. let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  2. arr = new Set(arr);
  3. for (let item of arr.values()) {
  4.     console.log(item);
  5. }
  • entries()
  1. console.log("未转化Set()");
  2. let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  3. //未转化成Set()时，结果item是一个数组[key,value];key是从0开始
  4. for (let item of arr.entries()) {
  5.     console.log(item);
  6. }
  7. //转化成Set()时，结果item是一个数组[key,value];key的值与value值相同
  8. console.log("转化Set()");
  9. arr = new Set(arr);
  10. for (let item of arr.entries()) {
  11.     console.log(item);
  12. }
  13. console.log("测试key值是否与value值相等");
  14. let arr2 = ["vue", "angular", "react"];
  15. arr2 = new Set(arr2);
  16. for (let item of arr2.entries()) {
  17.     console.log(item);
  18. }
  • forEach():箭头函数参数有三个，(键值：value、键名：key、集合：array)
  1. console.log("未转化Set()");
  2. let arr = ["vue", "angular", "react"];
  3. //未转化成Set()时，key从0开始
  4. arr.forEach((value, key) => console.log(value, key));
  5. //转化成Set()时，key的值与value值相同
  6. console.log("转化Set()");
  7. arr = new Set(arr);
  8. new Set(arr).forEach((value, key) => console.log(value, key));

小技巧

四. 交换元素

  • 利用 数组解构来实现值的互换
  1. let a = "world",
  2.     b = ("hello"[(a, b)] = [b, a]);
  3. console.log(a); // -> hello
  4. console.log(b); // -> world

五. 调试

  • 我们经常使用 console.log()来进行调试，试试 console.table()也无妨。
  1. const a = 5,
  2.     b = 6,
  3.     c = 7;
  4. console.log({ a, b, c });
  5. console.table({ a, b, c, m: { name: "xixi", age: 27 } });

六. 单条语句

  • ES6 时代，操作数组的语句将会更加的紧凑
  1. // 寻找数组中的最大值
  2. const max = arr => Math.max(...arr);
  3. max([123, 321, 32]); // outputs: 321
  4. // 计算数组的总和
  5. const sum = arr => arr.reduce((a, b) => a + b, 0);
  6. sum([1, 2, 3, 4]); // output: 10

七. 数组拼接

  • 展开运算符可以取代 concat 的地位了
  1. const one = ["a", "b", "c"];
  2. const two = ["d", "e", "f"];
  3. const three = ["g", "h", "i"];
  4. const result = [...one, ...two, ...three];

八. 制作副本

  • 我们可以很容易的实现数组和对象的 浅拷贝
  1. const obj = { ...oldObj };
  2. const arr = [...oldArr];

九. 命名参数

  • 解构使得函数声明和函数的调用更加可读
  1. // 我们尝尝使用的写法
  2. const getStuffNotBad = (id, force, verbose) => {
  3.  ...do stuff
  4. }
  5. // 当我们调用函数时， 明天再看，尼玛 150是啥，true是啥
  6. getStuffNotBad(150, true, true)
  7. // 看完本文你啥都可以忘记, 希望够记住下面的就可以了
  8. const getStuffAwesome = ({id, name, force, verbose}) => {
  9.  ...do stuff
  10. }
  11. // 完美
  12. getStuffAwesome({ id: 150, force: true, verbose: true })

十. Async/Await 结合数组解构

  • 数组解构非常赞!结合 Promise.all 和 解构和 await 会使代码变得更加的简洁
  1. const [user, account] = await Promise.all([fetch("/user"), fetch("/account")]);

注：console.table() 有一个隐藏的特性，如果某项数值为空字符串，则这一项不会显示在列表里

如：

console.table({“notdown_type”:””})
所以有时候不好用