ES6 妙用

ES6

  1. // 解构赋值
  2. const { a, b, c, d, e } = obj || {};
  4. // 扩展运算
  5. const obj = { ...obj1, ...obj2 }; //{a:1,b:1}
  7. // 模板字符串
  8. const result = `${name}${score > 60 ? "的考试成绩及格" : "的考试成绩不及格"}`;
  10. // 条件判断
  11. if ([1, 2, 3, 4].includes(type)) {
  12.   //...
  13. }
  15. // find 返回第一个匹配的元素
  16. const array = [5, 12, 8, 130, 44];
  17. const found = array.find(e => e > 10);
  18. console.log(found);//12

reduce

函数接收4个参数：上一个归并值、当前项、当前项的索引和数组本身。

调函数第一次执行时，accumulator 和currentValue的取值有两种情况：

  • 如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；
  • 如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

求和

  1. let values = [1, 2, 3, 4, 5]; 
  2. let sum = values.reduce((prev, cur, index, array) => prev + cur); 
  3. alert(sum); // 15
  5. let sum2 = values.reduce((accumulator, currentValue, currentIndex, array) => {
  6.     return accumulator + currentValue
  7. }, 10)
  9. alert(sum2); // 25

合并对象

  1. var obj1 = {
  2.   fruits: ['Banana', 'Mango'],
  3.   vegetables: ['Potato', 'Broccoli'],
  4. };
  5. var obj2 = {
  6.   store: 'Walmart',
  7. };
  9. function merge(...arr){
  10.   return arr.reduce((acc, val) => {    
  11.     return { ...acc, ...val  };
  12.   }, {});
  13. }
  15. var obj3 = merge(obj1, obj2);
  16. console.log(obj3);
  18. // {fruits: ["Banana", "Mango"], vegetables: ["Potato", "Broccoli"], store: "Walmart"}

扩展运算符

ES2018 将这个运算符引入了对象

数组

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

  1. console.log(...[1, 2, 3]) //1 2 3
  3. // ES6 的写法
  4. let arr1 = [0, 1, 2];
  5. let arr2 = [3, 4, 5];
  6. arr1.push(...arr2);
  • 接受参数 ```javascript function f(x, y, z) { // … } let args = [0, 1, 2]; f(…args);

function push(array, …items) { array.push(…items); }

  1. ```javascript
  2. const a1 = [1, 2];
  3. const a2 = [...a1]; //浅拷贝，
  6. // ES6 的合并数组
  7. [...arr1, ...arr2, ...arr3]
  10. // 解构赋值，只能放在参数的最后一位
  11. const [first, ...rest] = [1, 2, 3, 4, 5];
  12. first // 1
  13. rest  // [2, 3, 4, 5]
  16. //任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。
  17. [...'hello']
  18. // [ "h", "e", "l", "l", "o" ]

对象

  • 解构赋值

    1. let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    2. x // 1
    3. y // 2
    4. z // { a: 3, b: 4 }

  • 接收参数

    1. function wrapperFunction({ x, y, ...restConfig }) {
    2. // 使用 x 和 y 参数进行操作
    3. // 其余参数传给原始函数
    4. return baseFunction(restConfig);
    5. }
  1. let aClone = { ...a };
  2. // 等同于
  3. let aClone = Object.assign({}, a);
  5. let ab = { ...a, ...b };
  6. // 等同于
  7. let ab = Object.assign({}, a, b);

one-line

  1. //生成随机字符串  36j进制 0-9 a-z
  2. Math.random().toString(36).slice(2) // '3ukic6ijxzw'