20javascript6 函数

1闭包函数

概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域

闭包=内层函数+外层函数的变量

作用：封闭数据，提供操作，外部也可以访问函数内部的变量

function outer(){
  let a=10;
  // return 匿名函数
  return function(){
    console.log(a);
  }
}

let fn= outer()

// 闭包其他形式代码
function outer(){
  let a= 10;
  // 新建具名函数
  function inner(){
    console.log(a);
    // 返回具名函数
    return inner
  }
}

2函数参数

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

arguments是一个伪数组，只存在于函数中

arguments 的作用是动态获取函数的实参

可以通过for循环依次得到传递过来的实参

可以在不定义形参的情况下接收数据

  function getSum() {
      console.log(arguments); //[10,20,30]
      console.log(arguments[1]);20

      let sum = 0;
      for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];

      }
      console.log(sum);
    }
    
     getSum(10, 20, 30)

2.2剩余参数

1...是语法符号，置于最末函数形参之前，用于获取多余的实参

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

  <script>
// 剩余参数。。。。
// 
// function fn(args){
//   console.log(args);  //只得到一个10

// }
// fn(10,20,30,40)

// 剩余参数...
function fn(...args){
  console.log(args);  //得到一个字符串zhangsan和一个数组[20,30,40]

}
fn('zhangsan',20,30,40) //zhangsan [20,30,40]

// 用于接收所有的实参，接收到一个真数组
// 剩余参数必须放到最后，写在形参前面
function fn(uname,...args){
  console.log(args);  //得到一个数组[20,30,40]
  console.log(uname); //10

}
fn(10,20,30,40)

  </script>

剩余参数容易与展开运算符搞混，

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

展开运算符：数组中使用，数组展开

//用于将数组展开 展开成由逗号分隔的多个值
    let arr=[10,20,30,40]  //...arr
    console.log(...arr);  //10,20,30,40

数组展开的应用1:只要是调用函数实参，是逗号分隔的多个值就可以使用数组展开

 let arr1=[9,10,28,17,32,15]  //...arr 9,10,28,17,32,15
let max = Math.max(...arr)
 console.log(max);

应用2：合并数组

 let arr1=[10,20,30]
 let arr2=['one','two','three']

 let arr3=[...arr1,...arr2]
 console.log(arr3); [10,20,30,'one','two',three]

3箭头函数 

引入箭头函数的目的是更简短的函数写法并且不绑定this，适合于本来需要匿名函数的地方

const fn=()=>{
console.log('箭头函数')
}
fn（）

如何简写：1如果函数体只有一行代码，可以写到一行上，并且无需写return

                  2如果只有一个参数，可以省略小括号

                  3加括号的函数体返回对象字面量表达式

const fn1 = uname=>({uname:uname})
console.log(fn1('箭头函数'));    //{uname: "箭头函数"}

箭头函数的参数

1普通函数有arguments动态参数

2箭头函数没有arguments动态参数，但是有剩余参数...args

<script>
    // 箭头函数没有arguments
    let fn = (...args) => {
      console.log(args);
    }
    fn(10,20,30)

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this，既它的this要找上一层作用域的this指向。事件回调函数使用箭头函数，this的全局是window

    console.log(this);//window
    let obj={
      say:function(){
        console.log(this);//obj调用方法对象say：，这时this指obj
      },
      fn:()=>{  //上一级作用域是window
        console.log(this);
      }
    }

    obj.say()//object

    obj.fn()//window
    // 箭头函数也是函数，与普通函数差别
    // 没有arguments，使用剩余参数代替
    // 没有this，触发链式查找
  </script>

4解构赋值与箭头函数相结合

解构赋值是一种快速为变量赋值的简介语法，本质上仍然是为变量赋值。

分为数组解构和对象解构

数组解构：基本语法

1赋值运算符=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2变量的顺序对应数组单元制的位置依次进行赋值操作

const[a,b,c,d]=[1,2,3]
console.log(a)//1
console.log(b)//2
console.log(c)//3
console.log(d)//undefined


如果变量少，单元值多，可以用剩余参数来解决，多的单元值将组成一个数组
const[a,b...c]=[1,2,3,4]
console.log(a)//1
console.log(b)//2
console.log(c)//[3,4]

 防止有undefined传递单元值的情况，可以设置默认值：

const[a='手机',b='华为']=['小米']
console.log(a);//小米
console.log(b);//华为

 允许初始化变量的默认值，且只有单元值为undefined时默认值才会生效

let a=1;
let b=3;
[b,a]=[a,b]
console.log(a)//3
console.log(b)//1

const[a,b]=['苹果',['小米','华为']]
console.log(a);//苹果
console.log(b);//['小米'，'华为']

// const[a,[b,c]]=['苹果',['小米','华为']]
// console.log(a);//苹果
// console.log(b);//小米
// console.log(c);//华为

对象解构：将对象属性和方法快速批量赋值给一系列变量的简介语法

  // 语法：let {变量，变量，。。。}=对象
    // 注意：变量名，默认要与，对象的属相同，如果不存在就是undefined
  

基本语法：

1赋值运算符=左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2对象属性的值将被赋值给与属性名相同的变量

3注意解构的变量名不要和外面的变量名冲突否则报错

4对象中找不到与变量名一致的属性时变量值为undefined

const user={
  name:'小明',
  age:18
}
const{name,age}=user
console.log(name);
console.log(age);

// 多级对象解构
    let arr2 = [{
      uname: 'zhangsan', 
      age: 20,
      car: {
        price: '50w',
        color: 'red'
      }
      , phone: {
        price: '1w',
        color: 'blue'
      }
   
//                      原名：新名 这里的color:c 是从对象中提取变量并同时修改新的变量名
    let [{ uname, age,  car: { color, price }, phone: { color: c, price: p } }] = arr2
    console.log(uname, age, color, price, c, p);  //
  </script>