数组的常用类型
1.push
语法:数组.push(数据)
作用:向数组末位添加数据
返回值:追加数据后,数组最新的长度(Length)
<script>
var arr = [1,2,3]
arr.push(500)
var a = arr.push(500)
console.log(arr)//打印值为[1,2,3,500]
console.log(a)//打印值为4
</script>
2.pop
作用:删除数组末尾的数据
语法:数组.pop()
返回值:数组被删除的值
<script>
var arr = [1,2,3]
arr.pop()
var a = arr.pop()
console.log(arr)//打印值为[1,2]
console.log(a)//打印值为3
</script>
3.unshift
语法:数组.unshift(数据)
作用:向数组首位添加数据
返回值:追加数据后,数组最新的长度(Length)
<script>
var arr = [1,2,3]
arr.unshift(500)
var a = arr.unshift(500)
console.log(arr)//打印值为[500,1,2,3]
console.log(a)//打印值为4
</script>
4.shift
作用:删除数组首尾的数据
语法:数组.shift()
返回值:数组被删除的值
<script>
var arr = [1,2,3]
arr.shift()
var a = arr.shift()
console.log(arr)//打印值为[2,3]
console.log(a)//打印值为1
</script>
5.reverse
作用:反转数组
语法:数组.reverse
返回值:反转后的数组
<script>
var arr = [1,2,3]
arr.reverse()
var a = arr.reverse()
console.log(a)//打印值为[3,2,1]
console.log(arr)//打印值为[3,2,1]
</script>
6.sort
语法:1.:数组.sort()
作用:会将数据全部转为字符串,然后一位一位比较
返回值:排列后的数组
<script>
var arr = [100,110,1200,120001,10,10000,1100000]
console.log(arr.sort(arr))//打印值为[10,100,10000,110,1100000,1200,120001]
</script>
2.:数组.sort(function(a,b){return a - b})
作用:会按照数字大小升序排列
<script>
var arr = [100,110,1200,120001,10,10000,1100000]
console.log(arr.sort(function(a,b){return a - b}))//打印值为[10,100,110,1200,10000,120001,1100000]
</script>
3.:数组.sort(function(a,b){return b - a})
作用:会按照数字大小降序排列
<script>
var arr = [100,110,1200,120001,10,10000,1100000]
console.log(arr.sort(function(a,b){return b - a}))//打印值为[1100000,120001,10000,1200,110,100,10]
</script>
7.splice
语法:1.:数组.splice(开始索引(下标),多少个)
作用:截取数组部分内容
<script>
var arr = [1,2,3,4,5,6,7]
arr.splice(3 , 2)//从下标3开始,截取两个
console.log(arr.splice(3 , 2))//打印值为[4,5]
console.log(arr)//打印值为[1,2,3,6,7]
</script>
语法2: 数据.splice(开始索引(下标),多少个, 插入数据1 , 插入数据2 , 插入数据3 , 插入数据4 .....)
作用:截取部分内容,并插入新的内容.
<script>
var newArr = arr.splice(2, 3, '数据1', '数据2', '数据3', '数据4', '数据5') // 不管插入多少个数据, 都是从下标2开始的
console.log('newArr', newArr)//打印值[3,4,5]
console.log('arr', arr)//打印值[1,2, '数据1', '数据2', '数据3', '数据4', '数据5',6,7]
</script>
返回值:截取出来的部分内容, 组成的内容 .
能够改变原数组的方法只有上述七个
8.slice
作用:截取数组部分内容
语法:数组.slice(开始索引(下标),结束索引(下标))
<!--!特点:1.包前不包后(包含开始索引的内容,不包含结束索引的内容)
<!--! 2.不写开始索引默认为0(原数组的全部内容)
<!--! 3.不写结束索引默认为数组的length(从开始索引往后的所有内容)
<!--! 4. 参数可以为负数,表示倒数第几个(length - n) -->
返回值:截取出来的部分内容, 组成的内容.
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 0 1 2 3 4 5 6 7 8
console.log('原始数组: ', arr)
// var newArr = arr.slice(3, 4) // 从 下标3 开始截取, 截取到 下标4
// console.log('newArr', newArr) // [4]
// console.log('arr', arr)
var newArr = arr.slice(5) // 不写 结束索引, 相当于 写了数组.length, 所以这里相当于写了 slice(5, arr.length)
console.log(newArr) // [6, 7, 8, 9]
/**
* 此时 开始索引与结束索引都没有填写, 那么 开始索引相当于是写了一个 0, 结束索引相当于写了 数组.length
*
* arr.slice() 相当于写了 arr.slice(0, arr.length)
*/
// var newArr = arr.slice()
// console.log(newArr)
var newArr = arr.slice(3, -2)
console.log(newArr) // [4, 5, 6, 7]
/**
* arr.slice(3, -2)
* slice 这个方法 允许写 负数
*
* 写负数的时候 就相当于写了 length + 负数
*
* arr.slice(3, -2) -> arr.slice(3, arr.length + (-2)) -> arr.slice(3, arr.length - 2)
* -> arr.slice(3, 9 - 2)
* -> arr.slice(3, 7)
*/
</script>
splice和slice的区别
- 参数含义不同, 然后介绍一下 参数哪里不同
- splice 会改变原数组, 而 slice 不会
9.concat
语法:原始数组.concat(数组1,数组2)
作用:进行数据拼接,把数组....数据之类的小括号里的内容,拼接在原始数组里
返回值:拼接好的数组
<script>
var arr = [1,2,3]//原始数组
var a = arr.concat([4,5,6],[10,20,30],'abc',100)
console.log(a)//打印值:[1,2,3,4,5,6,10,20,30,'abc',100]
console.log(arr)//打印值:[1,2,3]
</script>
10.join
语法:数组.join('连接符')
作用:使用"连接符",把数组内的每一个数据连接成一个字符串(不写连接符默认使用逗号)
返回值:链接好的字符串
<script>
var arr= [1,2,3,a]
var a = arr.join()
var b = arr.join(!)
console.log(a)//打印值:'1,2,3,a'
console.log(b)//打印值:'1!2!3!a'
console.log(arr)//打印值:[1,2,3,a]
</script>
11.indexOf
语法:1.:数组.indexOf(要检查的数据)
作用:从前到后(从左到右)检查该数据第一次在该数组内出现的索引(下标)
返回值:1.找到数据的情况下,会将该数据第一次出现的下标返回
2.没找到的情况下,会直接返回-1
<script>
var arr = [1,1,2,2,3,3,0,4,0]
var a = arr.indexOf(0)
var b = arr.indexOf(100)
console.log(a)//打印值:6
console.log(b)//打印值:-1
</script>
语法2:数组.indexOf(要检查的数据,开始索引)
作用:在开始索引的位置,按照从左到右的顺序检查该数据在该 数组第一次出现的位置.
返回值:1.找到数据的情况下,会将该数据第一次出现的下标返回
2.没找到的情况下,会直接返回-1
<script>
var c = arr.indexOf(1,3)//表示要检查的数据是1,从下标3开始从左到右检查
console.log(c)//打印值:-1
</script>
开始索引不写默认为0
12.LastIndexOf
语法1:数组.LastIndexOf(要检查的数据)
作用:从后到前(从右到左)检查该数据第一次在该数组内出现的索引(下标)
返回值:1.找到数据的情况下,会将该数据第一次出现的下标返回
2.没找到的情况下,会直接返回-1
<script>
var arr = [1,1,2,2,3,3,0,4,0]
var a = arr.LastIndexOf(0)
var b = arr.LastIndexOf(100)
console.log(a)//打印值:8
console.log(b)//打印值:-1
</script>
语法2:数组.LastIndexOf(要检查的数据,开始索引)
作用:在开始索引的位置,按照从右到左的顺序检查该数据在该 数组第一次出现的位置
<script>
var c = arr.LastIndexOf(1,3)//表示要检查的数据是1,从下标3开始从右到左检查
console.log(c)//打印值:1
</script>
数组遍历的常用方法
1.forEach
语法:数组.forEach(function(item, index, origin){})
item:数组的每一项的值
index:数组的每一项对应的下标
origin:原始数组(了解即可,一般不用)
作用:遍历数组(拿到数组里的所有数据)
返回值:该方法永远没有返回值,(永远都是undefined)
<script>
var arr = [100,200,300,400,500,600]
arr.forEach(function(item, index, origin){
console.log(item)//arr的每一项的值
console.log(index)//arr的每一项值得对应下标
console.log(origin)//数组arr
})
</script>
代码写在function的{}里
2.map
语法:数组.map(function(item, index, origin){})(参数意义与forEach相同)
作用:映射数组
返回值:返回一个和原数组长度相同的数组,但是内部数据可以经过我们映射加工
映射加工:就是在函数内,以 return 的形式书写
<script>
var arr = [100,200,300,400,500,600]
var a = arr.map(function(item, index, origin){
return item
})
console.log(a)//打印值与arr数组
var b = arr.map(function(item, index, origin){
return item * 2
})
console.log(b)//长度与arr相同的数组,但数据是arr各项的两倍
</script>
forEach与map的区别
1.forEach是用来遍历数组的,而map是用来映射数组的
2.forEach没有返回值,而map是可以有返回值的
3.filter
语法:数组.filter(function(item, index, origin){})(参数意义与上述相同)
作用:过滤数组
返回值:返回一个新数组,内部为原始数组滤的部分内容
过滤条件:以return的形式书写
<script>
var arr = [100,200,300,400,500,600]
var a = arr.filter(function(item, index, origin){
return item > 350
}) //只留下原数组大于350的值
console.log(a)//打印值[400,500,600]
console.log(arr)//打印值[100,200,300,400,500,600]
</script>
4.find
语法:数组.find(function(item, index, origin){})(参数意义与上述相同)
作用:在数组内查找满足条件的第一项
返回值:找到的数据
查找条件:以return的形式书写
<script>
var arr = [100,200,300,400,500,600]
var a = arr.find(function(item, index, origin){
return item > 350
})
console.log(a)//打印值:400(因为400是第一个大于350的值)
</script>
5.findIndex
语法:数组.findIndex(function(item, index, origin){})(参数意义与上述相同)
作用:在数组内查找满足条件的第一个数据的下标
返回值:1.找到数据的情况下,会将该满足条件的第一个数据的下标返回
2.没找到的情况下,会直接返回-1
查找条件:以return的形式书写
<script>
var arr = [100,200,300,400,500,600]
var a = arr.findIndex(function(item, index, origin){
return item > 350
})
console.log(a)//打印值:3(因为400是第一个大于350的值,并且它的下标为3)
</script>
6.some
语法:数组.some(function(item, index, origin){})(参数意义与上述相同)
作用:判断数组内是否有一个满足条件的
返回值:一个布尔值:true/false
判断条件:以return的形式书写
<script>
var arr = [1,2,3,4,5,6]
var a = arr.some(function(item, index, origin){
return item % 2 === 0
})
console.log(a)//打印值true
</script>
7.every
语法 数组.every(function(item, index, origin){})(参数意义与上述相同)
作用:判断数组内是否全部满足条件的
返回值:一个布尔值:true/false
判断条件:以return的形式书写
<script>
var arr = [1,2,3,4,5,6]
var a = arr.every(function(item, index, origin){
return item % 2 === 0
})
console.log(a)//打印值:false(因为arr数组不是全部满足条件)
</script>
8.reduce
语法:数组.reduce(function(prev,item, index, origin){},init)
prev:表示初始值或上一次的运算果
init:prev的初始数据(不写时默认为数组第一项的值,而item则会从第二项开始运算)
(其他参数意义与上述相同)
作用:用来实现叠加结果
返回值:最终的叠加结果
注意:
1.叠加条件以return的形式书写
2.prev第一次的值,如果传递了init,就是init的值,如果没传递init则是arr[0]的值
3.如果传递了init那么循环次数就是arr.length,如果没有传递init那么循环次数就是length-1次
<script>
var arr = [1,2,3,4]
var a = arr.reduce(function(prev,item, index, origin){
return prev + item
},0)
</script>
