百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

js数组的各种操作

作者程帆课程任务二:零基础JavaScript编码(二)2007次浏览52017-02-25 20:50

欢迎和我一起学习,链接

总结

js中的数组

数组的创建

显示的创建
var arrayObj = new Array(); //创建一个数组

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

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

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

直接创建
var arr = [];
var arr = [1,2,3];
var arr = [[1,2],[3,4]];

推荐使用这种方式

数组的访问与操作

直接通过下标进行访问,这个大家应该都知道。

取值
`var testGetArrValue=arrayObj[1]; //获取数组的元素值`
赋值
`arrayObj[1]= "这是新值"; //给数组元素赋予新的值`
数组元素的添加
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""
数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值

arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移

arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向

arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
数组的反转
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
数组的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

可以看做split的逆向操作

数组的遍历

一般我们使用 for-in 方式进行数组的遍历

for (var index in arrayObj){
    var obj = arrayObj[index];
}

当然,使用普通的for循环也是可以的:

for (var index = 0index <  arrayObj.length; index++){
    var obj = arrayObj[index];
}

数组的排序

一般我们使用sort函数进行数组的排序

普通数组的排序

sort()方法有一个可选参数,是用来确定元素顺序的函数。如果这个参数被省略,那么数组中的元素将按照ASCII字符顺序进行排序。如:

var arr = ["a", "b", "A", "B"];
arr.sort();
console.log(arr);//["A", "B", "a", "b"]

如果数组元素是数字呢,结果会是怎样?

var arr = [15, 8, 25, 3];
arr.sort();
console.log(arr);//[15, 25, 3, 8]

结果是 [15, 25, 3, 8] 。其实,sort方法会调用每个数组项的toString()方法,得到字符串,然后再对得到的字符串进行排序。虽然数值15比3大,但在进行字符串比较时"15"则排在"3"前面。显然,这种结果不是我们想要的,这时,sort()方法的参数就起到了作用,我们把这个参数叫做比较函数。

比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个之后则返回一个正数。例子:

var arr = [23, 9, 4, 78, 3];
arr.sort(function(a,b){
    return b-a;
});
console.log(arr); // [78,23,9,4,3]

a,b表示数组中的任意两个元素,若return > 0 b前a后;reutrn < 0 a前b后;a=b时存在浏览器兼容

> 简化一下:a-b输出从小到大排序,b-a输出从大到小排序。

对象数组的排序

如果数组项是对象,我们需要根据数组项的某个属性对数组进行排序

var objectList = [];
function Persion(name,age){
    this.name=name;
    this.age=age;
}
objectList.push(new Persion('jack',20));
objectList.push(new Persion('tony',25));
objectList.push(new Persion('stone',26));
objectList.push(new Persion('mandy',23));

//按年龄从小到大排序
objectList.sort(function(a,b){
    return a.age-b.age
});
for(var i=0;i<objectList.length;i++){
    document.writeln('<br />age:'+objectList[i].age+' name:'+objectList[i].name);
}

js中 "+" 的使用

"+" 不仅是四则运算中的加法,在处理字符串的时候,它还是字符串连接符。

看下面几个例子:

var a = 1 + 2;
var b = 1 + "b";
var c = 1 + 2 + "c";
var d = "d" + 1 + 2;
var e = "e" + (1 + 2);

console.log("a=" + a + ",b=" + b + ",c=" + c + ",d=" + d + ",e=" + e)
//a=3,b=1b,c=3c,d=d12,e=e3

看了这些,你大概已经知道怎么用了。

解题的时候,有这样一段代码:

for (var d in doms){
    var li = document.createElement("li");
    li.innerHTML = "第" + (d + 1) + "名: " + doms[d][0] + "," +  doms[d][1]; //看这里
    ul.appendChild(li);
}

我想输出 【第1名】【第2名】这样的数据,但是如果这样写的话,最后输出的是【第01名】【第12名】

为什么会这样呢?我不是加了括号了么?

问题就出现在d的定义上,[var d],d可不一定就是数字,所以要这样写:

function addLiToUl(doms) {
    var ul = document.getElementById("aqi-list");
    for (var d in doms){
        var li = document.createElement("li");
        li.innerHTML = "第" + (parseInt(d) + 1) + "名: " + doms[d][0] + "," +  doms[d][1];
        ul.appendChild(li);
    }
}

后记

还有很多不完善的地方,之后会再改进,先去撸下一道题了。

基础!是最重要的!不要好高骛远!

引用:
http://www.cnblogs.com/xljzlw/p/3694861.html
http://www.cnblogs.com/longze/archive/2012/11/27/2791230.html
http://www.cnblogs.com/tianguook/archive/2010/09/30/1839648.html

0条评论