ES Function

作者: 碧玉疾风丶 | 来源:发表于2017-03-01 18:17 被阅读0次

检查本地Node版本对ES6支持情况:

npm -g install es-checker
es-checker

执行结果如下图:
node 6.10.0支持率为90%


安装bable

npm --save-dev install babel-cli
npm --g install babel-cli

至于--save-dev --g同时使用,搜了如下:


安装完babel-cli之后,直接执行如下即可

babel-node filename

<br />
<br />

ES6中函数的拓展

支持如下设置默认值

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
var p = new Point();// { x: 0, y: 0 }

<br />

解构赋值

function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 综述,{}={},右边的值会被函数传入值所替代

m1() // [0, 0]
m2() // [0, 0]
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]
m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

<br />

传入undefine会被默认值覆盖,null不会

function foo2(x = 5, y = 6) {
  console.log(x, y);
}

foo2(undefined, null)
// 5 null

<br />

function().length


//  返回有默认值参数之前,未设默认值的参数个数
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

<br />

函数参数作用域

let foo4 = 'outer';
function bar(func = x => foo4) {    //  这里的foo指向外层的foo(outer)
  let foo4 = 'inner';
  console.log(func()); // outer
}
bar();

var x3 = 1;
function foo3(x, y = function() { x3 = 2; }) {
  var x3 = 3;
  y();
  console.log(x);
}
foo3()  // 3
x       // 1

<br />

rest参数

//  rest参数(...values),代替arguments对象
//  function().length不会算入rest参数
//  讲一串都好分隔的变量,转换成数组
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

<br />

...拓展运算符

//拓展运算符,rest逆运算,把数组展开成都好分隔的变量
console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

//合并数组
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

//  拆分数组
const [first, ...rest] = [1, 2, 3, 4, 5];
var item1 = first // 1
var item2 = rest  // [2, 3, 4, 5]

//实现了Iterator接口的对象
//var nodeList = document.querySelectorAll('div');
//var array = [...nodeList];


//没有部署Iterator接口的类似数组的对象
let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
//  let arr = [...arrayLike];

<br />
####检测Node版本对es6的支持情况:

> npm -g install es-checker
> es-checker
> 
![
![GSJS3B45$W)M@GL9QJ(2J0T.png](https://img.haomeiwen.com/i1759843/a897b920036fe454.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://img.haomeiwen.com/i1759843/0442d81b2a6809a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)





let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

<br />

箭头函数,不赘述

箭头函数有几个使用注意点。

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
  • 不可以使用yield命令,因此箭头函数不能用作Generator函数。

<br />

尾递归优化另外总结

相关文章

  • ES Function

    检查本地Node版本对ES6支持情况: npm -g install es-checkeres-checker 执...

  • JS高级必须知道的几个点!

    1.1 函数声明 //ES5 function getSum(){} function (){}//匿名函数 //...

  • ES6 特性

    ES6 readable usable matainable 1.Arrow Function function ...

  • class

    class class 与es5function差异class只能使用new命令执行,es5function可以直...

  • es6 class理解

    es6 class 是es5 function的语法糖 class中的所有方法 对应了 function的原型链上...

  • ES6函数扩展

    function扩展 ES6在原有ES5基础上对function的扩展 1.默认值 ES6 允许为函数的参数设置默...

  • es6类

    es6类中对应es5的实现 alias = function|obj

  • call和apply

    ES3给Function的原型定义了两个方法,Function.prototype.call和 Function....

  • es6箭头函数

    es5: var sum = function (a,b){ return a+b; } es6箭头函数:...

  • let,const,解构,数组遍历

    一:ES6(https://es6.ruanyifeng.com/#docs/function[https://e...

网友评论

    本文标题:ES Function

    本文链接:https://www.haomeiwen.com/subject/wjrcgttx.html