文档章节

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

杜宝
 杜宝
发布于 2017/08/29 14:57
字数 510
阅读 10
收藏 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--6.符号与符号属性

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

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

主要知识点:创建符号值、使用符号值、共享符号值、符号值转换。检索符号值属性以及知名符号 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
es6新特性---let const

想要学习更多,推荐看阮大神的http://es6.ruanyifeng.com/#docs/let 在学习之前得知道作用域 ES5 中作用域有:全局作用域、函数作用域。没有块作用域的概念。 ES6 中新增了块级作用域。块作用...

小丑鱼888
08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

五大云原生技术

云原生(Cloud-Native)是一种文化,更是一种潮流,它是云计算的一个必然导向,是让云成为云化战略成功的基石。云计算时代,云原生技术注定将对现代化应用的建设、交付与运维产生颠覆性的影响...

问题终结者
13分钟前
2
0
Android JNI开发系列(十二) JNI局部引用、全局引用和弱全局引用

JNI 局部引用、全局引用和弱全局引用 在JNI规范中定义了三种引用:局部引用(Local Reference)、全局引用(Global Reference)、弱全局引用(Weak Global Reference)。区别如下: 局部引用...

蔡小鹏
14分钟前
2
0
Android 实现类似考试座号表效果

类似于这种效果 1,新建一个Student类,用户添加学生信息 private int icon; private String name; private int age; private String sex ; private int id; publ...

lanyu96
19分钟前
1
0
聊聊storm的CustomStreamGrouping

序 本文主要研究一下storm的CustomStreamGrouping CustomStreamGrouping storm-2.0.0/storm-client/src/jvm/org/apache/storm/grouping/CustomStreamGrouping.java public interface CustomS......

go4it
29分钟前
2
0
编程中的各种闲谈

service 是否一定要定义 interface 在学习ssh(spring, struts2, hibernate)时,老师教在 service 层要定义接口,再去实现此接口,方便解耦。 在 spring 框架中,自身定义了很多接口,并且有不...

seal_90
30分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部