前言

随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事。之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的代码示例都已经开始使用ES6编写了,昨天瞥了一眼vue的源码,已经全部使用ES6编写了。随着开发的进行,发现仅仅了解一下已经不能应付一些日常开发了,因为一些新的特性看起来有点吃力了,所以决定重新学习一下日常开发中见得比较多的ES6特性,争取与实际用例相结合,不仅要认识还要会用,以后多多用起来!当然本文中的ES6就是泛指哈,借用阮一峰老师的定义:

ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。

扩展运算符

rest参数

在讲扩展运算符之前得讲一下rest参数,rest参数在我理解来看就是用'...变量名'的形式替代了函数参数中的arguments对象,大概用法如下:

  1. function testFn (fist, ...rest) {
  2. console.log(fist); //1
  3. console.log(rest); //[2,3,4,5]
  4. }
  5. testFn(1,2,3,4,5);

当然如果在参数中只传入rest参数的话它代表的就是将arguments对象转为数组之后的一个数组,也就是一个包含了所有参数的数组:

  1. function test2 (...rest) {
  2. console.log(rest);
  3. }
  4. test2(1,2,3); // [1,2,3]

这个对于处理一些不知道参数数量的情况是很方便的,因为一般来说我们也要将argum对象转为数组才方便处理的,下面就是两种不同的写法:

  1. // arguments写法
  2. function add1(){
  3. var sum = 0;
  4. Array.prototype.slice.apply(arguments).forEach( function(item){
  5. sum += item;
  6. })
  7. console.log(sum)
  8. }
  9. add1(1,2,3); //6
  10. // rest参数写法
  11. function add2(...valus) {
  12. let sum = 0;
  13. valus.forEach( value => {
  14. sum += value
  15. })
  16. console.log(sum)
  17. }
  18. add2(1,2,3); //6

扩展运算符

讲完了rest参数,再讲扩展运算符就可以把它理解为rest参数的逆运算,将一个数组转为用逗号分隔的参数序列:

  1. console.log(...[1,2]); //1,2
  2. console.log(8, ...[1,2], 9); //8,1,2,9

再将rest参数和扩展运算符结合起来就是这样的:

  1. function test3 (...rest) {
  2. console.log(rest)
  3. }
  4. var nums = [1,2,7];
  5. test3(...nums); // [1,2,7]

应用:

  • 替代组中的apply方法
  1. var arr4 = [1,2,3];
  2. function test4 (a, b, c) {
  3. console.log(a)
  4. }
  5. // ES5写法
  6. test4.apply(null, arr4);
  7. // ES6写法
  8. test4(...arr4);
  • 合并数组
  1. var arr1_ = [1];
  2. var arr2_ = [2,3];
  3. var arr3_ = [4,5];
  4. // ES5
  5. var arr4_ = arr1_.concat(arr2_, arr3_);
  6. console.log(arr4_); //[1, 2, 3, 4, 5]
  7. // ES6
  8. var arr5_ = [...arr1_, ...arr2_, ...arr3_]
  9. console.log(arr5_); //[1, 2, 3, 4, 5]

rest运算符和spread运算符的区别

对于三个点号,三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符,或者说,放在被赋值一方为rest运算符,放在赋值一方为扩展运算符。

解构赋值

解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值

  • 数组的解构赋值
    1. let [a, b, c] = [1, 2, 3];
    2. console.log(a); //1
  • 对象的解构赋值
    1. let { foo, bar } = { foo: "aaa", bar: "bbb" };
    2. console.log(foo); //"aaa"
  • 字符串的解构赋值
    1. const [a, b, c, d, e] = 'hello';
    2. a // "h"
  • 数值和布尔值的解构赋值
  • 函数参数的机构赋值

本文同步发表在我的个人博客:[https://wancheng7.github.io/post/59cf2dea.html)

参考文章

ES6学习笔记(一)——扩展运算符和解构赋值的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6 学习笔记(二)解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  3. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  4. ES6学习笔记(2)----变量的解构和赋值

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 变量的解构和赋值 本质上:只要模式匹配,左边的变量就能被赋予右边对应的值 原则: 解构赋值的规则 ...

  5. ES6学习----let、const、解构赋值、新增字符串、模板字符串、Symbol类型、Proxy、Set

    这篇es6的学习笔记来自于表哥 表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 ES6就是JS6,JS的第 ...

  6. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

  7. ES6学习笔记(一):变量赋值和基本数据类型

    let和const let和const不存在变量提升 变量一定要在声明后使用,否则报错. var a = []; for (var i = 0; i < 10; i++) { a[i] = fu ...

  8. es6学习2:变量的解构赋值

    一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...

  9. ES6学习笔记(4)- 解构

    一.解构的意义 二.对象解构 三.数组解构

随机推荐

  1. 持续交付的Mesos与Docker导入篇

    变革这个词在当今的数字化时代司空见惯,IT技术每过一段时间就会有一起革新,从WEB2.0.虚拟化.云计算.大数据.微架构.DevOps再到今天的容器Docker与Mesos. Docker的出现方便了 ...

  2. Celery和Rabbitmq自学

    异步消息队列,也能用于定时和周期性任务.每次修改的task代码还要重启worker,这个有点麻烦 所有带task()装饰器的可调用对象(usertask)都是celery.app.task.Task类 ...

  3. Flex 布局:实例篇

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. ​ 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇& ...

  4. Navicat连接服务器上的Mysql数据库

  5. qt——exec()的基本用法

    qt中 if(my1.exec()==QDialog::Accepted) 是什么意思 这个先说这个my1.exec()这个就是个等待消息的循环,就是说它在等待你给的命令. 再说这个QDialog:: ...

  6. Linux中的Buffer Cache和Page Cache echo 3 > /proc/sys/vm/drop_caches Slab内存管理机制 SLUB内存管理机制

    Linux中的Buffer Cache和Page Cache echo 3 > /proc/sys/vm/drop_caches   Slab内存管理机制 SLUB内存管理机制 http://w ...

  7. Flask系列之自定义中间件

    from flask import Flask app = Flask(__name__) @app.route('/index') def index(): return 'Hello World' ...

  8. php计算中英文混合或中文字符串的字数

    转载来源链接: http://blog.csdn.net/hueise_h/article/details/22920937 php的strlen和mb_strlen用于统计字符个数.中英文混合的字符 ...

  9. 【Lua】面向对象编程(一)

    类和对象: account.lua   module(...,package.seeall) Account={balance=} Account.new=function(self,o) local ...

  10. 手把手教你学node.js之一个简单的express应用

    一个简单的express应用 目标 建立一个 lesson1 项目,在其中编写代码.当在浏览器中访问 http://localhost:3000/ 时,输出 Hello World. 挑战 访问 ht ...