函数参数默认值设置、reset参数、扩展运算符


函数参数的默认值设置

1.形参初始值 具有默认值的参数 一般位置要靠后(潜规则)

function add(a,b,c = 10){
    return a + b + c;
}
let result = add(1,2,3)
console.log(result)   //输出6

function add(a,c = 10,b){
    return a + b + c;
}
let result = add(1,2)
console.log(result)   //输出NaN

2.与解构赋值结合

function connect({host,username,password,port}){
    console.log(host)      //localhost
    console.log(username)  //root
    console.log(password)  //root
    console.log(port)    //3306
}
connect({
    host: 'localhost',
    username: 'root',
    password: 'root',
    pot: 3306    
})

rest参数

ES6引入reset参数,用于获取函数的实参,用来代替arguement

ES5获取实参的方式:

function date(){
    console.log(arguement)
}
date('白芷','阿娇')

结果如下图所示

5ApORe.png

结果是个对象

rest参数

function date(...args){
    console.log(args)
}
date('白芷','阿娇')

结果:

5A9ii8.png

是个数组,可以用数组的方法:filter some every map

rest参数必须要放到最后

function fn(a,b,...args){     //否则会报错
    console.log(a)
    console.log(b)
    console.log(args)
}
fn(1,2,3,4,5,6)

扩展运算符

『…』扩展运算符能将『数组』转换为逗号分隔的『参数序列』

//声明一个数组 ...
const tfboys = ['易烊千玺','王源','王俊凯']

//声明一个函数
function chunwan(){
    console.log(arguments)
}
chunwan(tfboys)     //1
chunwan(...tfboys)  //2    chuwan('易烊千玺','王源','王俊凯')

1、2的结果如果所示:

5ACi01.png

扩展运算符的应用

1.数组的合并

const kuaizi = ['111','222']
const fenghuang = ['333','444']
//const xiaopingguo = kuaizi.concat(fenghuang)   //ES5
const xiaopingguo = [...kuaizi,...fenghuang]

2.数组的克隆

const sanzhihua = ['E','G','M']
const sannyecao = [...sanzhihua]; //['E','G','M']

3.将伪数组转为真正的数组

const divs = document.querySelectorAll('div')
const divArr = [...divs]
console.log(divArr)    //将对象转换为

  目录