js数组
【书山有路勤为径,学海无涯苦作舟】
一、生成数组
1、使用Array构造函数: var arr = new Array(10); //创建一个包含10项的数组
2、使用数组字面量表示法: var arr1 = [10];
// console.log(arr) //[]
// console.log(arr1) //[10]
二、数组方法
var arr2 = ['nice', 'hello', 'good', 'hi'];
var arr3 = [100, 21, 3, 14, 85, 36];
var arr4 = ['a', 'b', 'c', 'd', 'e', 'f'];
1、join()
join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用'逗号'为分隔符,该方法只接收一个参数:即分隔符。
var arr5 = arr2.join("-");
//var arr6 = arr3.join("-");
//console.log(arr2) //['nice', 'hello', 'good', 'hi'];
//console.log(arr3) //[1, 2, 3, 4, 5, 6]
//console.log(arr5) //nice-hello-good-hi
//console.log(arr6) //1-2-3-4-5-6
//此方法不改变原数组,只是将数组转变为字符串输出。
//通过join()方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串,函数如下:
function repeatString(str,n) {
return new Array(n+1).join(str);
}
// console.log(repeatString("abc",3)); // abcabcabc
//console.log(repeatString("Hi",5)); //HiHiHiHiHi
2、push()和pop()
//push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度,原数组发生改变。
//pop():数组末尾移除最后一项,减少数组的 length值,然后返回移除的项,原数组发生改变。
//var len1 = arr2.push("haha")
//var len2 = arr2.push(...arr4)
//console.log(len1) //5
//console.log(len2) //11
// console.log(arr2) //['nice', 'hello', 'good', 'hi', "haha", "a", "b", "c", "d", "e", "f"]
//返回尾部添加后的新数组长度,原数组发生改变
// var str1 = arr2.pop()
// console.log(str1) //f
// console.log(arr2) //['nice', 'hello', 'good', 'hi', "haha", "a", "b", "c", "d", "e"]
// console.log(arr2.length) //10
// 返回尾部被删除的元素,原数组发生改变
3、unshift() 和 shift()
//unshift:将参数添加到原数组开头,并返回数组的长度 。
//shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
//这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。
// var len3 = arr2.unshift(10)
// var len4 = arr2.unshift(...['a','b','c'])
// console.log(len3) //5
// console.log(len4) //8
// console.log(arr2) //["a", "b", "c", 10, 'nice', 'hello', 'good', 'hi']
//返回头部添加后的新数组长度,原数组发生改变
//var str2 = arr2.shift()
//console.log(str2) //a
//console.log(arr2) //["b", "c", 10, 'nice', 'hello', 'good', 'hi']
//返回头部被删除的元素,原数组发生改变
4、sort():按升序排列数组项----即最小的值位于最前面,最大的值排在最后面(比较的是ASCII码表的值)。
//在排序时,sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值, sort()方法比较的也是字符串,因此会出现以下的这种情况:
// var arr7 = arr2.sort()
// var arr8 = arr3.sort()
// console.log(arr2) //["good", "hello", "hi", "nice"]
// console.log(arr3) //[100, 14, 21, 3, 36, 85]
// console.log(arr7) //["good", "hello", "hi", "nice"]
// console.log(arr8) //[100, 14, 21, 3, 36, 85]
//返回被sort后的新的数组,原数组也随之改变
//为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数:
function compare(a,b){
if(a>b){return 1}
else if(a<b){return -1}
else {return 0}
}
function sort(a,b){
return a-b;
}
// var arr9 = arr2.sort(sort)
// var arr10 = arr3.sort(sort)
// console.log(arr2) //["good", "hello", "hi", "nice"]
// console.log(arr3) //[3, 14, 21, 36, 85, 100]
// console.log(arr9) //["good", "hello", "hi", "nice"]
// console.log(arr10) //[3, 14, 21, 36, 85, 100]
//返回被sort后的新的数组,原数组也随之改变
5、reverse()
//reverse():反转数组项的顺序。
// var arr11 = arr2.reverse()
// console.log(arr2) //["hi", "good", "hello", "nice"]
// console.log(arr11) //["hi", "good", "hello", "nice"]
//返回reverse之后的新数组,原数组随之改变
//反转字符串的方法
function reverseString(str){
return str.split(" ").reverse().join(" ");
}
// console.log(reverseString("hello world !")) //! World hello
6、concat()
//concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
// var arr12 = arr2.concat("bye",arr3)
// console.log(arr2) //["nice", "hello", "good", "hi"]
// console.log(arr3) //[100, 21, 3, 14, 85, 36]
// console.log(arr12) //["nice", "hello", "good", "hi", "bye", 100, 21, 3, 14, 85, 36]
//从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。
//不改变原数组
//但是如果传入的是一个二维数组呢?
// var arr13 = arr2.concat("tom",["hh",["ad","hp"]])
// console.log(arr2) //["nice", "hello", "good", "hi"]
//console.log(arr13) //["nice", "hello", "good", "hi", "tom", "hh", Array[2]]
// console.log(arr13[6]) //["ad", "hp"]
//不会展开二维数组的每一项
7、slice()
//slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
//var arr14 = arr3.slice(1)
//var arr15 = arr3.slice(1,5)
// var arr16 = arr3.slice(2,-3)
// var arr17 = arr3.slice(-6,-3)
// console.log(arr3) //[100, 21, 3, 14, 85, 36]
// console.log(arr14) //[21, 3, 14, 85, 36]
// console.log(arr15) //[21, 3, 14, 85]
//console.log(arr16) //[3]
//console.log(arr17) //[100, 21, 3]
//返回从原数组中指定开始下标到结束下标(被截取)之间的项组成的新数组。原数组不会发生改变。当参数出现负数时,将负数加上原数组长度的值(6)来替换该位置的数即可。
8、splice()
//splice():很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。
//注意:该方法会改变原始数组。
//arrayObject.splice(index,howmany,item1,.....,itemX)
/* 参数1: 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 index,数组的索引值
* 参数2: 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
* 参数3: 可选。向数组添加的新项目。
* */
//var arr18= arr2.splice(1,3) //在['nice', 'hello', 'good', 'hi']数组index1后做删除['hello', 'good', 'hi']操作。(相当于删除)
//console.log(arr2) //["nice"]
//console.log(arr18) //["hello", "good", "hi"]
//var arr19= arr2.splice(1,0,"ph","hty") //在["nice"]数组index1后做添加["ph","hty"]操作。(相当于添加)
//console.log(arr2) //["nice", "ph", "hty"]
//console.log(arr19) //[]
// var arr20 = arr2.splice(1,2,"ph","hty","fd") //在["nice", "ph", "hty"]数组index1后做删除["ph","hty"],然后再添加 ["ph", "hty", "fd"]操作。(相当于替换)
//console.log(arr2) //["nice", "ph", "hty", "fd"]
//console.log(arr20) //["ph", "hty"]
//返回被删除的数组,如果没有删除项,则返回空数组[],原数组发生相应的改变。
9、indexof()和 lastIndexOf()
//indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
//lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。
//这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符。
// index: 0 1 2 3 4 5 6 7 8 9 10
//var arr21 = [1,3,5,5,7,7,5,5,5,3,1];
// console.log(arr21.indexOf(5)); //2
// console.log(arr21.lastIndexOf(5)); //8
// console.log(arr21.indexOf(5,4)); //6
//注释:从index4的位置(即数组第一个7)开始往数组后查询5所在本数组的index首次出现的位置,即index6所在的位置5
//console.log(arr21.lastIndexOf(5,5)); //3
//注释:从index5的位置(即数组第二个7)开始往数组前查询5所在本数组的index首次出现的位置,即index3所在的位置5
// console.log(arr21.indexOf("5")); //-1
//返回被查找项的位置索引,如果找不到就返回-1。
//注意:索引是从正数第一个(index0)开始,不存在逆向
补充:
10、foreach()
//forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参
//arr.forEach(function(item,index,items){})
/*参数1:遍历的数组内容item
* 参数2:对应的数组索引 index
* 参数3:数组本身items
*/
/*var arr22= [1, 2, 3, 4, 5];
arr22.forEach(function(x,index,a){
console.log(x + '|' + index + '|' + (a === arr22));
});*/
//1|0|true
//2|1|true
//3|2|true
//4|3|true
//5|4|true
11、map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
//map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
//.map(callback(index,domElement))
//由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
/*var arr23 = [1, 2, 3, 4, 5];
var arr24 = arr23.map(function(item){
console.log(item)
return item*item
})*/
//console.log(arr23) //[1, 2, 3, 4, 5]
//console.log(arr24) //[1, 4, 9, 16, 25]
12、filter()
//filter(fn(item,index){}):“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
/*var arr25 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr26 = arr25.filter(function(x,index) {
return index % 3 === 0 || x >= 8;
});*/
//console.log(arr26); //[1, 4, 7, 8, 9, 10]
13、every()
//every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
/*var arr27 = [1, 2, 3, 4, 5];
var arr28 = arr27.every(function(x){
return x < 10;
});*/
//console.log(arr28) //true
14、some()
//some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
/*var arr29 = [1, 2, 3, 4, 5];
var arr30 = arr29.some(function(x){
return x < 2;
});*/
// console.log(arr30) //true
15、reduce()和 reduceRight()
//这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。
//这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。
//传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。
/*var arr31 = [1,2,3,4,5];
var arr32 = arr31.reduce(function(pre,cur,index,items){
console.log(pre)
console.log(cur)
console.log(items)
console.log(index)
return pre * cur;
},10)*/
//console.log(arr32);
......完
【根据自己的理解手敲,如有错误,请留言指正,待大神指点】...