【javascript高级教程】JavaScript Array(数组) 对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
创建数组, 为其赋值:
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据(例如:车名字),存在单独变量如下所示:
var car1="Saab";
var car2="Volvo";
var car3="BMW";
然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!
最好的方法就是用数组。
数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。
创建一个数组
创建一个数组,有三种方法。
下面的代码定义了一个名为 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"];
访问数组
通过指定数组名以及索引号码,你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值:
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";
在一个数组中你可以有不同的对象
所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
因此,你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组:
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
数组方法和属性
使用数组对象预定义属性和方法:
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
合并两个数组
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
document.write(children);//Cecilie,Lone,Emil,Tobias,Linus
合并三个数组
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);//Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone
用数组的元素组成字符串
<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();
}
删除数组最后一个元素
<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;
}
数组的末尾添加新的元素
<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;
}
将一个数组的元素翻转排序
<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;
}
删除数组的第一个元素
<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;
}
从一个数组中选择元素
<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;
}
排序
<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;
}
<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;
}<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;
}
在数组的第二个位置添加一个元素
<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;
}
转换数组到字符串
<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;
}
在数组的开头添加新元素
<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;
}
【javascript高级教程】JavaScript Array(数组) 对象相关推荐
- 尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言 这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
- JavaScript 常用内置对象(字符串属性、Math对象、Array数组对象)
1.字符串属性 <script> var test_var = "I Iove you"; console.log(test_var.charAt(3)) //char ...
- 菜鸟教程 之 JavaScript 高级教程
From:https://www.runoob.com/js/js-objects.html JavaScript 对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... ( ...
- JavaScript强化教程——JavaScript Math(算数) 对象
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- JavaScript Math(算数 ...
- 视频教程-ThreeJS 3D高级教程-JavaScript
ThreeJS 3D高级教程 网名:海洋,CSDN社区讲师,3D游戏引擎开发者,IT讲师,计算机图形学方向研究生,曾在浙江大学CAD&CG;国家重点实验室学习.从事IT行业15年,主导或参与了 ...
- JavaScript高级 |彻底搞懂原型对象
本文已收录于专栏 ⭐️ <JavaScript>⭐️ 学习指南: 对象的原型 函数的原型 new操作符 将方法放原型里 constructor 总结梳理 原型对象 内存表现 完结散花 参考 ...
- for 循环 和 Array 数组对象
博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...
- JavaScript强化教程 —— JavaScript 总结
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- JavaScript 总结 本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使 ...
- C语言高级教程-C语言数组(六):变长数组
C语言高级教程-C语言数组(六):变长数组 一.本文的编译环境 二.一维数组在执行期间确定长度 三.二维数组在执行期间确定长度 四.一维变长数组实例 五.完整程序 5.1 Main.h 文件程序 5. ...
- 微信小程序开发教程之Array数组对象
最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象. 微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容. Array,又称作数组对象我们通 ...
最新文章
- android模糊后面视频,在安卓手机上怎么制作中间是横视频上下是模糊效果的竖视频?手机视频短片制作...
- 在conda环境中pip使用清华源秒速安装skimage、opencv、tensorflow、pytorch1.2.0等p
- 对Python匿名函数和@property小小理解,希望对你学习也有帮助
- 浅谈EntityFramework框架的使用
- Winform DataGridView数据绑定问题
- 突发!哈佛要求本科生5天内搬走,国际学生恐无家可归
- Knowledge Graph - NLP
- 键盘按键用硅胶材料更好
- 欧派caxa设计软件_欧派与数码大方携手,CAXA智能家居设计软件引领家居变革
- CC3200学习——blinky资料
- 【beef工具-01】神器beef的安装与简介
- 八、RISC-V SoC外设——GPIO接口 代码讲解
- 从头开始搞懂 MySQL(07)为什么同一条 SQL 时快时慢
- windows环境下 ipfs的搭建与使用
- linux .so文件能解压吗,linux系统中rar解压文件安装和使用详解
- 偏差,残差,方差在机器学习中的区别
- office2010 word发布博客 博客园
- 2021InfoComm|钉钉会议 Rooms 的 “全场景“ 智能化解决方案
- 数据库概念mongodb使用数据库CLUD操作
- 查看交换机的MAC地址
热门文章
- 【渝粤题库】陕西师范大学200221 中国思想史 作业(高起专)
- 【渝粤教育】广东开放大学 文化产业项目案例分析 形成性考核 (51)
- 【渝粤题库】国家开放大学2021春2748动物常见病防治题目
- 高可用mysql笔记_MySQL笔记-高可用方案
- 如何用html5编写彩色同心圆,HTML5 canvas 同心圆动画
- 通信调制体制设计之64QAM性能分析MATLAB仿真及代码
- 提高Java表达能力!不落伍一起掌握Java8中Lambda表达式、函数式接口及方法构造器数组引用
- Java常用类(2)--日期时间相关类Date、Calendar、LocalDateTime、Instant全面
- 信号与系统 chapter10 系统的初值问题与系数匹配法
- Activity的LaunchMode和taskAffinity