hxDocs

Appearance

数组类型 ​

创建数组 ​

通过字面量创建 ​
javascript
let arr = [1,2];
通过构造函数创建 ​
javascript
let arr = new Array(2,3);

检测数据类型 ​

isArray() ​

方法用于判断对象是否为数组

javascript
const isArray = Array.isArray([1,2,3]);
console.log(isArray); // true

类型转换 ​

toString() ​

方法返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

javascript
const arr = [1,2,3];
const str = arr.toString();
console.log(str); // 1,2,3
join() ​

方法使用一个分隔符将数组的每个元素连接成一个字符串

javascript
const arr = [1,2,3];
const str = arr.join('-');
console.log(str); // 1-2-3
Array.from() ​

将类数组转换伪数组 参数一 ：类数组 || 迭代器 [必填] 参数二 ：回调函数 [选填] 参数三 ：this指向 [选填]

javascript
const farr = {
    0:"1",
    1:"2",
    length:2
}
const arr = Array.from(farr);
console.log(arr); // ['1',"2"]
javascript
const str = "123"
const arr = Array.from(str);
console.log(arr); // ['1','2','3']
展开语法实现 ​

将伪数组转变成数组

javascript
const arr = [...伪数组]; // 应用场景 将document.querySelectorAll() 获取到的伪数组转换成数组
console.log(arr); // 数组

解构赋值 ​

数组解构 ​
javascript
const arr = [1,2,3];
const [a,b,c] = arr;
console.log(a,b,c); // 1 2 3
对象解构 ​
javascript
const obj = {name:"张三",age:18};
const {name,age} = obj;
console.log(name,age); // 张三 18
字符串解构 ​
javascript
const str = "123";
const [a,b,c] = str;
console.log(a,b,c); // 1 2 3
函数参数解构 ​
javascript
const arr = [1,2,3];
function fn([a,b,c]){
    console.log(a,b,c); // 1 2 3
}
fn(arr);
函数参数解构默认值 ​
javascript
const arr = [1,2,3];
function fn([a,b,c=3]){
    console.log(a,b,c); // 1 2 3
}
fn(arr);
函数参数解构剩余参数 ​
javascript
const arr = [1,2,3];
function fn([a,b,...c]){
    console.log(a,b,c); // 1 2 [3]
}
fn(arr);
函数参数解构重命名 ​
javascript
const arr = [1,2,3];
function fn([a,b,c=3 as d]){
    console.log(a,b,c,d); //
}
fn(arr);

数组管理方法 ​

基本使用 ​
map ​

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

javascript
const arr = [1,2,3];
const arr1 = arr.map(item => item*2);
console.log(arr1); // [2,4,6]
filter ​

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.filter(item => item>5);
console.log(arr1); // [6,7,8,9,10]
forEach ​

forEach() 方法对数组的每个元素执行一次提供的函数。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
arr.forEach(item => console.log(item));
some ​

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.some(item => item>5);
console.log(arr1); // true
every ​

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.every(item => item>5);
console.log(arr1); // false
reduce ​

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.reduce((pre,cur) => pre+cur);
console.log(arr1); // 55
reduceRight ​

reduceRight() 方法接受一个函数作为累加器（accumulator）和一个数组。reduceRight() 方法从数组中最后一个元素开始，逐个遍历到第一个元素。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.reduceRight((pre,cur) => pre+cur);
console.log(arr1); // 55
pop ​

pop() 方法用于删除并返回数组的最后一个元素。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.pop();
console.log(arr1); // 10
push ​

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.push(11);
console.log(arr1); // 11
shift ​

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。此方法 将改变原数组。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.shift();
console.log(arr1); // 1
unshift ​

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.unshift(0);
console.log(arr1); // 11
splice ​

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目,改变原数组。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.splice(2,3);
console.log(arr1); // 3,4,5
slice ​

slice() 方法可从已有的数组中返回选定的元素，不改变原数组。

javascript
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.slice(2,6);
console.log(arr1); // 3,4,5,6
sort ​

sort() 方法用于对数组的元素进行排序。 :::code-group:

默认升序
javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.sort();
// 或者
// const arr1 = arr.sort((a,b)=>a-b);
console.log(arr1); // 1,2,3,4,5,6,7,8,9,10
降序
javascript
const arr = [2,1,3,4,6,5,9,8,7,10]
const arr1 = arr.sort((a,b)=>b-a)
console.log(arr1); // 10,9,8,7,6,5,4,3,2,1

:::

reverse ​

reverse() 方法用于颠倒数组中元素的顺序。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.reverse();
console.log(arr1); // 10,9,8,7,6,5,4,3,2,1
fill ​

fill() 方法用于将一个固定值替换数组的元素。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.fill(0,2,6);
console.log(arr1); // 0,0,3,4,5,5,9,8,7,10
concat ​

concat() 方法用于合并两个或多个数组。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.concat(11,12,13);
console.log(arr1); // 2,1,3,4,6,5,9,8,7,10,11
copyWithin ​

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.copyWithin(2,0,2);
console.log(arr1); // 2,1,2,1,6,5,9,8,7,10
includes ​

includes() 方法用于判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.includes(5);
console.log(arr1); // true
indexOf ​

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.indexOf(5);
console.log(arr1); // 5
lastIndexOf ​

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.lastIndexOf(5);
console.log(arr1); // 7
find ​

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.find(function(value,index,arr){
    return value > 5;
});
console.log(arr1); // 6
findIndex ​

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.findIndex(function(value,index,arr){
    return value > 5;
});
console.log(arr1); // 4
values ​

values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.values();
console.log(arr1.next().value); // 2
console.log(arr1.next().value); // 1
console.log(arr1.next().value); // 3
console.log(arr1.next().value); // 4
entries ​

entries() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的键/值对。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.entries();
console.log(arr1.next().value); // [0,2]
console.log(arr1.next().value); // [1,1]
console.log(arr1.next().value); // [2,3]
console.log(arr1.next().value); // [3,4]
keys ​

keys() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的键。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
const arr1 = arr.keys();
console.log(arr1.next().value); // 0
console.log(arr1.next().value); // 1    
console.log(arr1.next().value); // 2
console.log(arr1.next().value); // 3
for...in ​

for...in 语句以任意顺序遍历一个对象的除继承之外的所有可枚举属性。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
for(let i in arr){
    console.log(arr[i]); // 2 1 3 4 6 5 9 8 7 10
}
for...of ​

for...of 语句在可迭代对象（包括 Array, Map, Set, String, 类型arguments）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

javascript
const arr = [2,1,3,4,6,5,9,8,7,10];
for(let i of arr){
    console.log(i); // 2 1 3 4 6 5 9 8 7 10
}

写在最后的话 以上内容涵盖不够全面，欢迎补充。 后续可能随时补充，欢迎关注。

Copyright © 2019-present Haixin Yang