1.基本用法
//函数的参数可以加默认值,只有不传实参的时候才会走默认值
function fn1(x="x",y) {
console.log(x,y);
}
fn1(1,2) //1 2
function fn2({x=0,y=0}={}){
return{x,y}
}
console.log(fn2({x:1})) //{x: 1, y: 0}
function fn3({x,y}={x:1}){
return {x,y}
}
console.log(fn3({x:1})) //{x: 1, y: undefined}
//一般会把默认值放在最后边
function fn4(x,y,z=1){
return {x,y,z}
}
console.log(fn4(1,2))//{x: 1, y: 2, z: 1}
2.参数集合
function fn5() {
console.log(arguments.length);
}
fn5(1,2,3,4);
function fn6(x,y=2){}
fn6();
//没有默认值的情况下,形参的长度
//如果有默认值,当前默认值就会影响他的length,默认值参数的位置
console.log(fn6.length) // 1
3.参数作用域问题
function fn1(x = n, y = m) {
let n = 1, m = 2;
console.log(x, y);//Uncaught ReferenceError: n is not defined
}
fn1();
//形参所在的小括号,是一个单独的作用域,遇到了变量先看自己作用域下有没有,没有再往上一级找
let x = 10;
function fn2(x = 1, y = x) {
//let x=20;
console.log(y);
}
fn2();
4.扩展运算符
/* ... 可以将数组变成非数组,也可以将非数组变成数组*/
let ary = [1, 2, 3];
console.log(...ary);//1 2 3
//将字符串变成数组
let str = "123a45";
console.log([...str]);//["1", "2", "3", "a", "4", "5"]
//将类数组变成数组
function fn() {
return [...arguments].sort()
}
console.log(fn(2, 3, 4, 2, 1, 6));//[1, 2, 2, 3, 4, 6]
/*应用:求最大值的方法*/
console.log(Math.max(2, 4, 56, 2));//56
let ary1 = [1, 2, 3, 4, 6, 23];
//方法一:
eval("Math.max(" + ary1 + ")");//23
//方法二:
Math.max.apply(null, ary1);//23
//方法三:
Math.max(...ary1);//23
/*数组拼接*/
let a1=[1,2,3],a2=[2,6,7];
console.log(a1.concat(a2));//[1, 2, 3, 2, 6, 7]
console.log([...a1, ...a2]);//[1, 2, 3, 2, 6, 7]
5.函数name属性
function fn() {
}
console.log(fn.name);//fn
/*bind,用来改变this的,返回新的函数*/
let obj = {};
var fn1 = fn.bind(obj);
fn1();
console.log(fn1.name);//bound fn,因为是通过fn的bind得来的
//通过构造函数创建的,名字比较特殊
let f=new Function("n","return n");
console.log(f.name);//anonymous 匿名
6.箭头函数
/*箭头函数*/
let fn1 = (x) => {
};
x => x; //相当于 function fn(x){return x}; 如果函数体只有一行代码而且是return ;可以简写
/*箭头函数中的this问题*/
//箭头函数没有this指向,它里面的this是谁,看他的上一级作用域(上一级作用域不是箭头函数)
let obj = {
fn: function () {
console.log(this);//{fn: ƒ, fn1: ƒ}
let f = () => {
console.log(this);
};
f();//{fn: ƒ, fn1: ƒ}
},
fn1: () => {
console.log(this);//Window{postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,…}
}
};
obj.fn();//this==obj;
obj.fn1();//this==window;
/*应用*/
box.onclick=()=>{
console.log(this);//window
}