专栏首页腾讯NEXT学位干货| ES6/ES7好玩实用的特性介绍

干货| ES6/ES7好玩实用的特性介绍

本文介绍一些ES6/ES7好玩实用又简单的特性,或许对写代码的效率也有一定帮助噢。

ES6/ES7的出现已经有一段时间了,里面的一些新特性你们是否了解呢?本骚年将结合自身的一些使用经历介绍一些简单实用的新特性/语法糖。

基础常用的一些如letconst等这里就不详细介绍了,关于ES6/ES7的一些具体说明介绍大家可以参考ECMAScript 6 入门。

「解构」知多少


解构赋值

  • 数组和对象

数组的变量的取值与位置相关,而对象的属性与变量名有关。

1234567

// 数组let [a, b, c] = [1, 'abc', [3, 4]];// a = 1, b = 'abc', c = [3, 4]// 对象let { x, y } = { x: "a", y: 1 };// x="a", y=1

数组和对象的解构赋值其实用得不多,毕竟这样代码阅读性可能不大好,尤其数组的解构赋值和变量顺序紧紧关联。

默认值

解构赋值允许指定默认值。我猜你们很多都用到对象的默认值,数组的用过吗?

12345678910

// 数组let [x, y = 'b', c = true] = ['a', undefined];// x = 'a', y = 'b', c = true// 对象let {x, y = 5, z = 3} = {x: 1, y: undefined, z: null};// x=1, y=5, z=nulllet [x = f()] = [1]; // 这里的f()并不会执行let [x = f()] = [undefined]; // 这里的f()会执行

从上面代码我们可以发现两点:

  1. ES6内部使用严格相等运算符(===),如果一个数组成员不严格等于undefined,默认值是不会生效的。
  2. 默认值是表达式时候,会遵守惰性求值(只有在用到的时候,才会求值)。

函数参数的解构

函数参数的解构就比较有趣了,当然应用场景会更多。

参数解构,同时设置默认值,再也不需要长长的if判断和处理了:

123

function plus({x = 0, y = 0}){return (x + y);}

牛逼的点–拓展运算符(…)


数组和对象

别小看这三个点...,身为拓展运算符,它们还是很方便的。

1234567

// 数组const [a, ...b] = [1, 2, 3];// a = 1, b = [2, 3]// 对象let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };// x = 1, y = 2, z = { a: 3, b: 4 }

这里面需要注意的是:

  1. 解构赋值必须是最后一个参数,否则会报错。
  2. 解构赋值不会拷贝继承自原型对象的属性(即不会继承来自__proto__的属性)。

配合解构赋值

解构赋值配合拓展运算符,还可以很方便地扩展某个函数的参数,引入其他操作。

12345

function newFunction({ x, y, ...restConfig }) {// 使用x和y参数进行操作// 其余参数传给原始函数return originFunction(restConfig);}

快速拷贝拓展对象

  1. 取出参数对象的所有可遍历属性,拷贝到当前对象之中。

12

let z = { a: 1, b: 2 };let n = { ...z }; // n = { a: 1, b: 2 }

  1. 快速合并两个对象。

1

let ab = { ...a, ...b };

我们会发现,使用拓展运算符...进行对象的拷贝和合并,其实与ES6中另外一个语法糖Object.assign()效果一致:

12

// 上面的合并等同于let ab = Object.assign({}, a, b);

需要注意的有:

  • 它们都只会拷贝源对象自身的并且可枚举的属性到目标对象身上
  • 它们都是浅拷贝,即对象数组等将拷贝引用值
  • 对多个对象进行拷贝时,相同的属性名,后面的将覆盖前面的

rest参数

ES6引入rest参数(形式为...rest),用于获取函数的多余参数,这样就不需要使用arguments对象了。 rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

123456

function add(...values) {let sum = 0;values.forEach(x => {sum += x;})return sum;}add(1, 2, 3) // 6

替换arguments:

1234567

// arguments变量的写法function sortNumbers() {return Array.prototype.slice.call(arguments).sort();}// rest参数的写法const sortNumbers = (...numbers) => numbers.sort();

同样要注意的是,rest只能是最后一个参数。

说到arguments,这里插播一下尾调用优化。

  • 尾递归

递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。 但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。

  • 尾调用优化

ES6的尾调用优化只在严格模式下开启,正常模式是无效的。因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈:

  1. func.arguments:返回调用时函数的参数。
  2. func.caller:返回调用当前函数的那个函数。

一起来「拓展」


对象的拓展

对象拓展了一些很方便的属性,简化了我们很多的工作。常用的:

  • Object.assign()

用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

  • Object.keys()

返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

听着好复杂,但是很多时候当我们需要遍历某个对象的时候就很方便了:

123

Object.keys(someObj).forEach((key, index) => {// 需要处理的操作});

  • Object.values():与Object.keys()相似,返回参数对象属性的键值
  • Object.entries:同上,返回参数对象属性的键值对数组

数组的拓展

数组也拓展了一些属性:

  • Array.from():用于将两类对象转为真正的数组
  • Array.of():用于将一组值,转换为数组
  • 其它的entries()keys()values()

这里只介绍可能比较常用的:

  • Array.find():用于找出第一个符合条件的数组成员

参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

1

[1, 4, -5, 10].find((n) => n < 0); // -5

  • Array.findIndex():用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
  • Array.includes():返回一个布尔值,表示某个数组是否包含给定的值

数据结构的拓展

  • Set

它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成Set数据结构。

从此我们的去重就可以这样写了:

1

let newArray = Array.from(new Set(oldArray));

  • Map

JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。

12345

// 不信你可以试试看const obj = {a: 123};const a = [];a[obj] = 1;console.log(a["[object Object]"]);

原因是对象只接受字符串作为键名,所以obj被自动转为字符串[object Object]

Map数据结构类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。

关于简写那些事


属性的简写

ES6允许直接写入变量和函数,作为对象的属性和方法。

12345678910111213

// 属性简写function f(x, y) {return {x, y};// 等同于return {x: x, y: y};}// 方法简写var obj = {method() {}// 等同于method: function() {}};

箭头函数

ES6允许使用“箭头”(=>)定义函数。

123

var f = () => 5;// 等同于var f = function () { return 5 };

箭头函数有几个使用注意点:

  1. 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  2. 不可以当作构造函数,即不可以使用new命令。
  3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

最关键的是第一点:this对象的指向是可变的,但是在箭头函数中,它是固定的。

123456789101112131415

function normalFunction() {setTimeout(function(){console.log(this.name);}, 100);}function arrowFunction() {setTimeout(() => {console.log( this.name);}, 100);}var name = 'outer';normalFunction.call({ name: 'inner' }); // 'outer'arrowFunction.call({ name: 'inner' }); // 'inner'

结束语


这里我们介绍了ES6/ES7一些基础比较普遍的点,像解构、拓展表达式(...)、数组对象等拓展属性等等,基本上是一些提高开发效率,减少冗余重复的代码的新特性和新语法。 而像改变我们设计思维、甚至是解决方案的则是一些较复杂的,像ClassModulePromiseasync/await等等,咱们分篇讲,或者查ECMAScript 6 入门手册吧哈哈。

文章来源:腾讯工程师王贝珊

你也想成为腾讯工程师?

也想年薪噌噌噌往上涨?

那就快加入NEXT学院吧!

NEXT学院课程「Web前端工程师NEXT学位完整课程」

感兴趣的同学赶紧点击原文了解详情吧~

腾讯NEXT学院

求职干货 | 前辈blog  | 前端课程

↓↓↓点击阅读原文,抢购限时优惠

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 服务端渲染 vs 客户端渲染

    腾讯NEXT学位
  • 干货 | 如何实现小程序图片模糊预加载?

    ? ? 导语 最近在做的小程序项目设计大量图片的展示,小程序已经提供了图片的懒加载功能,但是由于图片本身比较大加上要展示的图片比较多,如何以一个比较友好的方式...

    腾讯NEXT学位
  • 你还不了解微信小程序么?

    你还不了解微信小程序? 随着小程序覆盖人们日常生活中的大部分场景,所有细分行业都有机会通过小程序的社交流量获取大量的新用户。 「小睡眠」上线第一天就获得70万...

    腾讯NEXT学位
  • 【作业3.0】HansBug的第三次博客规格总结

    早在上世纪50年代,就已经有早期的编程语言出现,也开始有一些程序编写者出现(多为资深电子工程师,和半路出家的数学家)。

    HansBug
  • JavaScript第七节

    内置对象有很多,我们主要是记下这些内置对象的用法即可。但是同学们也不可能一下子记住这么多的方法,因此当同学们忘了某个方法该如何使用的时候,可以通过以下方式查看。

    用户3461357
  • Dubbo剖析-整体架构分析

    工欲善其事,必先利其器,前面通过几篇文章简单的介绍了如何使用Dubbo搭建一个简单的分布式系统,在接下来的的一段时间就来研究Dubbo原理设计,本文作为原理设计...

    加多
  • 一个Java中操作字符串的类库 (Underscore.string.java)

    underscore.string.java 是一个Java中方便操作字符串的类库,提供了众多帮助方法。

    lambeta
  • Hive 正则提取英文名称和中文名称

    大数据工程师-公子
  • Android开发笔记(十五)淡入淡出动画TransitionDrawable

    说到淡入淡出动画,可能大家会想到补间动画里面的AlphaAnimation,不过这个深浅动画只能对透明度做渐变效果,也就是只...

    用户4464237
  • Content Provider 之 最终弹 实战体验跨程序数据共享(结合SQLiteDemo)

    本模块共有四篇文章,参考郭神的《第一行代码》,对Content Provider的学习做一个详细的笔记,大家可以一起交流一下:

    凌川江雪

扫码关注云+社区

领取腾讯云代金券