【前端开发】Javascript：Array

一殊酒

已于 2023-10-04 00:24:23 修改

阅读量586

点赞数

分类专栏：前端开发文档解析文章标签： javascript 前端

于 2021-11-05 15:02:05 首次发布

本文链接：https://blog.csdn.net/weixin_48348920/article/details/121121143

版权

文档解析同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

前端开发

55 篇文章 4 订阅

订阅专栏

==》转载W3School

JS数组的属性

constructor：返回对象的构造函数，其返回值是对函数的引用，而不是函数的名称

对于js数组，该属性返回function Array(){ native code }
对于js对象，该属性返回function Object(){ native code }

length：设置或返回数组中元素的数量
prototype：

可用于所有javascript对象的全局构造函数；
引用全局Array()对象；
该构造函数允许向数组添加新的属性和方法；
当构造新属性时，所有数组都将获得其属性及其值
当构造新方法时，所有数组都将获得其方法

// 添加新方法
Array.prototype.myUcase = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toUpperCase();
  }
};
// 在任何数组上使用该方法
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
document.getElementById("demo").innerHTML = fruits;

=》BANANA,ORANGE,APPLE,MANGO

JS数组的常用方法

contact()：用于连接两个或多个数组，不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值

array1.concat(array2, array3, …, arrayX)
array2, array3, …, arrayX ：必需，要连接的数组

var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var Volvo = sedan.concat(SUV);

=》S60,S90,XC40,XC60,XC90

copyWithin()：将数组元素复制到数组中的另一个位置，覆盖现有值；永远不会向数组添加更多项；会覆盖原始数组

array.copyWithin(target, start, end)
target：必需，将元素复制到的索引位置
start：可选，开始复制元素的索引位置（默认为 0）
end：可选，停止从中复制元素的索引位置（默认为 array.length）

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0);
=》Banana,Orange,Banana,Orange

const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0,2);
=》Banana,Orange,Banana,Orange,Kiwi,Papaya

entries()：返回带有键/值对的Array Iterator对象，不会改变原数组

array.entries()

对于原始数组中的每一项，新的迭代对象将包含一个以索引为键，以项值为值的数组
[0, “Banana”]
[1, “Orange”]
[2, “Apple”]
[3, “Mango”]

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
------------------------------------------------
0,Banana
1,Orange
2,Apple
3,Mango

every()：检查数组中的所有元素是否都通过了测试（被作为函数提供）

对数组中的存在的每个元素执行一次函数=》如果找到函数返回false值的数组元素，every()返回false（并且不检查剩余值），如果没有出现false，every()返回true
every()不对没有值的数组元素执行函数
every()不改变原始数组

array.every(function(currentValue, index, arr), thisValue)
function()：必填，为数组中的每个元素运行的函数
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
thisValue：可选，要传递给函数以用作其 “this” 值的值，如果此参数为空，则值 “undefined” 将作为其 “this” 值传递
返回值：布尔值，如果数组中的所有元素都通过测试，则返回 true，否则返回 false

const ages = [32, 33, 12, 40];
// 函数：检查数组中的每个元素是否都有高于此数字的值
function checkAge(age) {
  return age > 13;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.every(checkAge);
}
=》[true,true,false,true]
=》最终结果：false

const survey = [
  { name: "Bill",   answer: "Yes"},
  { name: "Steve", answer: "Yes"},
  { name: "David",   answer: "Yes"},
  { name: "Elon",  answer: "No"}
];

document.getElementById("demo").innerHTML = survey.every(isSameAnswer);

function isSameAnswer(el,index,arr) {
  // 为第一个元素返回 true
  if (index === 0){
    return true;
  }
  else {
  // 比较前一个元素的值
    return (el.answer === arr[index - 1].answer);
  }
}
=》false

fill()：用静态值填充数组中的指定元素，可指定开始和结束填充的位置，如果未指定，则将填充所有元素，会覆盖原始数组

array.fill(value, start, end)
value 必需。用于填充数组的值。
start：可选，开始填充数组的索引（默认为 0）
end：可选，停止填充数组的索引（默认为 array.length）

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.fill("Kiwi",2,4);

=》Banana,Orange,Kiwi,Kiwi

filter()：创建数组，其中填充了所有通过测试的数组元素（作为函数提供）；不会对没有值的数组元素执行该函数；不会改变原始数组

array.filter(function(currentValue, index, arr), thisValue)
function()：必填，为数组中的每个元素运行的函数
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
thisValue：可选，要传递给函数以用作其 “this” 值的值；如果此参数为空，则值 “undefined” 将作为其 “this” 值传递
返回值：包含所有通过测试的数组元素的数组，如果没有元素通过测试，则返回一个空数组

const ages = [32, 33, 12, 40];
function checkAge(age) {
  return age > 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.filter(checkAge);
}

=》[32,33,40]

find()：返回数组中第一个通过测试的元素的值（作为函数提供）；

对数组中存在的每个元素执行一次函数，如果找到函数返回true值的数组元素，则find()返回该数组元素的值（并且不检查剩余值），否则返回undefined
不对空数组执行该函数
不会改变原始数组

array.find(function(currentValue, index, arr), thisValue)
function()：必填，为数组中的每个元素运行的函数
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
thisValue：可选，要传递给函数以用作其 “this” 值的值；如果此参数为空，则值 “undefined” 将作为其 “this” 值传递
返回值：如果数组中的任何元素通过测试，则返回数组元素值，否则返回 undefined

const ages = [4, 19, 16, 20];
function checkAge(age) {
  return age > 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAge);
}

=》19

findIndex()：返回数组中通过测试的第一个元素的索引（作为函数提供）

对数组中存在的每个元素执行一次函数，如果找到函数返回true值的数组元素，则findIndex()返回该元素的索引（并且不检查剩余值），否则返回-1
不会为没有值的数组元素执行函数
不会改变原始数组

array.findIndex(function(currentValue, index, arr), thisValue)
function()：必填，为数组中的每个元素运行的函数
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
thisValue：可选，要传递给函数以用作其 “this” 值的值；如果此参数为空，则值 “undefined” 将作为其 “this” 值传递
返回值：如果数组中的任何元素通过测试，则返回数组元素索引，否则返回 -1

const ages = [4, 12, 16, 20];
function checkAge(age) {
  return age > 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.findIndex(checkAge);
}

=》3

forEach()：按顺序为数组中的每个元素调用一次函数，对没有值的数组元素，不执行forEach()方法

array.forEach(function(currentValue, index, arr), thisValue)
function()：必填，为数组中的每个元素运行的函数
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
thisValue：可选，要传递给函数以用作其 “this” 值的值；如果此参数为空，则值 “undefined” 将作为其 “this” 值传递
返回值：undefined

let sum = 0;
const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);
function myFunction(item) {
  sum += item;
}
document.getElementById("demo").innerHTML = sum;

=》125

const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction)
function myFunction(item, index, arr) {
  arr[index] = item * 10;
}
document.getElementById("demo").innerHTML = numbers;

=》650,440,120,40

from()：从具有length顺序或可迭代对象的任何对象返回Array对象

Array.from(object, mapFunction, thisValue)
object：必需，需转换为数组的对象
mapFunction：可选，对数组的每个项目调用的 map 函数
thisValue：可选，执行 mapFunction 时用作 this 的值

const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;

=》A,B,C,D,E,F,G

includes()：确定数组是否包含指定的元素，如果数组包含元素，则此方法返回true，否则返回false；此方法区分大小写

array.includes(element, start)
element：必需，要搜索的元素
start：可选，默认 0，在数组中的哪个位置开始搜索

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Banana", 3);

=》false

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Banana", 0);

=》true

indexOf()：在数组中搜索指定项目，并返回其位置

搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索
如果未找到该项目，则indexOf()返回-1
如果该项目出现多次，则indexOf()方法返回第一次出现的位置

array.indexOf(item, start)
item：必需，要搜索的项目
start：可选，从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后
返回值：数值，表示指定项目的位置，否则 -1

const fruits = ["Banana", "Orange", "Apple", "Mango", "Apple"];
document.getElementById("demo").innerHTML = fruits.indexOf("Apple", 4);

=》4

const fruits = ["Banana", "Orange", "Apple", "Mango", "Apple"];
document.getElementById("demo").innerHTML = fruits.indexOf("Apple");

=》2

const fruits = ["Banana", "Orange", "Apple", "Apple", "Apple"];
document.getElementById("demo").innerHTML = fruits.indexOf("Apple",2);

=》2

lastIndeOf()：在数组中搜索指定项目，并返回其位置

搜索从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索
如果未找到该项目，则lastndexOf()方法返回-1
如果要搜索的项目不止一次出现，lastIndexOf()方法将返回最后一次出现的位置

array.lastIndexOf(item, start)
item：必需，要搜索的项目
start：可选，从哪里开始搜索。负值的给定的位置从末尾计数，然后搜索到开头
返回值：数值，表示指定项目的位置，否则-1

["Orange","Apple","Mango","Apple","Banana","Apple"];
document.getElementById("demo").innerHTML = fruits.lastIndexOf("Apple");

=》5

const fruits = ["Orange","Apple","Mango","Apple","Banana","Apple"];
document.getElementById("demo").innerHTML = fruits.lastIndexOf("Apple", 4);

=》3

join()：将数组作为字符串返回，元素将由指定的分隔符分隔，默认分隔符为逗号,，此方法不会改变原始数组

array.join(separator)
separator：可选，要使用的分隔符。如果省略，元素用逗号分隔
返回值：字符串值，表示数组值，由指定的分隔符分隔

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" and ");

=》Banana and Orange and Apple and Mango

fruits.join();
=》Banana,Orange,Apple,Mango

keys()：返回带有数组键的Array Iterator对象，不会改变原始数组

array.keys()
返回值：Array Iterator 对象

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
  text += x + " ";
}
document.getElementById("demo").innerHTML = text;

=》0 1 2 3

map()：使用为每个数字元素调用函数的结果创建新数组；按顺序为数组中的每个元素调用一次提供的函数；对没有值的数组元素不执行函数；不会改变原始数组

array.map(function(currentValue, index, arr), thisValue)
function()：必填，为数组中的每个元素运行的函数
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
thisValue：可选，要传递给函数以用作其 “this” 值的值；如果此参数为空，则值 “undefined” 将作为其 “this” 值传递
返回值：数组，包含为原始数组中的每个元素调用提供的函数的结果

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction);
document.getElementById("demo").innerHTML = newArr;
function myFunction(num) {
  return num * 10;
}

=》650,440,120,40

const persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];
document.getElementById("demo").innerHTML = persons.map(getFullName);
function getFullName(item) {
  return [item.firstname,item.lastname].join(" ");
}

=》Malcom Reynolds,Kaylee Frye,Jayne Cobb

pop()：移除数组的最后一个元素，返回该元素，会改变数组的长度

array.pop()
返回值：任何类型 *，表示被删除的数组项。（* 数组项可以是字符串、数字、数组、布尔值或数组中允许的任何其他对象类型）

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let removed = fruits.pop();
document.getElementById("demo").innerHTML = removed;

=》Mango

push()：向数组末尾添加新项目，并返回新长度，会改变数组的长度

array.push(item1, item2, …, itemX)
item1, item2, …, itemX：必需，要添加到数组中的项目
返回值：数值，表示数组的新长度

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");
document.getElementById("demo").innerHTML = fruits;
=》Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.push("Kiwi","tt");

=》6

reduce()：将数组缩减为单个值，为数组的每个值（从左到右）执行提供的函数，函数的返回值存储在累加器中（结果/总计）；对没有值的数组元素，不执行reduce()方法；不会改变原始数组

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function()：必填，为数组中的每个元素运行的函数
total：必需，initialValue，或函数先前返回的值
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
initialValue：可选。作为初始值传递给函数的值
返回值：返回上次调用回调函数的累积结果

const numbers = [15.5, 2.3, 1.1, 4.7];
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
function getSum(total, num) {
  return total + Math.round(num);
}

》16+2+1+5=24
=》24

reduceRight()：将数组缩减为单个值，为数组的每个值（从右到左）执行提供的函数，函数的返回值存储在累加器中（结果/总计）；对没有值的数字元素，不执行reduceRight()方法

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
function()：必填，为数组中的每个元素运行的函数
total：必需，initialValue，或函数先前返回的值
currentValue：必需，当前元素的值
index：可选，当前元素的数组索引
arr：可选，当前元素所属的数组对象
initialValue：可选。作为初始值传递给函数的值
返回值：返回上次调用回调函数的累积结果

const numbers = [2, 45, 30, 100];
document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
//从右到左减去数组中的数字
function getSum(total, num) {
  return total - num;
}

=》23