数组的常用方法
数组常用方法之 push
-
push
是用来在数组的末尾追加一个元素var arr = [1, 2, 3] // 使用 push 方法追加一个元素在末尾 arr.push(4) console.log(arr) // [1, 2, 3, 4]
数组常用方法之 pop
-
pop
是用来删除数组末尾的一个元素var arr = [1, 2, 3] // 使用 pop 方法删除末尾的一个元素 arr.pop() console.log(arr) // [1, 2]
数组常用方法之 unshift
-
unshift
是在数组的最前面添加一个元素var arr = [1, 2, 3] // 使用 unshift 方法想数组的最前面添加一个元素 arr.unshift(4) console.log(arr) // [4, 1, 2, 3]
数组常用方法之 shift
-
shift
是删除数组最前面的一个元素var arr = [1, 2, 3] // 使用 shift 方法删除数组最前面的一个元素 arr.shift() console.log(arr) // [2, 3]
数组常用方法之 splice
-
splice
是截取数组中的某些内容,按照数组的索引来截取 -
语法:
splice(从哪一个索引位置开始,截取多少个,替换的新元素)
(第三个参数可以不写)var arr = [1, 2, 3, 4, 5] // 使用 splice 方法截取数组 arr.splice(1, 2) console.log(arr) // [1, 4, 5]
arr.splice(1, 2)
表示从索引 1 开始截取 2 个内容- 第三个参数没有写,就是没有新内容替换掉截取位置
var arr = [1, 2, 3, 4, 5] // 使用 splice 方法截取数组 arr.splice(1, 2, '我是新内容') console.log(arr) // [1, '我是新内容', 4, 5]
arr.splice(1, 2, '我是新内容')
表示从索引 1 开始截取 2 个内容- 然后用第三个参数把截取完空出来的位置填充
数组常用方法之 reverse
-
reverse
是用来反转数组使用的var arr = [1, 2, 3] // 使用 reverse 方法来反转数组 arr.reverse() console.log(arr) // [3, 2, 1]
数组常用方法之 sort
-
sort
是用来给数组排序的var arr = [2, 3, 1] // 使用 sort 方法给数组排序 arr.sort() console.log(arr) // [1, 2, 3]
- 这个只是一个基本的简单用法
数组常用方法之 concat
-
concat
是把多个数组进行拼接 -
和之前的方法有一些不一样的地方,就是
concat
不会改变原始数组,而是返回一个新的数组var arr = [1, 2, 3] // 使用 concat 方法拼接数组 var newArr = arr.concat([4, 5, 6]) console.log(arr) // [1, 2, 3] console.log(newArr) // [1, 2, 3, 4, 5, 6]
- 注意: concat 方法不会改变原始数组
数组常用方法之 join
-
join
是把数组里面的每一项内容链接起来,变成一个字符串 -
可以自己定义每一项之间链接的内容
join(要以什么内容链接)
-
不会改变原始数组,而是把链接好的字符串返回
var arr = [1, 2, 3] // 使用 join 链接数组 var str = arr.join('-') console.log(arr) // [1, 2, 3] console.log(str) // 1-2-3
- 注意: join 方法不会改变原始数组,而是返回链接好的字符串
数组查找方法 indexOf
- 数组的中可以利用indexOf查找是否包含某一个数据
- 如果找到了这个数据返回这个数据在数组中的下标
- 没有找到这个数据固定返回-1
var arr = [1,2,3]
var index = arr.indexOf(1)
console.log(index) // 0
var index2= arr.indexOf(11)
console.log(index2) // -1
数组查找方法lastIndexOf
- 该方法效果同indexOf
- indexOf是从数组开头匹配数据
- lastIndexOf是从数组的末尾匹配数据
var arr = [1,2,3,4,1,2]
var index = arr.indexOf(2)
console.log(index) // 1
var index2 = arr.lastIndexOf(2)
console.log(index2) // 5
forEach方法
- 数组的遍历方法 可以用此方法替代for循环
var arr = ['哈哈', '嘻嘻', '呵呵']
arr.forEach(function(item, index){
// item是数组中的每一项数据
// index是数组的下标
})
map方法
- map方法用于改变数组中的每一项数据 返回一个改变后的新数组
- map方法不会改变原数组 只会返回一个改变后的新数组
- map方法需要返回一数据, 这个数据会依次放到新数组里面,map方法如果没有返回值的话 接受得到的新数组里面返回值全部是undefined
var arr = ['哈哈', '嘻嘻', '呵呵']
var newArr = arr.map(function(item, index){
// item是数组中的每一项数据
// index是数组的下标
// 此处需要返回一个数据 这个数据会存放到新数组里面
return item + 1
})
console.log(newArr) // ['哈哈1', '嘻嘻1', '呵呵1']
filter方法
- filter方法用于过滤数组中的数据, 返回一个过滤后的新数组
- filter方法也不会改变原数组 返回一个过滤后的新数组
- filter方法需要返回一个条件,如果条件为真,就保留此项数据;如果条件为假,就过滤此条数据
- 如果没有返回条件 默认是假 得到一个空数组
var arr = [1,2,3,4,5,6,7,8,9]
var newArr = arr.filter(function(item, index){
// item是数组中的每一项数据
// index是数组的下标
// 此处需要返回一个条件 会依据这个条件决定当前项的数据是否保留
return item>4
})
console.log(newArr) // [5,6,7,8,9]
every方法
- every方法主要用于判断数组中每一项数据是否符合某一个条件
- every方法函数内部需要返回一个条件
- 如果每一项数据都符合这个条件 every方法会得到一个返回值 true
- 如果有一项不符合every方法得到的返回值false
var arr = [1,2,3,4,5,6,7,8,9]
var bool= arr.every(function(item, index){
// item是数组中的每一项数据
// index是数组的下标
// 此处需要返回一个条件 会依据这个条件依次判断数组每一项是否符合
// 只有每一项符合才会返回true
// 有一项不符合返回false
return item>4
})
console.log(bool) // false
some方法
- some方法主要用于判断数组中是否有某一项符合条件
- some方法函数内部需要返回一个条件
- 如果有一项数据都符合这个条件 some方法会得到一个返回值 true
- 如果每一项都不符合some方法得到的返回值false
var arr = [1,2,3,4,5,6,7,8,9]
var bool= arr.some(function(item, index){
// item是数组中的每一项数据
// index是数组的下标
// 此处需要返回一个条件 会依据这个条件依次判断数组每一项是否符合
// 只要有一项符合要求 就返回true 就不会继续往后查找
// 每一项都不符合返回false
return item>4
})
console.log(bool) // true
find方法
- find方法用于找出第一个符合条件的数组成员
- 该方法和indexOf区别就是indexOf找到的是下标 find方法找到的是匹配的数据
var arr = [1, 5, 10, 15]
var data = arr.find(function(item, index){
return item>4
})
console.log(data) // 5
findIndex方法
- findIndex方法用于找到第一个符合条件数据的下标
- findIndex可以匹配访问 indexOf只能固定匹配某一个数据
var arr = [1, 5, 10, 15]
var data = arr.find(function(item, index){
return item>4
})
console.log(data) // 1
reduce方法
- reduce方法可以实现累加和累乘的效果
- array.reduce(function(prev, currentValue), initValue)
// 求累加
var arr = [1,2,3,4,5]
var sum = arr.reduce(function(prev, cur){
// prev前一次的结果
// cur是当前项
return prev + cur
}, 0)
console.log(sum) // 15
// 求累乘
var arr = [1,2,3,4,5]
var sum = arr.reduce(function(prev, cur){
// prev前一次的结果
// cur是当前项
return prev * cur
}, 1)
console.log(sum) // 1*2*3*4*5
数组的排序
- 排序,就是把一个乱序的数组,通过我们的处理,让他变成一个有序的数组
- 今天我们讲解两种方式来排序一个数组 冒泡排序 和 选择排序
冒泡排序
-
先遍历数组,让挨着的两个进行比较,如果前一个比后一个大,那么就把两个换个位置
-
数组遍历一遍以后,那么最后一个数字就是最大的那个了
-
然后进行第二遍的遍历,还是按照之前的规则,第二大的数字就会跑到倒数第二的位置
-
以此类推,最后就会按照顺序把数组排好了
-
我们先来准备一个乱序的数组
var arr = [3, 1, 5, 6, 4, 9, 7, 2, 8]
- 接下来我们就会用代码让数组排序
-
先不着急循环,先来看数组里面内容换个位置
// 假定我现在要让数组中的第 0 项和第 1 项换个位置 // 需要借助第三个变量 var tmp = arr[0] arr[0] = arr[1] arr[1] = tmp
-
第一次遍历数组,把最大的放到最后面去
for (var i = 0; i < arr.length; i++) { // 判断,如果数组中的当前一个比后一个大,那么两个交换一下位置 if (arr[i] > arr[i + 1]) { var tmp = arr[i] arr[i] = arr[i + 1] arr[i + 1] = tmp } } // 遍历完毕以后,数组就会变成 [3, 1, 5, 6, 4, 7, 2, 8, 9]
- 第一次结束以后,数组中的最后一个,就会是最大的那个数字
- 然后我们把上面的这段代码执行多次。数组有多少项就执行多少次
-
按照数组的长度来遍历多少次
for (var j = 0; j < arr.length; j++) { for (var i = 0; i < arr.length; i++) { // 判断,如果数组中的当前一个比后一个大,那么两个交换一下位置 if (arr[i] > arr[i + 1]) { var tmp = arr[i] arr[i] = arr[i + 1] arr[i + 1] = tmp } } } // 结束以后,数组就排序好了
-
给一些优化
-
想象一个问题,假设数组长度是 9,第八次排完以后
-
后面八个数字已经按照顺序排列好了,剩下的那个最小的一定是在最前面
-
那么第九次就已经没有意义了,因为最小的已经在最前面了,不会再有任何换位置出现了
-
那么我们第九次遍历就不需要了,所以我们可以减少一次
for (var j = 0; j < arr.length - 1; j++) { for (var i = 0; i < arr.length; i++) { // 判断,如果数组中的当前一个比后一个大,那么两个交换一下位置 if (arr[i] > arr[i + 1]) { var tmp = arr[i] arr[i] = arr[i + 1] arr[i + 1] = tmp } } }
-
第二个问题,第一次的时候,已经把最大的数字放在最后面了
-
那么第二次的时候,其实倒数第二个和最后一个就不用比了
-
因为我们就是要把倒数第二大的放在倒数第二的位置,即使比较了,也不会换位置
-
第三次就要倒数第三个数字就不用再和后两个比较了
-
以此类推,那么其实每次遍历的时候,就遍历当前次数 - 1 次
for (var j = 0; j < arr.length - 1; j++) { for (var i = 0; i < arr.length - 1 - j; i++) { // 判断,如果数组中的当前一个比后一个大,那么两个交换一下位置 if (arr[i] > arr[i + 1]) { var tmp = arr[i] arr[i] = arr[i + 1] arr[i + 1] = tmp } } }
-
-
至此,一个冒泡排序就完成了
-
选择排序
-
先假定数组中的第 0 个就是最小的数字的索引
-
然后遍历数组,只要有一个数字比我小,那么就替换之前记录的索引
-
知道数组遍历结束后,就能找到最小的那个索引,然后让最小的索引换到第 0 个的位置
-
再来第二趟遍历,假定第 1 个是最小的数字的索引
-
在遍历一次数组,找到比我小的那个数字的索引
-
遍历结束后换个位置
-
依次类推,也可以把数组排序好
-
准备一个数组
var arr = [3, 1, 5, 6, 4, 9, 7, 2, 8]
-
假定数组中的第 0 个是最小数字的索引
var minIndex = 0
-
遍历数组,判断,只要数字比我小,那么就替换掉原先记录的索引
var minIndex = 0 for (var i = 0; i < arr.length; i++) { if (arr[i] < arr[minIndex]) { minIndex = i } } // 遍历结束后找到最小的索引 // 让第 minIndex 个和第 0 个交换 var tmp = arr[minIndex] arr[minIndex] = arr[0] arr[0] = tmp
-
按照数组的长度重复执行上面的代码
for (var j = 0; j < arr.length; j++) { // 因为第一遍的时候假定第 0 个,第二遍的时候假定第 1 个 // 所以我们要假定第 j 个就行 var minIndex = j // 因为之前已经把最小的放在最前面了,后面的循环就不需要判断前面的了 // 直接从 j + 1 开始 for (var i = j + 1; i < arr.length; i++) { if (arr[i] < arr[minIndex]) { minIndex = i } } // 遍历结束后找到最小的索引 // 第一堂的时候是和第 0 个交换,第二趟的时候是和第 1 个交换 // 我们直接和第 j 个交换就行 var tmp = arr[minIndex] arr[minIndex] = arr[j] arr[j] = tmp }
-
一些优化
-
和之前一样,倒数第二次排序完毕以后,就已经排好了,最后一次没有必要了
for (var j = 0; j < arr.length - 1; j++) { var minIndex = j for (var i = j + 1; i < arr.length; i++) { if (arr[i] < arr[minIndex]) { minIndex = i } } var tmp = arr[minIndex] arr[minIndex] = arr[j] arr[j] = tmp }
-
在交换变量之前,可以判断一下,如果我们遍历后得到的索引和当前的索引一直
-
那么就证明当前这个就是目前最小的,那么就没有必要交换
-
做一我们要判断,最小作引和当前作引不一样的时候,才交换
for (var j = 0; j < arr.length - 1; j++) { var minIndex = j for (var i = j + 1; i < arr.length; i++) { if (arr[i] < arr[minIndex]) { minIndex = i } } if (minIndex !== j) { var tmp = arr[minIndex] arr[minIndex] = arr[j] arr[j] = tmp } }
-
-
至此,选择排序完成
-