1. ES6基础
- 语言特性:
- const, let:const为常量,一旦定义不可修改。let为块级作用域变量。
- 函数:
- 箭头函数:语法糖,为匿名函数。
- this在箭头函数中的使用:
js对象中的嵌套函数this会指向global对象:
解决方案:1.为this赋值, 2.使用bind绑定上下文var val = "global"; var obj = { val: "locale", getVal: function() { return function() { console.log(this.val); } } } obj.getVal()() //输出"global"
// 定义时将this值赋值给变量 var val = "global"; var obj = { val: "locale", getVal: function() { var self = this; return function() { console.log(self.val); } } } obj.getVal()() //输出"locale"
解决方案3:使用箭头函数// 使用bind绑定上下文obj var val = "global"; var obj = { val: "locale", getVal: function() { return function() { console.log(this.val); }.bind(this); } } obj.getVal()() //输出"locale"
var val = "global"; var obj = { val: "locale", getVal: function() { return () => { console.log(this.val); } } } obj.getVal()() //输出"locale"
- 函数默认参数:
ES6前默认参数需要额外指定,例如:values = values || [];
ES6指定函数默认参数:function whatsUp(name = 'Love Me Like You Do', type = 'english') { console.log("I'm listening an " + type + " song: " + name + ", right now."); } whatsUp();
- Rest参数:函数最后一个参数前带有
...
,则该参数会转换为数组。
注意:Rest参数是数组,arguments只是类数组对象。Rest参数可使用数组方法,例:sort、map等。尽量使用Rest参数替代arguments。function restFun(name, ...args) { console.log("list " + name + ": " + args); } restFun();
- 展开操作符:
...
即展开操作符,允许一个表达式展开。- 用于函数调用:将数组依次作为参数进行调用。
ES6前使用apply
ES6使用展开操作符function test(gender, name) { console.log((gender === "female" ? "Her" : "His") + " name is "+ name); } test.apply(null, ["female", "Elizabeth"]); //Her name is Elizabeth
test(...["female", "Elizabeth"]); //Her name is Elizabeth
- 用于数组字面量:数组展开
var arr1 = [1,2,3], arr2 = ["lisa", "tom"] var arr3 = [...arr1, ...arr2]; //[1,2,3,"lisa","tom]
- 用于对象展开
var teecha = {age: 23, gender: "male"} teecha = {...teecha, nickname: "sweettea"} // {age: 23, gender: "male", nickname: "sweettea"}
- 用于函数调用:将数组依次作为参数进行调用。
- 模板字符串:使用
`
字符。var song = "红尘"; var tpl = `${song} is one of my favorite songs, do you wanna try? `; console.log(tpl);
to be continue...
网友评论