你真的了解 Javascript 中的数组?

[Array] n. 数组,阵列;排列,列阵;大批,一系列;衣服

数组是类似列表的特殊对象,一个存储元素的线性排列,元素可以通过索引来存取,索引一般来说就是数字,用来计算元素之间存储位置的偏移量,这个偏移量实际上就是对象里称呼的属性
在原型中提供了遍历以及改变其中元素的很多方法。
数组的长度及其中元素的类型都是不固定的。
因为数组的长度可读可写,有时数组中的元素也不是在连续的位置,所以 JavaScript 数组不一定是密集的。
通常情况下,这是一些方便的特性;如果这些特性不适用于你的特定使用场景,你可以考虑使用固定类型数组。

基本的用法

数组的创建

var arr1 = [1,2,3,4];//[]直接创建
var arr2 = new Array(1,2,3,4,5,6,7,8);//new关键字创建
var arr3 = new Array(99);
//99表示arr3数组的长度,值暂时都为 undefined。
var arr4 =arr1;
//数组是引用类型,仅仅是将arr4指向arr1
arr4[0]=10;
// 如此一来,arr1[0]===10 => true
console.log(arr1);//[10,2,3,4]

上面代码里面创建了 arr1 数组,并且把它赋值(复制)给 arr4 ,再改变 arr4 的值,实际上也改变了 arr1 ,这种复制叫做浅复制。
如何避免浅复制造成的问题呢?下面是一段深复制:

var copyArrary = function(arr){
var arrX = [];
//arrX存在于函数 `copyArrary` 的作用域里
len = arr.length;
for(var i = 0; i < len; i++){
arrX[i]=arr[i];
}
}
var arr1 = [1,2,3];
var arr2 = copyArrary(arr1);
//复制arr1后,arr2=[1,2,3]
arr2[3] = 4;
console.log(arr1);//[1,2,3]
console.log(arr2);//[1,2,3,4]

数组的读取

var arr = [1,2,3,4];
var len = arr.length;
for(var i = 0; i < len; i++) {
console.log(arr[i]);
//i:数组的序列号,从0开始
//arr[i]:序列号对应的值
}
var arr2 = [1,2,3,4,5,6]
console.log(arr2.legth)// 6

数组的写入

var arr = [];
for(var i = 0; i < 10; i++) {
arr[i] = i;// 改变数组arr的值
if()
}
arr[55]=56;
console.log(arr.legth)// 56
arr.push(57);// 返回数组的legth,57

由字符串转换成数组

var name = 'my name is zhuziyi';
var word = name.split(' ');// 以空格为分隔符切割字符串
console.log(word);// ['ma','name','is','zhuziyi']

由数组转换成字符串

var word = ['my','name','is','zhuziyi'];
var name1 = word.join(' ');// 以空格为分隔符组合数组成字符串
var name2 = word.toString();// 只能生成以 `,` 为分隔符组合数组成字符串
console.log(name1);// 'my name is zhuziyi'
console.log(name2);// 'my,name,is,zhuziyi'

查找数组元素

indexOf()常用作查找数组元素的方法,可返回某个指定的元素(即参数,且区分大小写)在数组中首次出现的索引值。
懒得看文字描述,就直接例子秒懂:

var arr =[1,2,3,4,1,5,3];
arr.indexOf(1);// 顺序查找参数,返回第一个匹配到的"索引值":0
arr.indexOf(1,3);// 第二个参数是开始查找的索引值,这里从索引值 3 开始查找,第一个匹配的元素 1 就被忽略了,然后返回匹配到的"索引值":4
arr.indexOf(1,100);// 索引值 100 已经大于或等于数组长度了,意味着不会在数组里查找,返回:-1
arr.indexOf(1,-1);// 第二个参数为负数,这里从最后一个索引值开始查找,然后返回匹配到的"索引值":4
arr.indexOf(1,-4);// 返回匹配到的"索引值":0
arr.indexOf(6);// 查找不到,返回:-1
arr.lastIndexOf(4);// 反序查找参数,返回"索引值":3

另外 String 对象里也有这个方法,看看他们的不同之处:javascript中数组和字符串的方法比较

[实例]判断一个元素是否在数组里,若不在则推入更新数组:

var updateBrowsersCollection = function (browsers,browser){
if (browsers.indexOf(browser) === -1){
browsers.push(browser);// 如果browser不在browsers数组里,就向browsers推入该元素
console.log("新的数组是"+browsers)
}else if(browsers.indexOf(browser) > -1){
console.log(browser+"已存在数组里")
return false;
}
}
var browsers = ['Chrome', 'Safari', 'IE', 'Opera','Edge'];
updateBrowsersCollection(browsers,'Firefox');// 添加 Firefox 到数组里
updateBrowsersCollection(browsers,'Firefox');// Firefox 已存在数组里

数组的迭代方法

数组的迭代,也即数组遍历,首当其冲的就是for循环。

未完待续!

参考:

坚持原创技术分享,您的支持将鼓励我继续创作!