JavaScript Array

声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

JavaScript Array

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

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

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

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

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

因此，数组中可以包含不同的变量类型。

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

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

1、创建数组

创建一个数组，有三种方法。举例如下：

1.常规方式:

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

2.简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3.字面:

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

2、访问数组

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

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

var name=myCars[0];

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

myCars[0]="Opel";

3、数组方法和属性

3.1 参考手册

完整数组对象参考手册

3.2 创建新方法

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

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


练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法创建练习</title>
</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>

4、数组方法练习实例

  • 合并两个数组 - a.concat(b) 合并后的数组a的元素在前，b的元素在后

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

  • 合并三个数组 - a.concat(b,c)

    var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);

  • 用数组的元素组成字符串 - 数组名.join()

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

  • 删除数组的最后一个元素 - 数组名.pop()

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

  • 数组的末尾添加新的元素 - 数组名.push("新元素")

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

  • 将一个数组中的元素的顺序反转排序 - 数组名.reverse()

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

  • 删除数组的第一个元素 - 数组名.shift()

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	var delell = fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML= '删除后数组为：' +  fruits;
	document.getElementById("demo2").innerHTML= '删除的元素是：' +  delell;
}
//删除后数组为：Orange,Apple,Mango
//删除的元素是：Banana

  • 从一个数组中截取元素 - 数组名.slice(截取范围) 切记截取范围是左闭右开

    function myFunction(){
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
var x=document.getElementById("demo");
x.innerHTML=citrus;		//Orange,Lemon

  • 数组排序（按字母顺序升序）- 数组名.sort()

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

  • 数字排序（按数字顺序升序）- 数组名.sort()

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

  • 数字排序（按数字顺序降序）- 数组名.sort()

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

  • 在数组的第2位置添加一个元素 - splice()

    • 参数1：index

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

    • 参数2：howmany

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

    • 参数3：item1, ..., itemX

      可选。要添加到数组的新元素

    • 举例如下

      var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;		//Banana,Orange,Lemon,Kiwi,Apple,Mango

  • 转换数组到字符串 - toString()

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
var x=document.getElementById("demo");
x.innerHTML= str;		//Banana,Orange,Apple,Mango

  • 在数组的开头添加新元素 - unshift()

    注意: unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成 undefined 。

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;		//Lemon,Pineapple,Banana,Orange,Apple,Mango

5、补充知识

Js 中为数组提供了多种遍历方式

const ary = ['a', 'b', 'c'];

// 最基本的方式, 只能遍历下标有序递增的数组
for (let i=0; i<ary.length; i++) {
  console.log(i, ary[i]);   // 0 a  1 b  2 c
}

// in:每遍历一次数组指针向后移动一位, 并得到当前数组元素值的下标, 可以通过 ary[key] 来访问数组元素值
for (let key in ary) {
  console.log(key, ary[key]);  // 0 a  1 b  2 c
}

// of:每遍历一次数组指针向后移动一位, 并得到当前数组元素的值, 处理二维数组时极为方便
for (let value of ary) {
  console.log(value);    // a b c
}

Js还为数组对象内置了多种迭代方法, 处理数组时极为方便

/**
 *  forEach(function)
 *  该方法接收一个函数作为参数, 该函数拥有两个参数, 分别为数组的值、键
 *  该方法没有返回值
 */

 ary.forEach((value, key) => {
    console.log(key, value); // 0 a  1 b  2 c
 })


/**
 * map(function) 
 * 该方法接收一个函数作为参数, 该函数拥有两个参数, 分别为数组的值、键
 * 可以在传入的函数中返回相应的值,你每次迭代时返回的值会被map方法组装成一个新数组作为返回值返回
 */

 var result = ary.map((value, key) => {
    return value + '_runoob.com';
 })

 console.log(result); // ['a_runoob.com', 'b_runoob.com', 'c_runoob.com']

数字索引与非数字索引

JavaScript 数组只支持数字索引，非数字索引指的是对象的属性了。

JavaScript 的数组可以看做是特殊的对象(object)，对象的属性有两种表示方法。

var a=Object();
a.myattr="runoob";
a["myattr"]="runoob";

查看以下实例：

var a=new Array();
a['a1']=1;
a['a2']=2;
a.length  // 输出0

实例中由于你没有给数组的元素赋值，所以 a 数组的长度也没有被创建出来，此时 a.length 输出结果为 0。

var a=new Array();
a['a1']=1;
a['a2']=2;
a[2]=3;
a.length  // 输出3

在最后一行代码中数组元素 a[2] 赋值了，此时 JavaScript 会给数组 a 创建一个长度为 3 的空间，并在第三个元素中赋以3，但是元素1和元素2都没有赋值，所以此时a[0]和a[1]是没有值的。

如果要使用的是一个完全由“字符串下标”组成的数组，那还是将其声明为一个 Object 类型的对象要更好一些。

var a=new Array();
a['a1']=1;
a["100"]=3;
a.length  // 输出 101

Javascript 数组下标值的范围为 0 ~ 232。对于任意给定的数字下标值，如果不在此范围内，Javascript 会将它转换为一个字符串，并将该下标对应的值作为该数组对象的一个属性值而不是数组元素，例如 array[-1] = "yes" 其实就相当于给 array 对象添加了一个名为 -1 的属性，属性值为 yes。如果该下标值在合法范围内，则无论该下标值是数字还是数字字符串，都一律会被转化为数字使用，即 array["100"] = 0 和 array[100] = 0 执行的是相同的操作。

posted @   无关风月7707  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript数据类型
· JavaScript对象
· JavaScript Array（数组） 对象
· 24. JS Array（数组）对象
· JS——数组
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示