ES6新增常用语法总结

一、新的变量声明方式

先说说之前我们用的var吧，只要声明一个变量，它就会被挂到window上面，很不安全也不方便。

1. const
   声明时必须初始化,值不能被改变（类似于常量），常用来声明一个值不会被改变的量。当值为基础数据类型时，那么值就是它本身，不可被改变；如果值为引用数据类型时（对象、数组），值就指的是它的引用，只要引用不变即可，仍可改变引用指向的对象里的值。
2. let
   声明的变量可以重新赋值,但是不能在同一作用域内重新声明,常用来声明一个汇编改变的变量。

区别：const不可变，let可变，如果声明的量确定不会改变使用const，反之使用let

二者新特性：不会变量提升和提供了块级作用域，在哪个块内就只对那个块有用，外部不可访问，块级作用域就是用{}包住的部分

二、箭头函数

之前函数声明时要使用function关键字，拥有this
箭头函数声明

let add = （） => {函数体}

不支持this，写了会报错

三、解构赋值（类似于Python中的序列解包）

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

1. 数组

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

2. 对象

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

3. 嵌套解构

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p: [x, { y }] } = obj;
console.log(x,y);  //Hello World

四、…运算符

1. 展开运算符

let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]
 
let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }

2. 剩余操作符

let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]
 
// 也可以
let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined

五、模板字面量

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

1. 多行字符串

• 单引号形式

console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"

• 反引号形式（推荐，更方便）

`console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"`

2. 插入表达式

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

3. 原始字符串
   在标签函数的第一个参数中，存在一个特殊的属性raw ，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'

另外，使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"

六、模块

1. 导入import

import $ from 'jquery

2. 导出export

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

暂时这么多