这几年使用的编程语言一直在根据项目的需要而不断切换，从 ActionScript 到 Objective-C 到 C++ 再到 Javascript。最近一段时间一直在把玩 Javascript, 感受到了 js 这些年的进化，随着更多Js 应用环境的开启，感觉未来的潜力也巨大。而且新的 js 语言标准和新特性让 js 似乎也走到了其他编程语言的前面，从古老变成了领先。
这里记录一下关于 Javascript es6 的语法特点和小技巧。

es6 箭头函数 (Arrow Function)

形态变化

完整形态

func1 = (v1,v2,v3) => {
    let result = v1 + v2 + v3;
    return result;
}
console.log(func1(1, 2, 3)); 
//6

参数只有一个的时候括号可以省略。

func2 = value => {
    return 1 + value;
}
console.log(func2(2));
//3

返回如果只有一行方法的大括号可以省略。

1
2
3

func3 = value => value + 3 * 2;
console.log(func3(2));
//8

如果方法没有参数

1
2
3

func4 = () => 2 + 6;
console.log(func4());
//8

如何返回对象

箭头函数返回对象需要把对象用括号括起来，否则会提示语法错误，因为大括号被解释为 代码块 了。

1
2
3

func6 = () => ({a: 1,b: 2})
console.log(func6());
//{ a: 1, b: 2 }

常用应用形式

把方法传递给一个变量

let func5 = () => {
    console.log('func5 is called');
}
func5();
//func5 is called

对象内部创建箭头函数的方法

let obj = {
    a: 10,
    func: () => {
        console.log('func in a obj');
    }
};
console.log(obj.func());
//func in a obj

直接作为事件回调方法

1
2
3

document.addEventListener('click', event => {
    console.log(event);
});

其他

this 的指向不在飘忽不定

let obj2 = {
    name: 'LiLei',
    age: 30,
    init: function() {
        //非箭头函数，this 的指向错误
        setTimeout(function(){
            console.log(this.name + ' is ' + this.age +' years old');
        }, 1000);
        //箭头函数，this 的指向正确
        setTimeout(()=>{
            console.log(this.name + ' is ' + this.age +' years old');
        }, 1500);
    },
}
obj2.init()

带默认参数

//With one parameter
func6 = (name = 'LiLei', age = 30) => {
    return `${name} is ${age} now`
}
console.log(func6());

`typeof` 和 `instanceof` 运算符计算表明箭头函数和普通的function 一样

1
2
3

let func7 = value => value + 1;
console.log(typeof func7); // "function"
console.log(func7 instanceof Function); // true