大家好,我们一起重温JavaScript。上次我们学习了字符串和String构造函数相关的内容,今天我们学习数组以及Array构造函数的内容。
1.数组的定义
数组就是用于存储数据的列表。可以用一对方括号[ ]来声明一个数组变量。如果想定义一个有两个元素的数组可以这样做:
let arr = ['new','name']
console.log(arr)
//["new", "name"]
数组中的元素下表是从0开始的,可以使用一对方括号加上被方括号包起来的索引值来访问数组的元素:
console.log(arr[0])
// new
console.log(arr[1])
// name
2.数组的操作
2.1增加和更新数组元素
我们可以使用索引来更新数组中的元素:
let arr = ['new','name']
arr[1]="Name"
console.log(arr)
//["new", "Name"]
也可以通过之前不存在的索引为数组添加元素:
let arr = ['new','name']
arr[2] = 'boy'
console.log(arr)
// ["new", "name", "boy"]
如果新元素被添加的位置和原来数组末尾有一定的间隔,那么它们之间的元素会被设置为undefined:
let arr = ['new','name']
arr[5] = 'boy'
console.log(arr)
// ["new", "name", empty × 3, "boy"]
console.log(arr[3])
//undefined
2.2删除数组元素
为了删除数组元素,我们可以使用delete操作符。但是数组元素被删除之后,数组的长度并不会受到影响,只是被删除的位置空下了而已:
let arr = ['new','name','study','javascript']
delete arr[1]
console.log(arr)
// ["new", empty, "study", "javascript"]
console.log(arr[1])
// undefined
console.log(arr.length)
// 4
3.Array构造器
Array()是一个用来构建数组的内建构造函数:
let arr = new Array()
console.log(arr)
// []
当然可以向这个创建好的数组中添加元素:
arr[0] = 'new'
arr[1] = 'name'
console.log(arr)
// ["new", "name"]
当我们使用Array()构造器创建新数组时,也可以通过传值为其设定元素:
let arr = new Array('new','name','javascript')
console.log(arr)
// ["new", "name", "javascript"]
如果给构造器传入的是一个单独数字,就会出现一种异常情况,即该数值会被认为是数组的长度:
let arr = new Array(5)
console.log(arr)
// [empty × 5]
4.操作数组的方法
4.1 合并与截取
可以使用concat()方法来合并数组:
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = arr1.concat(arr2,[7,8,9])
console.log(arr1)
// [1, 2, 3]
console.log(arr3)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
注意:concat()方法返回一个新数组并且不改变调用此方法的数组,在上例中arr1调用了concat()方法,此方法返回一个数组并赋值给arr3。
可以使用slice()方法截取数组的某一部分:
let arr1 = [1,2,3,4,5]
let arr2 = arr1.slice(2,4)
console.log(arr1)
// [1, 2, 3, 4, 5]
console.log(arr2)
// [3, 4]
注意:slice()方法不改变调用此方法的数组,并且截取范围是左闭右开的,slice(a,b) 的返回值包括a位置的元素一直到b-1位置的元素,但是不包括位置b的元素。
4.2 转换为字符串
可以使用join()方法将数组中方的元素连成一个字符串,可以通过参数来指定元素之间的分割字符串,默认使用逗号:
let arr1 = [1,2,3]
console.log(arr1.join())
// 1,2,3
console.log(arr1.join('_'))
// 1_2_3
4.3 移除与新增
可以使用pop()方法移除数组中的最后一个元素,并将其返回:
let arr1 = [1,2,3]
let res = arr1.pop()
console.log(arr1)
// [1, 2]
console.log(res)
// 3
注意:pop()方法改变了调用它的数组本身。
可以使用shift()方法移除数组中的第一个元素,并将其返回:
let arr1 = [1,2,3]
let res = arr1.shift()
console.log(arr1)
// [2, 3]
console.log(res)
// 1
注意:shift()方法改变了调用它的数组本身。
可以使用push()方法向数组的末尾添加元素,并返回修改后的数组长度:
let arr1 = [1,2]
let res = arr1.push(3)
console.log(arr1)
// [1, 2, 3]
console.log(res)
// 3
注意:push()方法改变了调用它的数组本身。
可以使用unshift()方法向数组的首部添加元素,并返回修改后的数组长度:
let arr1 = [2,3]
let res = arr1.unshift(1)
console.log(arr1)
// [1, 2, 3]
console.log(res)
// 3
注意:unshift()方法改变了调用它的数组本身。
可以使用splice()方法在删除数组元素的同时为其添加元素,该方法接受多个参数,第一个表示是要删除元素的起始位置,第二个参数表示的是要删除的元素个数,其余参数是要插入的值:
let arr = ['a','b','e']
arr.splice(1,1,'c','d')
console.log(arr)
// ["a", "c", "d", "e"]
注意:splice()方法改变了调用它的数组本身。
4.4 反转和排序
可以使用reverse()方法反转数组中的元素,并返回修改后的数组:
let arr1 = [1,2,3]
arr1.reverse()
console.log(arr1)
// [3, 2, 1]
注意:reverse()方法改变了调用它的数组本身。
可以使用sort()方法对数组排序,该方法结束一个可选参数,是一个回调函数,可以定义排序规则。回调函数应该以两个元素作为参数,当两个参数相等时返回0,第一个参数大时返回正数,第二个参数大时返回负数。例如:
let arr1 = [1,10,9,5,13,2]
arr1.sort()
console.log(arr1)
//[1, 10, 13, 2, 5, 9]
function sortCallback(a,b) {
if (a>b) return 1;
if (areturn -1;return 0;
}
arr1.sort(sortCallback)console.log(arr1)// [1, 2, 5, 9, 10, 13]
注意:sort()方法改变调用它的数组本身。如果不传回调函数,则默认按照字母顺序排序。
4.5 判定
可以使用isArray()方法判断某个对象是否是一个数组:
let arrayLike = {
0: 1,
1: 2,
length: 2
}
console.log(typeof arrayLike)
// object
console.log(Array.isArray(arrayLike))
// false
let arr = [1,2]
console.log(Array.isArray(arr))
// true
4.6 搜索
可以使用indexOf()搜索数组中是否具有某个元素,并返回该元素的下标。如果没有匹配项,则返回-1。该函数有两个参数,第一个参数要查找的元素;第二个参数是搜索的起始下标,是可选的:
let arr = ['new', 'name','new', 'name']
let res1 = arr.indexOf('name')
let res2 = arr.indexOf('name',2)
let res3 = arr.indexOf('Name')
console.log(res1)
// 1
console.log(res2)
// 3
console.log(res3)
// -1
与indexOf()类似,lastIndexOf是从后往前搜索数组的:
let arr = ['new', 'name','new', 'name']
let res1 = arr.lastIndexOf('name')
let res2 = arr.lastIndexOf('name',2)
let res3 = arr.lastIndexOf('Name')
console.log(res1)
// 3
console.log(res2)
// 1
console.log(res3)
// -1
4.7 遍历和筛选
可以使用forEach()方法遍历数组元素:
let arr = ['new', 'name','study', 'javascript']
arr.forEach((item,index)=>{
console.log(index,item)
// 0 "new"
// 1 "name"
// 2 "study"
// 3 "javascript"
})
可以使用every()方法判断是否数组的每一个元素都满足条件,这个条件使用回调函数定义。每一次根据元素返回true或者false,代表元素是否通过测试。如果至少有一个元素没有通过测试,则every函数返回false:
let arr1 = [1,2,3,4]
const callback = (item,index) => {
console.log(index,item)
return item>=2
}
let res1 = arr1.every(callback)
// 0 1 没有打印其他内容,因为不满足>=2 所以返回false 不再遍历
console.log(res1)
//false
let arr2 = [2,3,4,5]
let res2 = arr2.every(callback)
console.log(res2)
// 0 2
// 1 3
// 2 4
// 3 5
//true
可以使用some()方法判断数组中是否有一个元素满足条件,条件由回调函数指定,只要有一个元素满足条件,则some()函数返回true:
let arr1 = [1,2,3,4]
const callback = (item,index) => {
console.log(index, item)
return item>2
}
let res1 = arr1.some(callback)
// 0 1
// 1 2
// 2 3
// 3满足大于2,则不再遍历返回true
console.log(res1)
// true
可以使用filter()过滤数组元素,将满足回调函数定义条件的元素返回:
let arr1 = [1,2,3,4]
const callback = (item,index) => {
console.log(index, item)
return item>2
}
let res1 = arr1.filter(callback)
// 0 1
// 1 2
// 2 3
// 3 4
console.log(res1)
// [3, 4]
可以使用map()函数对数组元素进行转换,并返回转换后的数组元素:
let arr1 = [1,2,3,4]
const callback = (item,index) => {
console.log(index, item)
return item+2
}
let res1 = arr1.map(callback)
// 0 1
// 1 2
// 2 3
// 3 4
console.log(res1)
// [3, 4, 5, 6]
好了,以上就是我们本次重温JS的全部内容,我们通过导图回顾一下这次的内容:
我们这次的分享就到这里,下次再会。如有错误,请不吝指正。温故而知新,欢迎和我一起重温旧知识,攀登新台阶~
重温JavaScript(lesson18):字符串和String
重温JavaScript(lesson17):数字和Number构造函数
重温JavaScript(lesson16):Boolean与布尔值
重温JavaScript(lesson15):面向对象(7)
重温JavaScript(lesson14):面试题专辑1
重温JavaScript(lesson13):面向对象(6)
重温JavaScript(lesson12):面向对象(5)
重温JavaScript(lesson11):面向对象(4)
重温JavaScript(lesson10):面向对象(3)
重温JavaScript(lesson9):面向对象(2)
重温JavaScript(lesson8):面向对象(1)
重温JavaScript(lesson7):函数(3)
重温JavaScript(lesson6):函数(2)
重温JavaScript(lesson5):函数(1)
重温JavaScript(lesson4):作用域和闭包(2)
重温JavaScript(lesson3):作用域和闭包(1)
重温JavaScript(lesson2):关于ES6中的const
重温JavaScript(lesson1): 关于ES6中的let