js 之 函数参数 (扩展：展开运算符)、箭头函数（ES6）

函数参数：

1、动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所以实参

function getSum() {
            // arguments 只存在于函数里面  伪数组
            console.log(arguments)  // [2,3,4]
        }
        getSum(2, 3, 4)

  function getSum() {
            let sum = 0
            //遍历数组
            for (let i = 0; i <= arguments.length; i++) {
                sum += arguments[i]
            }
            console.log(sum)
        }
        getSum(2, 3, 4)  //9

2、剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

主要使用场景：置于最末函数形参之前，用于获取多余的实参

借助 ...获取的剩余实参，是一个真数组

 function getSum(a, b, ...arr) {
            console.log(arr) //[3,4]
        }
        getSum(1, 2, 3, 4)  

知识点：伪数组

1. 伪数组是一个对象(Object)，而真实的数组是一个数组(Array)
2. 拥有length属性，且必须是number类型,其它属性（索引）为字符串
3. 不具有数组所具有的方法,forEach()等,不过有Object的方法
4. 伪数组长度不可变,真数组长度可以变
5. 可以通过for in遍历

常见的伪数组：

1. 参数数组：arguments
2. DOM对象列表HTMLCollection()：比如通document.getElementsByTagName得到的列表
3. jquery对象：比如$(“div”)

注意：剩余参数与展开运算符的区别

剩余参数：函数参数使用，得到真数组

展开运算符：

扩展运算符对对象实例的拷贝属于浅拷贝

对象展开运算符用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

let bar = { a: 1, b: 2 }
        let baz = { ...bar } // {a:1,b:2}
        //等价于
        let bar2 = { a: 1, b: 2 }
        let baz2 = Object.assign({}, bar)// {a:1,b:2}

 

注意：如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖 

 let bar = { a: 1, b: 2 }
        let baz = { ...bar, ...{ a: 2, b: 4 } }  // { a: 2, b: 4 

 

 数组扩展运算符可以将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组。

 console.log(...[1, 2, 3])
        //1 2 3
        console.log(...[1, [2, 3, 4,], 5])
        //1 [2,3,4,] 5

以下常用场景：

const arr = [1, 2, 3]
        console.log(...arr)  // 1 2 3   把数组展开

        // 展开运算符典型运用场景
        // 1、求最值
        console.log(Math.max(...arr))  //3
        console.log(Math.min(...arr))
        
        //2、合并数组
        const arr2 = [3, 4, 5]
        const arr1 = [...arr, ...arr2]
        console.log(arr1)  // [1,2,3,3,4,5]

 扩展运算符用于取出参数对象（这里指数组）中的所有可遍历属性，拷贝到当前对象之中，

    // 3、将数组转换为参数序列
        function add(x, y) {
            return x + y
        }
        const num = [1, 2]
        add(...num) //3

 
    //4、扩展运算符与解构赋值结合起来，用于生成数组
        // 注意：扩展运算符只能放在参数的最后一位，否则报错
        const [first, ...rest] = [1, 2, 3, 4, 5]
        console.log(first) // 1
        console.log(rest)  // [2,3,4,5]


    //5、将字符串转为真正的数组
        [...'hello']  //["h", "e", "l", "l", "o"]


    //6、将某些数据结构转为数组
        function foo() {
            const args = [...arguments]  //arguments对象
        }

 

箭头函数 ：

使用场景：更适用于那些本来需要匿名函数的地方

// 基本语法
        const fn = (x) => {
            console.log(x)  //2
        }
        fn(2)

        // 只有一个形参时，可以省略小括号
        const fn1 = x => {
            console.log(x)  //2
        }
        fn(2)

        // 只有一行代码时，可以省略大括号
        const fn2 = x => console.log(x)  //2
        fn(2)

        //只有一行代码时，可以省略 return
        // 基本语法
        const fn3 = x => x + x
        console.log(fn3(2))  //4

 

箭头函数可以直接返回一个对象

  const fn = uname => ({ uname: uname })
        console.log(fn('Linsir'))

 

箭头函数参数：没有prototype(不能new一个箭头函数)

没有arguments动态参数，但有剩余参数 ... 

 const getSum = (...arr) => {
            let sum = 0
            for (let i = 0; i <= arr.length; i++) {
                sum += arr[i]
            }
            return sum
        }
        const result = getSum(2, 3)
        console.log(result) //5

 

箭头函数的 this 指向：

箭头函数不会创建自己的 this ，它只会从自己的作用域链的上一层沿用 this

DOM事件回调函数 使用箭头函数时，this 为全局的 window

 const obj = {
            uname: 'linsir',
            sayHi: () => {
                console.log(this) //window
            }
        }
        obj.sayHi()

 

 const obj2 = {
            uname: 'linsir',
            sayHi: function () {
                console.log(this) //obj2
                let i = 10
                const count = () => {
                    console.log(this) //obj2
                }
              count()
            }
        }
        obj2.sayHi()

call() 、apply() 、bind() 等方法不能改变箭头函数中this 的指向