JavaScript Array 对象

Posted 2022-04-18 知其黑、受其白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript Array 对象相关的知识，希望对你有一定的参考价值。

阅读目录

Array 对象
数组属性
- JavaScript constructor 属性
- JavaScript prototype 属性构造器
Array 对象方法

Array 对象

Array 对象用于在变量中存储多个值:

var fruits = ["Banner", "Apple", "Orange"];

第一个数组元素的索引值为 0，第二个索引值为 1，以此类推。

数组对象的作用是：使用单独的变量名来存储一系列的值。

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据（例如：动物名字），存在单独变量如下所示：

var animal1="tiger";
var animal2="lion";
var animal3="monkey";

然而，如果你想从中找出某一种动物？
并且不是3种，而是300种呢？这将不是一件容易的事！

最好的方法就是用数组。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myAniamals 的数组对象：

1、常规方式:

var myAniamals=new Array();
myAniamals[0]="tiger";      
myAniamals[1]="lion";
myAniamals[2]="monkey";

2、简洁方式:

var myAniamals=new Array("tiger","lion","monkey");

3、字面量:

var myAniamals=["tiger","lion","monkey"];

访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问 myAniamals 数组的第一个值：

var name=myAniamals[0];

以下实例修改了数组 myAniamals 的第一个元素:

myAniamals[0]="dog";

[0] 是数组的第一个元素。[1] 是数组的第二个元素。

在一个数组中你可以有不同的对象

所有的 javascript 变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myAniamals;

数组方法和属性

使用数组对象预定义属性和方法：

var x=myAniamals.length             // myAniamals 中元素的数量
var y=myAniamals.indexOf("tiger")   // "tiger" 值的索引值

创建新方法示例

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>演示</title>
    <style type="text/css">
    </style>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用 ucase() 方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>

<script>
Array.prototype.myUcase = function () 
    for (i = 0; i < this.length; i++) 
        this[i] = this[i].toUpperCase();
    


function myFunction() 
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.myUcase();
    var x = document.getElementById("demo");
    x.innerHTML = fruits;

</script>

</body>
</html>

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。

数组属性

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

JavaScript constructor 属性

定义和用法

在 JavaScript 中, constructor 属性返回对象的构造函数。

返回值是函数的引用，不是函数名：

  JavaScript 数组  constructor 属性返回 function Array()  [native code] 
  JavaScript 数字  constructor 属性返回 function Number()  [native code] 
JavaScript 字符串  constructor 属性返回 function String()  [native code]

如果一个变量是数组你可以使用 constructor 属性来定义。

语法

array.constructor

浏览器支持
所有主流浏览器都支持 constructor 属性。

JavaScript prototype 属性构造器

定义和用法

prototype 属性使您有能力向对象添加属性和方法。

当构建一个属性，所有的数组将被设置属性，它是默认值。

在构建一个方法时，所有的数组都可以使用该方法。

注意： Array.prototype 单独不能引用数组， Array() 对象可以。

注意：在JavaScript对象中，Prototype是一个全局属性。

语法

Array.prototype.name=value

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()	返回数组对象的原始值。

JavaScript concat() 方法

定义和用法
concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法

array1.concat(array2,array3,...,arrayX)

参数：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

返回值：
返回一个新的数组。
该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。
如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

合并三个数组的值：

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);

输出结果：Cecilie,Lone,Emil,Tobias,Linus

JavaScript copyWithin() 方法

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

语法

array.copyWithin(target, start, end)

参数

   参数		描述
target		必需。复制到指定目标索引位置。
 start		可选。元素复制的起始位置。
   end		可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

实例 1

<button onclick="myFunction()">点我</button>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction()   
    document.getElementById("demo").innerHTML = fruits.copyWithin(2,0);

</script>

实例2

复制数组的前面两个元素到第三和第四个位置上：

<button onclick="myFunction()">点我</button>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
document.getElementById("demo").innerHTML = fruits;

function myFunction()   
    document.getElementById("demo").innerHTML = fruits.copyWithin(2,0,2);

</script>

JavaScript entries() 方法

定义和用法
entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

迭代对象中数组的索引值作为 key，数组元素作为 value。

[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]

语法

array.entries()

参数：没有参数。

从数组 fruit 创建一个可迭代对象，该对象包含了数组的键值对：

<p>从数组中创建一个可迭代的对象。</p>
<p>迭代对象的每个实体来自数组对应的元素。</p>

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();

document.getElementById("demo1").innerHTML = x.next().value;
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;
</script>

JavaScript every() 方法

定义和用法

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意：

every() 不会对空数组进行检测。
every() 不会改变原始数组。

语法

array.every(function(
	currentValue,index,arr
), thisValue)

参数说明

参数

描述

function(currentValue, index,arr)

必须。函数，数组中的每个元素都会执行这个函数
函数参数:

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，”this” 的值为 “undefined”

实例1

检测数组 ages 的所有元素是否都大于等于 18 :

<p>点击按钮检测数组的所有元素是否都大于 18 :</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) 
    return age >= 18;

function myFunction() 
    document.getElementById("demo").innerHTML = ages.every(checkAdult);

</script>

输出结果为: false

实例2

检测数组 ages 的所有元素是否都大于等于输入框中指定的数字:

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>是否所有年龄都符号条件? <span id="demo"></span></p>

<script>
var ages = [32, 33, 12, 40];
function checkAdult(age) 
    return age >= document.getElementById("ageToCheck").value;

function myFunction() 
    document.getElementById("demo").innerHTML = ages.every(checkAdult);

</script>

JavaScript fill() 方法

定义和用法

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

语法

array.fill(value, start, end)

参数

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

实例1

使用固定值填充数组：

<button onclick="myFunction()">点我</button>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction()   
    document.getElementById("demo").innerHTML = fruits.fill("wgchen");

</script>

运行结果：wgchen,wgchen,wgchen,wgchen

实例2

填充 “wgchen” 到数组的最后两个元素：

<button onclick="myFunction()">点我</button>
<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction()   
    document.getElementById("demo").innerHTML = fruits.fill("Mybj",2,4);

</script>

运行结果：Banana,Orange,wgchen,wgchen

JavaScript Array filter() 方法

定义和用法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：

filter() 不会对空数组进行检测。
filter() 不会改变原始数组。

语法

array.filter(function(
	currentValue,index,arr
), thisValue)

参数说明

参数

描述

function(currentValue, index,arr)

必须。函数，数组中的每个元素都会执行这个函数
函数参数:

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

thisValue

可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，”this” 的值为 “undefined”

实例1

返回数组 ages 中所有元素都大于 18 的元素:

<button onclick="myFunction()">点我</button>
<p id="demo"></p>

<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) 
    return age >= 18;

function myFunction() 
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

</script>

运行结果：32,33,40

实例2

返回数组 ages 中所有元素都大于输入框指定数值的元素:

<p>点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>所有大于指定数组的元素有？ <span id="demo"></span></p>

<script>
var ages = [32, 33, 12, 40];
function checkAdult(age) 
    return age >= document.getElementById("ageToCheck").value;

function myFunction() 
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

</script>

JavaScript find() 方法

定义和用法

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

注意:

find() 对于空数组，函数是不会执行的。
find() 并没有改变数组的原始值。

语法

array.find(function(
	currentValue, index, arr
),thisValue)

参数

描述

function(currentValue, index,arr)

必需。数组每个元素需要执行的函数。
函数参数:

参数	描述
currentValue	必需。当前元素
index	可选。当前元素的索引值
arr	可选。当前元素所属的数组对象

thisValue

可选。传递给函数的值一般用 “this” 值。
如果这个参数为空， “undefined” 会传递给 “this” 值

所

以上是关于JavaScript Array 对象的主要内容，如果未能解决你的问题，请参考以下文章

如何使用jquery或javascript对对象数组进行排序[重复]

添加对象数组javascript的值

在 JavaScript 中递归计算整数数组的总和

JavaScript对数组对象进行升序排列

如何计算数组中对象键的总和 - javascript

使用Javascript的数组中嵌套对象值的总和

JavaScript Array 对象

阅读目录

Array 对象

什么是数组?

创建一个数组

访问数组

在一个数组中你可以有不同的对象

数组方法和属性

创建新方法示例

数组属性

JavaScript constructor 属性

JavaScript prototype 属性 构造器

Array 对象方法

JavaScript concat() 方法

JavaScript copyWithin() 方法

实例 1

实例2

JavaScript entries() 方法

JavaScript every() 方法

实例1

实例2

JavaScript fill() 方法

实例1

实例2

JavaScript Array filter() 方法

实例1

实例2

JavaScript find() 方法

JavaScript prototype 属性构造器