JS 数组浅析

JS数组

数组是一个特殊的对象

创建数组

		let arr = [1,2,3,4]
        let arr = new Array(1,2,3)
        
        // 转化为数组
        let str = '1,2,3,4';
        str.split(',')
        
        str.split('');
        //  Array.from 变数组的条件 1必须要有0,1,2等数字的字符串下标 2 必须有length的属性
        Array.from{
     0:'a',1:'b',2:'c',length:3}

伪数组的原型链中没有数组的原型

// 这样获取的数组就是伪数组 不能使用push 等属性
let divList = document.querySelectorAll('div')

合并数组（contact）

将2个数组合并为一个新的数组 原来的不变

let arr = [1,2,3]
let arr2 = [4,5,6]
arr.concat(arr2)
// 返回：  [1, 2, 3, 4, 5, 6]

截取数组(slice)

截取数组 获得一个新的数组 原数组不变

let arr3 =  [1, 2, 3, 4, 5, 6]
arr3.slice(2)
// 返回：  [3, 4, 5, 6]
let arr4 = arr3.slice(0)
// 复制一个数组

删

以下删除方法有问题 ：

let arr =  [1, 2, 3, 4, 5, 6]
delete arr[0]
arr
// 返回： [空, 2, 3, 4, 5, 6]  保留长度

let arr =  [1, 2, 3, 4, 5, 6]
arr.length = 5
arr
// 返回 [1, 2, 3, 4, 5]

删除方法:

shift 删除头部元素

let arr =  [1, 2, 3, 4, 5]
arr.shift(1)
// 返回： [2, 3, 4, 5]

pop 删除尾部元素

let arr =  [1, 2, 3, 4, 5]
arr.pop(1)
// 返回： [1,2, 3, 4]

splice 删除中间元素

let arr =  [1, 2, 3, 4, 5, 6]
arr.splice(1,2) // 开始位置 截取长度
// 返回： [1, 4, 5, 6]

arr.splice(1,2,22,33) // 修改中间元素  删除后 重新添加
// 返回： [1, 22, 33, 4, 5, 6]

查

// 遍历数组的属性名 和 属性值

let arr =  [1, 2, 3, 4, 5, 6]
for(let i = 0; i< arr.length; i++){
console.log(`${i} : ${arr[i]}`)
}
// 返回：
// 0 : 1
// 1 : 2
// 2 : 3
// 3 : 4
// 4 : 5
// 5 : 6

foreach 遍历

let arr =  [1, 2, 3, 4, 5, 6]	
arr.forEach(function(xxx,yyy){
       //参数名字随便 第一个参数是值 第二个是属性名
    console.log(`${
       yyy} : ${
       xxx}`)
    })

用for循环

1： 可以使用 break 和continue 自定义循环

2： for循环是一个块级作用域

而 foreach

1：只能一头走到尾

2：是一个函数作用域

查看单个属性

let arr =  [1, 2, 3, 4, 5, 6]
arr.indexOf(055)
// 返回： -1 不存在 1 存在在数组

使用条件查看元素

arr.find((x)=>x%2 ===0) // 返回第一个偶数
arr.findIndex((x)=>x%2 ===0) // 返回第一个偶数的索引

增

在尾部添加 arr.push

let arr =  [1, 2, 3, 4, 5, 6]
arr.push(66,77,88)
arr
// 返回：[1, 2, 3, 4, 5, 6, 66, 77, 88]

在头部添加 arr.unshift

arr.unshift(22,55,66)
arr
// 返回：[22, 55, 66, 1, 2, 3, 4, 5, 6, 66, 77, 88]

在中间添加 arr.splice

arr.splice(2,0,'x','y')
arr
// 返回： [22, 55, "x", "y", 66, 1, 2, 3, 4, 5, 6, 66, 77, 88]

反转数组 arr.reverse()

let arr =  [1, 2, 3, 4, 5, 6]
arr.reverse()
// 返回：  [6, 5, 4, 3, 2, 1]

反转字符串

var a  = 'abcde'
a.split('').reverse().join('')
// 返回：  "edcba"

排序 sort()

let arr =  [1, 2, 3, 4, 5, 6]
// 升序
arr.sort(function (a, b) {
     
            if (a > b) {
     
                return 1
            } else if (a === b) {
     
                return 0
            } else {
     
                return -1
            }
        })
         // 简写
        arr.sort((a, b) =>{
     
            return a-b
        }) 
// 降序   
arr.sort(function (a, b) {
     
            if (a > b) {
     
                return -1
            } else if (a === b) {
     
                return 0
            } else {
     
                return 1
            }
        })
        // 简写
         arr.sort((a, b) =>{
     
            return b-a
        }) 

数组变换

map

n 变 n

let arr =  [1, 2, 3, 4, 5, 6]
arr.map(item => item *item)
// 返回 : [1, 4, 9, 16, 25, 36]

filter

n 变少

let arr =  [1, 2, 3, 4, 5, 6]
arr.filter(item => item %2 ===0 ? true : false) // 返回偶数
// 返回 :  [2, 4, 6]

reduce

n 变 1

	arr.reduce((sum, item) => {
     
            return sum + item
        }, 0) // 算总和
// 返回 ： 21

// 只要偶数
 arr.reduce((a1, a2) => {
     
            if (a2 % 2 === 1) {
     
                return a1
            } else {
     
                return a1.concat(a2)
            }
        }, [])
// 返回 ：[2, 4, 6] 

---

资料来源：饥人谷 阮一峰

本文为贰贰的原创文章，著作权归本人和饥人谷所有，转载务必注明来源