JS数组

用户4759378424653
82 阅读11分钟

数组

数组基础

//数组是一种数据类型，他也是属于 引用数据类型（复杂数据类型）是存放一些数据的集合
​
//语法：
    //1.字面量方式
var arr = [1, 2, 3, 'a', 'b', 'c']
console.log(arr)
​
    //2.内置构造函数方式
var arr1 = new Array()                      //创建一个空数组
console.log(arr1)
​
var arr2 = new Array(5)                     //创建一个有长度的数组
console.log(arr2)
​
var arr3 = new Array(1,2,3,'a','b','c')         //创建一个有内容的数组
console.log(arr3)

数组length属性

//语法：
数组名.length
​
var arr1 = [1,2,3,4,5]
var arr2 = ['a','b','c','d']
​
console.log(arr1.length)            //5
console.log(arr1.length)            //4

数组的索引

//索引也称下标  就是指一个数据，在这个数组内排列在第几个位置上
    //注意： 在JS中，索引（下标）是从0开始计算的
​
    //获取数组指定位置的值，通过下标获取
//语法：
数组名[下标]   能够获取到这个数组中对应下标的成员具体的值
​
var arr = ['a','b','c','d']
console.log(arr[0])                 //获取到a
console.log(arr[3])                 //获取到d

遍历数组

//想办法拿到数组的每一个成员
​
var arr = ['a','b','c','d']
for (var i = 0; i < arr.length; i++){
   console.log(arr[i])              //可以拿到arr数组中的所有的值
}

数组排序

冒泡排序

var arr = [3,6,7,2,8,6,0]
for (i = 0;i < arr.length - 1; i++){
    for(n = 0; n < arr.length - 1 - i; n++){
        if(arr[n] > arr[n+1]){
            var temp = arr[n+1]
            arr[n+1] = arr[n]
            arr[n] = temp
        }
    }
}
console.log(arr)

选择排序

var arr = [9,3,6,2,4,1,8,5,7]
//第一轮选择排序
var minindex = 0        //假设当前最小值的下标为0
for (var i = 1; i < arr.length; i++){
    if(arr[minindex]) > arr[i]){    //如果当前分支执行，说明数组中找到一个 比假设的最小值要小的 元素
        minindex = i
    }
}
//上边for循环 执行完毕后，minindex 记录的就是 真实的最小值的下标
//此时交换 真实最小值 与 我们假设的最小值
var temp = arr[0]           //存储 数组下标0的值
arr[0] = arr[minindex]      //讲 下标0 重新赋值 为 当前数组最小值
arr[minindex] = temp        //将下标minindex 的值 重新赋值为 arr[0] 原本的值
console.log('第一轮选择排序后的数组：'，arr)
​
//第二轮选择排序
var minindex = 1        //假设当前最小值下标为1
for (var i = 2; i < arr.length; i++){
    if(arr[minindex]) > arr[i]){
        minindex = i
    }
}
//上边for循环 执行完毕后，minindex 记录的就是 真实的最小值的下标
//此时交换 真实最小值 与 我们假设的最小值
var temp = arr[1]
arr[1] = arr[minindex]
arr[minindex] = temp
console.log('第二轮选择排序后的数组：'，arr)
​
//第三轮选择排序
var minindex = 2        //假设当前最小值下标为2
for (var i = 3; i < arr.length; i++){
    if(arr[minindex]) > arr[i]){
        minindex = i
    }
}
//上边for循环 执行完毕后，minindex 记录的就是 真实的最小值的下标
//此时交换 真实最小值 与 我们假设的最小值
var temp = arr[2]
arr[2] = arr[minindex]
arr[minindex] = temp
console.log('第三轮选择排序后的数组：'，arr)
.....
​
//将上述流程简化成for循环
var arr = [9,3,6,2,4,1,8,5,7]
console.log('原始数据', arr)
for(var n = 0; n < arr.length; n++){
    var minindex = n    
    for (var i = n + 1; i < arr.length; i++){
        if(arr[minindex]) > arr[i]){    
            minindex = i
        }
    }
    var temp = arr[n]
    arr[n] = arr[minindex]
    arr[minindex] = temp
}

数组的常用方法

1.push

//作用：向数组末尾添加数据
//返回值：追加数组后，数组的最新长度(length)
//语法：
数组.push(数据)
​
var arr = [1,2,3,4,5]       //创建一个数组
console.log(arr.push(6))    //向末尾添加一个新的数据 且返回值为新数组的length

2.pop

//作用：删除数组最后一条数据*
//返回值：被删除的数据
//语法：
数组.pop()
​
var arr = [1,2,3,4,5,6]     
console.log(arr.pop())      //删除数组内的最后一个数据，且返回值为被删除的数据6
console.log(arr)            //显示为 (5) [1,2,3,4,5]

3.unshift

//作用：向数组开头添加数据
//返回值：添加数据后，数组最新的长度(length)
//语法：
数组.unshift(数据)

var arr = [1,2,3,4,5]	
console.log(arr.unshift(0))		//向数组开头添加一个数据0，返回值为 6（数组长度）
console.log(arr)				//显示为  (6) [0,1,2,3,4,5]

4.shift

//作用：删除数据第一条数据
//返回值：被删除的数据
//语法：
数组.shift()

var arr3 = [1,2,3,4,5]	
console.log(arr3.shift())		//删除数组内的第一个数据 且返回值为 1 （被删除的数据）
console.log(arr3)				//显示为 (4) [2，3，4，5]

5.reverse

//作用：反转数组
//返回值：反转后的数组
//语法：
数组.reverse()

var arr = [5,3,8,'b',2,9,'a','c']
console.log(arr4.reverse())			//反转后的数组 (8) ['c', ... 5]

6.sort

一//
//作用：会将数组转换为字符串后，一位一位的对比
//返回值：排序好的数组
//语法1：
数组.sort()

var arr = [10,5,3,'a','ab','c','ba']					
console.log(arr.sort())				//返回值为排序好的数组
console.log(typeof(arr[5]))
//返回值为排序好的数组  数字类型的话 转换为字符串去比较 从第一位开始比较

二//
//作用：会按照数字大小升序排列
//返回值：排序好的数组
//语法2：
数组.sort(function (a, b) {return a - b})

var arr = [10,5,3,'a','c','ba','ab']
console.log(arr.sort(function (a, b) {return a - b}))	
//返回值为 升序排列后的数组 ，只会排列数字类型数据的部分

三//
//作用：会按照数字大小升序排列
//返回值：排序好的数组
//语法3：
数组.sort(function (a, b) {return b - a})

var arr = [10,5,3,'a','c','ba','ab']
console.log(arr.sort(function (a, b) {return b - a}))	
//返回值为 降序排列后的数组 ，只会排列数字类型数据的部分

7.splice

一//
//作用：截取数组部分内容
//返回值：截取出来的内容组成新的数组
//语法1：
数组.splice(开始索引,多少个)

var arr = [4,6,8,123,0,7,3,45,82]
console.log(arr.splice(2,5))		//显示为 (5) [8,123,0,7,3]

二//
//作用：截取数组部分内容，并且插入新内容
//返回值：截取出来的内容组成新的数组
//语法2： 
数组.splice(开始索引,多少个,插入的数据1,插入的数据2,....)

var arr = [4,6,8,123,0,7,3,45,82]
console.log(arr.splice(1,3,999,888,777))
//截取 6，8，123  插入新的数据 999，888，777

//以上其中方法，能改变原数组

8.slice

//作用：截取数组部分内容
//返回值：截取出来的内容组成新的数组
//参数：
	//1.包前不包后，包含开始索引位置的数据，不包含结束索引位置的数据
	//2.不写开始索引，默认为0，不屑结束索引，默认是数组的length
	//3.参数支持写负数，表示倒数第几个，其实就是length加负数
//语法：
数组.slice(开始索引,结束索引)

var arr = [0,1,2,3,4,5,6,7,8,9]
console.log(arr.slice(2,5))			//包前不包后，显示为 (3) [2,3,4]
console.log(arr.slice(3))			//不写结束索引，默认是arr.length
console.log(arr.slice(1,-4))		//显示为 (5) [1,2,3,4,5] -4代表 倒数第4个

9.concat

//作用：进行数据拼接，把数组......数据之类的小括号里的内容，拼接在原始数组中
//返回值：拼接好的数组
//语法：
原始数组.concat(数组1,数组2,......数组1,数组2)

var arr = [1,2,3]
var newArr = arr.concat([4，5，6]，[10,20],['a','b','c'],'abc')
console.log(newArr)

10.join

//作用：使用“连接符”，把数组内的每一个数据链接成字符串（不写连接符，默认使用的是逗号）
//返回值：链接好的字符串
//语法：
数组.join('连接符')

var arr = [1,2,3]
var newArr = arr.join()
console.log(newArr)				//数组转换成字符串 使用逗号连接 1，2，3
var newArr = arr.join('!')
console.log(newArr)				//1!2!3
console.log(typeof(newArr))		//string

11.indexOf

一//
//作用：从左到右检查该数据第一次在该数组内出现的索引
//返回值：找到数据的情况下，会将该数据的下标（索引）返回 没找到的情况下，会返回一个-1
//语法1：
数组.indexOf(要检查的数据)

var arr = [1,1,2,2,3,3,0,4,0]
var num = arr.indexOf(100)
console.log(num)				//检查的数据是 100 ，数组中没有所以返回值 -1
num = arr .indexOf(0)
console.log(num)				//检查的数据是0 ，返回值6（索引）

二//
//作用：在开始索引的位置，按照从左到右的顺序，检查该数据第一次在数组内出现的索引
//返回值：找到数据的情况下，会将该数据的下标（索引）返回 没找到的情况下，会返回一个-1
//语法2：
数组.indexOf(要检查的数据,开始索引)

var arr = [1,1,2,2,3,3,0,4,0]
var num = arr .indexOf(1,3)
console.log(num)				//因为后续没有数字1 所以返回值为 -1
num = arr.indexOf(0,7)			//此时 返回值为 8  因为从 索引7 出发

12.lastIndexOf

一//
//作用：从右到左检查该数据第一次在该数组内出现的索引
//返回值：找到数据的情况下，会将该数据的下标（索引）返回 没找到的情况下，会返回一个-1
//语法1：
数组.lastIndexOf(要检查的数据)

var arr = [1,1,2,2,3,3,0,4,0]
var num = arr.lastIndexOf(3)	
console.log(num)				//因为从右往左的顺序 ，所以返回值5

二//
//作用：在开始索引的位置，按照从右到左的顺序，检查该数据第一次在数组内出现的索引
//返回值：找到数据的情况下，会将该数据的下标（索引）返回 没找到的情况下，会返回一个-1
//语法2：
数组.lastIndexOf(要检查的数据,开始索引)

var arr = [1,1,2,2,3,3,0,4,0]
var sum = arr.lastIndexOf(0,5)
console.log(num)					//返回值 -1

13.forEach

//作用：遍历数组
//返回值：该方法永远没有返回值(undefined)
//参数：
	//item：数组的每一项 的值
	//index：数组的每一项 对应的下标
	//origin：原始数组
//语法：
数组.forEach(function(item,index,origin){})

var arr = [100,200,300,400,500,600]arr.forEach(function(item,index,origin){   console.log(item,index)})

14.map

//作用：映射数组
//返回值：返回一个和原数组长度相同的数组，但是内部数据可以经过映射加工
//参数：
	//item：数组的每一项 的值
	//index：数组的每一项 对应的下标
	//origin：原始数组
//语法：
数组.map(function(item,index,origin){})

var arr = [100,200,300,400,500,600]
var newArr = arr.map(function(item,index,origin){
    return itme * 2
})
console.log(newArr)			//新数组 里的值 是原数组里的数据值 2倍


//forEach 与 map的区别
	//1.forEach 的作用是用来遍历数组，而map是用来映射数组
	//2.forEach没有返回值，map是可以有返回值的

15.filter

//作用：过滤数组
//返回值：返回一个新数组，内部存储的是原始数组过滤出来的部分内容
//过滤条件：以return形式书写
//语法：
数组.filter(function(item,index,origin){})

var arr = [100,200,300,400,500,600]
var newArr = arr.filter(function(item,index,origin){
    return item > 350			//过滤条件
})
console.log(newArr)				//新数组 过滤出来的内容组成的新数组

16.find

//作用：在数组内查找满足条件的第一项
//返回值：找到的数据 如果没找到返回值是 undefined
//查找条件：以return形式书写
//语法：
数组.find(function(item,index,origin){})

var arr = [100,200,300,400,500,600]
var newArr =  arr.find(function(item,index,origin){
    return item > 350
})
console.log()				//显示为 400  只显示符合条件的第一项

17.findIndex

//作用：在数组内查找满足条件的第一项的下标
//返回值：找到的数据的下标 如果没找到返回的是-1
//查找条件：以return形式书写
//语法：
数组.findIndex(function(item,index,origin){})

var arr = [100,200,300,400,500,600]
var newArr =  arr.findIndex(function(item,index,origin){
    return item > 350
})
console.log()				//显示为 3（下标） 只显示符合条件的第一项

18.some

//作用：判断数组内是否有一个满足条件
//返回值：一个布尔值（true/false）
//判断条件：以return形式书写
//语法：
数组.some(function(item,index,origin){})

var arr = [1,2,3,4,5,6,7,8,9]
var bo1 = arr.some(function(item,index,origin){
    return item % 2 === 0
})
console.log(bo1)			//至少有一个满足条件的 所以返回值为true

19.every

//作用：判断数组内是否全部满足条件
//返回值：一个布尔值（true/false）
//判断条件：以return形式书写
//语法：
数组.every(function(item,index,origin){})

var arr = [1,2,3,4,5,6,7,8,9]
var bo2 = arr.some(function(item,index,origin){
    return item % 2 === 0
})
console.log(bo2)			//必须全部满足条件 ，所以返回值为false

20.reduce

//作用：用来实现叠加效果
//返回值：最终叠加的结果
//参数：
	//prev：表示初始值或者上一次运算的结果
	//item：表示数组的每一项的值
	//index：表示数组的每一项的下标（索引）
	//origin：表示原始数组
//注意：
	//1.叠加条件以 return 形式书写
	//2.prev的值，如果传递了init 就是init的值，如果没有传递init 那么就是数组[0]的值
	//3.如果传递了 init 循环执行数组.length 次，如果没有传递init 那么循环执行数组.length - 1次
//语法：
数组.reduce(function(prev,item,index,origin){},init)

var arr = [1,2,3,4]
var str = arr.reduce(function(prev,item,index,origin){
    return prev + item
},0)
console.log(str)

数组塌陷

var arr = [0, 1, 2, 3, 4, 5]
 //         0  1  2  3  4  5
console.log('原始数组: ', arr)
for (var i = 0; i < arr.length; i++) {
    arr.splice(i, 1)					//此时相当于 把 [0] 的值截取掉了
    i--									//此时相当于把 i 的值更改为 -1
    									//循环内部代码执行完毕之后, 会执行一个 i++,   所以下一轮循环开始的时候 i 的值 === 0
}
console.log('删除后的数据：'，arr)

数组去重

var arr = [1,2,2,4,6,7,1,2,3,4,1,5,6]
for(var i = 0; i < arr.length; i++){
  if(arr.indexOf(arr[i],i+1) !== -1){
    arr.splice(i,1)
    i--
  }
}
    console.log(arr)
avatar
文章
阅读
粉丝