es6结构和数组方法

ES6新语法

### 对象的解构赋值

解构赋值 ： 其实就是变量赋值语法的简写形式(解构精髓：当变量名 和 对象属性值一致的时候，只需要写一个)

1.取出对象的属性 赋值 给 变量

 let obj = {
            name: '小杜',
            age: 22,
            sex: '男'
        }     
  let { name,age,sex } = obj

2.取出变量的属性 赋值 给 对象

let username = 'qqqqq'
let password = '123456'
 let object = {
    username,
    password,
    eat() {
    console.log('我觉得ok')
   }
} 

 console.log(object.username, object.password)
 object.eat()

### 数组解构赋值

取出数组元素 赋值给变量

let arr = [10, 20, 30]
let [n1, n2, n3] = arr
console.log(n1, n2, n3)// 10 20 30 
(数组结构看上去是不是感觉没啥用)

### 函数参数解构赋值

函数参数解构: 当函数参数是对象类型,就可以对形参进行解构

function fn2({ name, age }) {
            console.log(name)
            console.log(age)
        }
 fn2({ name: '小杜', age: 22 })

箭头函数

箭头函数规则（1）function变成箭头符号 => (2)形参小括号写到箭头 => 左边

• 如果箭头函数只有一个形参,则可以省略小括号
• 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
  有参数:

 let add1 = (a, b) => {
        return a + b
      }
      console.log(add1(100, 200))

没有参数:

let fn = () => console.log('爱你')
fn()
(看上去比function上档次一点,后面也会大量使用)

注意 this 指向: 箭头函数自己没有this, 本质是访问上级作用域中的this

1.由于箭头函数没有this,所以箭头函数不能作为构造函数 (new会修改this指向,而箭头没有this)

2.箭头函数也无法修改this (call apply bind)对箭头函数是无效的

3.由于箭头函数没有this,所以箭头函数一般不作为事件处理函数

this指向测试

 let obj = {
        name: "小杜",
        eat() {
          //1级   this : obj
          function fn1() {
            //2级  
            console.log(this)//window  
          }
          fn1()
          let fn2 = () => {
            //2级  ： 箭头函数访问上级 1级obj
            console.log(this)//obj   
          }
          fn2()
        },
        learn: () => {
          //1级 ： 上级 this->window
          function fn1() {
            console.log(this)//window 
          }
          fn1()
          let fn2 = () => {
            //2级  访问1级 this -> window  
            console.log(this)//window  
          }
          fn2()
        }
      }
      obj.eat()
      obj.learn()

展开运算符

展开运算符: …

作用：类似于对象遍历的一种简写形式(可展开数组及对象)

let arr1 = [10, 20, 30]
let arr2 = [40, 50, 60]
arr1.push(...arr2)
console.log(arr1)
​
let student = {
            score: 90,
            sex: '男'
        }
let obj = {
            name: '小杜',
            age: 22,
            ...student
        }
console.log(obj)
(自己可以复制代码去控制台打印看看)

数据类型 Set

Set相当于是数组类型, 和数组Array唯一的区别是不能存储重复元素

应用场景: 数组去重

let arr = [10, 20, 30, 20, 50, 80, 20, 30, 10]
let newArr = [...new Set(arr)]
console.log(arr, newArr)

map()方法

• map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值

• 也就是map（）进行处理之后返回一个新的数组

• 注意：map（）方法不会对空数组进行检测

• map方法不会改变原始数组

  <script>
      let arr = [1, 8, 48, 52, 12, 30, 16]
      // map 方法 在数组元素执行回调函数后返回其值
      let newarr = arr.map(obj => obj + 10)
      console.log(newarr); //newarr[11 ,18 ,58 ,62 ,22 ,40 ,26]
    </script>
  

filter()的用法

• 遍历数组 (过滤器) 用于把数组的某些元素过滤掉 然后返回一个新数组

• 不会改变原来的数组

• 可接收三个参数(obj,index,arr) 分别为数组中的每个元素,下标,数组本身

  <script>
     let arr = [1, 8, 48, 52, 12, 30, 16]
      // 筛选大于10的数组  并返回过滤后的数组  返回满足条件的元素
     let newarr = arr.filter(obj => obj > 10)
     console.log(newarr);//newarr[12,16,30,48,52]
    </script>
  

  用filter方法 数组去重

  <script>
      let arr = [1, 8, 48, 52, 12, 30, 16, 30, 16]
    // 数组去重   indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素
  let  newarr = arr.filter((obj,index,arr)=>arr.indexOf(obj)===index)
      console.log(newarr); //newarr[12,16,30,48,52,1,8]
    </script>
  

forEach()用法

• forEach是操作数组的一种方法，主要功能是遍历数组。forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身。方法执行是没有返回值的，对原来数组也没有影响。

 <script>
    let data = [
      {
        index: 1,
        name: "小张",
        age: 22,
        sex: "男",
      },
      {
        index: 2,
        name: "小杜",
        age: 23,
        sex: "男",
      },
      {
        index: 3,
        name: "小花",
        age: 28,
        sex: "女",
      },]

    data.forEach((val,index,arr)=>{
      console.log(val.age)        
      // val数组遍历到的每一个内容      index 遍历到的 索引
      // arr 遍历对象本身
    })
  </script>

some()与every()的用法

数组some方法作用: 判断数组中是否有符合条件的元素

1.some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

2.只要找到符合条件的 直接返回 true

数组every方法作用: 判断数组中 是否所有的 元素都满足条件

1.every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。

2.只要找到不符合条件的 直接返回 false

 <script>
    let data = [
      {
        index: 1,
        name: "小梦",
        age: 22,
        sex: "女",
      },
      {
        index: 2,
        name: "小洋",
        age: 23,
        sex: "男",
      },
      {
        index: 3,
        name: "小爱",
        age: 28,
        sex: "女",
      },]
      
    let names = data.some(obj => obj.age === 23)
    console.log(names);// true
    
    let name = data.every(obj => obj.age === 23)
    console.log(name); // false
  </script>

findIndex()的用法

返回符合条件的元素的索引位置

1 作用 : 获取符合条件的第一个元素位置(下标)

2 语法 ： arr.findIndex( (item,index)=>{ return true/false } )

3 应用场景 ： 适用于数组中元素为对象类型，比传统for循环要高效

return true : 循环中断，findIndex方法返回值为当前index值

return false： 循环继续，如果数组全部遍历完还是没有返回true，则finedIndex方法最终返回-1

<script>
    let data = [
      {
        index: 1,
        name: "小梦",
        age: 22,
        sex: "女",
      },
      {
        index: 2,
        name: "小洋",
        age: 23,
        sex: "男",
      },
      {
        index: 3,
        name: "小爱",
        age: 28,
        sex: "女",
      },]
    let name = data.findIndex(obj => obj.name == '小洋')
    let name1 = data.findIndex(obj => obj.name == '小张')
    console.log(name);
    console.log(name1);
  </script>

reduce()的用法

函数的返回值存储在累加器中（结果/总计）

对数组每一个元素执行一次回调函数,累加最后一次回调的结果

<script>
   let arr= [1,2,3,4,5]
   let sum= arr.reduce((sum,obj)=>sum+obj,0)
    // sum初始累加变量   obj 遍历数组对象  0 初始值
    console.log(sum);
  </script>
  const array  = [5,4,7,8,9,2];
  
  最大值
array.reduce((a,b) => a>b?a:b);
// 输出: 9
最小值
array.reduce((a,b) => a<b?a:b);
// 输出: 2

find()的用法

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined

let arr = [20, 30, 15, 10, 8]

    let name = arr.find(item => item > 20)
    console.log(name) // 30

for-in与for-of区别

• 1.功能不同

  for-in是遍历数组的下标

  for-of是遍历数组的元素

• 2.原型的属性

  for-in会遍历原型的属性

  for-of不会遍历原型的属性

• 3.数据类型

  for-in可以遍历Object类型

  for-of不可以遍历Object类型

  解决方案： Object.keys(对象名)

• 总结：如果只想要属性值/元素，使用for-of效率更高

 //数组
        let arr = ['a','b','c']//下标0 1 2
        //对象
        let obj = {name:'ikun',age:30}
        //给原型添加成员
        Array.prototype.age = 30

        for(let key in obj){
            console.log(key)
        }

        for (let item of Object.keys(obj) ) {
            console.log(item)       
        }

函数的补充语法

arguments关键字

作用: 获取函数所有的 实参

是一个伪数组 : 有数组三要素(元素、下标、长度)，但是不能使用数组的方法

应用: 一般用户参数数量不限的函数.

例如: arr.push() Math.max() 这些函数实参数量不限，底层原理就是使用arguments来接收所有的实参

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

        console.log(getSum(10, 20, 30, 50, 60))
        console.log(getSum(10, 20))

剩余参数(rest)

作用 : 获取函数剩余的所有实参

语法 : function 函数名(形参1,…形参2){}

!!! 注意 : (1)只能作为最后一个参数 (2)是真数组

一般情况下 , rest 参数 可以代替 arguments

/* 
   function getNum(a, ...b) {
    console.log(a)
    console.log(b)// [20,30,520,1]
 } */

        function getNum(...a) {
            console.log(a)
        }
        getNum(10, 20, 30, 520, 1)

函数默认参数

语法 : function 函数名(形参=默认值){ }

function getSum(a = 5, b = 10) {
            console.log(a + b)
        }

        getSum(10)//  20