函数是一段结合在一起执行特定任务的代码,函数一般使用参数与外部进行交互。要编写简洁高效的JS代码,必须掌握函数参数。
在本文中,会使用一些有趣的例子来解释 JS 必须有效地处理函数参数的所有特性。
JS 函数可以有任意数量的参数。咱们来定义具有0、1和2个参数的函数。
// 0 个参数
function zero() {
return 0;
}
// 1 个参数
function identity(param) {
return param;
}
// 2 个参数
function sum(param1, param2) {
return param1 + param2;
}
zero(); // => 0
identity(1); // => 1
sum(1, 2); // => 3
上面的3个函数调用传入的参数个数与函数定义参数个数相同。当然传入参数比定义参数个数少的时候, JS 允许咱们这样,不会报错,缺少会使用 undefined 代替。
例如,咱们用一个参数调用函数sum()(它有两个参数)
function sum(param1, param2) {
console.log(param1); // 1
console.log(param2); // undefined
return param1 + param2;
}
sum(1); // => NaN
只有一个参数调用该函数:sum(1)。这样 param1的值是1,但是第二个参数param2是会用undefined初始化的。
param1 + param2的值为1 + undefined,结果为NaN。
如果有必要,可以验证参数是否是 undefined ,并提供一个默认值。
function sum(param1, param2) {
if (param2 === undefined) {
param2 = 0;
}
return param1 + param2;
}
sum(1); // => 1
当然还有更好做法,就是使用默认参数,来看看。
ES6 默认参数特性允许使用默认值初始化参数。这种比上面介绍的方法更好、更简洁。
接着使用ES6默认参数特性将param2默认为0。
function sum(param1, param2 = 0) {
console.log(param2); // => 0
return param1 + param2;
}
sum(1); // => 1
sum(1, undefined); // => 1
现在如果没有传入第二个参数,param2 就默认为 0 。
注意,如果将undefined设置为第二个参数sum(1, undefined), param2也将初始化为0。
在JS函数参数中,咱特别喜欢的是解构的特性。可以将内联参数的对象或数组进行解构。这个特性使得从参数对象中提取一些属性非常有用
function greet({ name }) {
return `Hello, ${name}!`;
}
const person = { name: '前端小智' };
greet(person); // => 'Hello, 前端小智!'
{ name }是应用于对象解构的参数。
当然也可以结合默认参数:
function greetWithDefault({ name = '无名氏' } = {}) {
return `Hello, ${name}!`;
}
greetWithDefault(); // => 'Hello, 无名氏!'
{name = 'Unknown'} ={} 默认为空对象。
可以使用组合不同类型解构的所有功能。例如,让我们对同一个参数使用对象和数组解构。
function greeFirstPerson([{ name }]) {
return `Hello, ${name}!`;
}
const persons = [{ name: '王小智' }, { name: '王大治'}];
greeFirstPerson(persons); // => 'Hello, 王小智!'
[{name}]的解构较为复杂,它提取数组的第一项,然后从中对象读取name属性。
JS 函数的另一个很好的特性是能够用可变参数调用同一个函数。这样可以使用 arguments 对象来获取传入的所有参数。
arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
例如,对函数的参数求和:
function sumArgs() {
console.log(arguments); // { 0: 5, 1: 6, length: 2 }
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
sumArgs(5, 6); // => 11
arguments 是一个对应于传递给函数的参数的类数组对象。
有个问题是,每个函数作用域都定义了自己的arguments对象。因此,可能需要一个额外的变量来访问外部函数作用域arguments:
function outerFunction() {
const outerArguments = arguments;
return function innerFunction() {
// outFunction arguments
outerArguments[0];
};
}
有一种特殊情况:箭头w函数中没有arguments 。
const sumArgs = () => {
console.log(arguments);
return 0;
};
// throws: "Uncaught ReferenceError: arguments is not defined"
sumArgs();
但这问题不。 可以使剩余参数访问箭头函数内的所有参数。来 look look。
剩余参数语法允许咱们将一个不定数量的参数表示为一个数组。
老样子,来 see see。
function sumArgs(...numbers) {
console.log(numbers); // [5, 6]
return numbers.reduce((sum, number) => sum + number);
}
sumArgs(5, 6); // => 11
...numbers是一个剩余参数,它将成为一个由剩余参数组成的真数组[5,6]。由于numbers 是一个数组,所以就可以使用数组自有方法reduce(与类数组对象的参数相反)。
如果不想在剩余参数中收集所有参数,则可以组合常规参数和剩余参数。
function multiplyAndSumArgs(multiplier, ...numbers) {
console.log(multiplier); // 2
console.log(numbers); // [5, 6]
const sumArgs = numbers.reduce((sum, number) => sum + number);
return multiplier * sumArgs;
}
multiplyAndSumArgs(2, 5, 6); // => 22
multiplier 是一个常规参数,它获取第一个参数的值。然后剩下的参数...numbers 接收剩余的参数。
剩余参数和 arguments对象之间的区别主要有三个:
除了基本用法之外,JS在处理函数参数时还提供了许多有用的特性。
当缺少参数时,可以很容易地设置默认值。
JS 解构的所有功能都可以应用于参数。甚至可以将解构与默认参数结合使用。
arguments 是一个特殊的类数组对象,它包含函数调用时使用的所有参数。
作为arguments的更好替代,可以使用剩余参数特性。它也保存参数列表,但是,它将它们存储到数组中。
原文:https://dmitripavlutin.com/javascript-function-parameters/
在前端开发中,经常会遇到获取URL的相关数据,下面将总结下使用JavaScript来获取url地址的协议,参数,端口号,锚点等方法。
ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。
通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步
给外部引用的js文件传递参数的4种方式:定义全局变量、在src后面传参、检索js文件(js文件要最后引入)、设置其他属性
一般error函数返回的参数有三个: function(jqXHR jqXHR, String textStatus, String errorThrown)。常见调用代码如下:这里对这三个参数做详细说明。
在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上。如下代码想要达到的效果:不传page和id,则映射到user默认list页面,传page和id,根据page不同,显示不同的页面
前后端传参一般有两种形式:key=value 形式传参(即 parameter 形式);body 形式传参(传 json 数据给后端),如果使用的是 GET 请求,浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数,这就是 key=value 形式传参
* 参数可以使用逗号或分号分隔。 (建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。
currentPage is not defined;opyions is not defined;不细心的我少写了前两句,以为参数是可以直接引用的,注意this的使用,有时需要定义全局变量来调用
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!