JavaScript 数组的属性方法，归纳整理

最新推荐文章于 2024-09-06 05:10:18 发布

哼唧怪~

最新推荐文章于 2024-09-06 05:10:18 发布

阅读量697

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44706424/article/details/128218570

版权

数组的属性方法（按照a~z的顺序）：

1、at（）：用来获取数组的指定索引的元素，支持负索引。

const arr=["zhao","qian","sun","li"];
console.log(arr.at(-1));   // "li"
console.log(arr.at(0));   // "zhao"

2、concat（）：在现有数组全部元素基础上创建一个新数组，创建一个当前数组的副本，将参数添加到副本末尾，因为会创建副本，所以不会改变原数组。

let arr=["zhao","qian","sun"];
let newArr=arr.concat("li",["zhou","wu"])
console.log(arr);  // ["zhao","qian","sun"]
console.log(newArr);  // ["zhao","qian","sun","li","zhou","wu"]

3、constructor：返回创建数组对象的原型函数。

4、copyWithin（）：批量复制方法，用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

注意：JavaScript 引擎在插值前会完整复制范围内的值，因此复制期间不存在重写的风险。

// 语法
array.copyWithin(target, start, end)
// target,  必需。复制到指定目标索引位置
// start,  可选。元素复制的起始位置
// end,  可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
var arr=["zhao","qian","sun","li","zhou"];
arr.copyWithin(2, 0, 2);  //  ['zhao', 'qian', 'zhao', 'qian', 'zhou']
var arr1=["zhao","qian","sun","li","zhou"];
arr1.copyWithin(2);  //  ['zhao', 'qian', 'zhao', 'qian', 'sun']

5、entries（）：在ES6中，Array的原型上暴露了3个用于检索数组内容的方法：keys（）、values（）和entries（）。keys（）返回数组索引的迭代器，values（）返回数组元素的迭代器，entries（）返回索引/值对的迭代器。

const a = ["foo", "bar", "baz", "qux"];
// 因为这些方法都返回迭代器，所以可以将它们的内容 // 通过Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values()); 
const aEntries = Array.from(a.entries());
console.log(aKeys); // [0, 1, 2, 3]
console.log(aValues); // ["foo", "bar", "baz", "qux"] 
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

6、every（）：对数组每一项都运行传入的函数，如果每一项函数都返回true，则这个方法返回true。

var arr =["1","2","3","4","5","6","7"];
arr.every(item => item < 8)  // true
arr.every(item => item < 5)  // false

7、fill（）：填充数组方法，使用一个固定值来填充数组。

// 语法
array.fill(value, start, end)
// value,  必需。填充的值
// start,  可选。开始填充位置
// end,  可选。停止填充位置 (默认为 array.length)
var arr=["zhao","qian","sun","li","zhou"];
arr.fill("zhao", 3, 5);  //  ['zhao', 'qian', 'sun', 'zhao', 'zhao']
var arr1=["zhao","qian","sun","li","zhou"];
arr1.fill("zhao");  //  ['zhao', 'zhao', 'zhao', 'zhao', 'zhao']

8、filter（）：简单点来说就是过滤数组，对数组的每一项都运行传入的函数，函数返回true的项会组成数组之后返回。因为filter会返回一个新数组，所以filter（）方法不会改变原数组。

var arr =["1","2","3","4"]
console.log(arr.filter(item => item > 2)) // ["3","4"]

9、find（）：运行传入的函数，返回第一个匹配的元素。

10、findIndex（）：运行传入的函数，返回第一个匹配的元素的索引。

const per=[
    {name:'zhao',age:23},
    {name:'qian',age:24},
    {name:'sun',age:25},
    {name:'li',age:26}
];
per.find(item => item.age > 24)  // {name:'sun',age:25}
per.findIndex(item => item.age > 24)  // 2

11、findLast（）：从后往前，运行传入的函数，返回第一个匹配的元素。

12、findLastIndex（）：从后往前，运行传入的函数，返回第一个匹配的元素的索引。

const per=[
    {name:'zhao',age:23},
    {name:'qian',age:24},
    {name:'sun',age:25},
    {name:'li',age:26}
];
per.findLat(item => item.age > 24)  // {name:'li',age:26}
per.findLastIndex(item => item.age > 24)  // 3

13、flat（）：扁平化嵌套数组。按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

// 语法
array.flat(depth)
// depth 为递归的深度，默认为 1
var arr =[[0],1,2,[3,[4,5]],6];
arr.flat()  // [0,,1,2,3,[4,5],6]
var arr =[[0],1,2,[3,[4,5]],6];
arr.flat(2)  // [0,,1,2,3,4,5,6]

14、flatMap（）：flatMap（）方法会在打平数组之前执行一次映射操作。在功能上，arr.flatMap(f) 与 arr.map(f).flat（）等价；但 arr.flatMap（）更高效，因为浏览器只需要执行一次遍历。

const arr = [[1], [3], [5]];
console.log(arr.map(([x]) => [x, x + 1]));  // [[1, 2], [3, 4], [5, 6]]
console.log(arr.flatMap(([x]) => [x, x + 1]));  // [1, 2, 3, 4, 5, 6]

15、forEach（）：对数组每一项都运行传入的函数，没有返回值。

// 语法
array.forEach(callbackFn(currentValue, index, arr), thisValue)
callbackFn(currentValue, index, arr) // 数组每个元素需要调用的函数
    currentValue  // 当前元素
    index  // 可选。当前元素索引
    arr  // 可选。当前元素所属的数组对象。
thisValue  // 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给给"this" 值
const per=[
    {name:'zhao',age:23},
    {name:'qian',age:24},
    {name:'sun',age:25},
    {name:'li',age:26}
];
per.forEach(item =>{
    if(item.age>23){
    console.log(item)
    }
});
// {name:'qian',age:24}
// {name:'sun',age:25}
// {name:'li',age:26}

16、includes（）：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。使用（===）比较。

let person = { name: "Nicholas" };
let people = [{ name: "Nicholas" }];
let morePeople = [person];
alert(people.includes(person));     // false
alert(morePeople.includes(person)); // true

17、indexOf（）：返回查找元素在数组中最先出现的位置。使用（===）比较。

var arr=["zhao","qian","sun","li","zhou","qian",];
arr.indexOf("qian"); // 1
arr.lastIndexOf("qian");  // 5

18、join（）：将数组转换成字符串，接收一个参数，即字符串分隔符。

var arr=["zhao","qian","sun","li","zhou","wu",];
arr.join(',') // zhao,qian,sun,li,zhou,wu
arr.join('-') // zhao-qian-sun-li-zhou-wu

19、keys（）：详情见5。

20、lastIndexOf（）：返回一个指定的元素在数组中最后出现的位置。使用（===）比较。

21、length：数组的长度。

22、map（）：对数组每一项都运行传入的函数，返回每项调用之后的结果构成的新的数组。

const per=[
    {name:'zhao',age:23},
    {name:'qian',age:24},
    {name:'sun',age:25},
    {name:'li',age:26}
];
per.map(item => item.name);   // ['zhao','qian','sun','li']
per.map(item => item.age);   // [23,24,25,26]

23、pop（）：用于删除数组的最后一个元素，并返回删除的元素。会改变原数组。

var arr=["zhao","qian","sun","li","zhou","wu"];
var a=arr.pop();
console.log(a);  // wu
console.log(arr);  // ["zhao","qian","sun","li","zhou"]

24、push（）：向数组的末尾添加一个或更多元素，并返回新的长度。

var arr=["zhao","qian","sun"];
var a=arr.push("li","zhou","wu");
console.log(a);  // 6  返回新的数组的长度
console.log(arr);  // ["zhao","qian","sun","li","zhou","wu"]

25、reduce（）：迭代数组的所有项，并在此基础上构建一个返回值。reduce（）方法从数组的第一项开始遍历到最后一项。

26、reduceRight（）：迭代数组的所有项，并在此基础上构建一个返回值。reduceRight（）方法从数组的最后一项开始遍历到第一项。

// reduce()方法
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum);  // 15

// reduceRight()方法
let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight(function(prev, cur, index, array){
      return prev + cur;
});
alert(sum); // 15

27、reverse（）：将数组反向排列。

var arr = [1,2,3,4];
arr.reverse();
console.log(arr);  // [4,3,2,1]

28、shift（）：删除数组的第一元素，并返回数组的第一个元素。

var arr=["zhao","qian","sun","li","zhou","wu"];
var a=arr.shift();
console.log(a);  // zhao
console.log(arr);  // ["qian","sun","li","zhou","wu"]

29、slice（）：用于创建一个包含原有数组中一个或多个元素的新数组。接收一个或两个参数，如果只有一个参数，slice（）返回该索引到数组末尾的所有元素，如果有两个参数，则slice（）返回从开始索引到结束索引对应的所有元素，不包含结束索引对应的元素。由于此方法创建了一个新的数组，所以此操作不影响原始数组。

var arr =["a","b","c","d","e","f","g"];
var a=arr.slice(1);
var b =arr.slice(1,5);
console.log(a, b, arr)
// ['b', 'c', 'd', 'e', 'f', 'g']  ['b', 'c', 'd', 'e'] ["a","b","c","d","e","f","g"]

30、some（）：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

var arr =["1","2","3","4","5","6","7"];
arr.some(item => item < 2)  // true
arr.some(item => item > 8)  // false

31、sort（）：默认情况下，sort（）会在每一项上调用String（）转型函数，然后比较字符串来决定顺序。sort（）接收一个比较函数，用于判断哪个值应该排在前面。

// 比较函数接收两个参数，
// 如果第一个参数应该排在第二个参数前面，就返回负值；
// 如果两个参数相等，就返回0；
// 如果第一个参数应该排在第二个参数后面，就返回正值。
var arr=[1,10,5,6,7]
arr.sort((a,b) => a < b ? 1 : a > b ? -1 : 0 );
console.log(arr);  // [10,7,6,5,1]

32、splice（）：添加或删除数组中的元素。注意：此方法会改变数组！！！

// 语法
array.splice(index,howmany,item1,.....,itemX)
// index  必需。规定从何处添加/删除元素。
// howmany  可选。规定应该删除多少元素。必须是数字，但可以是0。
// item1,.....,itemX  可选。要添加到数组的新元素。
var arr =[1,2,3,4];
var a = arr.splice(0,1) ;
console.log(arr , a); // [2, 3, 4] [1]
var arr1 =[1,2,3,4];
var b = arr1.splice(0,1,7,8,9) ;
console.log(arr1 , b); // [7, 8, 9, 2, 3, 4] [1]

33、toLocaleString（）：返回数组值的逗号分隔的字符串。

34、toString（）：返回数组值的逗号分隔的字符串。

35、unshift（）：在数组的开头添加任意多个值，然后返回新的数组的长度。

var arr=["zhao","qian","sun"];
var a=arr.unshift("li","zhou","wu");
console.log(a);  // 6  返回新的数组的长度
console.log(arr);  // ["li","zhou","wu","zhao","qian","sun"]

36、values（）：详情见5。

37、valueOf（）：返回数组本身。