JavaScript数组

新建数组

let array = [1,2,3]  //简写形式
let array = new Array(1,2,3)

转化

1、 通过字符串创建数组

let str = '1,2,3'
str.split(',') //split用什么来分割这个字符串

2、 空字符串创建数组

let str = '123'
str.split('') //split用什么来分割这个字符串

3、不是数组的东西转化成数组

要符合两个条件

1. 对象要有0，1，2，3的下标
2. 要有length属性

Array.from({0:'a',1:'b',2:'c',length:3})

伪数组

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

let divList = document.querySelectorAll('div')
let divArray = Array.from(divList) 
console.dir(divArray)
//拿到一个伪数组都需要将他转化成数组先

合并两个数组(concat)

concat

let arr3 = [3,3,3]
let arr4 = [4,4,4]
arr3 = arr4.concat()
arr3.concat(arr4) //concat 连接的意思 
//得到新数组 ，不会返回原来的东西

字符串转换成数组(join)

join

// 变成数组
let str = '456'
let str = arr.join('') 
console.log(str)   // '456' 
let str2 = arr.join('-')
console.log(str2)   // '4-5-6'

截取数组的一半

let arr5 = [1,2,3,4,5,6,7,8,9]
arr5.slice(2)//slice 切的意思，意思是从0，1，2，开始切，得到3456789

//slice(0) 相当于复制一个数组,浅拷贝
let arr6 = arr5.slice(0)
=>（9），{1,2,3,4,5,6,7,8,9}

删除数组

不推荐删法

let arr = ['a','b','c']
delete arr[0] //删delete不推荐
arr
=> (3),{empty,"b","c"} //数组的长度并没有变
delete arr[1]
delete arr[2]
=>  (3),{empty x 3} //没有下标，但是有长度，叫稀疏数组

删length 不推荐

let arr = [1,2,3,4]
arr.length = 2 
=>(2),{1,2}

数组方法栈、队列方法（pop、push、shift、unshift）

删除头部的元素

arr.shift() // arr被修改，并返回被删元素

let arr2 = [1,2,3]
arr2.shift() //shift 作用吧最前面的数字顶出去
=>1
arr2
=>(2),{2,3} //删除之后长度变了

添加头部的元素

arr.unshift( ) // arr被修改，并返回添加元素

arr.unshift(10) 
console.log(arr)   //[10, 3, 4, 'hello', true, 100] 

添加尾部的元素

arr.push( )// arr被修改，并返回添加元素

arr.push(100) 
console.log(arr)  //[3, 4, 'hello', true, 100] 

删除尾部的元素

arr.pop() // arr被修改，并返回被删元素

let arr3 = [1,2,3]
arr3.pop()
=>3
arr3
=>(2),{1,2} //删除之后长度变了

数组方法(splice)

任意位置添加、删除(会改变原数组)

参数： 1.开始索引(插入在前)；2.删除元素的个数；3.插入的新元素，可以写多个

返回：一个由删除元素组成的新数组

删除中间的元素

arr.splice(index,1)
//删除index中的一个元素，index表示删哪个，在第几个，1，表示删一个

let arr5 = [1,2,3,4,5,6,7,8]
arr5.splice(2,3)
=>(3),{3,4,5}
arr5
=>(5),{1,2,6,7,8}

//从1开始删除2个元素 
let arr = [3, 4, 'hello', true, 8] 
arr.splice(1, 2)  //[4, 'hello'] 
console.log(arr)  //[3, true, 8] 

插入一个元素

// 插入1个元素 
let arr1 = [3, 4, 'hello', true, 8] 
arr1.splice(1, 0, 'world') // 不删除数组时，在下标前面插入
console.log(arr1)  // [3, 'world', 4, 'hello', true, 8] 

删除中间的元素并添加一个元素

arr.splice(index,1,'x') //删除一个元素，并在删除位置添加'x'

let arr6 = [1,2,3,4,5,6,7]
arr6.splice(5,1,666)
=>6
arr6
=>(7),{1,2,3,4,5,666,7}

//替换 
let arr2 = [3, 4, 'hello', true, 8] 
arr2.splice(2, 2, 'world', false) //从第2个下标开始删并添加
console.log(arr2)  // [3, 4, world, false, 8]

查看所有元素

查看属性名的方法

let arr = [1,2,3,4,5]
arr.x = 'x'
=>x
Obejct.keys(arr)
=>(6),{1,2,3,4,5,x}

查看属性值的方法

${} //意思是可以插入一个变量

For 循环

let arr = [1,2,3,4,5]
for (let i = 0;i < arr.length;i++){
    console.(i) //打出属性名
}
for(let i = 0;i < arr.length;i++){
    console.log(' ${i} : ${arr[1]} ')  //查看所有的key 和属性值
    }
=> 0:1
1:2

ForEach

arr.foreach (function(item,index){
    console.log('${item} : ${index}')
}

查找某个元素是否在一个数组

arr.indexof() //存在返回索引，否则返回-1,查找某个元素的下标

let arr = [1,12,34,112,31]
arr.indexof(13)
=>-1   //-1表示不再这个数组里，存在会标出下标
arr.indexof(1)
=>0

查找符合这个条件的第一个元素

arr.find(item=>item % 2===0) //找第一个偶数
let arr = [12,45,1]
arr.find(function(x){
    return x%5===0
})
=>45

使用条件找到该元素的索引

findeIndex：返回对应的元素的下标

arr.findIndex(item=>item % 2===0) //找第一个偶数的索引
arr.findIndex(function(x){
    return x%5===0
})
=>1

增加数组中的元素

在尾部添加元素

arr.push() //修改arr,返回新长度

let arr = [1,2,3,4,5,6]
arr.push(9)
=>7
arr
=>(7),[1, 2, 3, 4, 5, 6, 9]
arr.push('a','b','c')
=>10
=>(10), [1, 2, 3, 4, 5, 6, 9, "a", "b", "c"]

在头部添加元素

arr.unshift()//修改arr,返回新长度

arr.unshift(11)
11
arr
=>(11),[11, 1, 2, 3, 4, 5, 6, 9, "a", "b", "c"]
arr.unshift('x','y','z')
=>14
arr
=>(14),["x", "y", "z", 11, 1, 2, 3, 4, 5, 6, 9, "a", "b", "c"]

在中间添加元素

arr.splice() //修改arr,返回新长度

arr.splice(9,0,9.9) //9表示在第九个的位置，0表示一个都不删，9.9表示添加的数字
arr
=>15,["x", "y", "z", 11, 1, 2, 3, 4, 5, 9.9, 6, 9, "a", "b", "c"]

修改数组

arr[]=xxx //在对应的位置输入要修改的数字

arr.splice(x,1,xxx) //在x个位置，删掉一个数字，添加一个xxx，既修改的意思

反转序列

arr.reverse() //修改原数组

let arr = [1,2,3,4,5,6,7,8]
arr.reverse()
=>(8),[8, 7, 6, 5, 4, 3, 2, 1]
arr
=>(8),[8, 7, 6, 5, 4, 3, 2, 1]

let str = 'hello jirengu' 
str = str.split('').reverse().join('');
console.log(str)

• 字符串的反转

var s = 'abcde'
s.split('')
=>(5),["a", "b", "c", "d", "e"]  //先变成数组
s.split('').reverse()
=>(5),["e", "d", "c", "b", "a"]   //反转
s.split('').reverse().join('')   //再变回字符串
=>"edcba"

修改序列

arr.sort() // sort 默认排序顺序是在将元素转换为字符串

arr1 = [1, 30, 4, 21, 100] 
arr1.sort((a, b) => a-b) //从小到大 [1, 4, 21, 30, 100]
arr1 = [1, 30, 4, 21, 100] 
arr1.sort((a, b) => b-a)  //从大到小 [100, 30, 21, 4, 1] 

let arr = [2,3,5,4,1]
arr.sort()
=>(5),[1, 2, 3, 4, 5]
arr.sort(function(a,b){
    if(a>b){
        return 1 // 1表示前面一个大
    }else if(a === b){
        return 0  //0表示一样大
    }else{
         return -1}   //-1表示后面一个大
})
=>(5),[1, 2, 3, 4, 5]

例子

let arr = [
        {name:'小明',score:99}, {name:'小红',score:95}, {name:'小蓝',score:100}
]
arr.sort()

=>(3) [{…}, {…}, {…}]
0: {name: "小明", score: 99}
1: {name: "小红", score: 95}
2: {name: "小蓝", score: 100}
length: 3
__proto__: Array(0)

arr.sort(function(a,b){
    if(a.score > b.score){return 1}
    else if(a.score === b.score){return 0}
    else {return -1}
})
=>(3) [{…}, {…}, {…}]
0: {name: "小红", score: 95}
1: {name: "小明", score: 99}
2: {name: "小蓝", score: 100}
length: 3
__proto__: Array(0)

↑ 等同于 ↓

arr.sort((a,b) =>a.score - b.score)
=>(3) [{…}, {…}, {…}]
0: {name: "小红", score: 95}
1: {name: "小明", score: 99}
2: {name: "小蓝", score: 100}
length: 3
__proto__: Array(0)

数组变换

Map

n变n

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

filter

n变少

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

reduce

n变1

let arr =[1,2,3,4,5,6]
let sum =0
for(let i=0;i<arr.length;i++){
    sum += arr[i]
}
21
arr.reduce((sum,item)=>{return sum+item},0)
21

数组的ES5方法

Array.isArray()

用来判断一个对象是不是数组

let a = [] 
let b = new Date() 
console.log(Array.isArray(a))  //true 
console.log(Array.isArray(b))  //false

.indexOf()

用来查找指定元素的位置 找不到返回-1

let arr = [3, 1, 9, 9, 'hello']
let index = arr.indexOf(9) 
console.log(index)               //2
let index2 = arr.lastIndexOf(9) 
console.log(index2)              //3 
console.log(arr.indexOf(100))    //-1

.forEach()

遍历数组，参数为回调函数，回调函数里的参数为

• 遍历到的对应元素
• 元素序号
• 数组本身

let arr = [4, 2, 1, 9, 0, 5] 
arr.forEach(function(val) {  
console.log(val) 
}) 
arr.forEach(function(val, index, array) { 
arr[index] = val**2 
}) 
arr.forEach(val => { 
console.log( val**2 )
})

.every()

所有回调函数都返回true的时候结果才会返回true，否则 返回false

let arr = [4, -2, 1, 9, 0, 5]
let isPositive = arr.every(val => val > 0) 
console.log(isPositive)   //数组全是正数吗 false

.some()

只要有一个回调函数都返回true的时候结果就返回true

let arr = [4, -2, 1, 9, 0, 5]
arr.some(val => val > 0)   //数组里面有正数吗 true 
arr.some(val => val < 0)   //数组里有负数吗 true

.filter()

过滤出满足条件的元素，构成新数组

 let arr = [4, -2, -1, 9, 0, 5] 
let arr1 = arr.filter(val => val > 0)   //过滤出正数 
console.log(arr1)  // [4, 9, 5] 
let arr2 = arr.filter(val => val < 0)   //过滤出负数
 console.log(arr2)  // [-2, -1] 
console.log(arr)   //[4, -2, -1, 9, 0, 5] 原数组不变

.map()

遍历数组，回调函数返回值组成一个新数组返回，新数 组索引结构和原数组一致，原数组不变

 let arr = [1, 4, 3, 9]
 let arr1 = arr.map(v => v**2) 
console.log(arr1)  //[1, 16, 9, 81]

.reduce()

.reduce(function(v1, v2), initValue) 遍历数组，调用回调函数，将数组元素组合成一个值 初始值可选

let arr = [1, 4, 3, 9] 
let result = arr.reduce((v1, v2) => v1 + v2)
console.log(result)   //17
let result2 = arr.reduce((res, v) => res + v**2, 0) 
console.log(result2)
当出现参数是个数组，最终得到一个值这种场景，考虑 使用reduce来简化代码