首页 > 编程语言 >javascript 数组

javascript 数组

时间：2022-10-15 23:06:45浏览次数：56  
标签：javascript 菜鸟 元素 数组 fruits var document


javascript 数组

javascript 数组_开发语言

文章目录

1. 简介

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

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

var car1="Saab";
var car2="Volvo";
var car3="BMW";

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

最好的方法就是用数组。

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
  document.write(mycars[i] + "<br />");
}
</script>

</body>
</html>

输出：

Saab
Volvo
BMW

2. 创建数组

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

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

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"];

3. 访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。 ​​[0]​​​ 是数组的第一个元素。​​[1]​​ 是数组的第二个元素。

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

var name=myCars[0];

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

myCars[0]="Opel";

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

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

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

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

4. 数组方法和属性

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

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo"

javascript 数组_html_02

5. 创建新方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>

输出：

javascript 数组_数组_03

6. 实例

6.1 合并两个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
  
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);
</script>
  
</body>
</html>

输出：

Cecilie,Lone,Emil,Tobias,Linus

6.2 合并三个数组 - concat()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

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

</body>
</html>

输出：

Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone

6.3 用数组的元素组成字符串 - join()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x=document.getElementById("demo");
  x.innerHTML=fruits.join();
}
</script>

</body>
</html>

输出：

Banana,Orange,Apple,Mango

6.4 删除数组的最后一个元素 - pop()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
  fruits.pop();
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>

</body>
</html>

输出：

javascript 数组_ecmascript_04

6.5 数组的末尾添加新的元素 - push()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
  fruits.push("Kiwi")
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>

</body>
</html>

输出：

javascript 数组_开发语言_05

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
  fruits.reverse();
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>

</body>
</html>

输出：

javascript 数组_数组_06

6.7 删除数组的第一个元素 - shift()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
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;
}
</script>

</body>
</html>

输出：

javascript 数组_数组_07

6.8 从一个数组中选择元素 - slice()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
  var citrus = fruits.slice(1,3);
  var x=document.getElementById("demo");
  x.innerHTML=citrus;
}
</script>

</body>
</html>

输出：

javascript 数组_ecmascript_08

6.9 数组排序（按字母顺序升序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.sort();
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>

</body>
</html>

输出：

javascript 数组_html_09

6.10 数字排序（按数字顺序升序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var points = [40,100,1,5,25,10];
  points.sort(function(a,b){return a-b});
  var x=document.getElementById("demo");
  x.innerHTML=points;
}
</script>

</body>
</html>

输出：

javascript 数组_开发语言_10

6.11 数字排序（按数字顺序降序）- sort()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var points = [40,100,1,5,25,10];
  points.sort(function(a,b){return b-a});
  var x=document.getElementById("demo");
  x.innerHTML=points;
}
</script>

</body>
</html>

输出：

javascript 数组_html_11

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.splice(2,0,"Lemon","Kiwi");
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>

</body>
</html>

输出：

javascript 数组_ecmascript_12

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var str = fruits.toString();
  var x=document.getElementById("demo");
  x.innerHTML= str;
}
</script>

</body>
</html>

输出：

javascript 数组_数组_13

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.unshift("Lemon","Pineapple");
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成<em> undefined </em>。</p>

</body>
</html>

输出：

javascript 数组_ecmascript_14


标签：javascript,菜鸟,元素,数组,fruits,var,document
From： https://blog.51cto.com/ghostwritten/5759359

相关文章

  • javascript class
    javascriptclass文章目录​​javascriptclass​​​​1.简介​​​​2.浏览器支持​​​​3.使用类​​​​4.类表达式​​​​5.类的方法​​​​6.严格模式"use......
  • 1441. 用栈操作构建数组
    1441.用栈操作构建数组给你一个数组target和一个整数n。每次迭代，需要从 list={1,2,3...,n}中依次读取一个数字。请使用下述操作来构建目标数组targ......
  • JavaScript --- 随机点名抽奖系统
    1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metahttp-equiv="X-UA-Compatible"content="IE=edge">7<metan......
  • DS | 一维数组 & 二维数组 & 对称矩阵 & 三角矩阵 & 三对角矩阵地址的计算
    一维数组的地址计算设每个元素的大小是\(size\)，首元素的地址是\(a[1]\)，则a[i]=a[1]+(i-1)*size若首元素的地址是\(a[0]\)则a[i]=a[0]+i*size二维数组的地......
  • 初识C语言（2）——数组、操作符、关键字
    ......
  • 用栈操作构建数组
    给你一个数组target和一个整数n。每次迭代，需要从 list={1,2,3...,n}中依次读取一个数字。请使用下述操作来构建目标数组target："Push"：从list中读取一个......
  • 零一背包问题，滚动数组实现
    其实最难理解的内循环，也就是j的循环。j的条件是大于w[i]，而w[i]则是当前第i个物品的重量，则j是一在从背包容量，向j-w[i]靠近。j-w[i]就是剩下来的空间，而这一波操作......
  • 校验数组是否为空
    校验数组是否为空constisNotEmpty=arr=>Array.isArray(arr)&&!!arr.length;isNotEmpty([1,2,3]);//Result:true回到顶部functiontopFunction(){d......
  • 对象数组：用于维护类的多个对象
    对象数组创建数组，来维护多个对象。将对象存到数组的语法：类名[]数组名=new类名[];例如：Studentstu1=newStudent();Studentstu2=newStudent();Studentstu3=new......
  • C语言习题：数组与选择排序、冒泡排序
    题目1.选择法排序。输入一个正整数n(1<n≤10)，再输入n个整数，将它们从大到小排序后输出。试编写相应程序。2.冒泡法排序。输入一个正整数n(1<n≤10)，再输入n个整数，将它们从......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99