对于一个数组
我们通过以下方式去创建和初始化一个数组
// 第一种方式
let arr = new Array()
// 第二种方式
let arr = new Array(7)
// 第三种方式
let arr = new Array(1, 2, 3, 4, 5, 6, 7)
当然，这些并不是最简便的方式
或许你见过如下这样去初始化一个数组
let arr = [ ]
这种方式等价于
let arr = new Array()
它其实是JavaScript的语法糖，简化了这些繁琐的操作
在数组末尾插入(任意数量的)元素
用法：arr.push()
在数组开头插入(任意数量的)元素
用法：arr.unshift()
在数组末尾删除(任意数量的)元素
用法：arr.pop()
在数组开头删除(任意数量的)元素
用法：arr.shift()
在任意位置添加或删除元素
用法：arr.splice(index, quantity, item1, item2, ...item n)
API说明：
index(必选)：数组对应的下标
quantity(必选)：删除元素的个数
item1, item2, ...item n(可选)：插入的自定义元素
特别说明：
（1）当quantity为0或者是<0的数，表示不删除元素
（2）一旦使用item1, item2, ...item n这些参数，必定会在指定index位置插入这些元素
// 删除元素
示例1：
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
arr.splice(1, 3)
console.log(arr); => [0, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
`示例2：
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
arr.splice(1, 0)
console.log(arr); => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
示例3：
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
arr.splice(1, -3)
console.log(arr); => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
示例4：
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
arr.splice(1, 0, 'a', 'b', 'c' )
console.log(arr); => [0, "a", "b", "c", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
示例5：
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
arr.splice(1, -3, 'a', 'b', 'c' )
console.log(arr); => [0, "a", "b", "c", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
示例6：
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
arr.splice(1, 3, 'a', 'b', 'c')
console.log(arr); => [0, "a", "b", "c", 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
截取数组内元素
用法：arr.slice(start, end)
API说明：
start(必选)：start为开始截取的下标号
end(可选)：end为结束截取的下标号
特别说明：
（1）如果end未被规定，即没有选上end参数，从start开始截取到数组结尾的所有元素。
（2）下标号为-1代表数组最后一个元素，-2代表数组倒数第二个元素
（3）返回一个从[start, end)的新数组
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
let newArr = arr.slice(12, -8)
console.log(newArr);
// arr.slice(12, -8)等价于arr.slice(12, 8) [12, 8)为空集，所以newArr输出为[ ]
创建n维数组
这里以3维数组为例
// 创建3维数组
let arr = []
for (let i = 0; i < 3; i++) {
arr[i] = []
for (let j = 0; j < 3; j++) {
arr[i][j] = []
for (let z = 0; z < 3; z++) {
arr[i][j][z] = i + j + z
}
}
}
// 遍历输出数组的每一个元素
for (let a = 0; a < arr.length; a++) {
for (let b = 0; b < arr[a].length; b++) {
for (let c = 0; c < arr[a][b].length; c++) {
console.log(arr[a][b][c]);
}
}
}
拼接数组(两个或多个数组)
用法：arr1.concat(arr2) or arr1.concat(arr2, arr3, ...arr n)
说明：arr1.concat(arr2)表示在arr1数组尾部拼接上arr2，以此类推
let arr1 = [1, 2]
let arr2 = [3, 4]
let arr3 = [5, 6]
console.log(arr1.concat(arr2)); => [1, 2, 3, 4]
console.log(arr1.concat(arr2, arr3)); => [1, 2, 3, 4, 5, 6]
数组迭代
（1）every 对数组中的每个元素运行给定函数，如果该函数对每个元素都返回true，则返回true
（2）some 对数组中的每个元素运行给定函数，如果任意元素返回true，则返回true
（3）forEach 对数组中的每个元素运行给定函数，该方法没有返回值
（4）map 对数组中的每个元素运行给定函数，返回每次函数调用的结果组成的数组
（5）filter 对数组中的每个元素运行给定函数，返回该函数会返回true的元素组成的数组
说明：
（1）every和some是两个相对的方法， every是数组内所有元素均返回true才返回true，some是数组内有一个元素返回true就返回true
（2）filter方法不会改变原数组，可以理解成过滤/筛选原数组内的部分元素，这些元素组成新的数组
（3）map方法与filter方法相似，但最大的区别就是可以对原数组的进行加工
let arr1 = [1, 2]
// 使用filter
let newArr1 = arr1.filter(item => {
console.log(item); => 1, 2
if (item > 1) {
console.log(item); => 2
// return item +1 // 即使这样写，返回的数组元素的值也不会被修改
return item
}
})
console.log(newArr1) => [2]
// 使用map(这样实现其实并不好，因为对于不满足条件的值会置为undefined，这里只是为了演示使用)
let newArr2 = arr1.filter(item => {
console.log(item); => 1, 2
if (item > 1) {
console.log(item); => 2
return item + 1
}
})
console.log(newArr2) => [undefined, 3]
// 使用map(修改后)
let newArr3 = arr1.filter(item => {
console.log(item); => 1, 2
if (item > 1) {
console.log(item); => 2
return item + 1
} else return item - 1
})
console.log(newArr3) => [0, 3]
reduce迭代方法
用法：
arr.reduce((previousValue, currentValue, index, array) => {
console.log(previousValue, currentValue, index, array);
})
API说明：
previousValue(必选)：前驱值
currentValue(必选)：当前值
index(可选)：当前索引
array(可选)：迭代的数组(是一个固定值，如arr.reduce()，array指代arr)
特别说明：
reduce()方法可以有很多用途：比如：迭代比较数组中的最大值，求和，数组去重等等
查找数组中的元素
（1）indexOf() 返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1
（2）lastIndexOf()与indexOf相对返回最后一个与给定参数相等的数组元素的索引，没有找到返回-1
（3）includes() 找到返回true，否则为false
（4）find()接收一个回调函数，返回第一个满足条件的值，找不到返回undefined
（5）findIndex()接收一个回调函数，返回第一个满足条件的值的索引，找不到返回-1
数组转换成字符串
用法：arr.toString()
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr.toString()) => 1,2,3,4,5,6
数组拼接成字符串
用法：arr.join(separator)
API说明：
separator(可选)：如果该参数没选上，默认以","作为分隔符；选上，则自定义分隔符
与该方法相对的是split()方法，他是将字符串分隔成数组
用法：str.split(separator, quantity)
API说明：
separator(必选)：字符串或正则表达式
quantity(可选)：该参数指定返回的数组的最大长度，且返回的子串不会多于这个参数指定的数组
颠倒数组中元素的顺序
用法：arr.reverse()
let arr = [1, 2, 3, 4, 5, 6]
console.log(arr.reverse()) => [6, 5, 4, 3, 2, 1]
把数组的元素转换成键(下标)值(下标对应的值)对
用法：arr.entries()
说明：返回数组中的迭代对象，该对象包含该数组的所有键值对
let arr = [1, 2, 3, 4, 5, 6]
// 这里可以看出arr.entries()返回的是数组的一个迭代对象
console.log(arr.entries()); => Array Iterator {}
// 既然是迭代对象，我们就需要迭代输出
// entries()转换成键值对
for (const item of arr.entries()) {
console.log(item);
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]
// [4, 5]
// [5, 6]
}
// keys()转换成键
for (const item of arr.keys()) {
console.log(item);
// 0
// 1
// 2
// 3
// 4
// 5
}
for (const item of arr.values()) {
console.log(item);
// 1
// 2
// 3
// 4
// 5
// 6
}
根据已有数组浅拷贝一个新数组
用法：Array.from(arr，mapFunction)
API说明：
arr(必选)：已有的数组，需要被浅拷贝的数组
mapFunction(可选)：这里可以传进来一个过滤值的函数
thisValue(可选)：映射函数mapFunction中的 this 对象
说明：Array.from(arr)从一个类似数组或可迭代对象中创建一个新的，浅拷贝的数组实例
let arr = [1, 2, 3, 4, 5, 6]
let fromArr = Array.from(arr)
console.log(arr, fromArr); => [1, 2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6]
arr[2] = 10
console.log(arr, fromArr); => [1, 2, 10, 4, 5, 6] [1, 2, 10, 4, 5, 6]
// 这样似乎是深拷贝对的，没错，这个假象，这只是对于第一层的数组是深拷贝
// 那如果像如下这样两层数组的呢？
let arr = [1, 2, [7, 8], 4, 5, 6]
let fromArr = Array.from(arr)
console.log(arr, fromArr); => [1, 2, [7, 8], 4, 5, 6] [1, 2, [7, 8], 4, 5, 6]
arr[2][0] = 10
console.log(arr, fromArr); => [1, 2, [10, 8], 4, 5, 6] [1, 2, [10, 8], 4, 5, 6]
或者有其他用法：
console.log(Array.from('foo')); => ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => 2x)); => [2, 4, 6]
根据传入的参数创建新数组
用法：Array.of(params)
根据自定义参数创建数组
let arr = Array.of(1, 2, 3, 4, 5, 6) // 等价于let arr = [1, 2, 3, 4, 5, 6]
根据已有数组创建新数组
let arr = [1, 2, 3, 4, 5, 6]
let ofArr = Array.of(...arr) // 展开运算
console.log(ofArr) => [1, 2, 3, 4, 5, 6]
填充数组
用法：arr.fill(filledValue, start, end)
API说明：
filledValue(必选)：要填充的值
start(可选)：开始填充的索引位置(开区间)
end(可选)：结束填充的索引位置，但不包括该位置(闭区间)；如果没选上该参数，默认结束位置为arr.length
特别说明：假如选上了start和end两个参数，范围为[start, end)；假如选上了start参数没选上end参数，范围为[start, arr.length]
我们也可以这样初始化一个数组
let initArr = Array(6).fill(1)
console.log(initArr) => [1, 1, 1, 1, 1, 1]
对于一个已有数组，我们也可以填充覆盖原来的数组元素
let arr = [1, 2, 3, 4, 5, 6]
arr.fill(8, 3, 5)
console.log(arr) => [1, 2, 3, 8, 8, 6]
赋值数组的一系列元素到统一数组的指定位置
用法：arr.copyWithin(target, start, end)
API说明：
target(必选)：复制到的目标索引位置
start(可选)：开始复制的索引位置(闭区间)
end(可选)：结束复制的索引位置，默认为arr.length(开区间)
特别说明：假如选上了start和end两个参数，范围为[start, end)；假如选上了start参数没选上end参数，范围为[start, arr.length]
let arr = [1, 2, 3, 4, 5, 6]
arr.copyWithin(1, 2, 5)
console.log(arr); => [1, 3, 4, 5, 5, 6]
按字母表排序
用法：arr.sort(sortby(a, b))
API说明：
sortby(可选)：自定义排序，这里必须是函数，a是两个进行比较的值的后者，b是前者，如果a<b，则证明a排在b前面，返回一个<0的值；如果a>b，则a排在b后面，返回一个>0的值；如果a=b，则返回0
特别说明：
如果调用该方法没有使用参数，将按字母顺序对数组中的元素进行排序，说的更精确点，是按照ASCII码的顺序进行排序
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr.sort()
console.log(arr) => [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
这样或许并不是我们想要的对吧
这是因为在对数组做排序时，把元素默认成字符串进行相互比较
我们可以进行如下改进，就可以对数字进行排序了
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 10, 9]
arr.sort((a, b) => {
if (a < b) {
return -1
} else if (a > b) {
return 1
} else return 0
})
console.log(arr) => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
上面是对数字进行排序，那如何对字符串进行排序呢
假如有这样一个数组
let names = [ 'ThinkBig', 'thinkbig', 'jazzy', 'Jazzy']
console.log(names.sort()) => ["Jazzy", "ThinkBig", "jazzy", "thinkbig"]
这是因为对于ASCII码，J < T < j < t然而这也不是我们想要的
我们可以这样写一个比较函数
忽略大小写排序
let names = ['ThinkBig', 'thinkbig', 'jazzy', 'Jazzy']
names.sort((a, b) => {
if (a.toLowerCase() < b.toLowerCase()) {
return -1
}
if (a.toLowerCase() > b.toLowerCase()) {
return 1
}
return 0
})
console.log(names); => ["jazzy", "Jazzy", "ThinkBig", "thinkbig"]
小写排在大写前面
let names = ['ThinkBig', 'thinkbig', 'jazzy', 'Jazzy']
names.sort((a, b) => a.localeCompare(b))
console.log(names); => ["jazzy", "Jazzy", "thinkbig", "ThinkBig"]
类型数组
因为JavaScript数组不是强类型的，因此它可以存储任意类型的数据，而类型数组则用于存储单一类型的数据
（1）Int8Array 8位二进制补码整数
（2）Uint8Array 8位无符号整数
（3）Uint8ClampedArray 8位无符号整数
（4）Int16Array 16位二进制补码整数
（5）Uint16Array 16位无符号整数
（6）Int32Array 32位二进制补码整数
（7）Uint32Array 32位无符号整数
（8）Float32Array 32位IEEE浮点数
（9）Float64Array 64位IEEE浮点数
我们可以通过以下语句去初始化这样一个类型数组
let arr = new Int8Array(length)
Int8Array可以根据实际需求替换
该文章已经上传至github，有需要的童鞋可以进行查阅或下载，欢迎star
https://github.com/jazzyXie/JS_Array_Operation_Methods
网友评论