includes的应用

includes的应用

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

使用includes完成简单的数组去重

先用一个简单的demo样式展示原有的数组数据

/* 简单写一些样式 */
 .btn {
  	display: flex;
    align-items: center;
    justify-content: center;
    background-color: #017244;
    color: #fff;
    border-radius: 10px;
    padding: 10px 35px;
    border: unset;
    outline: unset;
    cursor: pointer;
  }

  .btn:hover {
    opacity: 0.8;
  }

  .list1 {
    padding: 15px;
  }

  .list1 > span {
    display: inline-block;
    width: 20px;
    text-align: center;
    color: #fff;
    background-color: #017244;
 }
  
 <div class="box">
  	<h4>数组1</h4>
    <p id="arr1" class="list1"></p>
    <button id="btn1" class="btn">数组1去重</button>
 </div>

let arr1 = [1, 1, 3, 5, 6, 3, 2, 5, 4, 6, 2, 6]
let temp1 = []
arr1.forEach((item, i) => {
  temp1[i] = `<span>${item}</span>`
})
$('#arr1').html(temp1.join(' '))

使用includes方法

$('#btn1').click(removeDuplicate1)
 function removeDuplicate1() {
   temp1 = []
   arr1.forEach(item => {
     if (!temp1.includes(`<span>${item}</span>`)) {
       temp1.push(`<span>${item}</span>`)
     }
   })
   $('#arr1').html(temp1.join(' '))
 }

使用includes完成对象二级数据分类

先用一个简单的demo样式展示原有的数组数据

/* 简单写一些样式 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #017244;
  color: #fff;
  border-radius: 10px;
  padding: 10px 35px;
  border: unset;
  outline: unset;
  cursor: pointer;
}  
    
.btn:hover {
  opacity: 0.8;
}

#arr2 {
  display: flex;
  flex-wrap: wrap;
}

#arr2 .list2 {
  flex-direction: column;
  background-color: inherit;
}

#arr2 .list2 > div {
  color: #000;
  margin-bottom: 15px;
}

.arr2-list {
  text-align: center;
  padding-left: 0;
  background-color: #017244;
}

.arr2-list li {
  padding: 5px;
}

#arr2 > div {
  width: 350px;
  text-align: center;
  padding: 10px;
  margin: 10px;
  color: #fff;
  background-color: #017244;
}

#arr2 > div > p {
  font-weight: 600;
}

let arr2 = [
  { price: 10, name: '饮料1', type: '水' },
  { price: 2, name: '饮料2', type: '水' },
  { price: 5, name: '饮料3', type: '水' },
  { price: 3, name: '饮料4', type: '水' },
  { price: 10, name: '饮料5', type: '水' },
  { price: 12, name: '零食1', type: '零食' },
  { price: 22, name: '零食2', type: '零食' },
  { price: 25, name: '零食3', type: '零食' },
  { price: 3, name: '辣条1', type: '辣条' },
  { price: 5, name: '辣条2', type: '辣条' },
  { price: 2, name: '辣条3', type: '辣条' },
  { price: 6, name: '辣条4', type: '辣条' },
  { price: 2, name: '辣条5', type: '辣条' },
  { price: 1, name: '辣条6', type: '辣条' },
]
let temp2 = []
arr2.forEach((item, i) => {
  temp2[i] = `<div>${JSON.stringify(item)}</div>`
})
$('#arr2').html(temp2.join(' '))

使用includes方法

$('#btn2').click(removeDuplicate2)
function removeDuplicate2() {
  temp2 = []
  let html = ''
  let parent = {}
  arr2.forEach(item => {
    const { type, name, price } = item
    if (!temp2.includes(item.type)) {
      parent[item.type] = []
      temp2.push(item.type)
    }
    parent[item.type].push({ name, price })
  })
  console.log(parent)
  $('#arr2').html('')
  Object.keys(parent).forEach(key => {
    $('#arr2').append(`<div class='list2'><div>${key}</div><ul class='arr2-list'></ul><div>`)
    parent[key].forEach((item, i) => {
      temp2[i] = `<li>${JSON.stringify(item)}</li>`
    })
    $('#arr2 .arr2-list').html(temp2.join(' '))
  })
}