JavaScript令人焦灼的“数组”

作者: 紫荆峰 | 来源:发表于2016-11-14 21:59 被阅读0次

JavaScript令人焦灼的“数组”
06-JavaScript数组和函数
JavaScript Array与String简单使用
JavaScript数组与函数
JavaScript（Day02）
js数组及其方法
JavaScript 学习脑图
per-course数组
Javascript数组系列三之迭代方法2
JavaScript数组遍历的问题及解决方案

0.前言

最近看到有关数组方面的知识，我也真是醉了，特在此做一些总结，就当一个笔记，希望在往后的日子里，遇到相同的问题是能够及时解决。

认识数组；
创建数组；
数组元素的访问（赋值与取值）；
数组的遍历；
数组长度length、元素的更新、增加和删除；
数组中常用的方法；
数组排序；
数组的数组（多维数组）；

1.认识数组

所谓数组，就是相同数据类型的元素按一定顺序排列的集合，就是把有限个类型相同的变量用一个名字命名，然后用编号区分他们的变量的集合，这个名字称为数组名，编号称为下标。组成数组的各个变量称为数组的分量，也称为数组的元素，有时也称为下标变量。数组是在程序设计中，为了处理方便，把具有相同类型的若干变量按有序的形式组织起来的一种形式。这些按序排列的同类数据元素的集合称为数组。

扩展：内置对象是JS语言自带对象，提供了一些基本的功能，供开发者来使用。浏览器上跑的内置对象Math，String，Array，Date等对象
对象：属性(变量)和方法(函数)的集合，数组就是对象，可以存储多个不同类型的数据

2.创建数组

创建数组有常用的两种方法：
第一种方法：构造函数法
1.1、使用构造函数创建空数组
var arr1（栈区） = new Array()（堆区）
注解：new的解释如下：

内存关系.png
（1）栈区：基本数据类型（变量）保存在栈区，会根据函数的结束而自动释放
（2）堆区：在堆区开辟出一片内存空间存放对象，需要程序员手动开辟，并且需要手动释放。
（3）返回堆区对象的引用（地址）
注意：arr1不是数组，是数组的引用，就是为了访问堆区的数组对象
1.2、使用构造函数创建确定容量的数组
var arr2 = new Array(10);
1.3、使用构造函数创建一个拥有一些数据的数组*
var arr3 = new Array(1,2,"Tome",true);
第二种方法：字面量法创建数组
2.1、使用字面量法创建空数组
var arr4 = [];
[]：表示数组。
2.2、使用字面量法创建一个拥有一些数据的数组
var arr5 = [1,2,3,4,"adh",true];
注：数据直接写在中括号里面，数据之间用逗号分开

3.数组元素的访问(赋值与取值)

数组的格式：数组名[下标]
注意：下标是从“0”开始的，访问如下：

var arr = new Array(5);
        arr[0] = 18;
        arr[1] = 19;
        arr[2] = 20;
        arr[3] = 21;
        arr[4] = 22;
        console.log(arr);
        console.log(typeof arr);
        //取值（取某一个元素的值）
        console.log(typeof arr[0]);

4.数组的遍历

数组遍历的常用方法：
（1）for循环遍历

var arr = [1,2,3,4,5];
        var sum = 0;
        for (var i = 0; i < arr.length; i++) {
            var num = arr[i];
            sum += num;
            console.log(num);
        }
            console.log(sum);

（2）for-in 快速遍历

for(var j in arr){
     console.log(arr[j]);
}

注意：“in”的前面的“j”针对数组来说是我们的下标
（3）forEach();是MCMAScript5.0加入的，低版本IE不能用的。

arr.forEach(function(e){
            console.log(e);
        });

注意：e是数组里面的每一个元素。

5.数组长度length、元素的更新、增加和删除

什么是数组的长度？
就是数组元素的个数。
用length表示数组的长度。

var arr = [1,2,3,4,5];
        arr["name"] = "sunck";
        console.log(arr.length);
        console.log(arr);

运行结果：

1.PNG

课件数组的长度还是为5，加了字符串元素，并没有将长度算进去，这是因为length不计算非正规（数字）下标。那么问题来了，在for-in里面length是否计算非数字的长度呢？

for (var i in arr) {
            console.log(i);
        }

1.PNG
综上所述：length在for-in中可以遍历

undefined的情况

arr.length = 10;
        console.log(arr.length);
        console.log(arr);
        console.log(arr[5]);
        console.log(arr[6]);
        console.log(arr[7]);
        console.log(arr[8]);
        console.log(arr[9]);

运行结果：

1.PNG

因为arr的原本数组长度为5，现在给他设置为10，但是剩余空出来的位置就会变成undefined。

数组长度的减少,多余的删除

arr.length = 3;
        console.log(arr.length);
        console.log(arr);

运行结果：

1.PNG

这是因为，本来给他设定的长度为10，现在又给他设置为3，就会装不下数据，所以多出来的数据就会删除掉。

添加的下表紧挨着以前最后的下标

arr[3] = 100;
        console.log(arr.length);
        console.log(arr);

运行的结果：

1.PNG

可以看到，所添加的元素，会紧跟着，最后一个正规数字元素的后面。

添加的下标距离最后的下标有一定的距离,那么中间的元素默认undefined

arr[6] = 600;
        console.log(arr.length);
        console.log(arr);
        console.log(arr[4]);
        console.log(arr[5]);

运行结果：

1.PNG

删除

delete arr[2];
        console.log(arr.length);
        console.log(arr);

运行结果：

1.PNG

注意：我们用delete操作符来删除指定的元素，数组的长度不会改变，只是对应的将值删除为undefined

6.数组中常用的方法

(1)push(item1,item2,...)
功能：在数组的末尾添加一个或者多个元素
参数：要添加的元素
返回值：添加数据后数组的长度

var arr1 = [1,2,3,4,5];
        var ret1 = arr1.push(9,10,23);
        console.log(arr1);
        console.log(arr1.length);
        console.log(ret1);

(2)unshift(item1,item2,...)
功能：在数组的头添加一个或者多个元素
参数：要添加的元素
返回值：添加数据后数组的长度

var arr2 = [1,2,3,4,5];
        var ret2 = arr2.unshift(0);
        console.log(arr2);
        console.log(arr2.length);
        console.log(ret2);

(3)pop()
功能：在数组的末尾删除一个元素
参数：无
返回值：被删除的元素

var arr3 = [1,2,3,4,9];
        var ret3 = arr3.pop();
        console.log(arr3);
        console.log(arr3.length);
        console.log(ret3);

(4)shift()
功能：在数组的头删除一个元素
参数：无
返回值：被删除的元素

var arr4 = [1,2,3,4,5];
        var ret4 = arr4.shift();
        console.log(arr4);
        console.log(arr4.length);
        console.log(ret4);

(5)join(str)
功能：将数组的元素用参数字符串拼接成一个新的字符串
参数：一个字符串
返回值：拼接的结果字符串

var arr5 = [1,2,3,4,5];
        var ret5 = arr5.join("good");
        console.log(arr5);
        console.log(arr5.length);
        console.log(ret5);
        console.log(typeof ret5);

(6)reverse()
功能：倒置数组
参数：无
返回值：倒置以后的数组

var arr6 = [1,2,3,4,5];
        var ret6 = arr6.reverse();
        console.log(arr6);
        console.log(arr6.length);
        console.log(ret6);
        console.log(typeof ret6);

(7)slice(startIndex,endIndex)
功能：在数组中从startIndex下标开始一直截取到endIndex下标之前
参数：开始与结束的下标
返回值：截取的数据数组

var arr7 = [1,2,3,4,5,6,7,8,9,10];
        var ret7 = arr7.slice(3,7);
        console.log(arr7);
        console.log(ret7);

(8)splice(下标,个数,item1,item2...)
功能：是在数组的中间添加或者删除一些元素
必选参数：下标、个数
可选参数：item1,item2...
返回值：
添加：个数为0，从下标处开始添加可选参数中的元素
注意：如果下标大于了原数组的最大的下标，都是在数组最后添加元素

var arr9 = [1,2,3,4,5];//1,2,8,9,3,4,5
        var ret9 = arr9.splice(7, 0, 8, 9);
        console.log(arr9);
        console.log(arr9.length);
        console.log(ret9);
        console.log(ret9.length);

删除：不需要可选参数，从下标开始删除对应个数个元素
返回值：删除的元素数组

var arr10 = [1,2,3,4,5,6,7,8,9,10];
        var ret10 = arr10.splice(2, 6);
        console.log(arr10);
        console.log(arr10.length);
        console.log(ret10);
        console.log(ret10.length);

(9)concat(arr1, arr2...)
功能：将多个数组拼接成一个数组
参数：一个或者多个数组
返回值：拼接之后新的数组，新的数组的元素是所有数组的元素

var arr8 = [1,2,3];
        var num8 = [4,5,6];
        var str8 = [7,8,9];
        var ret8 = num8.concat(arr8, str8);
        console.log(ret8);
        console.log(arr8);
        console.log(num8);
        console.log(str8);

(10)indexOf(item)
功能：从数组的左侧开始查找对应第一次出现的参数元素的下标
参数：元素值
返回值：如果找到了对应的元素则返回该元素的下标值，否则返回-1

var arr11 = [1,2,3,3,4,5,3,7,8];
        var ret11 = arr11.indexOf(9);
        console.log(ret11);
        console.log(arr11);

(11)lastIndexOf(item)
功能：从数组的右侧开始查找对应第一次出现的参数元素的下标
参数：元素值
返回值：如果找到了对应的元素则返回该元素的下标值，否则返回-1

var arr12 = [1,2,3,3,4,5,3,7,8];
        var ret12 = arr12.lastIndexOf(3);
        console.log(ret12);
        console.log(arr12);

7.数组排序

(1)冒泡排序
原理：

54321->45321->43521->43251->43215      4
                0 1    1 2    2 3    3 4
        43215->34215->32415->32145             3
                0 1    1 2    2 3    
        32145->23145->21345                    2
                0 1    1 2
        21345->12345                           1
                0 1

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

        //                   数组元素个数-1
        for (var i = 0; i < arr.length - 1; i++) {
            //                  数组元素个数-1-i
            for (var j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] <= arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }
            }
        }
        console.log(arr);

(2)sort排序
注意：sort默认升序排序

var str = [4,5,3,1,2];
        str.sort();
        console.log(str);

如果要排降序，必须给出排序的标准，排序的标准是一个函数。

str.sort(compare);
        function compare(v1, v2) {
            if (v1 < v2) {
                return 1;
            }
            return -1;
        }
        console.log(str);

8.数组的数组(多维数组)

/**
         * 多维数组：数组的元素是数组
         */
        
        var a = [1,2,3];
        var b = [4,5,6];
        var c = [7,8,9];

        var arr = [a,b,c];

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

9.总结

数组的总结，就这么多了，如果有其他要补充的，欢迎来信。

JavaScript令人焦灼的“数组”
0.前言最近看到有关数组方面的知识，我也真是醉了，特在此做一些总结，就当一个笔记，希望在往后的日子里，遇到相...
06-JavaScript数组和函数
JavaScript数组 JavaScript中的数组可以存储不同类型的数据 JavaScript中的数组是引用类...
JavaScript Array与String简单使用
JS对象：数组对比Object-C中的数组，JavaScript数组有一些不一样的特点JavaScript数组：...
JavaScript数组与函数
数组 JavaScript中的数组和C语言中的数组一样, 都是用于存储一组数据的 JavaScript中的数组可以...
JavaScript（Day02）
1、JavaScript数组 2、JavaScript对象的使用 3、JavaScript内置对象
js数组及其方法
1.js 数组及其方法2.教你用好 Javascript 数组3.JavaScript数组有哪些方法？4.数组MD...
JavaScript 学习脑图
javascript数据类型 javascript变量 javascript运算符 javascript数组 ja...
per-course数组
数组是数据的有序列表。JavaScript中，数组中的每一项可以保存任何类型的数据JavaScript中，数组的长...
Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章，上文《Javascript数组系列二之迭代方法1》我们说...
JavaScript数组遍历的问题及解决方案
前言在刚接触 JavaScript 的数组时，就曾怀疑 JavaScript 中的数组的遍历和迭代相关的...

JavaScript令人焦灼的“数组”

0.前言

1.认识数组

2.创建数组

3.数组元素的访问(赋值与取值)

4.数组的遍历

5.数组长度length、元素的更新、增加和删除

6.数组中常用的方法

7.数组排序

8.数组的数组(多维数组)

9.总结

相关文章

JavaScript令人焦灼的“数组”

06-JavaScript数组和函数

JavaScript Array与String简单使用

JavaScript数组与函数

JavaScript（Day02）

js数组及其方法

JavaScript 学习脑图

per-course数组

Javascript数组系列三之迭代方法2

JavaScript数组遍历的问题及解决方案

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读