【ES6】函数的拓展-阿里云开发者社区

【ES6】函数的拓展

2023-02-22 79

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【ES6】函数的拓展

引言：ES6添加了函数的默认值的写法、rest参数、拓展运算符、箭头函数等特性，值得关注。

一、函数参数的默认值

在ES6之前，JS函数的参数是不可以指定默认值的，只能采取变通的方法。如代码块1-1。

/***@@    代码块1-1    变通的方法设置函数参数默认值    @@***/
function log(x,y){
  y=y||'默认值';
  console.log(x,y);
}
log('Hello');     //Hello 默认值
log('Hello','China'); //Hello China
log('Hello','');    //Hello 默认值

ES6允许为函数的参数设置默认值，即直接写在参数的后面。如代码块1-2。

/***@@    代码块1-2    ES6直接设置函数参数默认值    @@***/
function log(x,y='默认值'){
  console.log(x,y);
}
log('Hello');     //Hello 默认值
log('Hello','China'); //Hello China
log('Hello','');    //Hello 默认值

当ES6允许为函数的参数设置默认值之后，由于ES6中形形色色的数据结构，导致函数参数的解构也多姿多彩（头大）。比如函数参数的默认值可以与解构赋值默认值结合使用如代码块1-3。

/***@@    代码块1-3    与解构赋值默认值结合使用    @@***/
function foo({x,y=5}){
  console.log(x,y);
}
foo({})     // undefined,5
foo({x:1})    // 1,5
foo({x:1,y:2})  // 1,2
foo()     // TypeError: Cannot read property 'x' of undefined

还需要注意的是，参数默认值的位置应该在函数的参数尾部。因为这样比较容易看出，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是无法省略的。如代码块1-4。

/***@@    代码块1-4    参数默认值的位置应该在最后    @@***/
//错误示例
function fun(x=1,y){
  return [x,y];
}
fun()       // [1,undefined]
fun(2)        // [2,undefined]
fun(,1)       // 报错
fun(undefined,1)  // [1,1]

二、扩展运算符

扩展运算符spread是三个点…，主要用来把数组格式解析掉。也可以把解析完的值作为函数的参数。基本用法见代码块2-1。

/***@@    代码块2-1    ...的基本用法    @@***/
let array=[1,2,3];
console.log(...array); // 1,2,3
function add(x,y,z){
  console.log(x+y+z);
}
add(...array); // 6

还可以用来替代数组的apply方法、合并数组、把字符串转化为数组、把类数组对象转化为真正的数组等等。见代码块2-2。

/***@@    代码块2-1    ...的应用    @@***/
//1.替代数组的apply方法
//ES5写法
function f(x,y,z) {}
var args = [0,1,2];
f.apply(null,args);
//ES6写法
function f(x,y,z) {}
var args = [0,1,2];
f.apply(...args);
//2.合并数组
var arr1=[1,2];
var arr2=[3];
var arr3=[4,5];
//ES5的写法
arr1.concat(arr2,arr3); //[1,2,3,4,5]
//ES6的写法
[...arr1,...arr2,...arr3];  //[1,2,3,4,5]
//3.把字符串转化为数组
[..."hello"]; //["h","e","l","l","o"]

三、箭头函数【重点！！！】

箭头函数（=>）几乎算是JavaScript的一次编程规范的革新了，崭新的写法，精简的代码。而且，现在很多国内外的开源框架的源码几乎都是采用箭头函数来写的，所以学好箭头函数很重要。这里只介绍一下箭头函数的基本用法，见代码块3-1。

/***@@    代码块3-1    箭头函数的基本用法    @@***/
/******第一种写法 一个参数 返回一个值 ******/
var f= v => v;
//等同于
var f = function(v){
  return v;
}
/******第二种写法 多参数 返回的是语句 ******/
var sum = (num1,num2) => num1+num2;
//等同于
var sum = function(num1,num2){
  return num1+num2;
}
/******第三种写法 一个参数 函数体有多个语句 ******/
let array= [1,2,3];
var add = array => {
  let sum=0;
  for( let val of array)
    sum+=val;
  return sum;
}
//等同于
var add = function(array){
  let sum=0;
  for( let val of array)
    sum+=val;
  return sum;
}
/******第四种写法  简化回调函数******/
[1,2,3].Map(function(x){
  return x*x;
});
//等同于
[1,2,3].Map( x => x*x);