手记

【大犀牛笔记】数组篇

李夜
2016-05-22 12:11:52浏览 5928

时隔月余，再次翻阅大犀牛，感触颇多！此次整理了数组的一些知识点，谨与君共勉！

基本概念 
数组，值的有序集合。
  1. 构成
    （1）元素：数组的值；
    （2）索引(下标)：元素在数组中的位置；
    （3）逗号：元素之间以逗号隔开，结尾的逗号可选。
  2. 注意事项
    （1）元素可以是任意类型；
    （2）可以动态改变，增删改无须重新声明数组；
    （3）数组是一种特殊的JS对象。
操作 
这里列举了数组的创建、读写、遍历的一些操作。

1. 创建数组

（1）数组直接量

var arr = [1,2,3,"a","b","c",[1,2,3],{a:0,b:"abc"},undefined];

（2）Array构造函数

var arr = new Array();     //不传参,length=0
var arr = new Array(5);    //传参,length=5

（3）注意事项
-> 数组直接量的元素可以省略不写（其值会自动变为undefined），此时数组是一个稀疏数组;
-> Array构造函数传入的实参列表，逗号之间的元素不能省略。

稀疏数组
1.概念：索引之间可以有空缺，不一定是连续的。
2.注意事项
（1）空缺的元素值为undefined；
（2）虽然空缺处有默认值undefined，但实际该索引属性在数组中不存在，可用in操作符来检验；
（3）非稀疏数组的length属性值等于元素的个数，而稀疏数组的length属性值大于元素的个数；
（4）非稀疏数组即为“稠密数组”，一般所见都是稠密数组。

var arr1 = [];    //空数组
arr1[4] = 1;      //在索引为4的位置添加元素
arr1[1];          //->undefined，索引1的位置为“空”

var arr2 = [1,,3,undefined];    //创建一个稀疏数组
1 in arr2;      //->false ，判断索引1是否存在（每个索引都是数组的一个属性名）
3 in arr2;      //->true，显式地将undefined写入数组，故判定成立
arr2.length;    //->4

2. 读写

使用“数组名[索引]”来访问元素，方括号中可以是表达式（计算结果是一个非负整数），每个索引都是数组的一个属性名（虽是属性，但只能用方括号来访问，而不能用“.”访问）。
注意：方括号内的值只有在0~2^32-2之间时才是索引，其他任意类型的数据都将为数组创建一个相应的属性（因为数组也是对象）。

3.遍历
使用for循环遍历数组元素，或ES5中的forEach()方法。若使用for/in循环，会遍历数组的所有可枚举的属性，包括其从原型链上继承的属性，而且遍历的顺序不定，易出问题。

//排除null、undefined、不存在的元素
for(var i = 0, len = a.length; i < len; i++){
    if(!a[i]){    //排除条件
        continue;    
    }
    //循环体
}

//排除undefined、不存在的元素
for(var i = 0, len = a.length; i < len; i++){
    if(a[i] === undefined){    //排除条件
        continue;    
    }
    //循环体
}

//排除不存在的元素
for(var i = 0, len = a.length; i < len; i++){
    if(!(i in a)){    //排除条件
        continue;    
    }
    //循环体
}
属性和方法

  • length属性
    （1）值 = 元素个数
    （2）两个特殊行为：
    -> 增加数组元素，且该元素的索引n大于length值时，length = n+1；
    -> 当给length赋值n，且n<length时，索引>=n的元素都会被删除。
    （3）注意
    使用delete操作符可以删除元素，该索引为“空”，该数组的length值不变，后面的元素也不会前移，会产生一个稀疏数组。

  • 方法

（1）join()
作用：通过分隔符（默认为逗号）将数组中的所有元素拼接成字符串；
返回值：最后拼接好的字符串；
是否改变原数组：否；

var arr = [1,2,"a","b"];
arr.join("&");    //->"1&2&a&b"
arr;              //->[1,2,"a","b"]

注：与string对象的split()方法刚好相反，split()是将字符串分割成数组。

var str = "1&2&a&b";
str.split("&");    //->["1","2","a","b"]

（2）reverse()
作用：颠倒元素顺序；
返回值：逆序的数组；
是否改变原数组：是 。

var arr = [1,2,"a","b"];
arr.reverse();    //->["b", "a", 2, 1]
arr;              //->["b", "a", 2, 1]

（3）sort()
作用：元素排序；
返回值：排序后的数组；
是否改变原数组：是；

var arr = ["b",undefined,1,3,2,"a"];
arr.sort();    //->[1, 2, 3, "a", "b",undefined]，默认排序

arr.sort(function(num1,num2){    
    return num1-num2;
});            //->[1, 2, 3, "a", "b",undefined]，数字排序(从小到大)
arr;           //->[1, 2, 3, "a", "b",undefined]

1.不传参时，默认以字母表顺序排序；
2.若数组中有显式的undefined元素，则undefined元素会排到最后
3.参数可以是一个自定义的排序函数

（4）concat()
作用：连接元素；
返回值：连接后的数组；
是否改变原数组：否；

若参数是一个或多个数组，则只会将原数组和参数数组的元素连接起来。

var arr = [1,"a"];
var arr2 = ["w","q"]
arr.concat("s",[3,"c"],arr2);    //->[1, "a", "s", 3, "c", "w", "q"]
arr;                             //->[1,"a"]

（5）slice()
作用：截取子数组；
返回值：返回截取出的新数组；
是否改变原数组：否；

var arr = [1,5,"a",3,2,"b"];
arr.slice(1,3);    //->[5, "a"]
arr;               //->[1, 5, "a", 3, 2, "b"]

参数：[start,end)，截取从start位置开始到end位置结束(不包括end)之间的所有元素只有一个参数时，从该索引位截取到最后。
参数可以为负数，-1表示最后一个元素，-2表示倒数第二个元素。

（6）`splice()`

作用：插入或删除；
返回值：由被删除元素组成的数组（没有删除元素则为空数组）；
是否改变原数组：是；

var arr = [1,5,"a",3,2,"b"];
arr.splice(1,3);               //->[5, "a", 3]
arr;                           //->[1, 2, "b"]
arr.splice(1,0,"s",[8, 9]);    //->[]
arr;                           //->[1, "s",[8, 9], 2, "b"]

参数1指定起始位置，参数2指定删除个数（若省略，则删除所有元素），其后所有参数均为待插入的元素。

（7）`push()`

作用：在数组末尾增加一个元素或多个元素；
返回值：新数组的长度；
是否改变原数组：是；

var arr = [1,2];
arr.push("a","b");    //->4
arr;                  //->[1, 2, "a", "b"]

（8）pop()
作用：删除最后一个元素；
返回值：被删除的元素；
是否改变原数组：是；

var arr = [1,2,"a"];
arr.pop();    //->"a"
arr;          //->[1, 2]

（9）unshift()
作用：在数组首位插入一个或多个元素，其他元素依次后移；
返回值：新数组的长度；
是否改变原数组：是；

var arr = [1,2,"a"];
arr.unshift("c","m");    //->5
arr;                     //->["c", "m", 1, 2, "a"]

（10）shift()
作用：从首位删除一个元素，其他元素依次前移；
返回值：被删除的元素；
是否改变原数组：是；

var arr = [1,2,"a"];
arr.shift();    //->1
arr;            //->[2, "a"]

（11）toString()
作用：将所有元素转化成字符串；
返回值：转化后的字符串；
是否改变原数组：否；

var arr = [1,2,"a"];
arr.toString();    //->"1,2,a"
arr;               //->[1, 2, "a"]

1.所有对象都有该方法；
2.输出不包括方括号或其他任何形式的包裹数组元素的分隔符

（12）toLocaleString()
toString()的本地化版本，可使用本地化和自定义的分隔符来拼接字符串。

ES5方法

ECMAScript 5 新增了9种方法：forEach()、map()、filter()、every()、some()、reduce()、reduceRight()、indexOf()、lastIndexOf()。第一个参数几乎都为一个函数，其参数有3个：元素，索引，数组本身（后面两个参数可选）。

  • forEach()
    作用：遍历元素；
    返回值：无返回值
    参数：执行函数（参数为调用数组的元素）
var arr = [1,2,3];
var sum = 0;
arr.forEach(function(val){sum += val; });    //遍历数组，对所有元素求和
sum;    //->6
  • map()
    作用：映射元素；
    返回值：返回映射后的新数组
    参数：执行函数（参数为调用数组的元素）
var arr = [1,2,3];
arr.map(function(x){ return x*2; });    //-> [2, 4, 6]
  • filter()
    作用：过滤元素；
    返回值：新数组，其元素为符合判定条件的原数组元素
    参数：执行函数（参数为调用数组的元素）
var arr = [1,2,3,4,5];
arr.filter(function(x){ return x < 3 });    //-> [1,2]

//可用来过滤稀疏数组中空缺的元素
foo.filter(function(){return true;});
  • every() 和 some()
    作用：检测元素（every()检测全部，类似逻辑与；some()检测部分，类似逻辑或）；
    返回值：true / false
    参数：执行函数（参数为调用数组的元素）
var arr = [1,2,3,4,5];

arr.every(function(x){ return x < 6; });        //-> true
arr.every(function(x){ return x%2 === 0; });    //-> false

arr.some(function(x){ return x > 6; });         //-> false
arr.some(function(x){ return x%2 === 0; });     //-> true

//对于空数组，every()返回true，some()返回false
  • reduce()、reduceRight()
    作用：组合元素（reduce()从左至右，reduceRight()从右至左）；
    返回值：
    参数：参数1为执行函数，参数2（可选）指定执行函数的初始值
var arr = [1,2,3,4];
arr.reduce(function(x,y){return x+y;});    //-> 10
  • indexOf() 和 lastIndexOf()
    作用：搜索元素（indexOf()从头至尾，lastIndexOf()从尾至头）；
    返回值：若找到，则返回找到的第一个元素的索引；否则，返回 -1；
    参数：参数1指定搜索元素，参数2（可选，可为负值）指定开始搜索的索引位置
var arr = [1,2,"a","a"];

arr.indexOf("a");          //-> 2
arr.indexOf("a",3);        //-> 3
arr.indexOf("a",-1);       //-> 3
arr.indexOf("s");          //-> -1

arr.lastIndexOf("a");      //-> 2
arr.lastIndexOf("s");      //-> -1

注：字符串对象也有这两种方法，作用类似。

类数组 
类数组和数组很像，但其本质上不是数组，即类数组的类属性不是Array。
//判断obj是否为数组
obj.isArray();    //返回true，则是数组；否则不是。

//判断是否为类数组
function isArrayLike(obj){
    if(obj &&                                       //obj存在，不为空
        typeof obj === "object" &&                  //属于对象类型
        isFinite(obj.length) &&                     //length属性是有限值
        obj.length >=0 &&                           //非负
        obj.length === Math.floor(obj.length) &&    //为整数
        obj.length < 4294967296){                   //值 < 2^32
        return true;                                //判定成立，是类数组
    } else {
        return false;                               //不是类数组对象
    } 
}
多学多练，活学活用！当时或高深，今日是寻常！

申明：以上所有内容均是在《JavaScript权威指南》（淘宝前端译）一书的基础上整理所得。 以上，仅与诸君共勉！如有错漏，欢迎大神指正，为谢！

相关标签
Html/CSS
JQuery
JavaScript
20人推荐
随时随地看视频
慕课网APP

热门评论

var arr2 = [1,,3,undefined];    //创建一个稀疏数组

1 in arr2;      //->false ，判断索引1是否存在（每个索引都是数组的一个属性名）

3 in arr2;      //->true，显式地将undefined写入数组，故判定成立

这一块不太懂，博主能详细点吗


<span>写的不错哦</span>

查看全部评论

相关阅读

JavaScript进阶篇之一
三种方法（css3，js，jq）实现表单元件样式
纯干货！jQuery之DOM操作解析
JS数组知多少(From:"人生还有多少个二十年")
jquery复习之路---DOM操作