任何编程语言数组是最常用的一种存储简单数据的一种方式,而JavaScript也是。本篇主要聊一些数组的用法,当然不是数组所有的方法。也可以说是对数组的一些简单的了解和理解吧。
数组操作
数组创建
创建一个长度位3的空数组。
arr =new Array(3);//通过对象进行声明数组 这个一般不推荐
arr1=[,,,];// 数组字面量 常用方式
arr2=Array(3);//通过内置的Array构造函数声明数组 这个一般的时候不使用 知道即可

可以看出两种创建数组的方式,其实本质是相同的,不过这个时候又有一个神奇的发现,那就是arr1=[,,,] 其中有四个逗号分隔,不应该是长度为4吗?
代码演示:
arr=[,1,2,]

这个可以看出如果用第二种创建数组的时候,如果最后一位逗号后面是空,那么默认就是没有这个存储位置。
对象演示数组
这个算是拓展了解吧
其实很神奇的一件事,对于数组可以用对象进行演示,前面也说过JavaScript中万物皆对象,这个也是一种体现。因为数组中的下标是从0开始的,所以对象的属性也是从0开始。
var arr={
0:"a",
1:"b",
2:"c"
};
var arr1=["a","b","c"];
console.log(arr[1]);
console.log(arr1[1]);

其实对象取出内容的时候可以通过. ,但是如果key是数字的话,就无法取了。

其实就算是通过. 获取属性值,在JavaScript中也会转换为[] 进行取值的,所以可以成数组是一种隐藏key的对象。
length属性
// 首先声明一个数组。
var arr=[1,2,3,4,5];
console.log(arr.length);// 数组的长度,这个是最常用的一种方法。
现在又有了一个大胆的想法
arr.length=3;
console.log(arr)

发现arr被截断了,只有前面3个内容了,那如果将其长度变成比原数组更长呢?
arr.length=6;
console.log(arr)

这个有点不同于java,因为java中数组的长度是无法修改的。
数组的方法
数组添加元素
数组除了查找内容,自然也有其增加内容的方法,常用的有两个那就是push 和unshit ,同样是添加元素,但是又有不同。
var arr=[1,2,3];
arr.push(4);
arr.unshift(0);

可以看出push是数组元素后面添加添加,unshift是数组元素前面添加.
简单实现一个可以添加多个元素的方法
var arr=[1,2,3];
Array.prototype.myPush= function (){
len=arguments.length;
if (len<1){
return this;
}
for (i=0;i<len;i++){
this.push(arguments[i]);
}
return this;
}
arr.myPush(4,5,6);

删除元素
这个对应着添加的方式,也有两个pop 和shift .这个直接演示即可
var arr=[1,2,3,4,5];
arr.pop();
arr.shift();

两个数组合并
var arr=[1,2,3];
var arr1=[4,5,6];
两个数组的合并,自然可以通过数组本身的一个方法concat ,但是两者本身不会改变。
如下:
arr.concat(arr1);
arr1.concat(arr);

这个可以看出那个数组使用concat 方法,那个数组的元素在前面。
数组截取
这个调用的方法其实有点复杂,使用的方法是splice(开始项下标,剪切长度,剪切以后最后一位开始添加数据) 和slice(开始,结束)
splice
但是其中的参数又有可以不写的,想要理解还是看具体代码。
// 只有下标 而且下标为正
var arr=[1,2,3,4,5,6];
arr.splice(3);// 只来一个下标 截取了 4,5,6
console.log(arr); //arr 剩下了 1,2,3

var arr=[1,2,3,4,5,6];
arr.splice(3,2);
console.log(arr);

var arr=[1,2,3,4,5,6];
arr.splice(3,2,8);
console.log(arr);

// 只有下标 而且下标为负数
var arr=[1,2,3,4,5,6];
arr.splice(-1);// 只来一个下标 截取了6
console.log(arr); //arr 剩下了 1,2,3 ,4,5
// 负数从后面开始数

// 下标为负数 带上截取长度
var arr=[1,2,3,4,5,6];
arr.splice(-1,2); // 长度不可能为负数的,负数就效果就是0.我们写长度为2 很多人认为是 截取了5,6

为什么?写的长度是2啊?
var arr=[1,2,3,4,5,6];
arr.splice(-2,2); //截取了5,6

下标的开始值决定了开始的位置,但是长度还是向后数的,不会因为下标开始是负数然后就是向前数的。
var arr=[1,2,3,4,5,6];
arr.splice(-2,2,8); //截取了5,6

-
补充,前面添加元素的时候使用push 和unshift 但是添加的元素不是在前面就是在后面,那现在添加一个指定的位置呢? //将元素放在第二个位置
var arr=[1,2,3,4,5,6];
arr.splice(1,0,10);

slice
splice知道其参数的用法,那么再看slice就会觉得很简单的。但是splice 不会修改原本的数组,得到都一个截出的数组。
var arr=[1,2,3,4,5,6];
arr.slice(1);
console.log(arr);

// 下标开始为正数,再加上一个结束的下标
var arr=[1,2,3,4,5,6];
arr.slice(1,3);// 前面是闭包后面是开包【)

// 下标开始为负数
var arr=[1,2,3,4,5,6];
arr.slice(-2);

// 下标开始为负数 其结束标记也的为负数,如果负数小于开始下标或者为0以及正数那就返回一个空数组,因为其是向后定义开始和结束的
var arr=[1,2,3,4,5,6];
arr.slice(-3,-1);

排序
排序用到用到的是sort ,但是这个排序最令人弄乱的是排数字。
var arr=[1,0,3,13,5];
arr.sort();
// arr 最后值为:[0, 1, 13, 3, 5]

因为JavaScript的数组是将数字元素转换为字符串之后再进行排序,然后按照ASCII进行排序的。但是如果是对象排序呢?如何判断呢?其实sort的参数可以写一个方法,sort的排序逻辑可以根据这个方法逻辑进行排序,但是返回值应该是1或者0或者-1,有点贵像是java中对象排序的时候实现compareto 方法。
// 将下面的数组进行随机排序
var arr=[0,1,2,3,4,5];
arr.sort(
function(a,b){
var rand=Math.random();
if (rand>0.5){
return 1 ;
}else if(rand<0.5){
return -1;
}else{
return 0;
}
}
)

如果是对象的话,可以根据对象属性的大小进行判断,自然也是再sort的参数中写好即可,不在演示了。
数组与字符串转换
这个其实是用join 和split 两个实现的
var arr=[0,1,2,3,4,5];
console.log(arr.join("-"))// 如果arr.join 不写参数默认是 逗号(,)

var str="0-1-2-3-4-5";
console.log(arr.split("-"));

当然split 也可以有参数。
var str="0-1-2-3-4-5";
console.log(str.split("-",1));// 后面的参数就是截取的长度

反转排序
这个简单的调用一个方法 reverse 即可
var arr=[0,1,2,3,4,5];
arr.reverse();

tostring
这个很简单的一个方法
arr=[1,2,3,4,5];
arr.toString();

|