文档章节

ES6中的新增符号 ... 和 =>

杜宝
 杜宝
发布于 2017/08/29 14:57
字数 510
阅读 8
收藏 0
点赞 0
评论 0
  1.  ...
  • 展开运算符(spread operator),作用是和字面意思一样,就是把东西展开。可以用在array和object上都行。
let a = [1,2,3];
let b = [0, ...a, 4]; // [0,1,2,3,4]

let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }
  •  剩余操作符(rest operator),是解构的一种,意思就是把剩余的东西放到一个array里面赋值给它。一般只针对array的解构,其他的没见过。。。
let a = [1,2,3];
let [b, ...c] = a;
b; // 1
c; // [2,3]

或者这样写

let a = [1,2,3];
let [b, ...[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined
//*************************
//或者这样写
function test(a, ...rest){
  console.log(a); // 1
  console.log(rest); // [2,3]
}

test(1,2,3)

当遇到长度不匹配时

let array = [1, 2, 3, 4, 5];
const { x, y, ...z } = array;
// 其中z=[3, 4, 5],注意如果由于array的length不足以完成析构,则会导致z为[]
对象:
let obj = { name: 'zhangsan', age: 30, city: 'shenzhen' };
const {name, ...others} = obj;
console.log(name); // 'zhangsan'
console.log(others); // {age: 30, city: 'shenzhen'}

2.=>

  • 回顾跟箭头相关的东西
<!-- 单行注释
-->  递增/减的操作符
<=   小于等于
=>   ?
  • ES6中的用法
// ES5  
var selected = allJobs.filter(function (job) {  
  return job.isSelected();  
});  
  
// ES6  
var selected = allJobs.filter(job => job.isSelected()); 

不难看出:当需要编写一个简单的单一参数函数时,可以采用箭头函数来书写,标识名=>表达式。这样就可以省却function和return的输入,还有括号,分号等

  • 不止一个参数(使用括号)
// ES5  
var total = values.reduce(function (a, b) {  
  return a + b;  
}, 0);  
  
// ES6  
var total = values.reduce((a, b) => a + b, 0);  
  • 语句块
/ ES5  
$("#confetti-btn").click(function (event) {  
  playTrumpet();  
  fireConfettiCannon();  
});  
//ES6的写法为:

[js] view plaincopy
// ES6  
$("#confetti-btn").click(event => {  
  playTrumpet();  
  fireConfettiCannon();  
});  
  • this 的传递
    //之前是这么写的,因为this有作用域限制
    {  
      ...  
      addAll: function addAll(pieces) {  
        var self = this;  
        _.each(pieces, function (piece) {  
          self.add(piece);  
        });  
      },  
      ...  
    }
    //现在可以这样写
    // ES6  
    {  
      ...  
      addAll: function addAll(pieces) {  
        _.each(pieces, piece => this.add(piece));  
      },  
      ...  
    } 

    特别注意:

  • 使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的有意义的this值。
  • 在其它场合都使用箭头函数。

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 2
博文 33
码字总数 16488
作品 0
兰州
深入理解ES6--符号与符号属性

主要知识点:创建符号值、使用符号值、共享符号值、符号值转换。检索符号值属性以及知名符号 1. Symbol基础 1.1 创建符号值 在 JS 已有的基本类型(字符串、数值、布尔类型、 与 ) 之外, ...

你听___
05/07
0
0
深入理解ES6--6.符号与符号属性

主要知识点:创建符号值、使用符号值、共享符号值、符号值转换。检索符号值属性以及知名符号 1. Symbol基础 1.1 创建符号值 在 JS 已有的基本类型(字符串、数值、布尔类型、 与 ) 之外, ...

你听___
05/07
0
0
深入理解 ES6

本文篇幅较长,有兴趣的可以先收藏再看。本文将重要的 ES6 特性介绍了一遍,并且详细解释了一些重难点。 let && const 与 的声明用法相同,但是多了一个临时死区(Temporal Distonrtion Zone...

夕阳
2017/09/08
0
0
ES5和ES6中的继承 图解

Javascript中的继承一直是个比较麻烦的问题,prototype、constructor、proto在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固。ES6中又新增了class和extends,和ES5搅在一...

钱天兵
2016/06/21
0
0
前端计划——JavaScript正则表达式快速入门

前言:正则表达式时处理字符串中常用的手法,本文以简单的方式,快速展示了JavaScript中正则相关的基础知识点。文末还提供了几个简单的正则相关面试题。个人总结,如有错误,还望指正, Java...

Alarak
2017/06/13
0
0
ECMAScript6 Symbol

es6之前所有的属性名都是字符串类型,容易造成属性名的冲突。所以在es6新增了一种数据类型Symbol,表示独一无二的值。Symbol并不是一个对象,所以不能通过new的方法进行创建,同时也不能添加...

罗布V
2016/10/10
10
0
koahubjs 1.0.6 发布,基于 Koa.js 的快速开发框架

koahubjs 发布 1.0.6 发布了。KoaHub.js 是基于 Koa.js 平台的 Node.js web 快速开发框架。可以直接在项目里使用 ES6/7(Generator Function, Class, Async & Await)等特性,借助 Babel 编译...

einsqing
2017/01/17
890
4
webpack运行Babel教程

摘要: Babel是转码器,webpack是打包工具,它们应该如何一起使用呢? GitHub仓库:Fundebug/webpack-babel-tutorial ES6 + IE10 = 语法错误! test.js使用了ES6的箭头函数: 由于低版本的浏览器...

Fundebug
06/22
0
0
JavaScript笔记(二):字符串

1.基础 字符串可以用单引号('')或双引号("")括起来。如果字符串本身中含有单引号,则用双引号括起来。反之亦然。如果同时含有单双引号可以用转义字符来标识。 2.多行字符串 ES6新增,用反引号...

第四单元
2017/09/12
0
0
快速理解JavaScript中变量、常量与字面量

首先通过例子,来对三者有个大致了解,然后再分别对其进行解释! 变量 变量是用于存储数据的容器,在程序的运行中可以发生变化或者被再次赋值。 我们可以使用var关键字来声明变量,变量的值可...

张培跃
05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计神器 - 摹客设计系统上线了 | 晒出你的设计规范,赢iPad Pro!

在国内,设计规范也许还是个不太常用的概念,但是如果你正好有参与互联网公司的产品设计,你应该早就已经体会到设计规范的重要性了。UI设计师总是要花费大量的时间和精力向开发描述一大堆设计...

mo311
10分钟前
0
0
Thymeleaf 使用过程中的一些记录

Thymeleaf格式化时间: th:value="${#dates.format(gw.regDT,'yyyy-MM-ddHH:mm:ss')}" Thymeleaf select反选: <select id="status" name="status" th:field="${gw.status}" th:value="${gw.......

惊尘大人
13分钟前
0
0
istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
18分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
22分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
27分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
28分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
30分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
48分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
52分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部