Array常用方法
2019-12-16 本文已影响0人
初入前端的小菜鸟
Array 对象
Array 对象用于在变量中存储多个值:
var cars = ["Saab", "Volvo", "BMW"];
第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。
数组属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建数组对象的原型函数。 |
| length | 设置或返回数组元素的个数。 |
| prototype | 允许你向数组对象添加属性或方法。 |
Array 对象方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| entries() | 返回数组的可迭代对象。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| fill() | 使用一个固定值来填充数组。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| from() | 通过给定的对象中创建一个数组。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| isArray() | 判断对象是否为数组。 |
| join() | 把数组的所有元素放入一个字符串。 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| reverse() | 反转数组的元素顺序。 |
| shift() | 删除并返回数组的第一个元素。 |
| slice() | 选取数组的的一部分，并返回一个新数组。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序。 |
| splice() | 从数组中添加或删除元素。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值。 |
简单使用
数组属性
Array.constructor
- 返回常见数组对象的函数原型
在 JavaScript 中, constructor 属性返回对象的构造函数。
返回值是函数的引用，不是函数名：
如:
// constructor
let arr = [1,2,3,4,5]
arr.constructor; // Array() { [native code] }
let num = 1;
num.constructor; // Number() { [native code] }
let str = 'str';
str.constructor; // String() { [native code] }
Array.length
- 设置或返回数组元素的个数。
// 最简单的用法为获取数组的长度;
let arr = [1,2,3,4]
arr.length = 4;
// 也可以创建数组时设置数组的长度;
let arr = new Array();
arr.length = 5; // [empty × 5] 即设置了长度为5的空数组;
// 这时我们可以使用fill()方法,对数组进行填充;
arr.fill(null) // [null, null, null, null, null]
prototype
- 允许你向数组对象添加属性或方法。
Array数组原型链,我们可以使用数组方法其功不可没,同时我们也可以在其上面添加方法,最后通过Array来使用;
// 我们需要对数组中小于5的进行排除,但是用到的地方比较多,我们可以进行函数进行使用,也可以写在Array的原型链上;
// 其次在箭头函数和普通函数中要注意this指向;
// es6
Array.prototype.filterNumber = () => {
console.log(this) // 引其箭头函数没有this,所以和外层this指向相同,即指向window
}
// es5
Array.prototype.filterNumber = function() {
console.log(this) // 即谁调用即其本身 [].filterNumber() // []
}
MDN 箭头函数this指向说明: 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this;
数组添加删除
unshift shift push pop
- 头部添加,头部删除,尾部添加,尾部删除
let arr = [1, 2, 3, 4];
arr.unshift(0); // [0, 1, 2, 3, 4]
arr.shift(); // [1, 2, 3, 4];
arr.push(5); // [1, 2, 3, 4, 5];
arr.pop(); // [1, 2, 3, 4];
splice(index, howmany, item...itemN)
- 从数组中添加或删除元素。
- 参数说明
-- index: 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
-- howmany: 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
-- item...itemN: 可选。要添加到数组的新元素;
let arr = [1, 2, 3, 4, 5];
// 实现向首位添加删除
arr.splice(0, 0, 0); // [0, 1, 2, 3, 4, 5];
arr.splice(0,1); // [1, 2, 3, 4, 5];
// 实现向尾部添加删除
arr.splice(arr.length, 0, 6); // [1, 2, 3, 4, 5, 6];
arr.splice(arr.length - 1, 1); // [1, 2, 3, 4, 5];
// 替换
arr.splice(0, 1, 99); // [99, 2, 3, 4, 5];
数组合并
...
-
...es6展开操作符
let arrA = [1,2,3]
let arrB = [4,5,6]
let arr = [...arrA,...arrB] // [1,2,3,4,5,6]
concat()
- 连接两个或更多的数组，并返回结果。此时应注意合并顺序, concat(Arr), Arr会放置到数组后面;
let arrA = [1,2,3]
let arrB = [4,5,6]
let arr = arrA.concat(arrB) // [1, 2 ,3 ,4 ,5 ,6]
let arrs = arrB.concat(arrA) // [4, 5, 6, 1, 2, 3]
数组内容过滤及判断等
every()
- 检测数值元素的每个元素是否都符合条件。如果符合则返回true, 不符则返回false
let arr = [10, 9, 4, 20]
arr.every(item => item > 20) // false;
arr.every(item => item > 1) // true;
// 检测数组内对象的属性值是否都为true;
let arr = {a: true, b: true, c: true}
// 这里使用Object.entries() 将对象拆分成数组, 数组为[[属性名: 属性值], ...] 等形式
Object.entries(arr).every(item => item[1]) // 如果检测到数组下标为1的内容全部为true时返回true, 否则返回false
filter()
- 检测数值元素，并返回符合条件所有元素的数组。
let arr = [1,3,5,7,10];
let ar = arr.filter(item => item > 5);
console.log(ar) // [7, 10]
find()
- 返回符合传入测试（函数）条件的数组元素, 返回符合条件的第一条数据
let arr = [1, 2, 3, 4]
arr.find(item => item > 2) // 3
findIndex()
- 返回符合传入测试（函数）条件的数组元素下标
let arr = [1, 2, 3, 4]
arr.find(item => item > 2) // 1 下标
includes()
- 判断一个数组是否包含一个指定的值。返回值布尔值, 包含返回true, 反之返回false;
let arr = [1, 2, 3, 4]
arr.includes(2) // true;
arr.includes(5) // false;
// 字符串也有includes()方法
indexOf()
- 搜索数组中的元素，并返回它所在的位置。
// 会走循环,检测数组中想要的内容,返回其下标,如果没有则返回-1;
let arr = [1, 2, 3, 4]
arr.indexOf(1) // 0;
arr.indexOf(5) // -1;
lastIndexOf()
- 搜索数组中的元素，并返回它最后出现的位置。
let arr = [1, 2, 3, 1]
arr.lastIndexOf(arr) // 3
some()
- 检测数组元素中是否有元素符合指定条件。
- some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
let arr = [1, 2, 3, 4, 5];
let a = arr.some(item => item > 3) // true
let a = arr.some(item => item < 0) // false
isArray()
- 判断对象是否为数组。
let arr = [1,2,3]
let obj = {a: 1, b: 1}
Array.isArray(arr); // true;
Array.isArray(obj); // false;
循环
map
- 通过指定函数处理数组的每个元素，并返回处理后的数组。
- 可以接受三个字段(item, index, arr)即当前内容, 当前下标及数组
let arr = [1,2,3,4,5]
let ar = arr.map((item,index,arr) => {
console.log(item, index, arr)
})
let ars = arr.map((item) => {
if (item >= 3) {
return item;
}
})
console.log(ars) // 处理每个参数,此时有个判断如果大于等于3时才返回item即: 结果为[undefined, undefined, 3, 4, 5]
forEach()
- 数组每个元素都执行一次回调函数。
let arr = [1, 2, 3, 4, 5];
let ar = [];
arr.forEach(item => {if (item > 2) {ar.push(item)}}); // [3, 4, 5]
其他
copyWithin()
- 从数组的指定位置拷贝元素到数组的另一个指定位置中
- array.copyWithin(target, start, end)
-- target: 必需。复制到指定目标索引位置。
-- start: 可选。元素复制的起始位置。
-- 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
let arr = ['a', 'b', 'c' , 1, 2, 3]
arr.copyWithin(0 ,3) // 拷贝的元素从下标0开始渲染, 拷贝的内容为下标3开始到length-1为止 即: arr = [1, 2, 3, 1, 2, 3];
arr = ['a', 'b', 'c' , 1, 2, 3];
arr.copyWithin(0, 3, 5) // 拷贝的元素从下标0开始渲染, 拷贝的长度为2位, 拷贝从下标3开始, 到5结束, 即拷贝的内容为 1,2; 即输出为: arr = [1,2,'c',1,2,3];
fill()
- 使用一个固定值来填充数组。
// 固定值,即填充的数组内容为相同的;
let arr = new Array();
arr.length = 3; //
arr.fill(1) // [1,1,1]
from()
- 通过给定的对象中创建一个数组。
var setObj = new Set(["a", "b", "c"]);
var objArr = Array.from(setObj);
objArr[1] == "b"; // true
join()
- 把数组的所有元素放入一个字符串。
let arr = [1,2,3,4]
arr.join(',') // "1,2,3,4"
keys()
- 返回数组的可迭代对象，包含原始数组的键(key)。
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
// 0
// 1
// 2
reduce()
- 将数组元素计算为一个值（从左到右）。
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
numbers.reduce(getSum); // 125
reduceRight()
- 将数组元素计算为一个值（从右到左）。
reverse()
- 反转数组的元素顺序。
let arr = [1,2,3,4]
arr.reverse() // [4, 3, 2, 1]
sort()
- 对数组的元素进行排序。
let arr = [2,1,4,3]
arr.sort() // [1, 2, 3, 4]
toString()
- 把数组转换为字符串，并返回结果。
let arr = [1,2,3,4]
arr.toString() // "1,2,3,4"
