es6常用语法
ES6常用语法，日常用妥妥的了
下文中涉及到部分代码规范，即如何优雅的写出飞一般的代码，详细规范参照：
ES6开发规范
1. 新语法 let, const, class
1.1 建议不再使用var，而使用let 和const 。优先使用const。
在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
(function(){
var str = 'abc'; //1
function(){
var str = 'abc';//2
}
})
变量在1，2处声明，结果一样，js解析都会按照第一处声明处理；
ES6中，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？
- 在一个函数内部
- 在一个代码块内部
使用习惯：
//bad
var a = 1, b =2 , c = 3;
// good
const [a,b,c] = [1,2,3];
1.2 Class
ES6中增加了类的概念，其实ES5中已经可以实现类的功能了，只不过使用Class实现可以更加清晰，更像面向对象的写法。
class Animal {
constructor(){
console.log('我是一个动物');
}
}
class Person extends Animal {
constructor(){
super();
console.log('我是一个程序员');
}
}
let aa = new Person();
//我是一个动物
//我是一个程序员
2. 模板字符串
2.1基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5
var name = 'world'
console.log('hello' + name)
//es6
const name = 'world'
console.log(`hello ${name}`)
2.2 在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5
var msg = "Hi \
man!
"
// es6
const template = `<div>
<span>hello world</span>
</div>`
使用习惯：
//bad
const a = "foobar";
const b = 'foo'+a+'bb';
// good
const a = 'foobar';
const b = `foo${a}bar`;
3. 函数
3.1 函数的默认参数
在ES5我们给函数定义参数默认值是怎么样？
function func(num) {
num = num || 1
//当传入num时，num为传入的值
//当没传入参数时，num即有了默认值1
}
但细心观察的同学们肯定会发现，num传入为0的时候就是false， 此时num = 200 与我们的实际要的效果明显不一样
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function func(num = 1) {
console.log(num)
}
3.2 箭头函数 =>
箭头函数最直观的三个特点。
- 不需要function关键字来创建函数
- 省略return关键字
- 继承当前上下文的 this 关键字
//例如：
[1,2,3].map( x => x + 1 )
//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:
//参数name就没有括号
var people = name => 'hello' + name
//如果缺少()或者{}就会报错
var people = (name, age) => {
const fullName = 'h' + name
return fullName
}
4.拓展的对象功能
4.1对象初始化简写
ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：
function people(name, age) {
return {
name: name,
age: age
};
}
//键值对重名，ES6可以简写如下：
function people(name, age) {
return {
name,
age
};
}
4.2 为对象字面量方法赋值的语法。
ES5为对象添加方法：
const people = {
func: function() {
...
}
}
ES6通过省略冒号与 function 关键字，将这个语法变得更简洁
const people = {
func () {
...
}
}
4.3 Object.assign()
ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}
const obj = Object.assign({}, objA, objB)
5. 数据解构-访问
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
ES5我们提取对象中的信息形式如下：
const dog = {
name: 'lux',
age: 20
}
const name = dog.name
ES6中：
//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
//数组
const color = ['red', 'blue']
const [first, second] = color
使用习惯:
//1.优先使用解构赋值
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
//2.函数的参数如果是对象的成员，优先使用解构赋值。
// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
}
// good
function getFullName(obj) {
const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}
//3. 如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。
// bad
function processInput(input) {
return [left, right, top, bottom];
}
// good
function processInput(input) {
return { left, right, top, bottom };
}
const { left, right } = processInput(input);
6. Spread Operator 展开运算符（...）
Spread Operator 也是三个点儿...接下来就展示一下它的用途。
6.1 组装对象或者数组
//数组
const color = ['red', 'yellow']
const colors = [...color, 'green', 'pink']
console.log(colors) //[red, yellow, green, pink]
//对象
const num = { fist: 'a', second: 'b'}
const nums = { ...alp, third: 'c' }
console.log(nums) //{ "fist": "a", "second": "b", "third": "c"}
6.2 获取数组或者对象除了前几项或者除了某几项的其他项
//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}
6.3 对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
6.4 伪数组转换
// bad
function concateAll(){
const args = Array.prototype.slice.call( arguments );
return args.join('');
}
// good
function concateAll(...args){
return args.join('');
}
7.import 和 export
import导入模块、export导出模块
//全部导入
import people from './example'
//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//导入部分
import {name, age} from './example'
// 导出默认, 有且只有一个默认
export default App
// 部分导出
export class App extend Component {};
总结:
-
1.当用export default people导出时，就用 import people 导入（不带大括号）
-
2.一个文件里，有且只能有一个export default。但可以有多个export。
-
3.当用export name 时，就用import { name }导入（记得带上大括号）
-
4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people,
-
5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example
8. promise
在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。
用同步的方式去写异步代码。
只简单了解一下概念，详情请戳这里ES5 promise学习
9. Generators
生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。
这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。
OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。
// 生成器
function *createIterator() {
yield 1;
yield 2;
yield 3;
}
// 生成器能像正规函数那样被调用，但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
这个玩意儿了解不深，没有在项目中实现过，需要了解的同学戳这里ES6 generator学习
ES6的特性远不止于此，但对于我们日常的开发开说。这已经是够够的了。
