ES6 快餐

wtf.jpg

前言

配合 babel 写 ES6 写上瘾了。这语法糖有的挺甜的。发现其中有很多还不熟悉。利用周末过了一遍，本来想全部记录的，但是太杂了， 还是打算一步步更新。

箭头函数

一个很好用的语法糖，我用的最多的一个语法糖。
结构为;

    ( arg ) => { // do something }

可以在简写：

    // 当argument为一个的时候
    arg => { // do something }

    // 当函数体为一个表达式的时候
    arg => console.info( 'hello') 
    function ( arg ) { return console.info( 'hello')}

    // 特别情况当
    function (arg) { return { name : 'ahole' } }
    arg => ({name:'ahole'})

    // 基本上就是这样
    // 当用 map 等 ES5 数组操作函数就显得特别骚 
    var array = someArray.map ( item => item + 1 )

坑：
1.this 箭头函数中的 this 为函数声明时候的this

    var name = 'ahole'
    var ahole = {
        getName : () => this.name,
        name : 'chan'
    }
    ahole.getName() // 'ahole'

其实这个坑绝对不是坑，只要认知了，就发现写起代码来爽~
2.arguments 也是一样的。

    function eg ( ){
        return () => {
            console.log( arguments[0] );
        }
    }
    
    eg('normal')('arrow') // 'normal'

个人意见：很好用，很简短，但是上面两个坑肯定要清楚,而且简单的逻辑用，如果复杂的逻辑最好不要写的太简单，毕竟代码看的时间比写的时间长多了

增强的对象赋值语法

var example = {
    // 等价于 methods : methods
    methods, 
    // 等价于在外面设置     
    // example['@#$%^&*'] = 1
    ['@#$%^&*']: 1,
    // 这类设置多次不会报错
    duplicateProperty : 2,
    duplicateProperty : 3,
    
    // 还可以设置个函数来设置属性名
    // 等价 example['prop'+Match.random()] = 34
    ['prop_'+ ( ()=> Math.radom() )() ] : 34,
    // 还可以直接设置原型，当然有些浏览器根本没有这个值
    __proto__ : theProObj
}

个人感觉最有用的是 methods 只写一次的特性，其他的我已经忘了。

模板字符串

注 ：chrome最新的浏览器控制台还不支持这个特性，es6 还分 stage0-3 4个版本这个有空在学习，可以上 https://babeljs.io/repl/ 调试

    var tmpStr = `support
    Multiline`
    
    escape(tmpStr) // "support%0AMultiline"
    
    var name = 'ahole';
    var strWithVariable = 'support ${name}'; // support ahole

一些奇怪的赋值

var [a, ,b ] = [1,2,3] // a = 1 ,b = 3;
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode() 

// 等价于下面的代码
var _getASTNode = getASTNode(),
  a = _getASTNode.op,
  b = _getASTNode.lhs.op,
  c = _getASTNode.rhs;       

个人感觉作用不大，你觉得呢。

    function g({name: x}) {
        console.log(x);
    }
    g({name: 5})

    // 等价于
    function g(_ref) {
        var x = _ref.name;
        console.log(x);
    }
    g({ name: 5 });
    
    function r({x, y, w = 10, h = 10}) {
      return x + y + w + h;
    }
    r({x:1, y:2}) === 23
    

这个个人感觉也挺好用的。我是用它少用了$.extend 方法了。

    function f( x , ...y){  
        // y is an Array
        return y 
    }
    f( 1,2,3 ) // [ 2, 3 ]   

函数参数的默认值

function (a = 3,b ){
    return a + b
}

就是设置默认值，麻麻地啦。

let 和 const

两个特别版的var

let 用于解决 var 不能生成块级作用域的缺点。

    if ( Math.random > 0.5 ){
        let a = 3
    }
    consoel.log(a) // error
    // 等价于  
    function f(x) {
      for (var _len = arguments.length, y = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        y[_key - 1] = arguments[_key];
      }
    
      console.log(y);
    }

let 特点
1.生成块级作用域
2.没有变量声明提升
3.可以操作声明后的变量，但是不能重复声明

const 用于声明一个常量

    const AUTHOR = 'ahole';
    AUTHOR = 'chan'; // error 

const 特点
1.不能声明后不能重新赋值，（并非不能改变，后面说）
2.生成块级作用域
3.没有变量声明提升

    const array = [];
    array.push( 1 ); 
    console.info(array) // [1]

总结： let适合声明变量，const适合声明常量（不要是引用类型）。

字符的升级

这方面涉及到字符编码的问题，js 使用的 UCS-2 编码 . 这个可以看看 相关知识

    var shit = '\u{1F4A9}' // 💩 赋值一坨屎
    var shit = '\ud83d\udca9' // 都是一样的屎   
    
    shit.codePointAt(0) // 输入utf-8正确值  
   
    var (var c of shit){ console.log(c) } // of in 也能够正确输出

注 ： 字符串方面的我打算整理成完整的一篇。

Modules

必须掌握的新东西，JS原生模块化语法。

基本语法

每一个模块为一个js文件,使用export 操作符导出。如下：

    // someModule.js
    const name = 'ahole'
    export { name } // 记得export 就行后面说怎么用

使用 import 引包

    // normal.js
    import { name } from 'someModul.js'
    name === 'ahole'

导出

导出分两种
1.默认导出

    // modules.js
    const name = 'ahole';
    export default name;

    // normal.js
    import ahole from 'modules.js'
    ahole === 'ahole' // 默认导出可以导出任意类型

2.具名导出

    // modules.js
    const name = 'ahole';
    const age = 18;
    export { name, age } 

    // normal.js
    import { age } from 'modules.js'
    // 具名导出的都是对象，我们使用 { xxx } 去接受想要接受的值
    // 像 var modules = { name : 'ahole',age : 18 }
    // var age = modules.age 一样    

2.1 具名导出的其他格式

    // 1
    export function eg () {} 
    // 等价于
    const eg = function(){}
    export { eg }
    
    // 2
    // 并不是一定要用 { } 包起来导出
    export const age = 3; 
    export const name = 3; 
    // 等价于 
    export { age ,name }
    
    // 3 
    // 还可以在暴露的时候换个名字
    export { age as anthorage }
    // 等价于
    export const anthorage = age    

3.导出另一个包

    export * form 'another.js'
    // 等于把别的包继承了，又导出来

导入

1.正常导入

    import { age } from 'xxx.js' // 具名包的导入 
    import age from 'xxx.js' // 默认包的导入

2.导入的时候换个名字
上栗可以看出具名导入要严格按照其格式写{ xxx } 才能导入，但是我们如果文件中有xxx这个一个变量不是很尴尬，所以我们可以使用 { xxx as uuid } 这样的语法命名导出的变量

    import { xxx as whatEverUwant } from 'module'
    // 等价于
    import { xxx } from 'module';
    var whatEverUwant = xxx;
    xxx = null;

3.导入所有
如果一个模块里面有很多个值，如 { a, b, c, ... ,z } ,导入的时候我们全都要，是不是会哭。所以 ES6 有这样的语法 import * as everThings ;

    import * as everyThings from 'Supermarket';
    // 等价于
    import { a, b, c, d, e, f, ahole, is ,good ,boy } from 'module';        

我不知道正真的 ES6 模块会是怎么样，反正如果使用webpack打包出来的，那其实知识一个对象的传递而已，所以很容易产生闭包。有空看看webpack打包后的js文件就明白。

Promise

异步被称为 js 的三座大山之一。
这个打算另外做一篇详细的笔记。

心情

还有很多，一天一更，不更直播吃屎。（跟朋友去玩，把手机弄丢了，郁闷。）
更新第一次，看了下电视到这个点，罪过。
ES6 我觉得常用的基本就是这些了，另外一些真的感觉不太会用到，二八定理。 后会会对上面的知识进行补充。（你是否像我一样迷茫）