JavaScript数组操作详情

Posted 2021-02-15 lo-me

Array 数组概述

Array 类型是 ECMAScript 最常用的类型。javascript 中的 Array 类型和其他语言中的数组有着很大的区别。

虽然数组都是有序排列，但 javaScript中的数组每个元素可以保存任何类型。

javaScript 中数组的大小也是可以调整的。

 

 

创建数组的两种方式

new 运算符创建数组

var box1 = new Array(); 　　　　//创建了一个数组，数组属于object类型
var box2 = new Array(10); 　　　　//创建一个包含 10 个元素的数组,一个数字表示这个数组的长度,如果是两个数及以上会变成数组中的元素
var box3 = new Array(‘李炎恢‘,28,‘教师‘,‘盐城‘); 　　//创建一个数组并分配好了元素

       console.log(box2) // Array(10),length: 10

 以上三种方法，可以省略 new 关键字

var box1 = Array(); //省略了 new 关键字
var box2 = Array(10); //省略了 new 关键字
var box3 = Array(‘李炎恢‘,28,‘教师‘,‘盐城‘); //省略了 new 关键字

console.log(box1)
console.log(box2)
console.log(box3)

使用字面量方式创建数组

var box1 = []; 　　　　　　//创建一个空的数组
var box2 = [‘李炎恢‘,28,‘教师‘,‘盐城‘]; 　　　　//创建包含元素的数组
var box3 = [1,2,]; 　　　　　　　　　　//禁止这么做，IE 会识别 3 个元素
var box4 = [,,,,,]; 　　　　　　　　//同样，IE 的会有识别问题

console.log(box1)
console.log(box2)
console.log(box3)
console.log(box4)

创建包含各种数据类型的数组

var box = [
    { 　　　　　　　　　　　　　　     //第一个元素是一个对象
        name : ‘李炎恢‘,
        age : 28,
        run : function () {
            return ‘run 了‘;
        }
    },
    [‘马云‘,‘李彦宏‘,new Object()],//第二个元素是数组
    ‘江苏‘, //第三个元素是字符串
    25+25, //第四个元素是数值
    new Array(1,2,3) //第五个元素是数组
    ];
console.log(box);

 

 

 

JavaScript的数组的操作方法

使用索引下标来读取和设置数组的值

var box = Array(‘李炎恢‘,28,‘教师‘,‘盐城‘);

console.log(box[2]); //获取第三个元素
box[2] = ‘学生‘; //修改第三个元素
box[4] = ‘计算机编程‘; //增加第五个元素
console.log( box[4])

使用 length 属性获取数组长度

var box = new Array(‘李炎恢‘,28,‘教师‘,‘盐城‘);

console.log(box.length) //获取元素个数
box.length = 10; //强制设置元素个数,PS：数组最多可包含 4294967295 个元素，超出即会发生异常。
console.log(box.length) //获取元素个数 ,10

box[box.length] = ‘JS 技术‘; //通过 length 给数组增加一个元素,在最后一个角标添加一个元素
console.log(box.length); //11
console.log(box[box.length-1])//获取最后一个数组，数组长度减1,打印结果：JS 技术

 转换方法

对象或数组都具有toLocaleString()、toString()和valueOf()方法。

var box = [‘李炎恢‘,28,‘计算机编程‘]; //字面量数组
console.log(box); // (3) ["李炎恢", 28, "计算机编程"]
console.log(box.valueOf()); // (3) ["李炎恢", 28, "计算机编程"]
console.log(box.toString()); //李炎恢,28,计算机编程
console.log(box.toLocaleString()); //李炎恢,28,计算机编程

var box = [new Date()];
console.log(box.toString());        //Sat Apr 06 2019 02:29:36 GMT+0800 (中国标准时间)
console.log(box.toLocaleString());//具有本地格式化的功能，不会自动调用 结果是2019/4/6 上午2:29:36

 join()方法

默认下，数组字符串都会以逗号隔开。如果使用 join()方法，则可以使用不同的分隔符来构建这个字符串。

var box = [‘李炎恢‘, 28, ‘计算机编程‘];
alert(box.join(‘|‘)); //李炎恢|28|计算机编程    返回的类型是字符串

栈方法

ECMAScript 数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说，可以让数组像栈一样，可以限制插入和删除项的数据结构。

栈是一种数据结构(后进先出)，也就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出)，只发生在一个位置——栈的顶部。

ECMAScript 为数组专门提供了 push()和 pop()方法：

push()方法可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度。
pop()方法则从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素。

var box = [‘李炎恢‘, 28, ‘计算机编程‘]; //字面量声明
console.log(box.push(‘盐城‘)); //数组末尾添加一个元素，并且返回长度
console.log(box); // (4) ["李炎恢", 28, "计算机编程", "盐城"]
console.log(box.pop()); //移除数组末尾元素，并返回移除的元素:盐城
console.log(box); // ["李炎恢", 28, "计算机编程"]

队列方法

栈方法是后进先出，而队列方法就是先进先出。队列在数组的末端添加元素，从数组的前端移除元素。

通过 push()向数组末端添加一个元素，然后通过 shift()方法从数组前端移除一个元素。

var box = [‘李炎恢‘, 28, ‘计算机编程‘]; //字面量声明
console.log(box.push(‘盐城‘)); //数组末尾添加一个元素，并且返回长度
console.log(box); //(4) ["李炎恢", 28, "计算机编程", "盐城"]
console.log(box.shift()); //移除数组开头元素，并返回移除的元素:李炎恢
console.log(box); //(3) [28, "计算机编程", "盐城"]

 javaScript 还为数组提供了一个 unshift()方法，它和 shift()方法的功能完全相反。unshift()方法为数组的前端添加一个元素。这四个方法可以自由组合，组成堆栈或者队列的数据结构

var box = [‘李炎恢‘, 28, ‘计算机编程‘]; //字面量声明
console.log(box.unshift(‘盐城‘,‘江苏‘)); //数组开头添加两个元素
console.log(box); //["盐城", "江苏", "李炎恢", 28, "计算机编程"]
console.log(box.pop()); //移除数组末尾元素，并返回移除的元素:计算机编程
console.log(box); //["盐城", "江苏", "李炎恢", 28]

排序方法

数组中已经存在两个可以直接用来排序的方法：reverse()：逆向排序和 sort()：从小到大排序

var box = [1,2,3,4,5];
console.log(box.reverse()); //逆向排序方法，返回排序后的数组:[5, 4, 3, 2, 1]
console.log(box); //源数组也被逆向排序了，说明是引用:[5, 4, 3, 2, 1]

var box = [4,1,7,3,9,2];
console.log(box.sort()); //从小到大排序，返回排序后的数组: [1, 2, 3, 4, 7, 9]
console.log(box); //源数组也被从小到大排序了: [1, 2, 3, 4, 7, 9]

sort 方法的默认排序的问题

sort 方法的默认排序在数字排序上有些问题，因为数字排序和数字字符串排序的算法是一样的。

我们必须修改这一特征，修改的方式，就是给 sort(参数)方法传递一个函数参数。

function compare(value1, value2) { //数字排序的函数参数
   if (value1 < value2) { //小于，返回负数
       return -1;
   } else if (value1 > value2) { //大于，返回正数
       return 1;
   } else { //其他，返回 0
       return 0;
   }
}
var box = [65,0,1,55,10]; //验证数字字符串，和数字的区别
console.log(box.sort(compare)); // [0, 1, 10, 55, 65]

var box2 = ["0","1","55","10","65"]; //验证数字字符串，和数字的区别
console.log(box2.sort(compare)); //["0", "1", "10", "55", "65"]
console.log(box2.sort()); //["0", "1", "10", "55", "65"]

concat()方法:基于当前数组创建一个新数组

var box = [‘李炎恢‘, 28, ‘盐城‘]; //当前数组
var box2 = box.concat(‘计算机编程‘); //创建新数组，并在数组最后面添加新元素
console.log(box2); //输出新数组:["李炎恢", 28, "盐城", "计算机编程"]
console.log(box); //原来的数组没有任何变化:["李炎恢", 28, "盐城"]

slice()方法:基于当前数组获取指定区域元素并创建一个新数组

var box1 = [‘李炎恢‘, 28, ‘盐城‘,"北京","深圳"]; //当前数组
var box2 = box1.slice(1);//一个参数表示从这个参数开始往后取: [28, "盐城", "北京", "深圳"]
var box3 = box1.slice(1,3);//第2个-第4个 之间的元素  两个参数表示从第一个参数开始取，取到第二个参数的位置:[28, "盐城"]
var box4 = box1.slice(2,5);//如果参数超过了数组的长度，则获取前面能够获取到的，后面的就忽略了，比如这里获取到：‘盐城‘,"北京","深圳"
console.log(box2);//28，盐城，北京，深圳
console.log(box3); // [28, "盐城"]
console.log(box4); // ["盐城", "北京", "深圳"]
console.log(box1); //原来的数组: ["李炎恢", 28, "盐城", "北京", "深圳"]

splice()主要用途是向数组的中插入元素

splice 中的删除功能

var box = [‘李炎恢‘, 28, ‘盐城‘]; //当前数组
var box2 = box.splice(0,2); //截取前两个元素，表示从0开始截取两个元素
console.log(box2); //返回截取的元素: ["李炎恢", 28]
console.log(box); //原来的数组被截取的元素已经被删除:["盐城"]

splice 中的插入功能（操作的是原数组）

var box = [‘李炎恢‘, 28, ‘盐城‘]; //当前数组
var box2 = box.splice(1,0,‘计算机编程‘,‘江苏‘); //没有截取，但插入了两条  1表示从1号角标插入，0表示不截取，如果改为1,28这个元素就没有了
console.log(box2); // 什么都没有，因为第二个参数是0，没有截取到:[]
console.log(box); //在第 2 个位置插入两条:["李炎恢", "计算机编程", "江苏", 28, "盐城"]

splice 中的替换功能

var box = [‘李炎恢‘, 28, ‘盐城‘]; //当前数组
var box2 = box.splice(1,2,100); //截取了 2 条，替换成 100 第二个参数传入几就截取几个
console.log(box2); //输出截取的 28
console.log(box); //输出数组: ["李炎恢", 100]

 

 

JavaScript通过原型给数组添加更多的方法

数组获取最大值的方法

var arr1 = ["nba","haha","cba","aaa","sbc"];
var arr2 = [32,34,43,56];
Array.prototype.getMax = function(){
   var temp = 0;
   for(var x=1; x<this.length; x++){
       if(this[x]>this[temp]){
           temp = x;
       }
   }
   return this[temp];
}
console.log(arr1.getMax());//以上的this都表示arr这个数组，那个对象调用这个方法this就表示谁
console.log(arr2.getMax());

数组的字符串表现形式

定义toString方法。 相当于java中的复写

Array.prototype.toString = function(){
    return "["+this.join("/ ")+"]";
}
var arr=[32,23,32,34322,3232,2453];
console.log(arr.toString()); //[32/ 23/ 32/ 34322/ 3232/ 2453]

冒泡排序

 

 

伪数组

具有length属性；按索引方式存储数据；不具有数组的push()、pop()等方法

伪数组无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push()、pop()等方法，但仍可以对真正数组遍历方法来遍历它们，不能使用foEach来遍历伪数组，可以使用for in。

这种对象有很多，比较特别的是function内的arguments对象，还有像调用getElementsByTagName, document.childNodes之类的，它们都返回的NodeList对象都属于伪数组，也称为类数组，还有自定义的对象，也属于伪数组。

我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转变为真正的Array对象或者ES6中的from方法。

var fakeArray01 = {0:‘a‘,1:‘b‘,length:2};//这是一个标准的伪数组对象 
var arr01 = Array.prototype.slice.call(fakeArray01); 
alert(arr01[0]);//a 
var arr02 = [].slice.call(fakeArray01); 
alert(arr02[0]);//a 

 

 

关于数组更多的方法查看：ES5-ES6-ES7_数组的扩展