从屌丝到架构师的飞越(JavaScript篇)-数组

一、介绍

这节课呢,我们来了解的是JavaScript 创建和访问数组。

数组我们在数据类型部分已经给大家简单的介绍了一下,这节课呢我们就带领大家来详细的了解一下数组的创建和访问。

数组对象的作用是:使用单独的变量名来存储一系列的值。

二、知识点介绍

1、什么是数组

2、访问数组

3、数组方法和属性

4、Array对象属性

附:更多实例

三、上课对应视频的说明文档

在线实例

创建数组, 为其赋值:

实例:

var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";

页面底部你可以找到更多的实例。

1、什么是数组

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据(例如:车名字),存在单独变量如下所示:

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"];

2、访问数组

通过指定数组名以及索引号码,你可以访问某个特定的元素。

以下实例可以访问myCars数组的第一个值:

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

[0] 是数组的第一个元素。[1] 是数组的第二个元素。

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此,你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;

myArray[1]=myFunction;

myArray[2]=myCars;

3、数组方法和属性

使用数组对象预定义属性和方法

var x=myCars.length            // myCars 中元素的数量

var y=myCars.indexOf("Volvo")  // "Volvo" 值的索引值

创建新方法:

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

实例:

创建一个新的方法: Array.prototype.myUcase=function(){

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

this[i]=this[i].toUpperCase();

}

}

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。

4、Array对象属性

Array对象用于在变量中存储多个值:

var cars = ["Saab", "Volvo", "BMW"];

第一个数组元素的索引值为0,第二个为1,以此类推。

数组属性

属性 描述

constructor

返回创建数组对象的原型函数。

length

设置或返回数组元素的个数。

prototype

允许你向数组对象添加属性或方法。

Array对象属性

方法 描述

concat()

连接两个或更多的数组,并返回结果。

copyWithin()

从数组的指定位置拷贝元素到数组的另一个指定位置中。

entries()

返回数组的可迭代对象。

every()

检测数值元素的每个元素是否都符合条件。

fill()

使用一个固定值来填充数组。

filter()

检测数值元素,并返回符合条件所有元素的数组。

find()

返回符合传入测试(函数)条件的数组元素。

findIndex()

返回符合传入测试(函数)条件的数组元素索引。

forEach()

数组每个元素都执行一次回调函数。

from()

通过给定的对象中创建一个数组。

includes()

判断一个数组是否包含一个指定的值。

indexOf()

搜索数组中的元素,并返回它所在的位置。

isArray()

判断对象是否为数组。

join()

把数组的所有元素放入一个字符串。

keys()

返回数组的可迭代对象,包含原始数组的键(key)。

lastIndexOf()

返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

map()

通过指定函数处理数组的每个元素,并返回处理后的数组。

pop()

删除数组的最后一个元素并返回删除的元素。

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reduce()

将数组元素计算为一个值(从左到右)。

reduceRight()

将数组元素计算为一个值(从右到左)。

reverse()

反转数组的元素顺序。

shift()

删除并返回数组的第一个元素。

slice()

选取数组的的一部分,并返回一个新数组。

some()

检测数组元素中是否有元素符合指定条件。

sort()

对数组的元素进行排序。

splice()

从数组中添加或删除元素。

toString()

把数组转换为字符串,并返回结果。

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()

返回数组对象的原始值。

附:更多实例

1)合并三个数组 - concat()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<script>

var parents = ["Jani", "Tove"];

var brothers = ["Stale", "Kai Jim", "Borge"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(brothers, children);

document.write(family);

</script>

</body>

</html>

2)用数组的元素组成字符串 - join()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<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();

}

</script>

</body>

</html>

3)删除数组的最后一个元素 - pop()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<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;

}

</script>

</body>

</html>

4)数组的末尾添加新的元素 - push()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<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;

}

</script>

</body>

</html>

5)在数组的第2位置添加一个元素 - splice()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<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;

}

</script>

</body>

</html>

unshift():在数组的第一个位置添加元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。

1 var arr = ['a', 'b', 'c'];2 arr.unshift('x');        // 43 console.log(arr);        // ['x', 'a', 'b', 'c']

shift():删除数组的第一个元素,并返回该元素。注意,该方法会改变原数组。

1 var arr = ['a', 'b', 'c'];2 arr.shift()        // 'a'3 console.log(arr)    // ['b', 'c']   

shift()方法还可以遍历并清空一个数组。

1 var list = [1, 2, 3, 4, 5, 6];2 var item;3 4 while (item = list.shift()) {5  console.log(item);6 }7 8 console.log(list);    // []

valueOf():返回数组的本身。

1 var arr = [1, 2, 3];2 arr.valueOf()    // [1, 2, 3]   

indexOf():返回指定元素在数组中出现的位置,如果没有出现则返回-1。

1 var arr = ['a', 'b', 'c'];2 3 arr.indexOf('b') // 14 arr.indexOf('y') // -1

indexOf方法还可以接受第二个参数,表示搜索的开始位置。

1 ['a', 'b', 'c'].indexOf('a', 1)    // -1

上面代码从1号位置开始搜索字符a,结果为-1,表示没有搜索到。

toString():返回数组的字符串形式。

1 var arr = [1, 2, 3];2 arr.toString()    // "1,2,3"3 4 var arr = [1, 2, 3, [4, 5, 6]];5 arr.toString()    // "1,2,3,4,5,6"

reverse():用于颠倒数组中元素的顺序,返回改变后的数组。注意,该方法将改变原数组。

1 var arr = ['a', 'b', 'c'];2 3 arr.reverse() // ["c", "b", "a"]4 console.log(arr) // ["c", "b", "a"]

slice():用于截取原数组的一部分,返回一个新数组,原数组不变。

slice(start,end)它的第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。

1 var arr = ['a', 'b', 'c']; 2  3 arr.slice(0)        // ["a", "b", "c"] 4 arr.slice(1)        // ["b", "c"] 5 arr.slice(1, 2)    // ["b"] 6 arr.slice(2, 6)    // ["c"] 7 arr.slice()          // ["a", "b", "c"]    无参数返回原数组 8  9 arr.slice(-2)          // ["b", "c"]    参数是负数,则表示倒数计算的位置10 arr.slice(-2, -1)    // ["b"]

sort():对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。

1 ['d', 'c', 'b', 'a'].sort() 2 // ['a', 'b', 'c', 'd'] 3  4 [4, 3, 2, 1].sort() 5 // [1, 2, 3, 4] 6  7 [11, 101].sort() 8 // [101, 11] 9 10 [10111, 1101, 111].sort()11 // [10111, 1101, 111]

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容