ES6新增特性整理（一）

最近在熟悉ES6,在网上查了很多资料，自己在公众号上做个总结，希望能帮助到有需求的朋友。如何你是前端工程师还不熟悉ES6的话就有点落伍了。

从我这几年的开发经验来看，做项目更重要的是思维和套路，比如前端现在比较火的组件化和模块化，如何拿到一个项目后把它抽象出来，如何使你的代码复用性继承性完整性达到要求，这才是一个高级工程师要掌握的技能。但是技术细节还是要熟悉一下的，毕竟你没见过的话，都没办法去查资料了。

ps:持续龟速更新

1、ES6常量

熟悉JAVA、C或C++的朋友都知道如何去定义一个常量而在JS中是如何定义的呢?

//在ES5中定义常量的做法

Object.defineProperty(window, "PI", {

value: 3.1415926,

writable: false

});

//相当于给全局变量window绑定一个只读属性"PI"

//在ES6中定义常量的做法

const PI = 3.1415926

2、作用域

在ES5中，我们定义变量是用var来定义，但是有个问题就是，你在for循环中有闭包时结果会出乎我们的意料。

//ES5中的作用域

var callbacks = []

for(var i = 0; i

callbacks[i] = function() {

return i*2;

}

}

console.table([

callbacks[0](),

callbacks[1](),

callbacks[2](),

])

//输出结果是6，6，6.因为在ES5中当去调用callbacks[i]这个函数时，return i*2中的i是指向最新的i值的。

//ES6中的作用域，我们采用let去定义局部变量j

const callbacks2 = []

for (let j = 0; j

callbacks2[j] = function() {

return j * 2

}

}

console.table([

callbacks2[0](),

callbacks2[1](),

callbacks2[2](),

])

//输出结果是0，2，4

3、箭头函数

在ES6中新增了一种定义函数的写法，这种写法非常的简练。() => {}

//ES5中函数的写法

function(x) {

return x*2;

}

//ES6中函数写法

两者等价

4、默认参数

如何设置函数中参数的默认值?

//ES3、ES5中的写法

function f(x, y, z) {

x = x || 3;//x默认值是3

y = y || 4;

z = z || 10;

return x + y + z;

}

//ES6中的写法

function f(x = 3, y = 4, z = 10) {

return x + y + z;

}

5、可变参数

学过其他编程语言的都知道，传入函数的参数一般都是固定的，而在JS中任何函数的参数都是可变的。

// ES3,ES5 可变参数

function f() {

//arguments维护一个传入f的伪数组

var sum = 0;

a.forEach(function(item) {

sum += item * 1;

})

return sum

}

console.log(f(1, 2, 3, 6));

//ES6利用扩展运算符"..."实现可变参数

function f(...a) {

var sum = 0;

a.forEach(item => {

sum += item;

});

return sum;

}

console.log(f(1, 2, 3, 6));

6、合并数组

// ES5 合并数组

var params = ['hello', true, 7];

var other_1 = [1, 2].concat(params);

// ES6 利用扩展运算符合并数组

var other_2 = [

1, 2, ...params

];

7、成员变量私有化

在JAVA中我们很容意将类中的一个成员变量私有化即只有这个类中的方法能够访问这个属性，而在JS中是如何实现的呢？

//ES3、ES5

var Car = function() {

var data = function() {

brand: "BMW",

price: 800000,

sweptVolume: 4.0,

}

this.get = function(key) {

return data[key];

}

this.set = function(key, value) {

if(key !== "brand") {

data[key] = value;

}

}

}

上面是实现了对brand的固定。

//ES5中还可以利用defineProperty设置常量属性

var Car = {

price: 800000,

sweptVolume: 4.0,

}

Object.defineProperty(Car, 'brand', {

value: 'brand',

writable: false

})

//ES6使用代理Proxy实现对对象属性私有化

let Car = {

brand: "BMW",

price: 800000,

sweptVolume: 4.0,

}

let car = new Proxy(Car, {

get(target, key) {

return target[key]

}

set(target, key, value) {

if(value !== 'brand') {

target[key] = value;

}

}

});