ES6学习笔记

• 取幂运算符（**）将第一个操作数提升到第二个操作数的幂。

  var x = 5;
  var z = x ** 2;          // 结果是 25
  

• ES6 允许函数参数具有默认值。

  function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
  }
  myFunction(5); // 将返回 15
  

• Arrar.find() 方法返回通过测试函数的第一个数组元素的值。

  此例查找（返回）第一个大于 18 的元素（的值）：

  var numbers = [4, 9, 16, 25, 29];
  var first = numbers.find(myFunction);
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

• ECMAScript 2016 将 Array.prototype.includes 引入数组。这允许我们检查元素是否存在于数组中：

  const fruits = ["Banana", "Orange", "Apple", "Mango"];
  
  fruits.includes("Mango"); // 为 true
  

• ECMAScript 2017 添加了两个 String 方法：padStart 和 padEnd，以支持在字符串的开头和结尾进行填充。

  let str = "5";
  str = str.padStart(4,0);
  // 结果是： 0005
  
  let str = "5";
  str = str.padEnd(4,0);
  // 结果是： 5000
  

• ECMAScript 2017 向对象添加了新的 Object.entries 方法。Object.entries() 方法返回对象中键/值对的数组：

  const person = {
    firstName : "Bill",
    lastName : "Gates",
    age : 50,
    eyeColor : "blue"
  };
  document.getElementById("demo").innerHTML = Object.entries(person);
  
  // Object.entries() 使循环中使用对象变简单了：
  
  const fruits = {Bananas:300, Oranges:200, Apples:500};
  
  let text = "";
  for (let [fruit, value] of Object.entries(fruits)) {
  	text += fruit + ": " + value + "";
  }
  

• JavaScript Async 函数

  async function myDisplay() {
    let myPromise = new Promise(function(myResolve, myReject) {
      setTimeout(function() { myResolve("I love You !!"); }, 3000);
    });
    document.getElementById("demo").innerHTML = await myPromise;
  }
  
  myDisplay();
  

• 这些是 2009 年发布的新特性：

  • "use strict" 指令
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • 属性 Getter 和 Setter
  • 新的对象属性和方法

• 能使用const就使用const，其他大多数情况下使用let，避免使用var

• 扩展运算符的应用

  • 数组
    • 构造数组
    • 数组拷贝
    • 合并数组
  • 对象
    • 克隆对象
    • 合并对象
  • 函数传参
  • 在react中运用于props展开

  // 主要用于函数调用的时候，将一个数组变为参数序列
  function push(array, ...items) {
    array.push(...items);
  }
  
  function add(x, y) {
    return x + y;
  }
  
  const numbers = [4, 38];
  add(...numbers) // 42
  
  
  // 可以将某些数据结构转为数组
  [...document.querySelectorAll('div')]
  
  
  // 数组的合并也更为简洁了
  const arr1 = ['a', 'b'];
  const arr2 = ['c'];
  const arr3 = ['d', 'e'];
  [...arr1, ...arr2, ...arr3]
  // [ 'a', 'b', 'c', 'd', 'e' ]
  
  
  // 扩展运算符可以与解构赋值结合起来，用于生成数组
  const [first, ...rest] = [1, 2, 3, 4, 5];
  first // 1
  rest  // [2, 3, 4, 5]
  
  const [first, ...rest] = [];
  first // undefined
  rest  // []
  
  const [first, ...rest] = ["foo"];
  first  // "foo"
  rest   // []
  // 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错
  const [...butLast, last] = [1, 2, 3, 4, 5];
  // 报错
  
  const [first, ...middle, last] = [1, 2, 3, 4, 5];
  // 报错
  
  
  // 可以将字符串转为真正的数组
  [...'hello']
  // [ "h", "e", "l", "l", "o" ]
  // 定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组
  let nodeList = document.querySelectorAll('div');
  let array = [...nodeList];
  
  let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
  ]);
  
  let arr = [...map.keys()]; // [1, 2, 3]
  

• 构造函数新增的方法

// Array.from()
// 将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

// 还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.of()

// 用于将一组值，转换为数组
Array.of(3, 11, 8) // [3,11,8]

// 没有参数的时候，返回一个空数组
// 当参数只有一个的时候，实际上是指定数组的长度
// 参数个数不少于 2 个时，Array()才会返回由参数组成的新数组
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

PS：如果有需要补充的内容，请在评论区留言

转载时请注明“来自掘金 - EvenZhu”