JavaScript数组
认识数组
数组是一个有序集合。每个值在数组中有一个位置,用数字表示,叫做索引。JavaScript数组是无类型的:数组元素可以是任何类型,而且同一个数组中可以存在不同类型元素,甚至可以是对象或是其他数组,这就可以创建复杂的数据结构。
创建数组
创建数组有一下两种方式
1、字面量形式创建
var arr = [1,2,3,4,5,'hello']
console.log(arr[0]) // 1
console.log(arr.length) // 6
console.log(arr[arr.length - 1]) // 'hello'
一般情况下,我们也用这种方式创建。数据由英文下的中括号包裹,每一个数据都用逗号隔开,且有着各自不同的索引,索引从0位开始。数据的多少就等于数组长度的大小,所以我们可以得出一个规律,最后一个数据衡等于 arr[ arr.length - 1 ]。
还有另一种情况,比如你想创建一个空数组,用给后面使用,但是又想控制数组的长度,那么你可以这样写:
var arr = [30]
console.log(arr) // 一个有30个数据空间(empty)的空数组
console.log(arr.length) // 30
2、内置构造函数创建
var arr = new Array(1,2,3,4,5,'hello')
console.log(arr[0]) // 1
console.log(arr.length) // 6
console.log(arr[arr.length - 1]) // 'hello'
数组的length属性:length属性代表着数组的长度,可以给length赋值,从而修改数组的长度,遵循多空少删的原则(赋的值小于数组原来的长度,则是删除多余的;赋值大于数组原来长度,多出的留空白)
数组的常用操作
数组实例方法:用于操作数组,可以归类为三种类型:
1、改变当前数组变量
push():向数组的尾部添加元素(接受多的参数)
pop():从数组尾部删除元素
unshift():向数组的头部添加元素(接受多个参数)
shift():从头部删除元素
reverse():反转数组,导致数组本身发生变化
splice():截取并插入数组(也可以不插入数据)
sort():对数组进行排列
原谅博主言语表述不清楚,具体操作我们直接看代码!
1、push()
var arr = [20,30,50,10,2]
// 在尾部插入一个元素
var a1 = arr.push(200)
document.write(a1 + '<br>')//这里也输出新长度
document.write(arr + '<br>')
2、pop()
var arr = [20,30,50,10,2]
// 取出尾部的一个元素
var a3 = arr.pop()
document.write(a3 + '<br>')// 这里输出倒数第一个数据
document.write(arr + '<br>')
3、unshift()
var arr = [20,30,50,10,2]
// 在头部插入一个元素
var a = arr.unshift(100)
document.write(a + '<br>')//这里输出新长度
document.write(arr + '<br>')
4、shift()
var arr = [20,30,50,10,2]
// 取出头部的一个元素
var a2 = arr.shift()
document.write(a2 + '<br>')//这里输出开头的第一个数据
document.write(arr + '<br>')
5、reverse()
var arr = [20,30,50,10,2]
// 反转数据排列方式
var a4 = arr.reverse()
document.write(a4 + '<br>')//创建了新数组,排列相反
document.write(arr + '<br>')//排列相反
6、splice()
var arr = [20,30,50,10,2]
var a7 = arr.splice(1,2,1000)
document.write(a7 + '<br>')// 创建一个新数组,数据为截取的数据,不包含新插入的数据
document.write(arr + '<br>')// 少了被截取的数据,而且1位是新插入的数据
7、sort()
var arr = [20,30,50,10,2]
var a5 = arr.sort()
document.write(a5 + '<br>')//创建新数组,按名称方式升序排列
document.write(arr + '<br>')//按名称方式升序排列
var a6 = arr.sort(function(a,b){return a - b})
document.write(a6 + '<br>')// 创建一个新数组,从小到大排列
document.write(arr + '<br>')// 从小到大排列
2、生成新的返回值,对当前的变量没有任何的影响
slice():复制数组某段数据生成新数组
concat():将数组拼接到新数组
join():用括号里的符号,将数组连接成字符串
我们还是直接看代码
1、slice()
var arr = [20,30,50,10,2]
// 复制数组某段数据
var a8 = arr.slice(1,3)
document.write(a8 + '<br>')// 创建一个新数组,数据是arr的第1、 2位
var a9 = arr.slice(1,-1)// 负数的意思:arr.length + -1 = 3
document.write(a9 + '<br>') //创建新数组,数据是arr的第1、 2位
document.write(arr + '<br>')// 不影响arr原数组
2、concat()
var arr = [20,30,50,10,2]
// 拼接数组
var arr1 = ['你好','很好']
var a10 = arr1.concat(arr)
document.write(a10 + '<br>')//数据会拼接在末尾,形成新数组
document.write(arr +'<br>')// 不影响原数组
3、join()
var arr = [20,30,50,2]
// 将数组转为一个字符串
var a11 = arr.join('+')// 括号里写的是连接符
document.write(a11 + '<br>')// 一个字符串
document.write(arr + '<br>')// 不影响arr原数组
3、ES5的数字常用操作
indexOf():查找目标数据在数组的第几个索引
lastIndexOf():倒着查找目标数据在数组的第几个索引
forEach():遍历数组
map():映射数组,形成新数组
filter():过滤数组,新数组
every():判断数组的每一个数据
some():判断数组的每一个数据
直接看代码
1、indexOf() 和 lastIndexOf()
var arr = [5,4,9,10,20,7,2,3,15]
// 查找数组里面是否有某个数据(20),在第几个
var a = arr.indexOf(20,1)// 括号里的第二个数据是从第几位开始查的
var b = arr.lastIndexOf(20,2)// 倒着查,从第2位开始倒着查找
document.write(a + '<br>')//返回值是一个数字,也即是目标数字的下标
document.write(b + '<br>')//返回值是-1,表示没有找
2、forEach()
var arr = [5,4,9,10,20,7,2,3,15]
// 遍历数组forEach
arr.forEach(function(item,index,arr){ // 第一个是值,第二个是下标,第三数组
// 数组长度等于执行次数
document.write(index + '-----' + item + '<br>')
}) // 可以等价于for循环
3、map()
var arr = [5,4,9,10,20,7,2,3,15]
// 可改变值,映射到新数组 map
var arr1 = arr.map(function(item,index){
// 将值放大两倍
return item * 2
})
document.write(arr1 + '<br>')//放大两倍后的新数组
4、filter()
var arr = [5,4,9,10,20,7,2,3,15]
// 过滤数组,形成新数组 filter
var arr2 = arr.filter(function(item,index){
// 筛选出满足条件的值
return item > 10
})
document.write(arr2 + '<br>')//新数组
5、every()
var arr = [5,4,9,10,20,7,2,3,15]
// every 判断数据全部满足则为true,否则为false
var arr3 = arr.every(function(item,index){
return item > 3
})
document.write(arr3 + '<br>')
6、some()
var arr = [5,4,9,10,20,7,2,3,15]
// some判断数据只有一个满足,则为true
var arr4 = arr.some(function(item,index){
return item > 3
})
document.write(arr4)
数组的两个排序
1、冒泡排序
简单来说就是让数组进行有顺序的大小排序
关键:数组中两个成员的交换位置 - 交换两个变量 - 利用第三个变量
思路:先循环一遍, 让每一个数字和后一个数字进行比较
如果前一个比后一个大, 那么两个数字交换位置, 否则不动
循环完毕得到的一个结果, 就是最大的数字放到了数组的最后一位
然后循环嵌套,进行多次循环
这样我们的数字就排序好了
var arr = [2,1,7,9,8,6,4,5,3,0]
// 1、冒泡排序
for(var i = 0 ; i < arr.length - 1 ; i++){
// 循环一次,最小值就跑到最末尾了,-i是因为每次的最大值已在后面,不需要再次比较
for(var j = 1 ; j < arr.length - i ; j++){
var tmp = arr[j - 1]
// 如果满足条件就交换值
if(arr[j - 1] < arr[j]){
arr[j - 1] = arr[j]
arr[j] = tmp
}
}
}
document.write(arr + '<br>')
口诀:
双层for循环, 一层减一次,里层减外层, 变量相交换。
2、选择排序
关键:找到数组里的最大值,然后与第一个或最后一个值交换
思路:第一次循环,从数组第0位开始,假设第0位最大,找到最大值并与第0位交换
第二次循环,从数组第1位开始,假设第1位最大,找到最大值并与第1位交换
以此类推
var arr = [20,30,50,40,25,23,12,15,98,16]
// 3、选择排序
for(var i = 1 ; i < arr.length ; i++){
var minIndex = i - 1
// 下面循环找到最小值下标
for(var j = i ; j < arr.length ; j++){
// 用if偷得最小值的下标
if(arr[minIndex] > arr[j]){
minIndex = j
}
}
// 偷出了最小值的下标,就赶紧交换值
var tmp = arr[i - 1]
arr[i - 1] = arr[minIndex]
arr[minIndex] = tmp
}
document.write(arr)
遗言
以上就是从认识数组到操作数组再到数组排序的全部内容
希望看到更多JavaScript的知识,请点赞投币加收藏,也可以直接添加博主微信:laoyin666it
感谢阅读,投个币呗!!