你必须知道的ES6基本语法

ES6 必懂必会基础语法

以下是对ES6中常用的语法进行的总结

作用域：let与const

1、使用let代替var，定义块级作用域

2、const定义不可修改的变量

{
  var a = '1';
  let b = '2';
}
console.log(a); // '1'
console.log(b); // ReferenceError: b is not defined

const c = 'example';
c = 'demo';     // TypeError: Assignment to constant variable.

// 如果是引用类型的话，往里面添加值是没问题的，但是改变指向后则会报错
const d = []; 
d.push('red');
d.push('green');
console.log(d); // ['red', 'green']

var和let区别：

• 不存在变量提升
• 在代码块内，使用let命令声明变量之前，该变量都是不可用的，称为“暂时性死区”

解构

• 数组和对象的解构
• reset运算符

// 数组和对象的解构
const [name, age] = ['imooc', '20']
const {title,job} = {title:'React开发App', job:'IT'} // k名称必需一致，否则为undefined
console.log(name,age) // imooc,20
console.log(title,job) // React开发App, IT

// ...运算符
var [a,b,...c] = ["白板","幺鸡","二条","三饼","四筒"];
console.log(a);
console.log(b);
console.log(c);

字符串和数组拓展

1、字符串

字符串包含：

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

let str = '我爱北京天安门';
console.log(str.includes('北京'));   // true
console.log(str.startsWith('北京')); // false
console.log(str.endsWith('天安门')); // true

字符串重复：

• repeat(param): 重复param多次

const str = '哈'.repeat(3);
console.log(str);   // '哈哈哈'

模板字符串和换行：

• 使用反引号，直接写变量
• 换行不需要加\n,直接换行就行

const name = 'lacus';
console.log(`hello ${name}
!`)
// hello lacus
// !

2、数组

• includes()：返回布尔值，判断数组中是否有某个项。

let arr = ["白板","幺鸡","二条","三饼","四筒"];
console.log(arr.includes("二条")); // true

对象扩展：Object扩展

• kv一致，此时可以省略v
• Object.assign(target,…)、Object.keys()

// kv一致，此时可以省略v
let a = 100;
let obj = {
	a ,
	b : 200,
	c : 300
};
console.log(obj); // {a: 100, b: 200, c: 300}

// Object.assign()合并对象
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}

// Object.keys()遍历k
var obj = {"a" : 1 , "b" : 2 , "c" : 3};
console.log(Object.keys(obj));  // ["a", "b", "c"]

函数扩展：ES6中函数的用法

• 参数有默认值
• 箭头函数
• 函数参数解构

// 带默认参数的箭头函数
let hello = (name='world')=>{
  console.log(`hello ${name}`)
}

// 直接返回值的箭头函数
let cal = num =>num*2
let cal1 = (num1, num2) => num1*num2

// 函数参数解构
function fun([a,b]){
	console.log(a + b);
}
fun([4,7]);  // 11

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

*不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

*不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

新的数据结构：Set和Map类型

Set是不能有重复项的数组，Map是可以用引用类型值当做key的对象。

const desserts = new Set(['tomao','peats','egg']);
desserts.add('toma'); 
console.log(desserts);              // Set(4) {"tomao", "peats", "egg", "toma"}
console.log(desserts.size);         // 4
console.log(desserts.has('tomao')); // true
desserts.delete('toma'); 
console.log(desserts)               // Set(3) {"tomao", "peats", "egg"}
desserts.clear();
console.log(desserts)               // Set(0) {}

// 数组去重
let arr = [1,23,34,3,3,3,324,23,3,34,34,324];
arr = [...new Set(arr)]
console.log(arr);

Map请参考：

• ECMAScript 6 入门

类：提供class的语法糖

• 是prototype的语法糖
• extends继承
• constructor构造函数

class MyApp{
  constructor(age) {
    this.name='darrell'  
    this.age = age      
  } //用这个类实例化一个对象是，会最先执行这个构造器
  sayHello(){
    console.log(`hello ${this.name}, I am ${this.age} years old`) //模版字符串
  }
}
let app = new MyApp(18)
app.sayHello() // 输出的为：hello darrell, I am 18 years old

模块化：ES6中自带了模块化机制，告别seajs和require.js

• import、import {}、import * as give-a-name
• export、export default
• Node暂不支持，还是通过require()

// module1.js
let fruit = 'apple';
let dessert = 'cake';
let dinner = (fruit,dessert) => {
  console.log(`今天的晚餐是${fruit}和${dessert}`);
}
export {fruit,dessert};
export default dinner; // 导出默认的函数

//module2.js
import dinner from './module1.js'; //这个是拿到module1.js默认导出的dinner函数
dinner('apple','egg'); // 今天的晚餐是apple和egg

import * as chef from './module1.js'; // 将module1种所有的export都导出重命名为chef

chef.default('apple','egg');// 今天的晚餐是apple和egg,默认导出的是放在chef的defalut里
chef.default(chef.fruit,chef.dessert); // 今天的晚餐是apple和cake

*ES6模块默认采用严格模式，模块内顶层this指向undefined

Async await Promise

参考：

• async 函数的含义和用法
• ES6总结之async函数
• ES6总结之Promise

迭代器(Iterators)和生成器(Generators)

参考：

• ES6总结之Generator