JavaScript Array对象

1.数组元素添加与删除

方法名	说明	返回值
push(val)	把目标元素添加到数组的末尾	返回操作完成后数组的长度
unshift(val)	把目标元素添加到数组的最前面	返回操作完成后数组的长度
pop()	删除数组最后一个元素	返回被删除的元素
shift()	删除数组的第一个元素	返回被删除的元素

<script>
    var arr = [1,2,3,4]

    // 在数组末尾添加元素
    arr.push(5)
    console.log(arr) // [1, 2, 3, 4, 5]

    // 删除数组最后一个元素
    arr.pop()
    console.log(arr) // [1, 2, 3, 4]

    // 在数组最前面添加元素
    arr.unshift(0)
    console.log(arr) // [0, 1, 2, 3, 4]

    // 删除数组的第一个元素
    arr.shift()
    console.log(arr) // [1, 2, 3, 4] 

    //返回数组长度
   console.log(arr.length) //4
    //清空数组
    arr.length = 0
    console.log(arr) //[]
</script>

2.数组的遍历

• for循环

<script>
    var arr = [1,2,3,4]

    // for循环
    for(var i=0;i<arr.length;i++){
        console.log(arr[i])
    }
</script>

• for in：用于遍历对象中的key，数组是对象的一种特殊形式（数组的下标就相当于对象的key），所以也可以遍历，!!!但是如果数组本来挂载了属性，这个属性会被遍历到

<script>
    var arr = [1,2,3,4]

    for(index in arr){
        //对于数组就是index，对于对象就是key
        console.log(index)
    }

    var arr = [5,10,15,20]
    arr.title = 'arr - title'
    for(key in arr){
        console.log(key) //0 1 2 3 title 包含数组的属性
    }
</script>

• for of：遍历数组元素的值

<script>
    var arr = [5,10,15,20]

    for(const item of arr){
        console.log(item) //5 10 15 20 不包含数组的属性
    }
</script>

• forEach：

<script>
    var arr = [1,2,3,4]

    // forEach
    arr.forEach(function(val,index){
        console.log(val,index)
    })  
</script

• 终止遍历：break用于跳出循环体，continue用于终止本轮循环，直接进入下一轮（forEach不适用这两个语句，会报错）

<script>
var arr = ['A','B','C','D','E']
    for(var i=0;i<arr.length;i++){
        console.log('index = ' + i)
        if(arr[i] == 'D'){
                break; //找到D之后，不会循环后面的 'E'
        }
        console.log('value = ' + arr[i])
    }

var arr = ['A','B','C','D','E']
    for(var i=0;i<arr.length;i++){
        console.log('index = ' + i)
        if(arr[i] == 'D'){
                continue; //找到D之后，不会循环后面的 'D' 但是会继续循环后面的 'E'
        }
        console.log('value = ' + arr[i])
    }
</script>

3.ES6数组新增方法

• map(cb)：映射

<script>
    var arr = [1,2,3,4]

    var newArr = arr.map(function(val){
        return val*2 //新数组元素
    })

    console.log(newArr) // [2, 4, 6, 8]
</script>

• filter(cb)：过滤

<script>
    var arr = [1,2,3,4]

    var newArr = arr.filter(function(val){
        // 只保留 >2 的元素
        return val>2
    })

    console.log(newArr) // [3, 4]
</script>

• some(cb) ：检测数组中是否有元素满足条件，只要有一个满足就返回true，否则返回false

<script>
    var arr = [1,2,3,4]

    var flag = arr.some(function(val){
        return val>2
    })
    console.log(flag) // true

    var flag2 = arr.some(function(val){
        return val>5
    })
    console.log(flag2) // false
</script>

• every(cb)：所有元素都满足才会返回true，否则返回false

<script>
    var arr = [1,2,3,4]

    var flag = arr.every(function(val){
        return val>2
    })
    console.log(flag) // false

    var flag2 = arr.every(function(val){
        return val>0
    })
    console.log(flag2) // true
</script>

• reduce(cb)：累加器，对数组元素进行遍历，每次遍历就进行依次累加计算，遍历结束后返回累加的最终值，语法：arr.reduce((要累加并返回的数，数组元素) => {},初始值)

var list = [
    {name:'西瓜',price:2,num:2},
    {name:'香蕉',price:4,num:1},
    {name:'玉米',price:2,num:5},
    {name:'苹果',price:8,num:1}
]
var totalPrice = list.reduce((total,item) => {
    return total + item.price * item.num
},0)
console.log(totalPrice)  // 26

4.数组元素查询

• 查找数组元素的下标

方法名	返回值
indexOf(item)	返回具体元素在数组中的下标，当元素是简单数据类型时适用
lastIndexOf(item)	返回具体元素在数组中的下标，从后往前查找
findIndex(cb)	查找符合条件的第一个元素的下标

<script>
    var arr = [1,2,3,4]

    var index = arr.indexOf(1)
    console.log(index) // 0
    var index2 = arr.indexOf(5) // 没有这个元素
    console.log(index2) // -1

    var index3 = arr.findIndex(function(val){
        return val>2
    })
    console.log(index3) // 2
    var index4 = arr.findIndex(function(val){
        // 没有一个元素符合条件
        return val>5
    })
    console.log(index4) //-1
</script>

• 查找数组元素 find(cb)：返回符合条件的第一个元素，没有符合结果则返回undefined

<script>
    var arr = [1,2,3,4]

    var result = arr.find(function(val){
        // 查找第一个大于3.5的子元素
        return val>3.5
    })
    console.log(result) // 4
</scr

• 判断一个数组是否含有某个子元素 includes()：进行对比时，数据类型必须一致

<script>
    var arr = [1,2,3,4]

    // 数组是否含有 1
    var flag = arr.includes(2)
    // 数组是否含有 5
    var flag2 = arr.includes(5)
    // 数组是否含有 '2'
    var flag3 = arr.includes('2')

    console.log(flag) // true
    console.log(flag2) // false
    console.log(flag3) // false
</script>

5.数组转换

• 数组与字符串间的转换 split()/join()

<script>
    var str = "hello world"
    // 根据标识将字符串分割成数组
    var arr = str.split(" ")
    console.log(arr) //["hello", "world"]

    // 将数组的子元素拼接成字符串
    var str2 = arr.join("-")
    console.log(str2) // "hello-world"
</script>

• set转换：可利用set的机制对数组去重

//数组转set
var myset = new Set([1,2,3,3])
//set转数组
var arr = Array.form(myset）//[1,2,3]

6.数组排序

• 1.sort排序 : 不传参的时候按字母升序，适用于一维数组，如果传参，则按数字排序
  注意：!!!这个方法会改变原数组
  注意：!!!二维数组只能进行数字排序，无法进行字符排序

<script>
    var arr = [
        {name:"张三",age:18},
        {name:"李四",age:16},
        {name:"王五",age:10},
        {name:"赵六",age:22}
    ]
    arr.sort(function(p1,p2){
        //p1.age-p2.age就是升序
        //p2.age-p1.age就是降序
        //p2.name-p1.name是无效的
        return p1.age-p2.age
    })
    console.log(arr)
    // [{name: "王五", age: 10}
    // {name: "李四", age: 16}
    // {name: "张三", age: 18}
    // {name: "赵六", age: 22}]
</script>

• 2.数组反转 reverse() 将当前数组反转，会改变当前数组

<script>
    var arr = [1,2,3,4]
    arr.reverse()
    console.log(arr) // [4, 3, 2, 1]
</script>

• 3.插入排序
  从第二个元素开始，拿他前面的元素与它比较，如果它比前面的元素小，则这个对比元素往后挪一个位置（实际上是arr[p + 1] = arr[p]），接着往左边找对比元素左比较，直到找到最后一个或者比它小的元素位置为止，此时将这个元素放到这个相应的位置（arr[p + 1] = temp），每轮循环结束都能保证前面的数据是升序排列的

<script>
    var arr = [6, 3, 4, 7, 5, 19, 2];
    var length = arr.length;
    // 进行升序排列，大的元素往右边挤，小的元素往左边挤
    for (var i = 1; i < length; i++) {
        // i为当前元素的下标
        var temp = arr[i];
        // p为比对元素的下标
        p = i - 1;
        // 如果当前元素比目标元素小
        while (p >= 0 && temp < arr[p]) {
            // 将比对元素往右挪一个位置
            arr[p + 1] = arr[p];
            // 往左一个位置找新的比对元素
            p--;
        }
        // 将当前元素放到合适的位置
        arr[p + 1] = temp;
    }
    console.log(arr) // [2, 3, 4, 5, 6, 7, 19]
</script>

• 4.快速排序
  将一个数组的中间元素取出（splice，这个方法会改变原数组，同时将将截取的元素以数字的形式返回），然后定义两个左右空数据，遍历这个原数组，将小于被取出元素值的元素放入左边的数组，反之放入右边的数组，一轮循环之后将这左右两个数组和中间元素拼接起来，同时对左右数组进行递归调用

var arr = [4, 3, 6, 7, 5, 19, 2];
var newArr = quickSort(arr);
console.log(newArr);
function quickSort(arr) {
    if (arr.length <= 1) return arr;
    else {
        var center = parseInt((arr.length - 1) / 2);
        var centerValue = arr.splice(center, 1)[0];
        var left = [];
        var right = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] <= centerValue) {
                left.push(arr[i]);
            } else {
                right.push(arr[i]);
            }
        }
        return quickSort(left).concat(centerValue, quickSort(right));
    }
}

• 5 冒泡排序：使用双层循环，将最前面的数据依次与后面的数据对比，发现后面最大值或者最小值则进行位置交互，每轮循环都能找到所剩的最大值或者最小值

<script>
    //冒泡排序
    var arr = [2,6,5,9,1]
    //进行arr.length-1次循环，保证最小的数能冒泡到最前面
    for(var i=0;i<arr.length-1;i++){
        //i为当前元素的下标
        for(var j=0;j<arr.length-1;j++){
            //升序
            if(arr[j] > arr[j+1]){
                //交换数值
                var temp = arr[j]
                arr[j] = arr[j+1]
                arr[j+1] = temp
            }
        }
    }
    console.log(arr)
</script>

7.数组剪切与拼接

• 剪接数组 splice() 用来删除数组元素或者向数组里面添加元素，会改变当前数组，且以数组形式返回被剪切的元素
  语法：arr.splice(index,num,item1,item2...)
  index：规定从何处添加/删除元素
  num：删除多少元素
  后面的参数可以是0个也可以是多个，表示要添加的数组元素

返回值：以数组形式返回被剪切的元素，没有删除则返回空数组

<script>
    var arr = [1,2,3,4,5,6]
    // 删除数组元素
    var result = arr.splice(0,2)
    console.log(arr) // [3, 4, 5, 6] 原数组被改变
    console.log(result) // [1, 2] 返回值 

    var arr2 = [1,2,3,4,5,6]
    //添加数组元素
    var result2 = arr2.splice(2,0,"good day")
    console.log(arr2) // [1, 2, "good day", 3, 4, 5, 6] 原数组被改变
    console.log(result2) // [] 没有删除则返回空数组 
</script>

• 数组剪切 slice() 根据给定的下标，将两个下标之间的元素以数组形式返回，不会改变原数组

<script>
    var arr = [1,2,3,4]
    // 不包含 参数二 对应的下标元素
    var newArr = arr.slice(1,3)
    console.log(arr) //[1, 2, 3, 4] 不改变原数组
    console.log(newArr) // [2, 3]

    // 默认剪切到最后一个元素
    var newArr2 = arr.slice(1)
    console.log(newArr2) //[2, 3, 4]

    // 可接受负数
    var newArr3 = arr.slice(0,-1)
    console.log(newArr3) //[1, 2, 3]
</script>

• 拼接2个数组 concat()，不会改变原数组，而是将拼接后的新数组返回

<script>
    var arr = [1,2,3,4]
    var arr2 = [5,6,7,8]
    var newArr = arr.concat(arr2)
    console.log(arr) // [1,2,3,4]
    console.log(arr2) // [5,6,7,8]
    console.log(newArr) //  [1, 2, 3, 4, 5, 6, 7, 8]
</script>

8.数组的特性

• 如果数组只有一个元素，则可以直接对其进行判断，不需要下标

var arr = ["66"]
console.log(arr == '66') //true
console.log(arr === '66') //false

var arr2 = ["66","66"]
console.log(arr2 == '66') //false

• 伪数组：伪数组是一个对象，但它可以通过下标的方式访问它内部的属性值，它不是数组，所以无法使用push()，pop()等方法，可以将其转换成真实的数值以方便对其遍历

<script>
    var likeArr = {}
    likeArr[0] = "center"
    likeArr[1] = "redFont"
    likeArr.value = "center redFont"
    //没有length属性无法正常转换成数组
    console.log(likeArr) //{0: "center", 1: "redFont", value: "center redFont
    console.log(Array.from(likeArr)) //[]
    //添加length属性后才能正常转换成数组
    likeArr.length = 2 
    console.log(likeArr) //{0: "center", 1: "redFont", value: "center redFont", length: 2}
    console.log(Array.from(likeArr)) //["center", "redFont"]
    // 添加splice方法可以让伪数组以数组形式打印
    likeArr.splice = [].splice
    console.log(likeArr)// ["center", "redFont", value: "center redFont", splice: ƒ]
</script>

9.数组分割

• 将一维数组按照固定长度分割成二维数组,可用于表格本地分页

//数组分割
function cutArray(arr, size){
    var length = arr.length
    var start = 0
    var end = start + size
    var result = []
    //如果起始下标仍在length之内 则循环剪切
    while(start < length){
        //剪切
        result.push(arr.slice(start,end))
        //更新下标
        start = end
        end = start + size
    }
    return result
}

示例：

var arr = [ 1,2,3,4,5,6,7,8]
console.log(cutArray(arr,3)) //[[1,2,3],[4,5,6],[7,8]]

10.数组元素是否有重复

• 思路：复制一份对照数组，然后循环遍历 与对照数组 做对比，有重复则已数组形式输出对应元素的下标

<script>
    //复制一份对照数组，然后循环遍历 与对照数组 做对比
    function hasRepeat(arr=[],key = ''){
        //对照数组
        var contrast_arr = [...arr]
        var index_list = [] //重复元素下标数组
        for(var i=0;i<arr.length;i++){
            //判断元素是否存在数组中
            for(var j=i+1;j<contrast_arr.length;j++){
                var item = contrast_arr[j]
                //如果不存在key 则直接对比数组元素
                if(!key){
                    if(arr[i] == item){
                        index_list.push(i)
                        index_list.push(j)
                    }
                }else{
                    //存在key 则读取key字段再对比
                    if(arr[i][key] == item[key]){
                        index_list.push(i)
                        index_list.push(j)
                    }
                }
            }
            
            //如果已经找到重复 则中断循环
            if(index_list.length>0){
                return index_list
            }
        }
        return index_list
    }

    var num_arr = [20,30,40,50,60]
    var num_arr2 = [20,30,40,50,20]
    console.log(hasRepeat(num_arr)) //[]
    console.log(hasRepeat(num_arr2)) //[0,4]

</script>