[Js] ES6 常用语法

1. Array.of

• Array.of() 方法用于一组数值转换为一个新数组，即新建数组； 这个方法的主要目的 是用来弥补数组构造函数 Array() 的不足。比如使用 Array 和 new Array 时，指定一个参数是代表数组长度；

  <script>
    console.log(Array.of(3, 11, 8)) // [3,11,8]
    console.log(Array.of(3)) // [3]
    console.log(Array.of(3).length) // 1
  </script>

• 而用 Array.of() 方法替代的话，指定一个值就是在数组中放一个值，如果是空的话就直接放个空数组，行为上更统一

  <script>
    // Array 可以将多个值存储到一个空数组中
    let arr1 = Array(1, 'abc');
    console.log(arr1); // [1, "abc"]

    let arr2 = Array(4);
    console.log(arr2); // [empty × 4]

    let arr3 =  Array.of();
    console.log(arr3); // []
  </script>

2. Array.from

Array.from 方法用于将两类对象转为真正的数组：

• 类数组对象
• 可迭代对象

  <script>
    let lis = document.querySelectorAll('li');
    console.log(Array.from(lis)); // [li, li, li]
  </script>

Array.from 还可以接收第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组：

  <script>
    // 1. 数组每项 + 1
    let arr = [1, 2, 3];
    console.log(Array.from(arr, item => item + 1)) // [2, 3, 4]

    // 2. 快速生成 1 - 20 的数组
    console.log(Array.from({
      length: 20 }, (t, i) => i + 1))
    // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

    // 3. 字符串转字符串数组
    let str = 'hello world!';
    console.log(Array.from(str))
    // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
  </script>

3. Object.assign

Object.assign 方法用于对象的合并，将源对象的所有可枚举属性（可以多个），复制到目标对象；

const target = {
      a: 1 };

const source1 = {
      b: 2 };
const source2 = {
      c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

• Object.assign 方法的第一个参数是目标对象
• 后面的参数都是源对象
• 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
• 由于 undefined 和 null 无法转成对象，所以如果它们作为参数，就会报错。
• Object.assign 拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），不拷贝不可枚举的属性
  
  

4. Es5、Es6 如何实现一个类？

Es5 实现类 - 构造函数

 <script>
    function Person(name, age) {
     
      this.name = name;
      this.age = age;
      this.eat = function (food) {
     
        console.log(food);
      }
    }
    let xm = new Person('小明', 20);
    xm.eat('大福'); // 大福
    console.log(xm); // Person {name: "小明", age: 20, eat: ƒ}
  </script>

Es6 实现类 - class

class  Child {
     
	constructor() {
     
		this.name  =  1;
	}
}
let  child  =  new  Child();
console.log(child.name)//1
//如果直接方法调用的形式，会报错
let  child  =  Child(); // Class constructor Child cannot be invoked without 'new'