前端js-Array的去重、遍历、截取

1、数组去重

1、Array.from()方法 + set()方法（推荐）

let arr = ['aa','bb','cc','aa']
let newArr = Array.from(new Set(arr))
console.log(newArr); // ['aa', 'bb', 'cc']

2、ES6的set()方法

let arr = ['aa','bb','cc','aa']
// set 用于数组去重，成员是唯一的，不可以重复
let newArr = [...new Set(arr)]
console.log(newArr);   // ['aa', 'bb', 'cc']

3、forEach循环 + includes()方法+ push()方法

let arr = ['aa','bb','cc','aa']
let newArr = []
arr.forEach(item => {
// includes()方法用于判断字符串是否包含指定的子字符串，有则返回true，无则返回false；includes() 方法区分大小写。
if(!newArr.includes(item))
newArr.push(item)
})
console.log(newArr);  // ['aa', 'bb', 'cc']

4、forEach循环 + indexOf() + push()

let arr = ['aa','bb','cc','aa']
let newArr = []
arr.forEach(item => {
// item 代表arr数组里的每一项
if(newArr.indexOf(item) == -1)
newArr.push(item)
})
cosnole.log(newArr)

5、for循环 + indexOf()方法 + push()方法

let arr = ['aa','bb','cc','aa'];
let newArr = [];
for(var i = 0; i < arr.length; i++) {
// indexOf()方法返回在数组中找到给定元素的第一个索引，若不存在，返回 -1
        // 判断是否在newArr数组中存在  1是存在，-1是不存在
if(newArr.indexOf(arr[i]) == -1) {
            // push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
            // 如果不存在，就追加到newArr里
            newArr.push(arr[i])
}
}
console.log(newArr)

2、几种遍历方法

1、map（ES6）
遍历每一个元素并且返回对应的元素(可以返回处理后的元素) (map 映射 一一 对应)
// 一、会改变原数组

var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(function (item, idnex) {
    return item * item
})

console.log(arr)      // [1, 2, 3, 4, 5, 6]
console.log(newArr)   // [1, 4, 9, 16, 25, 36]

2、filter（ES6）
    遍历数组，过滤出符合条件的元素并返回一个新数组，没有符合条件的元素则返回空数组

const arr = [
    { id: 1, name: '买笔', done: true },
    { id: 2, name: '买笔记本', done: true },
    { id: 3, name: '练字', done: false }
]
let newArr = arr.filter(function (item, index) {
    return item.done
})
console.log(newArr)

// [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]

3、some（ES6）
    遍历数组，只要有一个以上的元素满足条件就返回 true，否则返回 false

const arr = [
    { id: 1, name: '买笔', done: true },
    { id: 2, name: '买笔记本', done: true },
    { id: 3, name: '练字', done: false }
]
let bool = arr.some(function (item, index) {
    return item.done
})
console.log(bool)    // true

4、every（ES6）
    遍历数组，每一个元素都满足条件 则返回 true，否则返回 false

const arr = [
    { id: 1, name: '买笔', done: true },
    { id: 2, name: '买笔记本', done: true },
    { id: 3, name: '练字', done: false }
]
let bool = arr.every(function (item, index) {
    return item.done
})
console.log(bool)    // false

5、find（ES6）
    遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined

const arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
let num = arr.find(function (item, index) {
    return item === 3
})
console.log(num)   //  3

6、findIndex（ES6）
     遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1

const arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
let num = arr.findIndex(function (item) {
    return item === 3
})
console.log(num)   //  4

3、数组的截取

slice()和splice()方法都可以实现对数组截取
const arr=[1,2,3,4,5,6,7,8]

//截取数组前三个元素
const sliceA=arr.slice(0,3)
console.log('sliceA',sliceA)//得到[1,2,3]

//截取数组后三个元素  slice方法
const sliceArr=arr.slice(-3)
console.log('sliceArr',sliceArr)//得到[6,7,8]
//slice(start,end)表示从下标start开始到下标end（不包括end）进行截取，
//得到的是一个新数组，不改变原数组。当start为负值时表示从倒数第几个元素开始往后截取，
//不填end的话就表示从倒数的第几个元素开始截取，一直截取到数组末尾元素

//截取数组后三个元素  splice方法
const spliceArr=arr.splice(-3,3)
console.log('spliceArr',spliceArr)//得到[6,7,8]
//splice()方法有三个参数，分别表示从哪个下标开始，删几个，新元素。可以实现增加、删除、替换数组元素的功能。
//arr.splice(-3,3)表示从倒数第三个元素开始，删除五个元素。该方法返回值时删除的元素集合，会改变原数组。
//原数组会变成删除的元素剩下的元素集合