数组

数组Array

引入：

我们知道一个变量存储一个值，一个变量是一个容器，如果给很多容器中都放入商品的话，我们就可以开超市了。我们都去超市买过东西，超市的东西都整齐的摆放在货架上，而不是所有的东西都堆在一起。为什么呢？因为便于管理商品。咱们代码中也有一个货架，叫数组，为了便于管理多个值的。

假设，我们现在要存一个班的所有学生姓名，如果每个姓名都存在一个变量中，就跟所有商品随便的堆在一起一样，不好管理，所以我们会存到数组中。

数组概念：

内存中的多个容器排列起来，组成的一个大容器。

数组中的每个小容器都有编号，第一个是0，第二个是1，。。。

咱们把编号叫做下标，来区分每个小容器。

数组示意图

数组是计算机空间中一段有序的连续空间，使用一个变量名表示。

创建数组：

语法一：

var arr=[];# 创建了一个空数组

var arr=["张三","李四","王五"];# 创建了一个数组，里面存了三个姓名

语法二：

var arr=new Array();# 创建了一个空数组

var arr=new Array(3);# 创建了一个长度为3的数组

var arr=new Array("张三","李四","王五");# 创建了一个数组，里面存了三个姓名

使用构造函数的方式创建数组的时候，如果其中只有一个值，如果这个值是整数，表示数组的长度，否则表示这个数组中有一个元素，就是这个值。

数组中可以存放任意类型的值，但实际情况中，我们习惯将同类型的数据存到一个数组中。

数组操作

访问数组中的元素：数组[下标]

例：

vararr=["张三","李四","王五"];

console.log(arr[1]);// 李四

查看数组中元素的个数 - 数组的长度：数组.length

例：

vararr=['张三',"李四","王五","赵六"];

vararr1=[1,2,3,4,5,6];

console.log(arr.length);// 4

console.log(arr1.length);// 6

使用说明：数组的长度可以访问，也可以赋值，用来修改数组的长度。

例：

vararr=['张三',"李四","王五","赵六"];

console.log(arr);// (4) ["张三", "李四", "王五", "赵六"]

console.log(arr.length);// 4

arr.length=6;

console.log(arr);// (6) ["张三", "李四", "王五", "赵六", empty × 2] 后面的表示还有两个空元素

console.log(arr.length);// 6

给数组添加元素：数组[下标] = 值

例：

vararr=["张三","李四"];

arr[2]="王五";

console.log(arr);// (3) ["张三", "李四", "王五"]

arr[10]="赵六";

console.log(arr);// (11) ["张三", "李四", "王五", empty × 7, "赵六"] 中间还有7个空元素

修改数组中元素的值：数组[下标] = 值

例：

vararr=["张三","李四"];

arr[0]="王五";

console.log(arr);// (2) ["王五", "李四"]

使用说明：如果下标是已经存在的，那赋值操作就是修改数组元素的值，如果下标是不存在，那赋值操作就给数组添加元素。

清空数组：

vararr=[1,2,3];

arr=[];

console.log(arr);// []

// 或者

arr.length=0;

console.log(arr);// []

数组总结：

数组的第一个元素的下标永远是0；

数组的最后一个元素的下标永远是数组的长度-1

遍历数组：

如果要将数组中的所有元素都输出，操作如下：

vararr=["张三","李四","王五","赵六"];

console.log(arr[0]);// 张三

console.log(arr[1]);// 李四

console.log(arr[2]);// 王五

console.log(arr[3]);// 赵六

从上面输出的代码中可以看出，多次输出是在进行重复动作，并且多次重复之间是有规律可循的，所以可以使用循环进行这个重复动作：

vararr=["张三","李四","王五","赵六"];

/*

for(var i=0;i<4;i++){

console.log(arr[i]);

}

*/

// 条件中的4写死以后，如果数组再添加了新元素，就没办法遍历了，所以将4换成数组的长度。

// 循环中的条件执行5次，也就是我们需要求5次数组的长度，所以将求数组长度的操作放到循环外面可以提高执行效率

varlength=arr.length;

for(vari=0;i<length;i++){

console.log(arr[i]);

}

结果：

循环输出数组中的每个值

这种使用循环将数组中每个元素输出的操作叫做数组的遍历 - 每个元素都经历一次

练习：

例：利用for循环求数字数组中所有元素的和

vararr=[10,20,30,40,50];

varsum=0;

for(vari=0;i<arr.length;i++){

sum+=arr[i];

}

alert(sum);

例：利用for in 来遍历的数组

vararr=[10,20,30,40,50];

arr[10]=80;

for(variinarr) {

console.log(arr[i]);// 10 20 30 40 50 80 不包括中间的empty

}

注意：for in不会遍历空元素

例：利用for in 求数组中所有元素的和

vararr=[10,20,30,40,50];

varsum=0;

for(variinarr) {

sum+=arr[i];

}

alert(sum);

有一个数组，具体内容如下：

vararr=[

"越南被曝咖啡造假：咖啡粉里掺加电池芯",

"抗日神剧被当教材：机密文件居然有女优名字",

"王俊凯任联合国大使：系最年轻的联合国大使",

"行人闯红灯遭水喷目前还在测试阶段",

"68条鱼估价超600万什么鱼要这么贵？"

]

利用循环使用js做出如下图效果：

效果图（参考网址：http://news.szhk.com/）

代码：

vararr=[

"越南被曝咖啡造假：咖啡粉里掺加电池芯",

"抗日神剧被当教材：机密文件居然有女优名字",

"王俊凯任联合国大使：系最年轻的联合国大使",

"行人闯红灯遭水喷目前还在测试阶段",

"68条鱼估价超600万什么鱼要这么贵？"

];

document.write("<ul>");

/*

for(var i=0;i<arr.length;i++){

document.write("

");

document.write(arr[i]);

document.write("");

}

*/

for(vari=0;i<arr.length;i++){

document.write("<li>"+arr[i]+"</li>");

}

document.write("</ul>")

例：求数组中的最大值：

vararr=[1,9,3,6,8,5,4,7,2,12];

// 求出最大值

varlength=arr.length;

varmax=arr[0];

for(vari=1;i<length;i++){

if(max<arr[i]){

max=arr[i];

}

}

console.log(max);

把1~100这个100个数字存到数组中

思考：数组中的类型是没有限制的，那么数组中可以存储数组吗？

二维数组

vararr=[

"Jack",

"Rose",

["王宝强","马蓉"],

["贾乃亮","李小璐"]

];

console.log(arr);

console.log(arr[2]);

console.log(arr[2][1]);

效果：

效果图

包含数组的数组，叫做多维数组，我们用的最多的就是二维数组。

利用二维数组加载网页内容：

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

</head>

<style>

*{

padding:0;

margin:0;

list-style:none;

}

.container{

width:1200px;

margin:auto;

}

li{

float:left;

width:200px;

margin:20px;

border:1pxsolid#ccc;

}

liimg{

width:100%;

height:100%;

}

</style>

<body>

</body>

<scripttype="text/javascript">

vararr=[

{ image_url:"http://www.leawo.cn/attachment/201404/16/1433365_1397624557Bz7w.jpg",

introudce:"这是小米手机，很好用，很便宜",

price:"￥20元",

   },

   {

image_url:"http://imgfs.oppo.cn/uploads/thread/attachment/2017/10/04/15070507024870.jpg",

introudce:"这是华硕电脑，好用",

price:"￥60元",

   },

   {

image_url:"http://www.cphoto.com.cn/dz/attachments/month_1204/12042913298163d0a39dcf0c11.jpg",

introudce:"华为手机，死贵，摄像头好",

price:"￥88.8元",

   },

   {

image_url:"http://hbimg.b0.upaiyun.com/11eb40ac428374964b24948a000ff1b2a18d2e518afa4-v4kiLD_fw658",

introudce:"苹果手机，垃圾",

price:"￥99.9元",

   },

   {

image_url:"http://img3.imgtn.bdimg.com/it/u=671482448,2533267591&fm=26&gp=0.jpg",

introudce:"这是女朋友，漂亮",

price:"￥30元",

   },

   ];

document.write("<div class='container'>");

document.write("<ul>");

for(vari=0;i<arr.length;i++){

document.write("<li>");

document.write("<img src='"+arr[i].image_url+"'>");

document.write("<div>"+arr[i].introudce+"</div>");

document.write("<p>价格："+arr[i].price+"</p>");

document.write("</li>");

}

document.write("</ul>");

document.write("</div>");

</script>

</html>

基础类型和引用类型

简单类型传递值，复杂类型传递地址

简单数据类型：number、string、boolean、undefined、null

复杂数据类型：Array、function, Object

其实函数也是一种类型：

functionabc(){}

console.log(typeofabc);// function

值传递时将内存空间的值直接改变

代码：

varnum=11;

varnum1=num;

num=20;

console.log(num);

console.log(num1);

过程：

值传递过程

引用传递时将值改变了，但是地址没有改变

代码：

varobj={

name:"zs",

age:18

}

varobj1=obj;

obj1.name="ls";

console.log(obj.name);

console.log(obj1.name);

过程：

引用传递过程

练习：

//1.

functionfn(a,b) {

// 相当于

// var a = 10;

// var b = 20;

// 函数的参数其实就是函数内部的局部变量

a=a+1;

b=b+1;

console.log(a);

console.log(b);

}

varx=10;

vary=20;

fn(x,y);

console.log(x);

console.log(y);

//2.

varp={

name:"zs",

age:18

}

functionfn(person) {

person.name='ls';

console.log(person.name);

}

fn(p);

console.log(p.name);

//3.

functionPerson(name,age,salary) {

this.name=name;

this.age=age;

this.salary=salary;

}

functionf1(person) {

person.name="ls";

console.log(person.name);

}

varp=newPerson("zs",18,1000);//创建一个新对象

console.log(p.name);//

f1(p);

console.log(p.name);//

结论：简单类型存储的是值本身，复杂类型存储的是地址，引入如果把第一个对象赋值给另一个变量，此时两个变量会指向同一个对象。

数组操作的方法

splice : 数组任意地方删除或者添加元素

vararr=['zs','ls','ww','zl','xmg'];

// 原来的数组影响

//- splice(start, deletedCount) 删除元素

// - start 开始

// - deletedCount 删除个数

//- splice(start, deletedCount , item) 删除+添加, 第三个参数是在原来删除的位置上新加几个元素

//- 特殊 :

// splice(start, 0 , item) 就是在某个位置新加元素

数组的增删操作

vararr=['zs','ls','ww']

array.push(元素);//从后面添加元素，返回新数组的length

array.pop();//从数组的后面删除元素，返回删除的那个元素

array.unshift(元素);//从数组的前面的添加元素，返回新数组的长度

array.shift();//从数组的最前面删除元素，返回删除的那个元素

//总结:

//1. shift 在前面 ,所以处理数组前面的

//2. p+ 在后面,所以是处理后面的

//3. unshift 比 shift 多个un,,所以就是加

//4. 添加的都是返回长度

//5. 删除的都是返回删除的元素

//6. 添加要说明添加什元素,,删除直接删除

//练习1

vararr=["刘备"];

//添加数据后变成：["赵云","马超","刘备","关羽","张飞"]

//删除数据后变成：["关羽","张飞"]

//练习2

vararr=["赵云","马超","刘备","关羽","张飞"];

//把数组的最后一个元素变成数组的第一个元素

//把数组的第一个元素变成数组的最后一个元素

数组的拼接

//concat：数组合并，不会影响原来的数组，会返回一个新数组。

varnewArray=array.concat(array2);

数组的排序

array.sort();//数组的排序，默认按照字母/首字符顺序排序 => 1 11 2 3

vararr1=['a','d','b','c'];

vararr2=[3,6,1,5,10,2,11];

//sort方法可以传递一个函数作为参数，这个参数用来控制数组如何进行排序

arr.sort(function(a,b){

//如果返回值>0,则交换位置

returna-b;

});

记忆:b比a高

数组的反转

array.reverse();//翻转数组

数组和字符串的转换

//语法：array.join(分隔符)

//作用：将数组的值拼接成字符串,并且返回字符串

vararr=[1,2,3,4,5];

arr.join();//不传参数，默认按【,】进行拼接

arr.join("");//按【"】进行拼接

arr.join("-");//按【-】进行拼接

//split:将字符串分割成数组（很常用）

//功能和数组的join正好相反。

varstr="张三,李四,王五";

vararr=str.split(",");

冒泡排序

相邻两个元素进行比较，将一个数组中的数字使用循环进行升序或降序的排列

// var arr = [1,2,3,4]; // arr = [4,3,2,1]

/*for(var i=0;i<3;i++){

if(arr[i]

var a = arr[i];

arr[i] = arr[i+1];

arr[i+1] = a;

}

// [2,1,3,4]

// [2,3,1,4]

// [2,3,4,1]

}

console.log(arr);

for(var i=0;i<3;i++){

if(arr[i]

var a = arr[i];

arr[i] = arr[i+1];

arr[i+1] = a;

}

// [3,2,4,1]

// [3,4,2,1]

// [3,4,2,1]

}

console.log(arr);

for(var i=0;i<3;i++){

if(arr[i]

var a = arr[i];

arr[i] = arr[i+1];

arr[i+1] = a;

}

// [4,3,2,1]

// [4,3,2,1]

// [4,3,2,1]

}

console.log(arr);*/

/* 冒泡排序 */

vararr=[1,2,3,4];

for(varj=0;j<3;j++){

for(vari=0;i<3;i++){

if(arr[i]<arr[i+1]){

vara=arr[i];

arr[i]=arr[i+1];

arr[i+1]=a;

}

}

}

console.log(arr);

冒泡排序示意图

选择排序

降序：先找最大值，排在最左边，再找第二大的值，往左边靠...，已经排好的，不再参与比较

vararr=[1,2,3,4];

// 让每个位置上的数都和其他位置上的数进行比较

// 第一次让arr[0]和所有其他位置上的数进行比较比较3次，将第一个位置的数确定下来

// 第二次让arr[1]和剩下所有位置上的数进行比较比较2次，将第二个位置的数确定下来

// 第三次让arr[2]和剩下所有位置上的数进行比较比较1次，将第三个位置的数确定下来

vararr=[1,2,3,4];

vartmp;

for(vari=0;i<arr.length-1;i++){

for(varj=i+1;j<arr.length;j++){

if(arr[i]<arr[j]){

tmp=arr[i];

arr[i]=arr[j];

arr[j]=tmp;

}

console.log(arr);

}

}

选择排序示意图

随机点名程序

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<style>

h1{

text-align:center;

   }

#box{

width:350px;

height:150px;

font-size:100px;

border:#abcdef5pxsolid;

line-height:150px;

margin:auto;

text-align:center;

   }

#btn{

display:block;

margin:0auto;

width:350px;

height:80px;

font-size:50px;

background:yellowgreen;

   }

</style>

</head>

<body>

<divid="box"></div>

<inputtype="button"value="开始"id="btn">

</body>

<scripttype="text/javascript">

// 定时器每隔多长时间做什么事情

// setInterval(function(){

// console.log(1);

// },1000);

// 随机数

// console.log(Math.random()); // >=0 <1的随机数

// console.log(parseInt(Math.random()*11));

vararr=["张三","李四","王五","赵六","孙七","周八","吴九","郑九"];

vartimerId;

btn.onclick=function(){

// 使用this代表触发当前事件的那个事件源

// input的值都使用value可以获取到

// 标签内容：innerText

if(this.value=="开始"){

this.value="停止";

timerId=setInterval(function(){

box.innerText=arr[parseInt(Math.random()*11)];

},30);

}else{

this.value="开始";

// 结束定时器 clearInterval(定时器的变量)

clearInterval(timerId);

}

}

</script>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,588评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,456评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,146评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,387评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,481评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,510评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,522评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,296评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,745评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,039评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,202评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,901评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,538评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,165评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,415评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,081评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,085评论 2赞 352

数组