JavaScript-数组

数组定义

var arr = [] 或者用var arr = new Array(数字)来创建一个空数组

定义带数据的数组:

var arr = ['张三','李四','王五','赵六']
或者用:
var arr = new Array('张三','李四','王五','赵六')

数组和对象不同,数组中是有排序的。这两种定义数组的方式,在定义带数据的数组时是基本一样的,但是在定义空数组时,前者定义的是一个全空的数组,后者则是按照你书写的数字的多少留出多少空的空间,也就是说前者的数组长度是0,后者是你填的数字。
例如:

<script>
    var arr = new Array(5);
    console.log(arr);
</script>

结果:


定义新数组

数组的几个细节:

  1. 数组可以存放的数据类型是没有限制的,可以存放任意数据类型的数据。
  2. 数组中小空间的编号,永远都是从0开始,一次向后递增的,数组中第一个小空间的编号,永远是0。
  3. 数组中最后一个小空间的编号,永远都是 数组中数据的个数-1。

数组的基本操作

1.检测数组中值的个数,可以用数组.length来实现

<script>
    var arr = ['a','b','c','d','abcd']
    console.log(arr.length)
</script>

2.访问数组中的元素:数组[下标]来实现

    var arr = ['a', 'b', 'c', 'd', 'abcd']
    console.log(arr[2]); //按照索引的数字 输出字符串c

同样的你也可以用这样的表达方式来实现数组值得输出:

   var arr = ['a', 'b', 'c', 'd', 'abcd']
   console.log(arr[arr.length - 1]); //按照索引的数字 输出字符串abcd

用长度-数字的方式输出。

3.添加和修改数组内元素

修改和添加都是用同样的代码来实现的:数组[下标] = 值,但是修改与添加不同的是,如果你写的下标是在原本数组长度-1之外的数字,那就是添加。
例如:

<script>
    var arr = ['a', 'b', 'c', 'd', 'abcd']
    arr[5] = '我是新的元素';
    console.log(arr);
</script>

如果写的数字比数组长度还要要大,那么数组会用空的元素来填充中间的空间直到你写的那个数值。
例如:

<script>
    var arr = ['a', 'b', 'c', 'd', 'abcd']
    arr[10] = '我是新的元素';
    console.log(arr);
</script>

则会显示如下:


空属性 empty

修改元素,则是数字小于数组长度,则新赋的值会覆盖原本的值:

<script>
    var arr = ['a', 'b', 'c', 'd', 'abcd']
    arr[3] = '我是新的元素';
    console.log(arr);
</script>

结果如下:


修改元素

4.删除元素

删除元素的方法有:1.删除元素delete 数组[下标]
例如:

    var arr = ['a', 'b', 'c', 'd', 'abcd']
    delete arr[3];
    console.log(arr);

但是,这一种方式只能删除,数组的某一索引所占有的值,并不能删除空间。被删除的值,会用空白填补(empty)。

删除元素.png

想要删除空间,或者扩展空间要用改变数组的长度的方法:

  1. 若改变的长度小于数组原本的长度,那么原本数组多出来的空间就会被删减。
    var arr = ['a', 'b', 'c', 'd', 'abcd']
    arr.length = 3;
    console.log(arr);

结果如下:


删除空间
  1. 而如果改变的长度是多于数组原本的长度,则会拓展空间,多出来的用空元素补上。
    var arr = ['a', 'b', 'c', 'd', 'abcd']
    arr.length = 10;
    console.log(arr);
加长

数组的遍历(重要)

利用循环输出数组中的每一个值:

var arr = ["张三","李四","王五","赵六"];
var length = arr.length;
for(var i=0;i<length;i++){ 
    console.log(arr[i]);
}

在对象中用的for in也可以用来遍历数组:

var arr = ["张三","李四","王五","赵六"];
for(var i in arr){ 
    console.log(arr[i]);
}

但是二者也有区别,前者在遍历空元素时会输出值undefined,而后者不会遍历空元素。
其次,在遍历下标时,for in 的输出是字符串,而for循环的输出是数字类型。(重要)

前者会输出undefined

后者不会遍历空元素

数组操作的基本方法

1.unshift --- 给数组开头添加一个或者多个元素,返回值为数组的新长度

语法:数组名字.unshift(要添加的元素,一个或者多个用逗号隔开)示例:

var arr = ['a', 'b', 'c'];
var res = arr.unshift(1,2,3);
console.log(arr);
console.log(res);
unshift方法

2.push --- 给数组的结尾添加一个或者多个元素,返回值为数组新长度

语法:数组名字.push(要添加的元素,一个或者多个用逗号隔开)示例:

var arr = ['a', 'b', 'c'];
var res = arr.push(1,2,3);
console.log(arr);
console.log(res);
push方法

3.shift --- 删除数组的第一个元素 ,返回值为被删掉的元素

语法:数组名字.shift()示例:

var arr = ['a', 'b', 'c'];
var res = arr.shift()
console.log(arr);
console.log(res);
shift方法

4.pop --- 删除数组最后一个元素 ,返回值为被删掉的元素

语法:数组名字.pop()

var arr = ['a', 'b', 'c'];
var res = arr.pop()
console.log(arr);
console.log(res);
pop方法

5.splice --- 对数组做增、删、改的操作(不需要返回值)

语法:数组名字.splice(要删除元素的开始下标,要删除的个数,要添加的元素一个或者多个用逗号隔开)

注意:要添加的元素可以不写,如果不写则是执行删除的操作,与delete不同它是直接删除空间而不是元素,会改变数组长度。
示例:

var arr = ['a', 'b', 'c','d','e','f'];
arr.splice(2,2,'我是新元素');//从c开始向后删除了两个元素,添加一个新元素
console.log(arr);
splice方法

6.concat --- 数组的拼接,返回值为拼接后的数组

语法:数组名字.concat(要拼接的数组名字一个或者多个用逗号隔开)
示例:

var arr = ['a', 'b', 'c','d','e','f'];
var brr = [1,2,3,4]
var crr = [true,function(){console.log(a);}]
console.log(arr.concat(brr));
console.log(arr.concat(brr,crr));
concat方法

7. sort - 将数组按照首位大小排序,返回值为排序后的数组

语法:数组名字.sort()示例:

var arr = [2,4,5,2,3,8,6,9,31,12,32,56,7];
console.log(arr.sort());
sort方法

8.reverse --- 将数组的元素排序反转,返回值为新排序的数组

语法:数组名字.reverse()示例:

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.reverse());
reverse方法

9.slice --- 截取数组,返回值为截取过后的新数组

语法:数组名字.slice(开始的下标,结束的下标)注意:结束下标所对应的元素不会被截取到新的数组当中,所以在截取时应该写截取目标元素的下标+1作为结束的额下标

示例:

var arr = [1,2,3,4,5,6,7,8,9];
var res = arr.slice(3,6);//截取了4 5 6三个元素
console.log(res);
slice方法

冒泡排序

冒泡排序的原理就是将两个相邻的数组元素做比较,用大小判断循环的交换他们的位置,最后实现排序的效果。

    var arr = [3, 1, 4, 7, 9, 2, 6, 5, 8]
    console.log(arr);
    for (var j = 0; j <= arr.length - 1; j++) {
        // 重复排序操作 length-1次即可
        for (var i = 0; i <= arr.length - 1 - j; i++)
        //遍历数组,因为虽然数组的长度为9,但是比较数据这个操作只用做8次即可
        {
            if (arr[i] > arr[i + 1]) {
                // 条件为真交换数据
                var container = arr[i];
                arr[i] = arr[i + 1];
                arr[i + 1] = container;
            }
        }
    }
    console.log(arr);

选择排序

选择排序的原理,就是假设一个最大数字的下标并用它和别的元素比较,用大小判断改变两个元素的位置最后达到排序的效果。

    var arr = [2, 1, 22, 3, 24, 4];
    for (j = 0; j < arr.length - 1; j++) {
        for (var i = j + 1; i < arr.length; i++) {
            if (arr[j] > arr[i]) {
                var container = arr[i];
                arr[i] = arr[j];
                arr[j] = container;
            }
        }
    }
    console.log(arr);

数组去重

  1. 用delete方法去重
var arr = [1,1,1,1,1,1,2]
for(var i=1; i<arr.length; i++) {
    // arr[i]代表遍历出来的所有元素
    if(arr[0] === arr[i]) {
        // 将arr[i]删除 - 数组.splice(开始下标, 1)
        arr.splice(i, 1)
        i-- // 因为下一个元素的下标会向前移动一位,所以需要判断下一个元素的话,就需要让他的下标-1
    }
}
console.log(arr);
  1. 将不重复的元素都放在一个空数组中
for(var i=1; i<arr.length; i++) {
    // arr[i]是arr中的每个元素
    // 要判断每个元素是否在brr中 - 需要遍历brr
    for(var j=0; j<brr.length; j++) {
        if(arr[i] === brr[j]) {
            // 说明brr中已经有了arr[i]了 - 不放
            break;
        }
    }
    // 如果上面循环结束了,if也没有成立过一次,就放进去
    if(j === brr.length) { 
        brr.push(arr[i])
    }
}
console.log(brr);
  1. 利用对象中的键是不重复的(有意思)
var arr = [1,1,2,2,2,3,3,6,6,9,5,5,1,1,1,1];
var obj = {}
// 遍历数组,将每个元素都作为对象的键 - 值随意
for(var i=0; i<arr.length; i++) {
    // arr[i] 是每个值 - 当做obj的键放在obj中
    obj[ arr[i] ] = typeof arr[i]
}
console.log(obj);
// 将对象中所有键都放在一个数组中
var brr = [] // 定义空数组
// 遍历对象得到所有的键,将所有的键都放在brr中
for(var i in obj) {
    brr.push( obj[i] === 'number' ? Number(i) : i    )
}
console.log(brr);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容

  • 一、数组的概念 所谓数组,是有序的元素序列。(一组有序 数据) JavaScript的Array可以包含任意数据类...
    MJ的小世界阅读 289评论 0 1
  • 1. JS数组的概念 2. 数组的作用 如上节课中我们学过的arguments就是一个数组, 里面保存了多个参...
    阿里P9王者阅读 199评论 0 0
  • 1、以构造数组的形式来构建数组,有以下几种方式 定义一个空的数组:var array1 = new Array()...
    _我爱吃柠檬_阅读 412评论 0 1
  • 概念与定义 所谓数组(Array),就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们...
    白棠阅读 75评论 0 0
  • 每天一句: 如果你不是领头羊,那么看到的东西都是一样的。 Array数组类型,这和其他语言中的数组有着很大的区别。...
    EndEvent阅读 320评论 0 0