初始化数组
//Array.of() 返回参数值组成的数组。如果没有参数,就返回一个空数组
let arr = Array.of(1,2,3,4,5) // [1,2,3,4,5]
Array.of() // []
let arr1 = Array(5).fill(1) // [1,1,1,1,1]
// 替换值 Array.fill(value, start, end)
[1,2,3,4,5].fill(8, 1, 2) // [1, 8, 3, 4, 5]
检测数组
Array.isArray([]); // true
Array.isArray(undefined); //false
// 检测对象的原型链是否指向构造函数的prototype对象
let arr = Array.of(1)
arr instanceof Array; // true
arr.constructor === Array // true
if(!Array.isArray) {
Array.isArray =function(arg){
return Object.prototype.toString.call(arg) ==='[object Array]';
}
}
伪数组
伪数组特点
伪数组是一个对象; 有length属性;其它属性(索引)为非负整数;无法调用数组的方法.
如: 函数中arguments代表的实参,document.getElementsByTagName/querySelectorAll的元素标签集合都是典型的伪数组
如何将伪数组转换成数组?
伪数组转换数组条件:
- 该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组
- 该类数组对象的属性名必须为数值型或字符串型的数字
Array.from()更多介绍
// es5
[].slice.call(arguments) | Array.prototype.slice.call(arguments)
// es6
let arrayLike = {
0: 'aley',
1: '18',
2: ['a','b'],
'length': 3
}
Array.from(arrayLike) // ['aley', '18', ['a', 'b']]
Array.from(arrayLike, mapFn, thisArg)
// 初始化长度为5的数组
let arr = Array.from({length: 5}, () => {
return 1
})
console.log(arr) // [1,1,1,1,1]
数组常用方法
数组遍历
-
for循环(es5) 支持continue,break
-
array.forEach(callback) 不支持continue,break
let arr = [1,2,3,4,5] // callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组 arr.forEach((element, index, array) => { if (element === 2) { // 测试不通过 return false } console.log(element) })
-
for…in…
针对对象而设计,虽然能遍历数组,但有瑕疵let arr = [1] arr.a = 8 for (item in arr) { console.log(item, arr[item]) // 0,1 a,8 }
-
for…of… (es6新增)
能够遍历自定义数据结构,不单单是遍历数组,对象let obj = {name: 'aley', age: '18'} // Object.entries() 可以把一个对象的键值以数组的形式遍历出来 for (let [key, val] of Object.entries(obj)) { console.log(key, value) // name aley , age 18 }
-
array.every(callback)
不支持 continue/break,但回调函数 默认返回 return false 相当于 break 终止循环体
检测数组中的每一个元素是否都通过了callback测试,全部通过返回true,否则返回false。let arr = [1,2,3,4,5] // callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组 let d = arr.every((element, index, array) => { // callback函数必须返回true或者false告知every是否通过测试 if (element === 2) { // 测试不通过,退出循环 return false } console.log(element) // 1 }) console.log(d) // false
-
array.some(callback)
检测数组中是否包含可以通过测试的元素,与every不同的是,这里只要某一个元素通过测试,即返回true// callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组 [2, 2, 0, 9, 4].some(element=> element> 8); // true
-
array.map(callback)
创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
注意:如果没有return值,则新数组会插入一个undefined值!! array.map由于不具有过滤的功能,因此array调用map函数时,如果array中的数据并不是每一个都会return,则必须先filter,然后再map,即map调用时必须是对数组中的每一个元素都有效const result =[1, 4, 9].map(Math.sqrt) // [1,2,3]
-
flatMap(callback(element[, index[, array]])[, thisArg])
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
let arr1 = ["it's Sunny in", "", "California"]; arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]] arr1.flatMap(x => x.split(" "))// ["it's","Sunny","in", "", "California"]
-
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
reduce() 方法对数组中的每个元素执行reducer函数(升序执行),将其结果汇总为单个返回值。// reducer 函数接收4个参数: accumulator (acc) (累计器) / currentValue (cur) (当前值) // currentIndex (idx) (当前索引) / sourceArray (src) (源数组) // 初始化时,如果initialValue有值,则accumulator初始化的值为initialValue,整个循环从第一个元素开始;initialValue无值,则accumulator初始化的 值为数组第一个元素的值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // 10 console.log(array1.reduce(reducer, 20)) // 30
-
arr.filter(callback(element[, index[, array]])[, thisArg])
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。const filtered = [12, 5, 8, 130, 44].filter(item => item > 11); // [12, 130, 44]
数组查找
-
arr.includes(searchElement[, fromIndex])
includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false[1, 2, 3].includes(2, 2); // false
-
arr.find(callback[, thisArg])
find() 方法返回数组中满足提供的测试函数的第一个元素的值, 否则返回 undefinedconst finded = [0, 1, 3, 8].find(element => element > 1); // 3
-
arr.findIndex(callback[, thisArg])
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1const index = [0, 1, 3, 8].findIndex(element => element > 1); // index 2
-
arr.lastIndexOf /indexOf(searchElement[, fromIndex])
indexOf() 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。从数组的前面往后查找,从 fromIndex 处开始
lastIndexOf() 返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。[2, 9, 7, 8, 9].indexOf(9);// 1 [2, 9, 7, 8, 9].lastIndexOf(9);// 4
其它方法
方法 | 描述 |
---|---|
arr.concat(arr1, arr2,…arrN) | 合并多个数组,返回合并后的新数组,原数组没有变化) |
arr.join(sep=’,’) | 通过sep连接成字符串,并返回该字符串,sep默认为"," |
arr.pop() | 删除并返回最后一个元素,原数组的最后一个元素被删除, 数组为空返回undefined |
arr.shift() | 删除并返回第一个元素,原数组的第一个元素被删除。数组为空返回undefined |
arr.push() | 添加一个或多个元素至数组的末尾,并返回新数组的长度 |
arr.unshift() | 添加一个或多个元素至数组的首部,并返回新数组的长度 |
arr.fill(value[, start[, end]]) | 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引 |
arr.slice(begin, end) | 返回一个包含从begin 到 end(不包含end)索引位置的所有元素的新数组 |
arr.splice(start[, delCou, item1, item2, …]) | 通过删除现有元素或添加新元素来更改一个数组的内容,返回值是由被删除的元素组成的一个数组, start:指定修改的开始位置;delCou:从 start位置开始要删除的元素个数;item:要添加进数组的元素,从start 位置开始 |
arr.sort([compareFunction]) | 用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的, [1, 8, 5].sort((a, b) => { return a-b; // 从小到大排序}); // [1, 5, 8] |
arr.flat([depth]) | 按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回,depth: 指定要提取嵌套数组的结构深度,默认值为 1 |
更多… |