当前位置：移动技术网 > IT编程>开发语言>JavaScript > 前端的 JavaScript Array（数组）方法和对象

前端的 JavaScript Array（数组）方法和对象

2020年07月11日 | 移动技术网IT编程 | 我要评论

什么是数组?

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

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

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

创建一个数组

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

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=["Saab","Volvo","BMW"];

3: 字面:

var myCars=["Saab","Volvo","BMW"];

访问数组

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

var name=myCars[0];

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

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

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

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

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

数组属性

1.constructor 返回创建数组对象的原型函数。

array.constructor

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

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

2.length 设置或返回数组元素的个数。

length 属性可设置或返回数组中元素的数目。

设置数组的数目：array.length=number

返回数组中元素的数目：array.length

3.prototype 允许你向数组对象添加属性或方法。

Array.prototype.name=value

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

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

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

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

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

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

var fruits=["Banana","Orange","Apple","Mango"];

fruits.myUcase();//BANANA,ORANGE,APPLE,MANGO

Array 对象方法

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

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

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

array2, array3, ..., arrayX必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

var hege = ["Cecilie", "Lone"];

var stale = ["Emil", "Tobias", "Linus"];

var kai = ["Robin"];

var children = hege.concat(stale,kai);//Cecilie,Lone,Emil,Tobias,Linus,Robin

传递两个参数m，n，返回长度为m，所有元素都为n的数组，要求不能用循环。

function fn(m, n) {利用函数的递归和 concat() 方法可以实现

  return m ? fn(m - 1, n).concat(n) : [];
}

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

array.copyWithin(target, start, end)

target 必需。复制到指定目标索引位置。

start 可选。元素复制的起始位置。

end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];

fruits.copyWithin(2, 0, 2);//Banana,Orange,Banana,Orange,Kiwi,Papaya

array.entries()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.entries();//[0, "Banana"] [1, "Orange"] [2, "Apple"] [3, "Mango"]

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

function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象

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

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

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

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

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

var ages = [32, 33, 16, 40];

ages.every(function(){

age>=18

});//false

array.fill(value, start, end)

value 必需。填充的值。

start 可选。开始填充位置。

end 可选。停止填充位置 (默认为 array.length)

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.fill("Runoob", 2, 4);//Banana,Orange,Runoob,Runoob

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

function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数
函数参数: currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象

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

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

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

var ages = [32, 33, 16, 40];

ages.filter(functiton(age){

age>=18

})// [32, 33, 40]

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

function(currentValue, index,arr) 必需。数组每个元素需要执行的函数。
函数参数:currentValue 必需。当前元素 index 可选。当前元素的索引值 arr 可选。当前元素所属的数组对象

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

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

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

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

注意: find() 对于空数组，函数是不会执行的。

注意: find() 并没有改变数组的原始值。

var ages = [3, 10, 18, 20];

ages.find(function(age){

age>=18

})//18

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

function(currentValue, index,arr) 必须。数组每个元素需要执行的函数。
函数参数:currentValue 必需。当前元素 index 可选。当前元素的索引 arr 可选。当前元素所属的数组对象

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

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

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

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

var ages = [3, 10, 18, 20];

ages.findIndex(function(age){

age>=18

})//2

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

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

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

var numbers = [4, 9, 16, 25];

numbers.forEach(function(item, index){

console.log('item:'+item+'--index:'+index)

})//4--0,9--1,16--2,25--3

Array.from(object, mapFunction, thisValue)

object 必需，要转换为数组的对象。

mapFunction 可选，数组中每个元素要调用的函数。

thisValue 可选，映射函数(mapFunction)中的 this 对象。

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

如果对象是数组返回 true，否则返回 false。

var arr = Array.from([1, 2, 3], x => x * 10);//[10,20,30]

arr.includes(searchElement, fromIndex)

searchElement 必须。需要查找的元素值。

fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

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

如果fromIndex 大于等于数组长度，则返回 false 。该数组不会被搜索

如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

array.indexOf(item,start)

item 必须。查找的元素。

start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

提示如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法。

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);//6

Array.isArray(obj)

obj必需，要判断的对象。

isArray() 方法用于判断一个对象是否为数组。

如果对象是数组返回 true，否则返回 false。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

Array.isArray(fruits)//true

array.join(separator)

separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();//Banana,Orange,Apple,Mango

array.keys()

keys() 方法用于从数组创建一个包含数组键的可迭代对象。

如果对象是数组返回 true，否则返回 false。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.keys();

console.log(x.next().value)//0
   console.log(x.next().value)//1
   console.log(x.next().value)//2
   console.log(x.next().value)//3
   console.log(x.next().value)//undefined
   console.log(x.next().value)//undefined

array.lastIndexOf(item,start)

item 必须。查找的元素。

start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

提示： 如果你想查找数组首次出现的位置，请使用 indexOf() 方法。

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple");//6

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

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

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组

var numbers = [4, 9, 16, 25];

numbers.map(Math.sqrt);//[2,3,4,5]

array.pop()

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

注意：此方法改变数组的长度！

提示： 移除数组第一个元素，请使用 shift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();//Mango

fruits//["Banana", "Orange", "Apple"]

array.push(item1, item2, ..., itemX)

item1, item2, ..., itemX 必需。要添加到数组的元素。

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

注意： 新元素将添加在数组的末尾。

注意： 此方法改变数组的长度。

提示： 在数组起始位置添加元素请使用 unshift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Kiwi","Lemon","Pineapple")//["Banana", "Orange", "Apple", "Mango","Kiwi","Lemon","Pineapple"]

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:total 必需。初始值, 或者计算结束后的返回值。currentValue 必需。当前元素 currentIndex 可选。当前元素的索引 arr 可选。当前元素所属的数组对象。

initialValue 可选。传递给函数的初始值

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

var numbers = [65, 44, 12, 4];

function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum, 1))//126

array.reverse()

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

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();//["Mango","Apple","Orange","Banana"]

array.shift()

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

注意： 此方法改变数组的长度！

提示: 移除数组末尾的元素可以使用 pop() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()//Banana

fruits//["Orange", "Apple", "Mango"];

array.slice(start, end)

start 可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素

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

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1);["Lemon", "Apple"];

var str="www.runoob.com!";
document.write(str.slice(4)+"<br>"); // 从第 5 个字符开始截取到末尾
document.write(str.slice(4,10)); // 从第 5 个字符开始截取到第10个字符

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

function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数
函数参数:currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象

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

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

var ages = [4, 12, 16, 20];

ages.some(function(age){

age >=18

})//true

array.sort(sortfunction)

sortfunction 可选。规定排序顺序。必须是函数。

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

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。

注意： 这种方法会改变原始数组！。

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});//[1,5,10,25,40,100]

array.splice(index,howmany,item1,.....,itemX)

index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字

howmany 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

item1, ..., itemX 可选。要添加到数组的新元素

splice() 方法用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

fruits//["Banana", "Orange", "Lemon","Kiwi", "Mango"]

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);

fruits//["Banana", "Orange"]

array.toString()

toString() 方法可把数组转换为字符串，并返回结果。

注意： 数组中的元素之间用逗号分隔。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();//Banana,Orange,Apple,Mango

array.unshift(item1,item2, ..., itemX)

item1,item2, ..., itemX 可选。向数组起始位置添加一个或者多个元素。

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

注意： 该方法将改变数组的数目。

提示: 将新项添加到数组末尾，请使用 push() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");

fruits//["Lemon","Pineapple","Banana", "Orange", "Apple", "Mango"]

array.valueOf()

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

注意： valueOf() 方法不会改变原数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();//["Banana", "Orange", "Apple", "Mango"]

本文地址：https://blog.csdn.net/John_jian_yo/article/details/107242590

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS初学必须要理解的基础知识

1、第一个javascript程序程序书写的位置JavaScript也是一个纯文本的语言。在页面中，<sc... [阅读全文]
JSON的简要解析

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。... [阅读全文]
使用D3.js进行Neo4j数据的前端展示

背景:目前存在这样的需求，需要Neo4j图数据库存储表级血缘关系，血缘关系图要在前端页面进行展示；Neo4j自带... [阅读全文]
Ajax中get和post方法

ajax()方法$.ajax({url:请求地址type:"get | post | put | delete ... [阅读全文]
荐 vue基础及高级用法（一）

1. 插值表达式{{xxx}}的形式，可以是值，也可以是表达式（不能是 js 语句，比如if、for）<d... [阅读全文]
荐 AJAX初识Day1——POST & GET请求

AJAX1. 简介AJAX（Asynchronous JavaScript and XML ），最早出现在 05... [阅读全文]
海创软件组-20200712-学习过程中的记录

前端基础补足HTML5/CSS 部分1.搜索引擎的搜索问题2.图片的格式问题3. 盒子模型中的margin垂直方... [阅读全文]
JavaScript JS数组的操作

JavaScript JS数组的操作数组的操作数据的循环本质上是。通过生成索引的下标来获取数组中的每一个单元... [阅读全文]
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览

文章目录1：axios上传文件获取进度2：js对多个四边形的点对象数组分别按顺时针排序1：axios上传文件获取... [阅读全文]
用原生js-对ajax封装

function ajax(methods, url, callback, params) { //1.创... [阅读全文]