文档章节

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值。
  • 在其它场合都使用箭头函数。

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 3
博文 38
码字总数 30525
作品 0
兰州
私信 提问
深入理解ES6--符号与符号属性

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

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

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

你听___
2018/05/07
0
0
ES6 Symbol之浅入解读😂

一、介绍 是ES6新增的数据类型,是一种基础数据类型,MDN 中的对Symbol类型的描述为:数据类型 “symbol” 是一种原始数据类型,该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该...

SaltAir
2018/12/17
0
0
ES6面试、复习干货知识点汇总(全)

近期在复习ES6,针对ES6新的知识点,以问答形式整理一个全面知识和问题汇总。(全干货,适合对ES6有一定理解的同学复习,以及ES6面试。) 一、问:ES6是什么,为什么要学习它,不学习ES6会怎...

StevenLikeWatermelon
2018/12/10
0
0
ES6,记录的20多问题,你都会吗?

一、问:ES6是什么,为什么要学习它,不学习ES6会怎么样? 答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优...

大灰狼的小绵羊哥哥
2018/12/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Win下Jenkins-2.138源码编译及填坑笔记

源码编译篇 1、 安装JDK1.8-181,操作系统添加JDK环境变量。Java -version验证一下。 注:Jenkins2.138版本,JDK必须jkd1.8.0-101以上,不支持Java9,Maven必须3.5.3以上。 2、 解压Maven3....

编程SHA
9分钟前
0
0
Oracle数据库常用函数 转换函数 日期函数 字符型函数 数值函数

在讲解函数的功能和用法之前,先了解一下dual这个表。 dual这个表是一张只有一个字段,一行记录的表。它是一个虚拟表,用来构成select的语法规则。所以我们接下来会用到这个表来讲解常用函数。...

Sakura20
10分钟前
0
0
Titan 的设计与实现

作者:郑志铨 Titan 是由 PingCAP 研发的一个基于 RocksDB 的高性能单机 key-value 存储引擎,其主要设计灵感来源于 USENIX FAST 2016 上发表的一篇论文 WiscKey。WiscKey 提出了一种高度基于...

TiDB
13分钟前
2
0
ZStack--标签系统

ZStack中的标签不仅帮助用户聚集资源,也帮助控制软件行为。ZStack有一套完整的规范,用以定义标签的类别、形式和用法。除了用户外,插件也可以创建自己的标签,以记录元数据和拓展现有的资源...

ZStack社区版
18分钟前
0
0
解决360浏览器兼容性问题

360浏览器在不同IE版本模式一下、极速模式下、兼容模式下会导致css样式效果出问题,在head头部加上以下信息,可解决该问题: <head><meta http-equiv="x-ua-compatible" content="IE=edge,...

踏破铁鞋无觅处
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部