es6小计

骑猪看日落 2022-05-25 01:45 196阅读 0赞

### 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

*  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';