ES6 我的总结学习

1 let 和 const

let 的作用域与 const 命令相同：只在声明所在的块级作用域内有效。且不存在变量提升 。

1.1 let

let 所声明的变量，可以改变。

let a = 123
a = 456 // 正确，可以改变

let b = [123]
b = [456] // 正确，可以改变

1.2 const

const 声明一个只读的常量。一旦声明，常量的值就不能改变。

简单类型的数据（数值、字符串、布尔值），不可以变动

const a = 123
a = 456 // 报错，不可改变

let b = [123]
b = [456] // 报错，不可以重新赋值，不可改变

复合类型的数据（主要是对象和数组），可以这样子变动

const a = [123]
a.push(456) // 成功

const b = {}
b.name = 'demo'  // 成功

let 与 const 没有变量提升，什么是变量提升如果不明白百度一下吧！

 

2 解构（Destructuring）

 2.1 数组

一次性声明多个变量：

let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

结合扩展运算符：

let [head, ...tail] = [1, 2, 3, 4];
console.log(head) // 1
console.log(tail) // [2, 3, 4]

 2.2 对象

let { a, b } = { a: "aaa", b: "bbb" };
a // "aaa"
b // "bbb"

数组中，变量的取值由它 排列的位置 决定；而对象中，变量必须与 属性 同名，才能取到正确的值。

2.3 字符串

　字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

2.4 用途实例

　　1.交换变量的值

function example() {
  let [a, b, c] = [1, 2, 3]
  return  [a, b, c] 
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

　　2.函数参数的默认值

　function funA (a = 1, b = 2){
      return a + b;
  }

  funA(3) // 5 因为 a 是 3, b 是 2
  funA(3，3) // 6 因为 a 是 3, b 是 3 

　　3.输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

在 utils.js 中：

export const function A (){
    console.log('A')
}

export const function B (){
   console.log('B')
}

export const function C (){
     console.log('C')
}

/** -------------------------  **/
在 组件中引用时：

import { A, B, C } from "./utils.js" 

//调用
A() // 输出 A  

3. 模板字符串（template string）

3.1 纯字符串

所有模板字符串的空格和换行，都是被保留的.

console.log(`输出值为 N, 

换行`)
// "输出值为 N

换行" 

3.2 字符串中加变量

let x = 1;
let y = 2;

console.log(`输出值为：${x}`) // "输出值为：1"
console.log(`输出值为：${x + y}`) // "输出值为：3"

3.3 模板字符串之中还能调用函数。 

function fn() {
  return "Hello World";
}

console.log(`输出值为：${fn()}`) // "输出值为：Hello World"

4. 字符串函数扩展

• includes()：返回布尔值，表示是否找到了参数字符串。

• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

 这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

　let site = ['runoob', 'google', 'taobao'];

　if(site.includes('runoob')){ 

　　　// 这里是判断里面有没有这个字符如果有就进入

　}else{

　　　// 这里是判断里面没有这个字符就进入

　}

5. 函数的扩展

除了在解构中说到的函数参数的默认值，还有不少经常会用到的方法。

5. 1  rest 参数

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (let val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

上面代码的 add 函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 这样会报错
function f(a, ...b, c) {
  // ...
}

5.2 箭头函数

ES6 允许使用“箭头”（=>）定义函数。

const f = v => v;
console.log('输出值:', f(3)) // 输出值: 3
// 等同于
const f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

// 等同于
const f = function () { return 5 };

const sum = (num1, num2) => num1 + num2;
// 等同于
const sum = function(num1, num2) {
  return num1 + num2;
};

 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。

const sum = (num1, num2) => { return num1 + num2; }

箭头函数的一个用处是简化回调函数。

const square = n => n * n;

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

注意: 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

 this 对象的指向是可变的，但是在箭头函数中，它是固定的。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

let id = 21;

foo.call({ id: 42 });
// id: 42

6. 数组的扩展

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

6.1 数组合并的新写法。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

6.2 函数调用。

function add(x, y) {
  return x + y;
}

const numbers = [4, 4];
add(...numbers) // 8

6.3 复制数组的简便写法。 

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
a2[0] = 2;
a1 // [1, 2]
// 写法二
const [...a2] = a1;
a2[0] = 2;
a1 // [1, 2]

6.4 将字符串转为真正的数组。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

6.5 数组实例的 entries()，keys() 和 values()

用 for…of 循环进行遍历，唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历，entries() 是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

6.6  includes()

Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为 0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4，但数组长度为 3 ），则会重置为从 0 开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

7. 对象的扩展 

　　7.1Object.assign()

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

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方法的第一个参数是目标对象，后面的参数都是源对象。

　　注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };

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

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

　　Object.assign 方法实行的是浅拷贝，而不是深拷贝。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

　　上面代码中，源对象 obj1 的 a 属性的值是一个对象，Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。

8. Set

　　ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

　　Set 本身是一个构造函数，用来生成 Set 数据结构。

// 基本用法
const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4


// 去除数组的重复成员
const array = [1, 1, 2, 3, 4, 4]
[...new Set(array)]
// [1, 2, 3, 4]

9. import 和 export

 　  import 导入模块、export 导出模块

// example2.js  // 导出默认, 有且只有一个默认
export default const example2 = {
  name : 'my name',
  age : 'my age',
  getName  = function(){  return 'my name' }
}
//全部导入 // 名字可以修改
import people from './example2.js'

-------------------我是一条华丽的分界线---------------------------

// example1.js // 部分导出
export let name  = 'my name'
export let age  = 'my age'
export let getName  = function(){ return 'my name'}

// 导入部分 // 名字必须和 定义的名字一样。
import  {name, age} from './example1.js'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example1.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

-------------------我是一条华丽的分界线---------------------------

// example3.js  // 有导出默认, 有且只有一个默认，// 又有部分导出
export default const example3 = {
  birthday : '2018 09 20'
}
export let name  = 'my name'
export let age  = 'my age'
export let getName  = function(){ return 'my name'}

// 导入默认与部分
import example3, {name, age} from './example1.js'

10. Class

　　对Class 我最近在写react，用的比较多，大家可以学习react，我以前用vue，过几天会有vue的总结

　　10.1基本用法：

//定义类
class FunSum {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  sum() {
    console.log( this.x +this.y')
  }
}

// 使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
let f = new FunSum(10, 20);
f.sum() // 30 

　　10.2 继承

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

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

　　上面代码中，constructor 方法和 toString 方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的 this 对象。

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

 

 

大家看到这里是不是有点疑惑了！ 为啥子没有异步  Promise与async/await 呢 

这个我过几天会给大家分享！！

 

本人才疏学浅，如有不对的地方还望大神指点一二