前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6 学习笔记之函数的拓展

ES6 学习笔记之函数的拓展

作者头像
我与梦想有个约会
发布2020-01-05 15:01:31
2480
发布2020-01-05 15:01:31
举报
文章被收录于专栏:jiajia_deng

本文记录了一些 ES6 函数相关的改动,比较重要的就是箭头函数及箭头函数内部 this 的变化,其他一些不常见的概念我也仅仅是看了看,并没有实际操作测试效果。待需要用到的时候再研究。

rest 参数

代码语言:javascript
复制
const add = (...values) => {
  let sum = 0;

  for (let value of values) {
    sum += value;
  }

  return sum;
}

console.log(add(10, 4, 1, 5));

扩展运算符

扩展运算符就是三个点 ...,将一个数组转为用逗号分隔的参数序列。

代码语言:javascript
复制
console.log(...[1, 2, 3, 4]);
// 1 2 3 4
console.log(1, ...[2, 3, 4], 5);
// 1 2 3 4 5

扩展运算符用于函数调用

代码语言:javascript
复制
function sum(a, b) {
  return a + b;
}

var numbers = [2, 17];
console.log(sum(...numbers));
// 19

function f(v, w, x, y, z) {/*...*/}
var args = [1, 2];
f(-1, ...args, 2, ...[3]);

替代 ES5 的 apply,ES5 中如果要将一个数组转为参数传递,需要用到 apply 方法,而 ES6 中拓展运算符则替代了这一功能。

代码语言:javascript
复制
let max;
// ES5 写法
max = Math.max.apply(null, [14, 3, 77]);
console.log(max);

// ES6 写法
max = Math.max(...[11, 2, 100]);
console.log(max);

另外一个例子是在一个数组后追加元素的例子。

代码语言:javascript
复制
// ES5 写法
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
// [ 1, 2, 3, 4, 5, 6 ]

// ES6 写法
var arr3 = [1, 2, 3];
var arr4 = [4, 5, 6];
arr3.push(...arr4);
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]

箭头函数

代码语言:javascript
复制
// ES5
var f_es5 = function (v) {
  return v;
}

// ES6
var f_es6 = v => v;

如果不需要参数或需要多个参数,则吧多个参数用括号括起来

代码语言:javascript
复制
var f_es6_1 = () => 5;
// 等同于
var f_es5_1 = function () { return 5; };

var f_es6_2 = (value1, value2) => value1 + value2;
// 等同于
var f_es5_2 = function (value1, value2) { return value1 + value2; };

this 对象的变化,使用箭头函数,this 是 undefined,而使用普通函数,this 返回的是全局对象。

代码语言:javascript
复制
setInterval(() => console.log(this), 1000);
// undefined
setInterval(function () { console.log(this); }, 1000);
// 返回全局对象

箭头函数中是没有 this 指针的,如果在箭头函数中打印 this 有具体的值,是因为其使用了外层代码块的 this。如下案例来自书中。

代码语言:javascript
复制
// ES6
function foo() {
  setTimeout(() => {
    console.log('id', this.id);
  }, 100);
}

// 转为 ES5 表达就是类似如下代码
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年2月22日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • rest 参数
  • 扩展运算符
  • 箭头函数
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档