你必须知道的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-nameexport、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