es6小计

es6常用特性

• const, let定义

相比较于var，const,let的作用域为{}, var的作用域为function

• 函数入参可以设置默认值

function action(num = 200) {
    console.log(num)
}
action() //200
action(300) //300

• 引入匿名函数 =>

• 不需要function关键字来创建函数

• 省略return关键字
• 继承当前上下文的 this 关键字

//例如：
[1,2,3].map( x => x + 1 )

//等同于：
[1,2,3].map((function(x){
    return x + 1
}).bind(this))

• 解构数据

 //对象 
 const people = { name: 'lux', age: 20 } 
 const { name, age } = people 
 console.log(`${name} --- ${age}`) //数组 
 const color = ['red', 'blue'] 
 const [first, second] = color 
 console.log(first) //'red' 
 console.log(second) //'blue'

• generator

函数名后添加*,表示函数为generator, 函数内部使用yield返回

// 生成器 
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

function run(taskDef) { 
    //taskDef即一个生成器函数 
    // 创建迭代器，让它在别处可用 
    let task = taskDef(); // 启动任务 
    let result = task.next(); // 递归使用函数来保持对 next() 的调用 
    function step() { // 如果还有更多要做的 
        if (!result.done) { 
            result = task.next(); 
            step(); 
        } 
    } // 开始处理过程 
    step(); 
}

• Promise

同步编程程序结构，实现异步编程

fetch('/api/todos')
    .then(res => res.json())
    .then(data => ({ data }))
    .catch(err => ({ err }));

setTimeout(function() {
    console.log(1) 
    }, 0); 
new Promise(function executor(resolve) { 
    console.log(2); 
    for( var i=0 ; i<10000 ; i++ ) { 
        i == 9999 && resolve(); 
    } 
    console.log(3); 
    }).then(function() {
        console.log(4); 
    }); 
    console.log(5);

• 模板字符串

//es5 
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux

使用反引号’`’实现换行

// es5
var msg = "Hi \
man!
"
// es6
const template = `<div>
    <span>hello world</span>
</div>`

更多的字符串操作

 // 1.includes：判断是否包含然后直接返回布尔值 
 let str = 'hahay' 
 console.log(str.includes('y')) // true // 2.repeat: 获取字符串重复n次 
 let s = 'he' 
 console.log(s.repeat(3)) // 'hehehe' //如果你带入小数, Math.floor(num) 来处理

• 拓展的对象功能

出现键值对重名的

function people(name, age) {
    return {
        name: name,
        age: age
    };
}

简写

function people(name, age) {
    return {
        name,
        age
    };
}

添加方法

const people = {
    name: 'lux',
    getName: function() {
        console.log(this.name)
    }
}

简写

const people = {
    name: 'lux',
    getName () {
        console.log(this.name)
    }
}

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

const obj = Object.assign({}, objA, objB)

• 展开运算符

组装对象或者数组

 //数组 
 const color = ['red', 'yellow'] 
 const colorful = [...color, 'green', 'pink'] 
 console.log(colorful) //[red, yellow, green, pink] 

 //对象 
 const alp = { fist: 'a', second: 'b'} 
 const alphabets = { ...alp, third: 'c' } 
 console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c" }

可以用于组合成新的 Object,如果有重复的属性名，右边覆盖左边

 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 }

• es6中的import

在router/index.js中

...
export default Routes;

在导入时，如果有{}包裹，表示源文件同名；如果没有添加{}，则等价于import {name as newName} from ...。

import MyRoutes from './routes/index';
// 等价于
import {Routes as MyRoutes} from './routes/index';