ES6常用语法

一、let和const命令

• 3.对象属性的简写

比如:

name:name

可以直接简写成name就好

• 4.let、const 和 块级作用域

  let允许创建块级作用域，ES6中推荐使用let定义变量

  同样在块级作用域有效的另一个变量声明方式const,它可以声明一个一个常量。ES6中，const声明的常量类似于指针，它指向某个引用，也就是说这个[常量]并非一成不变的。

注意点：

​ let关键词声明的变量不具备提升特性

​ let和const声明只在最靠近的一个块中(花括号内)使用

​ 当使用常量const声明时，请使用大写变量，如CAPITAL_CASING

​ const在声明时必须被赋值

​ let不允许在相同作用域内，重复声明同一个变量

二、变量的解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

以前，为变量赋值，只能直接指定值。

1.数组的结构赋值

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样——解构赋值。

let [a, b, c] = [1, 2, 3];

默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'

2.对象的结构赋值

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

()作用：

如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

// 正确的写法
let x;
({x} = {x: 1});

3.字符串的结构赋值

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

4.用途

(1)交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];  // x,y的值互换

(2)提取JSON数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

三、字符串的扩展

1.字符串模板 通过 反引号 "`" 使用

js语法是不支持字符串中的语句换行的,绝壁是会报错的;

比如：

‘<div> ​ <h1>这是 Hello 组件</h1> ​ <div>内容</div>

</div>’ ;

js中提供了一个新的表示写法：

  `    
  <div>
      <h1>这是 Hello 组件</h1>
      <div v-color>内容 --- {{ msg }} --- {{ num }}</div>
      <button @click="fn">组件触发事件</button>
  </div>
  `

使用情景：1、样式清晰； 2、template常使用

2.includes(), startsWith(), endsWith()

• 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

四、函数的扩展

1.箭头函数

常规函数声明方式：var fn=function(){}

ES6的箭头函数lambda表达式:

箭头函数声明方式：() => {}

• 有参数时的写法：

一个参数的语法--可省略()

var fn=num=>{}

多个参数时：

var fn=(num1,num2)=>{}

• 箭头函数需要返回对象

  var fn=() => ({ name :'abc' })

  () 的作用：告诉JS解析引擎将此处的函数当作函数表达式来解析；不然会报错

  箭头函数this问题：

  箭头函数中的this指向了外层作用域的this,箭头函数自身不绑定this,在函数中引用的this,会指向其父作用域中

2.rest参数

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

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(2, 5, 3) // 10

3.函数默认值

let sum=(a,b=1)=>a+b

sum(1) //2 b当b参数未赋值时，无实参时默认为b=1;

五、数组的扩展

5.1 扩展运算符

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

onsole.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

// 拼接数组用法

console.log([...[1,2],...[3,4]])  //  [1, 2, 3, 4]

5.2 Array.from()

 `Array.from`方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

 下面是一个类似数组的对象，`Array.from`将它转为真正的数组。

 ```
 let arrayLike = {
     '0': 'a',
     '1': 'b',
     '2': 'c',
     length: 3
 };

 // ES5的写法
 var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

 // ES6的写法
 let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
 ```

 实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

 ```html
 // NodeList对象

 let ps = document.querySelectorAll('p');

 Array.from(ps).forEach(function (p) {

   console.log(p);

 });

 // arguments对象

 function foo() {

   var args = Array.from(arguments);

   // ...

 }
 ```

5.3 Array.of()

Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

5.4 数组实例的 find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5

上面代码找出数组中第一个小于 0 的成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

六、对象的扩展

1.属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

2. Object.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}

常见用途

（1）为对象添加属性

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

上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。

（2）为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

上面代码使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用assign方法添加到SomeClass.prototype之中。

（3）克隆对象

function clone(origin) {
  return Object.assign({}, origin);
}

（4）合并多个对象

将多个对象合并到某个对象。

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

七、Set和Map数据结构

6.1 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

Set同样可以接受对象或者数组，遍历操作类似Array对象

// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

6.2 Map基本语法

含义和基本用法

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[object HTMLDivElement]。

为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

九、Class类

• 8.1.class,为什么会有class类

  类

  在 ECMAScript5 中,用通过原型的方式来进行模拟类和继承,但在 ECMAScript6 当中,出现了类(class)和继承(extend).ES6 中有class 语法.值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式

  extends允许一个子类继承父类

  静态属性和实例属性

  • 静态属性：直接通过类名就可以访问到，不需要创建类的实例就能访问
  • 实例属性：必须先创建类的实例对象，然后，通过实例对象访问
  • 说明：由于webpack不识别static关键字，需要借助于babel-loader来处理ES6语法

  class Person {
  constructor(name) {
  	this.name = name;
  	}
  	// 静态属性
  	static testName="静态属性" 
  }
  console.log(Person.testName);  //"静态属性"
  
  class Student extends Person{
  	constructor(name,age) { //子类的 constructor 函数需要调用 super()函数
  	super(name);
  this.age = age;
  }
  showInfo() {
  	console.log(this.name, this.age);//Charles 18
  	}
  }
  var stu = new Student("Charles",18);
  

  注意点：

  8.2类不会被提升

  ​ 类不存在变量提升（hoist），这一点与 ES5 完全不同。

  new Foo(); // ReferenceError
  class Foo {}
  

  上面代码中，Foo类使用在前，定义在后，这样会报错，因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关，必须保证子类在父类之后定义。

  8.3为什么要有 class 这种东西

  • a.引入了 Class(类)这个概念,作为对象的模板.通过 class 关键字,可以定义类.基本上,ES6 的 class 可以看作只是一个语法糖,它

    的绝大部分功能,ES5 都可以做到

  • b.新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

  8.4this的指向

  类的方法内部如果含有this，它默认指向类的实例。但是，必须非常小心，一旦单独使用该方法，很可能报错。

  8.5Class 的静态方法

  类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

  class Foo {
    static classMethod() {
      return 'hello';
    }
  }
  
  Foo.classMethod() // 'hello'
  
  var foo = new Foo();
  foo.classMethod()
  // TypeError: foo.classMethod is not a function
  

  8.6class的继承

  entends

  十、Module的语法

  6.1import导入 export导出

  ES6中实现了模块化管理，import导入和export导出

  // a.js
  // 1.使用export default 只能出现一次
  const num = 123
  export default num
  
  // main.js
  // 可以自定义接收名称
  // import num from './a'
  import num1 from './a'   // 如果是通过 export default 导出的内容，那么在导入这个模块的时候，名字可以任意值！！
  
  // 2.使用export 直接导出
  // 注意： 
  // 1 这种方式中没有default，
  // 2 这种形式可以与 default 共存，
  // 3 并且可以使用这种方式多次
  
  // 导出变量
  export const num=123
  // 导出函数（必须有函数名称）
  export function fn(){ }
  
  // main.js
  // 如果是通过 export const num = 123 导出的内容，必须通过 {} 方式来使用
  // 导入部分
  import {num, fn} from './a'  
  
  // 3.将整体导入的内容作为一个对象
  //有一种特殊情况，即允许你将整个模块当作单一对象进行导入
  //该模块的所有导出都会作为对象的属性存在
  import * as example from "./example.js"
  console.log(example.name)
  console.log(example.age)
  console.log(example.getName())
  

  6.2 export 和 export default 的区别

  export default 和 export 区别：

  1.export与export default均可用于导出常量、函数、文件、模块等;

  2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用;

  3.在一个文件或模块中，export、import可以有多个，export default仅有一个;

  4.通过export方式导出，在导入时要加{ }，export default则不需要;

  export:

  //a.js export const str = “blablabla~”; export function log(sth) { return sth; } 对应的导入方式：

  //b.js import { str, log } from ‘a’; //也可以分开写两次，导入的时候带花括号

  export default: //a.js const str = “blablabla~”; export default str; 对应的导入方式：

  //b.js import str from ‘a’; //导入的时候没有花括号 使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名