聊聊javascript中的数组

2018-08-10 admin

定义数组

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

var arr=[];//定义空数组
var arr1=[100,'前端',true,undefined];//定义数组同时添加不同类型的元素

2.构造函数方式

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

var arr=new Array();//用new创造出一个空数组的构造函数
var arr1=new Array(100,'前端',true,undefined);//用new创造一个空数组的构造函数并添加元素

3.函数方式定义

var 数组名称 = Array(元素1,元素2,…); var 数组名称 = Array(length); length:number类型,表示数组的长度(存在元素的个数)

var arr=Array();//定义一个空数组
var arr1=Array(100,'前端',true);//定义一个空数组并添加元素
var arr2=Array(20);//定义一个数组并给它开20个位置

索引数组

表示数组中元素的位置使用数字值来表示的 数字值:表示元素的位置,也就是下标 数组的长度与元素的个数是一致的

var arr=[];//定义一个空数组
arr[0] = '大前端';
arr[1] = true;

关联数组

表示数组中元素的位置使用字符串来表示 注意关联数组的数组长度与元素个数不一致,length在关联数组中失效

var arr=[];//定义一个空数组
arr['name'] = '孙悟空';
arr['age'] = 500;
arr['job'] = '花果山美猴王';

稀疏数组

数组的长度与元素的个数不一致的,索引数组的位置允许不连续的,没有定义元素的位置默认为空

var arr=[];
arr[0] = '美猴王';
arr[3] = 500;
arr[5] = '花果山';

访问数组的元素

数组名称[索引值]

var arr=['大前端',100,null];//定义数组
console.log(arr[0]);//输出arr中0位置的内容
console.log(arr[5]);//访问arr中位置5的内容,虽然不存在,但是也不报错,返回undefined

数组的复制

var num=100;
var res=num;
console.log(num);//输出结果:100
console.log(res);//输出结果:100

num=200;
console.log(res);//输出结果:100
//复制变量里的值,不管原变量怎么改动值,都不影响复制它值的另一个变量的值

var arr=['大前端',100,true];
var arr1=arr;
console.log(arr);//输出结果:['大前端',100,true]
console.log(arr1);//输出结果:['大前端',100,true]

arr=[100];
console.log(arr);//输出结果:[100]
console.log(arr1);//输出结果:['大前端',100,true]

arr[0]=100;
console.log(arr);//输出结果:[100,100,true]
console.log(arr1);//输出结果:[100,100,true]
/*复制一个数组,如果被复制的原数组,只会把原数组中的存储地址位置赋值给另一个数组,
另一个数组会跟它一起通过地址位置连接到同一个存储位置,如果原数组修改自己里面的值
会影响另一个数组,如果原数组直接重新赋值一个新数组,则不影响另一个数组*/

数组的修改

//索引数组的修改
var arr=['大前端',100];
arr[0]='前端';

//关联数组的修改
var arr1=[];
arr1['name']='孙悟空';
arr1['age']=500;
arr1['name']='唐僧';

数组的删除

//索引数组的删除
var arr1=['大前端',true];
delete arr1[0];

//关联数组的删除
var arr2=[];
arr2['kecheng']='大前端';
arr2['name']='张三';
delete arr2['kecheng'];

循环遍历数组

var arr = ['前端', 200, true, undefined];
// while语句
var i = 0;
while (i < arr.length){
    console.log(arr[i]);
    i++;
}

// do...while语句
var i = 0;
do {
    console.log(arr[i]);
    i++;
} while (i < arr.length);

// for语句
for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

for…in语句

for语句:循环的开始和结束,都是由程序员决定的 for…in语句:循环只能从开始到结束

var arr = ['前端', 100, true, undefined];
/*
    for (var 变量 in 数组) {
        代码段
    }
    * 变量:得到的是数组的索引值
 */
for (var i in arr) {
    console.log(arr[i]);
}

// 关联数组的length属性为 0
var arr1 = [];
arr1['name'] = '张三';
arr1['age'] = 28;
arr1['job'] = '程序员';

// for..in语句可以循环遍历关联数组, for语句不行
for (var i in arr1) {
    console.log(arr1[i]);
}

// 稀疏数组 - 数组的长度与元素的个数不一致
var arr2 = [];
arr1['name'] = '李四';
arr1['age'] = 89;
arr1['job'] = '运动员';

// for..in语句循环遍历稀疏数组(直接得到有效元素值), for语句不行
for (var i in arr2) {
    console.log(arr2[i]);
}

二维数组

var arr = [];// 定义一个空数组
arr[0] = [苹果X,8999,2017];
arr[1] = [小米,999,2016];
arr[2] = [华为,4563,2017];

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/1190000015953473

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

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

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

文章标题:聊聊javascript中的数组

相关文章
html5+JavaScript教程-微信打飞机小游戏源码
js &#x2F;&#x2F; JavaScript Document var c = document.getElementById(&quot;dotu&quot;); var cxt = c.getContext(&quot;2d&q...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
回到顶部