JS - 基础学习(1): 数组(列表)的基本操作

　　本文主要介绍JS对数组(列表)的基本操作。习惯了用数据库的操作顺序来说明：增、删、改、查；合并，裁剪，排序，格式化。

一.数组元素的添加(增加)

　　增加数组元素有三种方法：unshift()  push()  splice()

　　1、arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始位置(即头部)，数组中的原元素自动后移；并返回数组新长度。

　　2、arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾；并返回数组新长度。

　　3、arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

　　举例说明：

unshift()
var a = [1,2.5,"a","yes"];
var temp = a.unshift(-1,-2.2);
console.log(a);     //[-1, -2.2, 1, 2.5, "a", "yes"]
console.log(temp);  //6 数组的长度

push()
var a = [1,2.5,"a","yes"];
var temp = a.push(-1,-2.2);
console.log(a);     //[1, 2.5, "a", "yes", -1, -2.2]
console.log(temp);  //6 数组的长度
  
splice()    将数据添加到原数组结尾
var a = [1,2.5,"a","yes"];
var temp = a.splice(a.length,0, -1,-2.2);    //此将数据添加到原数组结尾，同push()
console.log(a);     //a: [1, 2.5, "a", "yes", -1, -2.2]
console.log(temp);  //[] 空数组

splice()    将数据添加到原数组开头
var a = [1,2.5,"a","yes"];
var temp = a.splice(0,0, -1,-2.2);   //此将数据添加到原数组开头，同unshift()
console.log(a);     //a: [-1, -2.2, 1, 2.5, "a", "yes"]
console.log(temp);  //[] 空数组

splice()    将数据添加到具体位置
var a = [1,2.5,"a","yes"];
var temp = a.splice(2,0, -1,-2.2);   //此将数据添加到第三个位置
console.log(a);     //a: [1, 2.5, -1, -2.2, "a", "yes"]
console.log(temp);  //[] 空数组

 

二.数组元素的删除

　　删除数组元素有三种方法：shift()  pop()  splice()

　　1、  arayObj.shift();//删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 

　　2、  arrayObj.pop();//删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined

　　3、  arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，以数组形式返回所移除的元素

　　举例说明：

shift()
var a = [1,2.5,"a","yes"];
var temp = a.shift();
console.log(a); //[2.5, "a", "yes"]
console.log(temp);  // 1  原数组第一项
      
pop()
var a = [1,2.5,"a","yes"];
var temp = a.pop();
console.log(a); // [1, 2.5, "a"]
console.log(temp);  // yes  原数组最后一项

splice()    删除指定位置开始的数据。第一个参数是指定位置，第二个参数是删除从指定位置开始的数据个数
var a = [1,2.5,"a","yes"];
var temp = a.splice(1,1);       //删除第2个位置开始的1个数据，
console.log(a); // [1, "a", "yes"]
console.log(temp);  // [2.5]  以数组形式返回移除的元素

var temp = a.splice(1,2);       //删除第2个位置开始的2个数据，
console.log(a); // [1, "yes"]
console.log(temp);  // [2.5, "a"]  以数组形式返回移除的元素

 

三.数组元素的修改

　　数组元素值的修改：先按元素的索引查找到需要修改的元素; 然后进行元素值的修改。

　　举例说明：

var a = [1,2.5,"a","yes"];
a[2] = "IT";
console.log(a); // [1, 2.5, "IT", "yes"]

　　还可以通过splice()函数进行修改。splice(start,delCount,val1,val2,...):从start位置开始删除delCount项后，并从该开始位置起插入val1,val2,...  当然删除的元素个数和添加的元素个数必须相等。 

var a = [1,2.5,10,"No","a","yes"];      通过指定位置先删除再插入，达到修改数组的目的
var temp = a.splice(2,2,"You",0.1);
console.log(a);     // [1, 2.5, "You", 0.1, "a", "yes"]
console.log(temp);  // [10, "No"]   其实就是删除项，用数组形式返回

 

四.数组元素的查询(访问)

    获取数组元素值通用的一个方法：按元素的索引获取元素值; 返回改索引下的元素值

      注：一次只能返回一个元素值，不能切片分块返回，也不能从数组末尾以负数形式返回

　　举例说明：

var a = [1,2.5,"a","yes"];
var temp = a[1];
console.log(temp);  // 2.5  返回数组索引为1的元素值
var temp = a[1,2]; var temp = a[-1];　　//这两种都是错误的，无法获取想要的数据

 

五.数组元素的合并

   将两个以上数组合并为一个数组，常用的方法是concat()，此方法返回一个新的数组，而参与合并的原数组不变。

　　举例说明：

var a = [1,5,2,15,6];
var b = ["You","No","a","yes"];
var temp = a.concat(b); //将b合并到a后面
var tempdata = b.concat(a);     //将a合并到b后面
console.log(temp);      // [1, 5, 2, 15, 6, "You", "No", "a", "yes"]
console.log(tempdata);      //["You", "No", "a", "yes", 1, 5, 2, 15, 6]

　　通过concat()函数实现两个以上数组的合并，其实通过循环使用unshift()和push()也可以做到。

　　比如将b加在a后面/前面，可以循环使用push()/unshift()函数。

var a = [1,5,2,15,6];
var b = ["You","No","a","yes"];
for(var i=0; i< b.length; i++){
    a.push(b[i])        //将b加在a后面；如果希望将b加在a前面，则改用unshift（）
}
console.log(a);     // [1, 5, 2, 15, 6, "You", "No", "a", "yes"]
console.log(b);     // ["You", "No", "a", "yes"]

　　这样做将会改变宿主数组，如果不希望改变原数组的话，则新建一个新的空数组，将宿主数组(载体数组)拷贝给新数组，这样原数组就可以不改变。注：这里的拷贝是深拷贝，而不是直接将a赋值给新数组，那样的话新数组其实只是保存了原数组的一个地址，新数组被修改，则原数组一样会被修改。

六.数组元素裁剪

    数组的裁剪：是在原数组基础上截取出一个小的数组，以便于使用和存放。截取的元素组成一个新的数组副本，而原数组不发生改变。

　　数组的裁剪一般使用slice()函数，slice(start,end):返回从原数组中指定开始下标到结束下标之间的元素组成新的数组 ，若结束下标超出原数组总长，则以原数组结尾处下标为结束下标。

　　举例说明：

var a = [1,2.5,"a","yes",12,23];
var temp = a.slice(2,5); //裁剪下标为2到下标为5的元素；结束下标未超出数组总长
console.log(temp);  // ["a", "yes", 12]
console.log(a);     // [1, 2.5, "a", "yes", 12, 23]  原数组不发生改变 

var temp = a.slice(2,15);   //裁剪下标为2到下标为15的元素；结束下标超出数组总长
console.log(temp);  // ["a", "yes", 12, 23]  结束下标自动以原数组结尾下标为结束下标
console.log(a);     // [1, 2.5, "a", "yes", 12, 23]

 

七.数组元素排序

     数组的排序：是在原数组的基础上对数组元素进行整理，使得元素按照一定顺序排列，不会生成副本。

     数组排序一般使用数组对象内置方法sort()。sort()方法用于对数组的元素进行排序。

　　　如果调用该方法时没有传入参数，将按字母顺序对数组中的元素进行默认排序，是按照字符编码的顺序进行排序。如果想按其他标准进行排序，则需要提供比较函数，该函数比较两个值，然后返回一个数字来说明这两个值的大小。比较函数具有两个参数 a 和 b，其返回值如下：

　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值(-1)。

　　若 a 等于 b，则返回 0。

　　若 a 大于 b，则返回一个大于 0 的值。

　　举例说明：

1、纯字符串排序
var a = ["zhao","qian","sun","li","zhou","wu","zheng"];
var temp = a.sort();
console.log(a); // ["li", "qian", "sun", "wu", "zhao", "zheng", "zhou"]
console.log(temp);  // ["li", "qian", "sun", "wu", "zhao", "zheng", "zhou"]  返回排好序的原数组 先按第一个字母排序，第一个相同则按第二个排序，以此类推。

2、字符串和数字混杂
var a = ["zhao","qian",1,"li","zhou","wu",2];
var temp = a.sort();
console.log(a); //[1, 2, "li", "qian", "wu", "zhao", "zhou"] 
先排数字，后排字符串，其实这的1,2排序看似正确，其实不是按照他们的大小排的，而是按照1和2的编码顺序排的。从下面这个例子可以看出。

3、  纯数字排序(但不提供比较函数)
var a = [11,5,1,13,20,-1,2];
var temp = a.sort();
console.log(a);  // [-1, 1, 11, 13, 2, 20, 5] 
从这就可以看出默认排序是按照字符编码顺序排的，而不是大小

4、  纯数字正确排序(需要提供排序函数)
var a = [11,5,1,13,20,-1,2];
var temp = a.sort(sortNumber);
console.log(a);  // [-1, 1, 2, 5, 11, 13, 20]  这才是正确的从小到大排序
function sortNumber(a,b) 这是从小到大排序
{
    return a - b
}
function sortNumber(a,b) 这是从大到小排序
{
    return b – a
}
console.log(a);  // [20, 13, 11, 5, 2, 1, -1] 这是从大到小排序结果            

 

八.数组的格式化

　　数组也有尴尬的时候，有时候我们需要将数组转化为字符串进行传参，或者进行数据存储等，那么这时候就需要将数组转化成字符串。

　　join() 方法用于把数组中的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。Join方法返回一个新的字符串副本，不会对原数组进行修改。

　　语法格式：arrayObject.join(separator)     返回一个字符串，该字符串是通过把 arrayObject 的每个元素转换为字符串，然后将这些字符串连接起来，在两个元素之间插入separator 字符而生成。

　　举例说明：

var a = [1,2.5,"a","yes",12,23];
var temp = a.join();  //默认格式化，不提供连接字符
console.log(temp); //1,2.5,a,yes,12,23
console.log(a);　　// [1, 2.5, "a", "yes", 12, 23]

var a = [1,2.5,"a","yes",12,23];
var temp = a.join(“|”);   //提供连接字符,但连接字符必须是字符(“x”)形式
console.log(temp); // 1|2.5|a|yes|12|23
console.log(a);　　// [1, 2.5, "a", "yes", 12, 23]

 

九.数组的建立

　　var arrayObj = new Array();　//创建一个数组 通过内置对象Array()进行创建

　　var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度

　　var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//创建一个数组并初始化赋值

　　var arrayObj = [];    //也可以创建一个数组，并已完成初始化,只不过是个空的,没有实际元素

　　注：需要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

　　数组是JavaScript提供的一个内部对象，它是一个标准的集合，我们可以添加(push)、删除(shift)里面元素，还可以通过for循环遍历里面的元素。

附件：数组对象内置操作方法

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值