ES6中的新增符号 ... 和 =>
博客专区 > 杜宝 的博客 > 博客详情
ES6中的新增符号 ... 和 =>
杜宝 发表于6个月前
ES6中的新增符号 ... 和 =>
  • 发表于 6个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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

 

标签: ES6 ... =>
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 30
码字总数 15365
×
杜宝
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: