JavaScript ES6 语法学习

文章目录 收缩

定义变量

在ES6之前,通过var关键字来定义变量,ES6中引入了另外两个声明变量的关键字:constlet

const

被 const 声明的变量不能被重新赋值或重新声明。换句话说,它将不能再被改变。你可以使用它创建不可变数据结构,一旦数据结构被定义好,你就不能再改变它了。

// 这种写法是不可行的
const helloWorld = 'hello,world';
helloWorld = 'Bye Bye';

使用 const 声明的变量不能被改变,但是如果这个变量是数组或者对象的话,它里面持有的内容可以被更新。

// 这种写法是可行的
const helloWorld = {
text: 'hello,world'
};
helloWorld.text = 'Bye Bye';

阅读更多关于 ES6 const 的内容

let

被关键字 let 声明的变量可以被改变。

// 这种写法是可行的
let helloWorld = 'hello,world';
helloWorld = 'Bye Bye';

当一个变量需要被重新赋值的话,应该使用 let 去声明它。
阅读更多关于 ES6 let 的内容

变量的解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
一个简单的例子:

// ES5
var a = 1;
var b = 2;
var c = 3;

// ES6
let [a, b, c] = [1, 2, 3];

对象的解构赋值:

const user = {
firstname: 'Robin',
lastname: 'Wieruch',
};

// ES5
var firstname = user.firstname;
var lastname = user.lastname;
console.log(firstname + ' ' + lastname);
// output: Robin Wieruch

// ES6
const { firstname, lastname } = user;
console.log(firstname + ' ' + lastname);
// output: Robin Wieruch

箭头函数

JavaScript ES6 引入了箭头函数。箭头函数表达式比普通的函数表达式更加简洁。

// function expression
function () { ... }
// arrow function expression
() => { ... }

如果箭头函数只有一个参数,可以移除掉参数的括号,但是如果有多个参数或者没有参数,就必须保留这个括号。

// allowed 
item => { ... }
// allowed 
(item) => { ... }
// not allowed 
item, key => { ... }
// allowed 
(item, key) => { ... }

下面举例比较说明ES5和ES6。
例如循环一个数组,ES5的写法如下:

<div id="root"></div>
<script>
var list = [
    {
        title:'MySQL常用语句',
        url:'http://www.884358.com/mysql-sqls/',
    },
    {
        title:'JavaScript ES6 语法学习',
        url:'http://www.884358.com/javascript-es6/',
    }
];

var html = '<ul>';
list.map(function(item){
    html += '<li><a href="'+item.url+'">'+item.title+'</a></li>'; 
});
html += '<ul>';
document.getElementById('root').innerHTML = html;

ES6的写法如下:

<div id="root"></div>
<script>
const list = [
    {
        title:'MySQL常用语句',
        url:'http://www.884358.com/mysql-sqls/',
    },
    {
        title:'JavaScript ES6 语法学习',
        url:'http://www.884358.com/javascript-es6/',
    }
];

let html = '<ul>';
list.map(item => {
    html += '<li><a href="'+item.url+'">'+item.title+'</a></li>'; 
});
html += '<ul>';
document.getElementById('root').innerHTML = html;
</script>

简洁函数体

函数体只有一条语句或者是表达式的时候{}可以省略,会自动返回语句执行的结果,或者是表达式的结果。

//allowed
let fun1 = (x,y) => {return x + y};
//allowed
let fun1 = (x,y) => x + y;

函数体不止一条语句或者表达式时,{}不可以省略。

let fun2 = (x,y) => {
    console.log(x,y);
    return x + y;
};

箭头函数的this指向

一个普通的函数表达式总会定义它自己的this对象。但是箭头函数表达式仍然会使用包含它的语境下的this对象。箭头函数中的this继承自外围父作用域。
以下示例中,两个按钮执行点击事件后,打印的this不一样,btn1打印的this是其本身,而btn2打印的this是window

<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<script>
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
btn1.onclick = function(){
    console.log(this);
}
btn2.onclick = () => {
    console.log(this);
}
</script>

阅读更多关于箭头函数的内容

对象初始化

ES6 中,可以通过简写属性更加简洁地初始化对象。当对象中的属性名与变量名相同时,可以省略变量名:

const name = 'Robin';
const user = { 
    name: name, 
};

以上代码可以简写为:

const name = 'Robin';
const user = { 
    name, 
};

另一个简洁的辅助办法是简写方法名。在 ES6 中,你能更简洁地初始化一个对象的方法。

// ES5
var userService = {
    getUserName: function (user) {
        return user.firstname + ' ' + user.lastname;
    },
};
// ES6
const userService = {
    getUserName(user) {
        return user.firstname + ' ' + user.lastname;
    },
};

最后值得一提的是可以在 ES6 中使用计算属性名。当为一个对象动态地根据 key 分配值时便会涉及到。

// ES5
var user = {
    name: 'Robin',
};
// ES6
const key = 'name';
const user = {
    [key]: 'Robin',
};

高阶函数与柯里化

高阶函数

高阶函数满足下面的条件之一:
函数作为参数被传递或者
函数可以作为返回值被返回

let addFun = (x,y,f) => f(x) + f(y)
console.log(addFun(-1,5,Math.abs))
//结果为:6

柯里化

把接受多个参数的函数变换成接受一个单一参数的函数,并且返回(接受余下参数而且返回结果的)新函数的技术。
例如要求两个数字的和,我们写了一个常规的函数:

let addFun = (a,b) => a + b
console.log(addFun(1,2))

以上addFun函数需要传入两个参数。
改为传一个参数:

let addFun = a => b => a + b
console.log(addFun(1)(2))

以上例子就是柯里化写法,将参数变换成一个,延迟函数参数的传入。

柯里化特点

延迟参数传递,参数复用
代码短小,优雅,函数化,有点不好理解

更多关于ES6的资料:
《阮一峰:ECMAScript 6 入门

发表评论

电子邮件地址不会被公开。 必填项已用*标注