ES的mapping中如何是数组类型 es 数组对象类型

对于参加工作的小伙伴们来说，ES6 的使用可以说是已经体现在代码中的每行之中了，但是对于可能刚毕业的小伙伴们来说，还是有必要了解一下ES5 与 ES6的区别，其实我们平常所说的ES6 狭义可以理解为ES2015，但更广义上来说可以泛指ES2015以后的版本，因为ES2015后面的版本都是一些小更新。

-----------------------------------------------------------------------------------------------

1) 变量 var/let/const

首先我们从最基本的定义变量说起，ES5 中 定义变量那就 只有 var，ES6 中增加了 let 和 const

在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升

console.log(a)
var a = 1

上述这种写法不会报错

而在ES6中：

• let 和 作用域

• 块级作用域

if (true) {
    let a = 1
}
console.log(a) // ReferenceError: a is not defined

• 没有变量提升

console.log(a)
let a = 1; // ReferenceError: Cannot access 'a' before initialization

• const 常量

const a = 1
a = 2 // TypeError: Assignment to constant variable.

// 对象属性
const obj = {
    name: 'zs'
}

obj.name = 'ls' // obj{ name: 'ls' }

2) 结构赋值

• 数组的解构

// 数组解构
const arr = ['1','2','3']
const [a,,c,d = '4'] = arr
const [A,...result] = arr
console.log(a) // ‘1’
console.log(c) // ‘3’
console.log(d) // ‘4’
console.log(A) // ‘A’
console.log(result) // ['2', '3']

• 对象的解构

// 对象解构
const obj = {name:'x', age:18, gander: 'm'}
const {name:firstName , age, gander = 'f', weight = '80'} = obj
console.log(firstName) // x
console.log(age) // 18
console.log(gander)  // 'm'
console.log(weight)  // '80'

3) 函数

• 箭头函数

1. 箭头函数不会改变this指向
     a.普通函数的this：指向它的调用者，如果没有调用者则默认指向window.
     b.箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，
       默认使用父级的this
2. 不需要 function 关键字来创建函数

这里补充一点细节问题，当你的参数有且只有一个时，你可以省略 (), 当函数返回有且只有一个表达式，可以省略 {} 和 return

const show = name => hello + 'name'

• 参数默认值

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

const show = (name='zs') => console.log(name)

show() // zs
show('ls') // ls

4）对象

• 新增了 Object.assign() 方法， 它用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

• Object.is(value1, value2) 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等:

• 都是 undefined
• 都是 null
• 都是 true 或 false
• 都是相同长度的字符串且相同字符按相同顺序排列
• 都是相同对象（意味着每个对象有同一个引用）
• 都是数字且

• 都是 +0
• 都是 -0
• 都是 NaN
• 或都是非零而且非 NaN 且为同一个值

• Object.values 返回对象所有值组成的一个数组
• Object.entries 以数组形式返回所有键
• Object.getOwnPropertyDescriptors 获取对象属性的详细描述信息

5）字符串

对于字符串 ES6+ 当然也提供了很多新方法，例如：

1. startsWith()方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回true或false

const str1 = 'Saturday night plans';

console.log(str1.startsWith('Sat'));
// expected output: true

console.log(str1.startsWith('Sat', 3));
// expected output: false

2. endsWith()方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回true或false

const str1 = 'Cats are the best!';

console.log(str1.endsWith('best', 17));
// expected output: true

const str2 = 'Is this a question';

console.log(str2.endsWith('?'));
// expected output: false

includes()方法用于判断一个字符串是否包含在另一个字符串中，区分大小写，根据情况返回 true 或 false

'Blue Whale'.includes('blue'); // returns false

4）数组

同样的，ES6+ 中也新增了许多的数组新方法，例如：

1. Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

2.Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

3.copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

const array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

4.find() 方法返回数组中满足提供的测试函数的第一个元素的值

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

5.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

6.flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

5）class

在 ES6 之前，并没有真正意义上类的概念，生成实例对象的传统方法是通过构造函数，ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。Point类除了构造方法，还定义了一个toString方法。注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了会报错

类的一大重大特点就是Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。上面代码中，constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

-----------------------------------------------------------------------------------------------

当然，ES6+的内容肯定远不止此，我们在这简单的描述了一下变量、函数，对象、数组和字符串的一些新增方法以及class，这在我们的平常开发中使用频率会非常高，秉持着二八原则，掌握好这些常用的，将会让我们在平常的开放中更加得心应手~~~~