JavaScript学习第四天笔记(数组)

2018-08-10 admin

概述

数组是什么

数组是值的有序集合。数组中的每个值叫做一个元素,而每个元素在数组中都右一个唯一的位置。这个位置用数字表示,叫做索引数组;用字符串表示,叫做关联数组。 JavaScript数组是无类型的;数组的元素可以是任何的类型(字符串,数字值,布尔值等),并且每个数组的不同元素可能是不同的类型。 JavaScript数组是动态的:根据需要,可以动态地向数组插入新的元素,或者从数组中删除指定的元素

一维数组

定义数组

1.使用字面量/直接量方式定义

语法:

 var 数组名称 = [元素1,元素2,...]

示例代码:

var arr1 = [];/*定义一个空数组*/
var arr2 = [100,'星矢',true];
console .log(arr1);/*输出结果为:[]*/
console .log(arr2);/*输出结果:[100,'星矢',true]*/

2.构造函数方式

语法:

 var 数组名称 = new Array (元素1,元素2,...);
 var 数组名称 = new Array (length);/*length是number类型 表示数组的长度(存在的元素个数)*/

示例代码:

var arr1 = new Array ();/*定义一个空数组*/
var arr2 = new Array (100,'星矢',true);
var arr3 = new Array (length);
console .log(arr1);  输出结果:[100,'星矢',true]*/
console .log(arr2);  /*输出结果:*/
console .log(arr3);  /*输出结果:[ <10 empty items> ]*/ 

3.函数方式定义

语法:

 var 数组名称 = Array(元素1,元素2,元素3...);
 var 数组名称 = Array(length); 

示例代码: var arr1 = Array(100,5,2,); var arr2 = Array(5); console .log(arr1);/输出结果:[ 100, 5, 10 ]/ console .log(arr2);/输出结果:[ <50 empty items> ]/

索引数组

概述

索引数组就是存储元素的位置使用数字值来表示,一般称之为下标或角标。数组的长度与元素的个数是一致的,数字是以0开头的。 示例代码如下:

var arr = [];
arr[0]='索引数组';
arr[1]=100;
arr[2]=true;
console .log(arr);/*输出结果为: ['索引数组',100,true]*/

关联数组

注意:关联数组的数组的长度与元素的个数不一致,原因是JavaScript的官方不支持关联数组。

var arr = [];/*定义一个空数组*/
arr['who']='谁啊'
arr['what']='啥啊'
arr['how']='咋的了'
console .log(arr);/*输出结果:[ who: '谁啊', what: '啥啊', how: '咋的了' ]*/

稀疏数组

索引数组的位置允许不连续的,没有定义的元素的位置默认为空(undefined),这样的数组叫做稀疏数组,数组的长度与元素的个数是不一样的。 示例代码:

var arr = [];
arr[0]='谁啊';
arr[5]='啥啊';
arr[6]='咋的了';
console .log(arr);
console .log(arr.length);/*输出的结果为:
                          [ '谁啊', <4 empty items>, '啥啊', '咋的了' ]
                          7
                         */

将稀疏数组进行处理,得到正常的索引数组

var newArr=[];
for (var i=0; i<arr.length; i++){
    if(arr[i] !== undefined){
        newArr.push(arr[i]);
    }
}
console .log(newArr);

访问数据的元素

示例代码如下:

// 定义数组的默认为索引数组
var arr = ['索引数组',100,null];
// 调用数组名称时,得到只是存储所有元素数据的集合
console.log(arr);
// 访问索引数组中的元素 -> 数组名称[索引值]
console.log(arr[0]);
// 如果访问了数组中未定义的位置的元素时 - 语法不抱错,结果为 undefined
console.log(arr[5]);
// 索引数组中索引值最大为 arr.length - 1

// JavaScript中的关联数组定义与访问都是没有问题的
var arr1 = [];
arr1['name'] = 'Chambers';
arr1['age'] = 23;
arr1['job'] = '学生';

console.log(arr1['name']);

数组的修改

示例代码:

var arr1 = [];
arr1[0] = '卧龙学苑';
arr1[1] = true;
// 关联数组
var arr2 = [];
arr2['name'] = '张无忌';
arr2['age'] = 19;
arr2['job'] = '教主';
// 通过数组的索引值找到对应元素的位置,再通过重新赋值的操作进行修改
arr1[0] = 100;
console.log(arr1);

arr2['name'] = '周芷若';2176491621
console.log(arr2);
// 如果索引值是新的,就是新增数组的元素操作
arr1[4] = '卧龙学苑';
console.log(arr1);

数组的删除

var arr1 = [];
arr1[0] = '卧龙学苑';
arr1[1] = true;
// 关联数组
var arr2 = [];
arr2['name'] = '张无忌';
arr2['age'] = 19;
arr2['job'] = '教主';

/*
    使用 delete 运算符进行删除数组的元素
    * 注意 - 只是删除元素的数据内容,而对应的位置被保留 -> 稀疏数组
  */
delete arr1[0];
console.log(arr1);

循环遍历数组

var arr = ['卧龙学苑', 100, true, undefined];
for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

for…in语句

在ECMAScript5中新增了for…in语句 同样可用于遍历数组 for…in语句还可以用于遍历稀疏数组 循环的每次将一个有效元素返回 for语句: 循环的开始和结束 都是由程序员决定的 for…in语句: 循环只能从开始到结束

var arr = ['卧龙学苑', 100, true, undefined];
for (var i in arr) {
    console.log(arr[i]);
}

二维数组

什么是二维数组

数组是可以嵌套的,这就意味着数组可以作为一个元素被包含在另外一个数组里面,利用JS这个特点创建二维数组,即数组的数组。

var arr = [];// 定义一个空数组
arr[0] = [100,200,300];
arr[1] = [400,500,600];
arr[2] = [700,800,900];

// console.log(arr);
// 访问二维数组中的元素
var result = arr[0];
/*console.log(result[0]);

console.log(arr[0][0]);*/

// 循环遍历二维数组
for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
    for (var j=0; j<arr[i].length; j++) {
        console.log(arr[i][j]);
    }
}

原文链接:https://segmentfault.com/a/1190000015953192

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37666.html

文章标题:JavaScript学习第四天笔记(数组)

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
回到顶部