细说JS系列(二十五)—ES6

37 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第25天,点击查看活动详情

铃铛说点题外话

一句话前情回顾:ES6具体指的是什么和ES5有什么区别,针对字符串、数组优化和升级

一句话介绍今天:ES6对对对象Object部分的升级和优化

铃铛说正文

image.png

ES6对Object类型做的常用升级优化

  1. 对象属性变量式声明。

    ES6可以直接以变量形式对对象属性或者方法进行声明。比传统的键值对形式声明更加简洁,更加方便,语义更加清晰

let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange};    // let myFruits = {apple: 'red appe', orange: 'yellow orange'};

尤其在对象解构赋值(见优化部分b.)或者模块输出变量时,这种写法的好处体现的最为明显,举个例子

let {keys, values, entries} = Object;
let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}

既然变量都可以更明了的简写,那么方法可以用这种方式简写吗?答案当然是可以,因为实际上函数就是特殊的对象

let es5Fun = {
    method: function(){}
}; 
let es6Fun = {
    method(){}
}

对象的扩展运算符(...)。 ES6对象的扩展运算符和数组扩展运算符用法本质上差别不大,毕竟数组也就是特殊的对象。对象的扩展运算符一个最常用也最好用的用处就在于可以轻松的取出一个目标对象内部全部或者部分的可遍历属性,从而进行对象的合并和分解

let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'}; 
// otherFruits  {grape: 'purple grape', peach: 'sweet peach'}
// 注意: 对象的扩展运算符用在解构赋值时,扩展运算符只能用在最有一个参数(otherFruits后面不能再跟其他参数)
let moreFruits = {watermelon: 'nice watermelon'};
let allFruits = {apple, orange, ...otherFruits, ...moreFruits};

在ES6中新增一个一个super关键字。ES6Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同,super关键字总是指向当前函数所在对象的原型对象

跟铃铛说再见

学习的最后一步:放松

今日冷笑话:周末我回家晚了,一进门老婆就审问我:“怎么7点才回家?”我说:“下午参加了一个发布会。”老婆一边翻我的包一边说:“发的是什么布?我正想做条裤子。”

放松结束,猜猜明天会说讲些什么吧