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); // 1console.log(iterator.next().value); // 2console.log(iterator.next().value); // 3function 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
使用反引号’`’实现换行
// es5var msg = "Hi \ man! "// es6const 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';
女爷i
向右看齐
不念不忘少年蓝@
亦凉
骑猪看日落
àì夳堔傛蜴生んèń
还没有评论，来说两句吧...