es6 默认参数、rest参数、扩展运算符

1、默认值

现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。

function sayHello(name){

//传统的指定默认参数的方式

var name = name||‘hubwiz‘;

document.write(‘Hello ‘+name);

}

//运用ES6的默认参数

function sayHello2(name=‘hubwiz‘){

document.write(`Hello ${name}`);

}

sayHello();  //输出:Hello hubwiz

sayHello(‘汇智网‘);  //输出:Hello 汇智网

sayHello2();  //输出:Hello hubwiz

sayHello2(‘汇智网‘);  //输出:Hello 汇智网

2、rest参数

rest参数(形式为“...变量名”)可以称为不定参数,用于获取函数的多余参数,这样就不需要使用arguments对象了。

rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {

let sum = 0;

for (var val of values) {

sum += val;

}

return sum;

}

add(1, 2, 3) // 6

不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如以上示例中,...values 代表了所有传入add函数的参数。

3、扩展运算符

扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=[‘张三‘,‘李四‘,‘王五‘];

//sayHello函数本来接收三个单独的参数people1,people2和people3

function sayHello(people1,people2,people3){

document.write(`Hello ${people1},${people2},${people3}`);

}

//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数

sayHello(...people);   //输出:Hello 张三,李四,王五

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法

sayHello.apply(null,people);   //输出:Hello 张三,李四,王五

 4、扩展运算符的应用(常用)

a、合并数组

扩展运算符提供了数组合并的新写法。

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‘ ]

 b、与解构赋值结合

扩展运算符可以与解构赋值结合起来,用于生成数组。

const [first, ...rest] = [1, 2, 3, 4, 5];

first // 1

rest // [2, 3, 4, 5]

const [first, ...rest] = [];

first // undefined

rest // []:

const [first, ...rest] = ["foo"];

first // "foo"

rest // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];

//  报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];

//  报错

时间: 2024-08-29 23:13:47

es6 默认参数、rest参数、扩展运算符的相关文章

由 Rest参数 和 Spread扩展运算符想到的...

ES2018 为对象解构提供 rest 参数和spread扩展运算符. 1. 合并俩对象: let obj = {a:1,b:2}, obj2={} let obj3 = {...obj, ...obj2} console.log(obj3) // {a: 1, b: 2} 2. 对象的值如果是undefined 或者 null let obj1 = {a: 1, b: 2}, obj2={c: undefined, d: null} console.log({...obj1, ...obj2}

rest 参数与扩展运算符

rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10 上面代码的add函数是一个求和函数,利用

day46homework常量字符串拼接结构赋值扩展运算符for-of循环map函数默认值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01定义常量.html</title> <!--常量--> <script> //常量:1.一旦定义 不能更改 const PI = 3.14;  // console.log(PI); // PI = 3.1415; error 

es6 扩展运算符 三个点(...)

1  含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>] 该运算符主要用于函数调用. function push(

ES6 入门系列 - 函数的扩展

1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的

... 扩展运算符

1  含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. [javascript] view plain copy console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]

ES6躬行记(2)——扩展运算符和剩余参数

扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对象(iterable).虽然两者之间有诸多类似,但它们的功能和应用场景却完全不同.扩展运算符能把整体展开成个体,常用于函数调用.数组或字符串处理等:而剩余参数正好相反,把个体合并成整体,常用于函数声明.解构参数等.此处的整体可能是数组.字符串或类数组对象等,个体可能是字符.数组的元素或函数的参数等.

ES6 rest参数和扩展运算符

rest参数 ES6引入了rest参数(形式为“…变量名”).其中rest参数搭配的变量是一个数组可以使用数组的一切操作. 例: function rest(...values){ let sum=0; for(var val of values){ sum+=val; } return sum; } add(1,2,3)//6 值得注意的是rest参数之后不能再有其他参数(只能是最后一个参数)否则会报错. 例: function rest(a,...b,c){ }//报错 函数的length属

es6可变参数-扩展运算符

es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a.forEach(function(item){ sum += item*1; }) return sum; }; f(1,2,3);//6 es6中可变参数: function f(...a){ let sum = 0; a.forEach(item =>{ sum += item*1; }) re