ES6 从入门到精通 # 04:函数之默认值、剩余参数

简介: ES6 从入门到精通 # 04:函数之默认值、剩余参数

说明

ES6 从入门到精通系列(全23讲)学习笔记。



带参数默认值的函数

// es5 写法
function add(a, b) {
  a = a || 666;
  b = b || 777;
  return a + b;
}
console.log(add());
function add2(a, b = 666) {
  return a + b;
}
console.log(add2(2));



2eebc37580cb4b3ab5e8f4aa9d8a4dd6.png



默认的表达式也可以是一个函数

function getVal(val) {
  return val + 1;
}
function add3(a, b = getVal(6)) {
  return a + b;
}
console.log(add3(3));

19fb300d8c1246b68ec7d0cc524fd7cc.png



剩余参数

由三个点 ... 和一个紧跟着的具名参数指定,比如:...keys,这个解决了 arguments 的问题。

// es5
function getBlogInfo(obj) {
  let result = Object.create(null);
  for(let i = 1; i < arguments.length; i++) {
    result[arguments[i]] = obj[arguments[i]];
  }
  return result;
}
let blog = {
  name: "凯小默的博客",
  author: "kaimo",
  year: "2017"
}
let blogData = getBlogInfo(blog, "name", "author", "year");
console.log(blogData);


c601b7ba313042249a86130d6b1189b5.png

// es6
function getBlogInfo(obj, ...keys) {
  console.log(keys);
  let result = Object.create(null);
  for(let i = 0; i < keys.length; i++) {
    result[keys[i]] = obj[keys[i]];
  }
  return result;
}
let blog = {
  name: "凯小默的博客",
  author: "kaimo",
  year: "2017"
}
let blogData = getBlogInfo(blog, "name", "author", "year");
console.log(blogData);


a2892c11de1c47fe8dcf8db0d626fd7e.png


剩余参数 对比 arguments:

function checkArgs(...args) {
  console.log(args); // 真实数组
  console.log(arguments); // 伪数组
}
checkArgs("name", "author", "year");


ae988cf6d0354de19cd674093e1a5554.png







目录
相关文章
|
2月前
|
Python
python中位置参数和默认值
【7月更文挑战第25天】
38 7
|
2月前
|
Serverless API 网络安全
函数计算操作报错合集之如何解决在cfg_scale参数传入4.5等浮点数时遇到报错
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
|
1月前
|
JavaScript 前端开发 网络架构
ES6新特性: 默认参数及扩展运算符和剩余参数
ES6新特性: 默认参数及扩展运算符和剩余参数
|
4月前
|
JavaScript 前端开发
分享函数中 this 在不同场景下的指向与默认值,动态指定函数 this 值的方法
分享函数中 this 在不同场景下的指向与默认值,动态指定函数 this 值的方法
|
9月前
|
JavaScript 前端开发
ES6学习(四)—字符串的新增方法
ES6学习(四)—字符串的新增方法
|
10月前
|
网络架构
ES6中新增的rest剩余参数在函数内部的使用问题
ES6 中引入了 rest 参数(...变量名),用于获取函数内不确定的多余参数,注意只能放在所有参数的最后一个
49 0
|
11月前
|
JavaScript
TypeScript-可选-默认-剩余参数
TypeScript-可选-默认-剩余参数
59 0
|
JavaScript
面试题-TS(十):如何处理可选属性和默认参数?
在TypeScript中,可选属性是指在定义接口或类时,指定某些属性不是必须的,可以存在也可以不存在。使用可选属性可以让我们定义更灵活的数据结构,允许对象中包含额外的属性,而不会报错。
|
网络架构 索引
ES6新增扩展:字符串-数值-数组-函数-对象
ES6新增扩展:字符串-数值-数组-函数-对象
80 0
|
前端开发
前端学习案例-参数默认值是函数1
前端学习案例-参数默认值是函数1
62 0
前端学习案例-参数默认值是函数1