ES Function

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

npm -g install es-checker
es-checker

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

ES Function_第1张图片

ES Function_第2张图片

安装bable

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

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


ES Function_第3张图片

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

babel-node filename




ES6中函数的拓展

支持如下设置默认值

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


解构赋值

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]


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

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

foo2(undefined, null)
// 5 null


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


函数参数作用域

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


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


...拓展运算符

//拓展运算符,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];


####检测Node版本对es6的支持情况: > npm -g install es-checker > es-checker > ![ ![GSJS3B45$W)M@GL9QJ(2J0T.png](http://upload-images.jianshu.io/upload_images/1759843-a897b920036fe454.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](http://upload-images.jianshu.io/upload_images/1759843-0442d81b2a6809a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);


箭头函数,不赘述

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

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


尾递归优化另外总结

你可能感兴趣的:(ES Function)