JavaScript学习总结(八)——JavaScript数组

转载自   JavaScript学习总结(八)——JavaScript数组

JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组、ArrayList、Hashtable等的超强综合体。

一、数组的声明

  常规方式声明:

    1、var arrName = new Array();//创建一个数组

    2、var arrName = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

    3、var arrName =new Array("孤傲苍狼","白虎神皇","灭世魔尊");//创建一个数组,并初始化数组的内容

  注意:虽然var arrName = new Array([size]);指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为2,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

  Array的简化声明

    1、普通数组初始化:var arr = [3, 5, 6, 8, 9];

范例1:

<script type="text/javascript">//JavaScript声明数组的四种方式var arr1 = new Array();//创建一个空数组arr1[0]="xdp";arr1[1]="gacl";var arr2 = new Array(2);//创建一个数组并指定长度为2arr2["name0"]="xdp";//arr2第一个元素arr2["name1"]="gacl";//arr2第二个元素arr2["name2"]="xtxd";//arr2第三个元素,arr2虽然在声明时指明了长度为2,但是还是可以添加超过其指明长度的元素var arr3 = new Array("孤傲苍狼","白虎神皇","灭世魔尊");//创建一个数组并初始化数组中的元素var arr4 = [1,true,"String"];//Array的简化声明document.write("遍历arr1中的元素:<br/>");for(var i in arr1) {document.write(arr1[i]+"<br/>");}document.write("-----------------------------------------------------------------------------<br/>");document.write("遍历arr2中的元素:<br/>");for(var i in arr2) {document.write("arr2[\""+i+"\"]="+arr2[i]+"<br/>");}document.write("-----------------------------------------------------------------------------<br/>");document.write("遍历arr3中的元素:<br/>");for(var i in arr3) {document.write(arr3[i]+"<br/>");}document.write("-----------------------------------------------------------------------------<br/>");document.write("遍历arr4中的元素:<br/>");for(var i in arr4) {document.write(arr4[i]+"<br/>");}</script>

运行结果:

  

范例2:

<script type="text/javascript">var names = new Array();//普通方式声明数组,不需要指明数组的长度names[0] = "孤傲苍狼";names[1] = "白虎神皇";names[2] = "灭世魔尊";for (var i = 0; i < names.length; i++) {document.write("names["+i+"] = "+names[i]);document.write("<br/>");}var pinyins = new Array();pinyins["人"] = "ren";pinyins["口"] = "kou";pinyins["手"] = "shou";document.write("pinyins[\"人\"] = "+pinyins["人"]);document.write("<br/>");document.write("pinyins.手 = "+pinyins.手);//像Hashtable、Dictionary那样用,而且像它们一样效率高。document.write("<br/>");//Array的简化声明var arr1 = [3, 5];//普通数组初始化for (var i = 0; i < arr1.length; i++) {document.write("arr1["+i+"] = "+arr1[i]);document.write("<br/>");}
</script>

运行结果:

  

二、数组练习

  Ferris写过一个数组的案例,以下就是他的案例代码,挺全的,思路也挺好!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组练习:各种数组方法的使用</title>
<style>
div{color:green;padding:10px 15px;margin:12px 0;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;word-wrap:break-word;}
</style>
<script type="text/javascript">
window.onload = function ()
{var aDiv = document.getElementsByTagName("div");var aInput = document.getElementsByTagName("input");var i = 0;var bS1 = bS2 = true;var aTmp = [];//删除/添加第一项aInput[0].onclick = function (){aTmp = getArray(aDiv[0].innerHTML);bS1 ?//删除第一项, shift()方法(aTmp.shift(), this.value = this.value.replace("删除","添加"), bS1 = false) ://添加第一项, unshift()方法(aTmp.unshift("January(1)"), this.value = this.value.replace("添加","删除"), bS1 = true);//输出aDiv[0].innerHTML = aTmp.join()};//删除/添加最后一项aInput[1].onclick = function (){aTmp = getArray(aDiv[0].innerHTML);bS2 ?//删除最后一项, pop()方法(aTmp.pop(), this.value = this.value.replace("删除","添加"), bS2 = false) ://添加最后一项, push()方法(aTmp.push("December(12)"), this.value = this.value.replace("添加","删除"), bS2 = true);//输出aDiv[0].innerHTML = aTmp.join()};//复制, concat()方法aInput[2].onclick = function (){aTmp = getArray(aDiv[1].innerHTML);//输出aDiv[1].innerHTML = aTmp.concat(aTmp).toString().replace(/\s/g,"")};//还原, 利用数组的 length 特点aInput[3].onclick = function (){aTmp = getArray(aDiv[1].innerHTML);//设置数组长度aTmp.length = 10;//输出aDiv[1].innerHTML = aTmp.join()};//第三组数据还原aInput[4].onclick = function (){aTmp = ["red","green","blue","white","yellow","black","brown"];//输出aDiv[2].innerHTML = aTmp.join()};//删除前三项aInput[5].onclick = function (){aTmp = getArray(aDiv[2].innerHTML);//删除, 0开始, 删除3个aTmp.splice(0, 3);    //输出aDiv[2].innerHTML = aTmp.join()};//删除第二至三项aInput[6].onclick = function (){aTmp = getArray(aDiv[2].innerHTML);//删除, 2开始, 删除2个aTmp.splice(1, 2);    //输出aDiv[2].innerHTML = aTmp.join()};//在第二顶后插入"orange", "purple"aInput[7].onclick = function (){aTmp = getArray(aDiv[2].innerHTML);//插入, 2开始, 插入"orange", "purple"aTmp.splice(1, 0, "orange", "purple");    //输出aDiv[2].innerHTML = aTmp.join()};//替换第二项和第三项aInput[8].onclick = function (){aTmp = getArray(aDiv[2].innerHTML);//插入, 2开始替换aTmp.splice(1, 2, "#009900", "#0000ff");    //输出aDiv[2].innerHTML = aTmp.join()};//将div中的内容转为数组//str    div对象function getArray(str){aTmp.length = 0;str = str.split(",");for (var i in str)aTmp.push(str[i]);return aTmp}
}
</script>
</head>
<body>
<div>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</div>
<input value="删除January(1)" type="button">
<input value="删除December(12)" type="button">
<div>0,1,2,3,4,5,6,7,8,9</div>
<input value="复制" type="button">
<input value="还原" type="button">
<div>red,green,blue,white,yellow,black,brown</div>
<input value="还原" type="button">
<input value="删除前三项" type="button">
<input value="删除第二至三项" type="button">
<input value="在第二项后插入(orange, purple)" type="button">
<input value="替换第二项和第三项" type="button"></body></html>

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/326752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

命令点无效怎么处理_CAD执行修改命令,你试过重复选择对象吗?

你在执行命令的时候&#xff0c;是习惯先选择对象还是之后才选择对象的呢&#xff1f;不知道细心的你有没有发觉&#xff0c;明明已经先选择对象了才执行命令&#xff0c;为什么之后还要重复选择对象&#xff1f;这里可以分几种情况来讨论一下。CAD版本&#xff1a;中望CAD 202…

gson转对象

gson转对象 Gson 中对象类型的相互转换 最近使用Gson来处理了json串&#xff0c;使用了一些常用的方法&#xff0c;为加深印象&#xff0c;因此记录下来 package JsonObjectDemo;import com.google.gson.*; import com.google.gson.reflect.TypeToken;import java.util.Array…

一起脱去小程序的外套和内衣 - 微信小程序架构解析

作者介绍&#xff1a; 渠宏伟&#xff0c;腾讯高级工程师&#xff0c;从事Web前端开发5年&#xff0c;先后负责企鹅电竞、腾讯视频VIP、腾讯OA开发框架、腾讯微信HR助手等项目。对Web前端架构、.NET架构有丰富的经验。 | 导语 微信小程序的公测掀起了学习小程序开发的浪潮&…

基数排序+速度测试

package com.atguigu.sort;import java.text.SimpleDateFormat; import java.util.Arrays; import java.util.Date;/*** 创建人 wdl* 创建时间 2021/3/22* 描述*/ public class RadixSort {public static void main(String[] args) {//53, 3, 542, 748, 14, 214 // int …

ssh(Spring+Spring mvc+hibernate)——DeptServiceImpl.java

/** * Title: DeptServiceImpl.java * Package org.service.impl * Description: TODO该方法的主要作用&#xff1a; * author A18ccms A18ccms_gmail_com * date 2017-11-21 上午10:08:50 * version V1.0 */ package org.service.impl;import java.io.Serializable; imp…

JavaScript学习总结(九)——Javascript面向(基于)对象编程

转载自 JavaScript学习总结(九)——Javascript面向(基于)对象编程 一、澄清概念 1.JS中"基于对象面向对象" 2.JS中没有类(Class)&#xff0c;但是它取了一个新的名字叫“原型对象”&#xff0c;因此"类原型对象" 二、类(原型对象)和对象(实例)的区别与联…

杭州驾照驾驶证更换

1.去杭州市和睦医院体检 体检费15元 做个测试眼睛度数的 2.去杭州车管所 换证 排队大约20分钟 要带一张白底照片 也可以现场有自助拍照的 弄好之后大约再等 20分钟 可以拿到证件 其他 可以去xx邮政的 不过不是现场拿证 要过7个工作日 会邮寄过来

ssh(Spring+Spring mvc+hibernate)——EmpServiceImpl.java

/** * Title: EmpServiceImpl.java * Package org.service.impl * Description: TODO该方法的主要作用&#xff1a; * author A18ccms A18ccms_gmail_com * date 2017-11-21 上午10:19:41 * version V1.0 */ package org.service.impl;import java.io.Serializable; impo…

将Springboot项目放在服务器上一直运行

nohup java -jar hz-sms-0.0.1-SNAPSHOT.jar >/www/wwwroot/...-0.0.1-SNAPSHOT.out 2>&1 &

迁移数据库到SQL on Linux Docker

问题引入 前一篇文章&#xff0c;菜鸟找到了SQL on Linux Docker容器销毁后&#xff0c;容器中的数据库文件可以得以保留的方法&#xff0c;老鸟非常开心。所以&#xff0c;今天又提出了新的问题&#xff1a;“鸟儿&#xff0c;如果我想把我的数据库从SQL on Windows迁移到SQL …

Spring IoC 容器

转载自 Spring IoC 容器 IoC 容器 Spring 容器是 Spring 框架的核心。容器将创建对象&#xff0c;把它们连接在一起&#xff0c;配置它们&#xff0c;并管理他们的整个生命周期从创建到销毁。Spring 容器使用依赖注入&#xff08;DI&#xff09;来管理组成一个应用程序的组…

keyshot卡住了还能保存吗_相机希望你知道的13件事 keyshot相机切换事件

一次我去我学校的球场看足球比赛&#xff0c;遇见一对父母&#xff0c;他们在为自己的孩子拍摄&#xff0c;全程用自动挡&#xff0c;还对着几百米远奔跑的儿童开闪光灯!老实说作为一名严肃的摄影爱好者我有深深的强迫症&#xff0c;于是忍不住就上去跟他们聊开手把手教拍摄技巧…

mybatis-plus le ge 记录

mybatis-plus le ge 记录_LazyTing的博客-CSDN博客 出异常源代码 this.baseMapper.selectList(new QueryWrapper<PersonnelRoleDO>().lambda().eq(PersonnelRoleDO::getTenantId, tenantId).eq(PersonnelRoleDO::getPersonnelCode, personnelCode).ge(PersonnelRoleDO::g…

ssh(Spring+Spring mvc+hibernate)——applicationContext.xml

<?xml version"1.0" encoding"UTF-8"?> <beansxmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns:p"http://www.springframework.org/schema/p"xm…

Spring Beans 自动装配

转载自 Spring Beans 自动装配 Beans 自动装配 你已经学会如何使用<bean>元素来声明 bean 和通过使用 XML 配置文件中的<constructor-arg>和<property>元素来注入 。 Spring 容器可以在不使用<constructor-arg>和<property> 元素的情况下自动…

字段缺失_区分Protobuf 3中缺失值和默认值

来自公众号&#xff1a;新世界杂货铺这两天翻了翻以前的项目&#xff0c;发现不同项目中关于Protobuf 3缺失值和默认值的区分居然有好几种实现。今天笔者冷饭新炒&#xff0c;结合项目中的实现以及切身经验共总结出如下六种方案。增加标识字段众所周知&#xff0c;在Go中数字类…

当初怎么就入了VS的坑

使用Turbo C和Turbo Pascal开始学习编程貌似也是一代人的集体记忆。这方面我也没什么忌讳&#xff0c;毕竟Borland Turbo C在九十年代末的PC上面还是一个运行效率不错的开发工具。然而启蒙老师的水平限制&#xff0c;那个时候所学习的编写和调试技术都不过关&#xff0c;一个超…

ssh(Spring+Spring mvc+hibernate)——hibernate.cfg.xml

<?xml version1.0 encodingUTF-8?> <!DOCTYPE hibernate-configuration PUBLIC"-//Hibernate/Hibernate Configuration DTD 3.0//EN""http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd"><!-- Generated by MyEclipse H…

生成赫夫曼编码表

package com.atguigu.huffmancode;import com.sun.org.glassfish.external.statistics.CountStatistic; import com.sun.org.glassfish.external.statistics.StringStatistic;import java.util.*;/*** 创建人 wdl* 创建时间 2021/3/27* 描述*/ public class HuffmanCode {publi…

Mysql截取字段中 用逗号分割 省市县镇街道社区小区

Mysql截取字段中 用逗号分割 省市县镇街道社区小区 select id , name, substring_index(name,,,0) as province0, substring_index(name,,,1) as province1, substring_index(name,,,2) as province2, substring_index(name,,,3) as province3, substring_index(name,,,4) as…