js高级常用(es6)新语法讲解

知识前导:箭头函数入伙参数只有一个可以省略小括号,若函数体只有一行可以省略大括号和return

1.map

原理:遍历数组对数组的每一个元素进行处理得到一个新数组

如果不return 那么新数组里的每一个元素都会变成undefined

通常作用于页面渲染,比如这个网页中常见的功能模块

 我们以前的思路就是用dom驱动 遍历数组,创建dom元素，逐一添加

for(let i = 0;i<goodsList.length;i++){
   //(1)创建空标签
  let div = document.createElement('div')
   //(2)设置内容
   div.innerHTML = `<div class="item">
   <img src="${goodsList[i].picture}" alt="">
   <p class="name">${goodsList[i].name} <span class="tag">【赠品】10优惠券</span></p>
   <p class="price">${goodsList[i].price}</p>
   <p class="count">x${goodsList[i].count}</p>
   <p class="sub-total">${goodsList[i].price * goodsList[i].count}</p>
    </div>`
   //(3)添加到页面
      document.querySelector('.list').appendChild(div)
 }

有了map之后,我们拥有了一种新的思路:数据驱动 遍历数组，拼接html字符串，然后替换元素的innerHTML

我们先来看看map的实现流程

   //(1) map : 把数组中的数据 映射成  对应的html字符串
    let res = goodsList.map(item=>{
      return `<div class="item">
      <img src="${item.picture}" alt="">
      <p class="name">${item.name} <span class="tag">【赠品】10优惠券</span></p>
      <p class="price">${item.price}</p>
      <p class="count">x${item.count}</p>
      <p class="sub-total">${item.price * item.count}</p>
      </div>`
    })
    console.log( res )
    //(2)拼接字符串
    let htmlStr = res.join('')
    console.log( htmlStr )
    //(3)替换元素的innerHTML
    document.querySelector('.list').innerHTML = htmlStr

当你熟练之后,就可以直接一步到位,你可以发现这就使一个固定的套路

//渲染的位置属性.innerHTML=获取的数据(数组形式的).map((item)=>{`渲染的数据格式`}).join('')


document.querySelector('.list').innerHTML =  goodsList.map(item=>{
      return `<div class="item">
      <img src="${item.picture}" alt="">
      <p class="name">${item.name} <span class="tag">【赠品】10优惠券</span></p>
      <p class="price">${item.price}</p>
      <p class="count">x${item.count}</p>
      <p class="sub-total">${item.price * item.count}</p>
      </div>`
    }).join('')

2.filter

用于筛选数组中满足条件的元素，返回筛选后的新数组

函数注意点:

a. 回调函数执行次数  == 数组长度

        数组中有多少个元素，回调函数就会执行几次

b. filter函数返回的新数组长度  !=  原数组长度

        会返回一个布尔类型值,如果是true,当前遍历的元素才会添加到新数组中

        适用场景:网页常见的数据筛选

    //1.获取a标签
    let aList = document.querySelectorAll(".filter>a")
    //2.注册事件
    for (let i = 0; i < aList.length; i++) {
      aList[i].onclick = function() {
        //3.排他
        //(1)类选择器 干掉兄弟
        document.querySelector("a.active").classList.remove("active")
        //(2)复活自己
        this.classList.add("active")
        //筛选
        if (i == 0) {
          renderData( goodsList.filter(item => item.price < 100) )
        } else if (i == 1) {
          //100-300
          renderData( goodsList.filter(item => item.price >= 100 && item.price < 300) )
        } else if( i == 2){
          renderData( goodsList.filter(item => item.price >= 300) )
        }else{
          renderData( goodsList )
        }
      }
    }

//注意:这里的renderData为自己封装的渲染页面的函数

3.forEach

遍历数组，相当于for循环另一种写法

a. 回调函数执行次数  == 数组长度

        数组中有多少个元素，回调函数就会执行几次

b. forEach函数没有返回值

适用场景:与for循环功能一致

let arr = [23, 31, 60, 88, 90, 108, 260]

 arr.forEach((item,index) => {

    console.log(`下标为${index}的元素是${item}`)   

 })

//输出结果

下标为0的元素是23
下标为1的元素是31
下标为2的元素是60
下标为3的元素是88

4.some

判断数组中是否存在满足条件的元素

        some函数返回一个布尔类型值 默认为false

        只要是不满足条件就继续执行  有一个满足的就true结束循环

适用场景:非空判断:开关思想应用 (判断所有的表单有没有元素是空)

 let inputList = document.querySelectorAll('form input')

 if( Array.from(inputList).some(item=>item.value == '') ){

       return alert('输入框不能为空')

 }

5.every

判断数组中是否存在不满足条件的元素

        every函数返回一个布尔类型值 默认为true

        满足条件就继续执行  只要有一个不满足的就false结束循环

适用场景:单选和全选框

//checkAll 为全选按钮
//checkList  为所有的单选按钮
checkAll.onclick = function () {

    checkList.forEach(item => item.checked = this.checked)
}
checkList.forEach(item => {

    item.onclick = function () {

        checkAll.checked = Array.from(checkList).every(item => item.checked)
    }
})

6.findIndex

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

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

返回值： 符合则返回元素下标，不符合则返回-1