JavaScript数组

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
感谢阅读,投个币呗!!

  • 11
    点赞
  • 0
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值