引用类型-Array类型
2016-11-01 本文已影响0人
章丸丸
EAMAScript数组的每一项可以保存任何类型的数据
1.创建数组
- 使用Array构造函数
var animals = new Array(); //无参数时，创建一个空数组
var animals = new Array(20); //只有一个数字参数时，创建一个长度为20的空数组
var animals = new Array(20,9); //多个数字参数时，参数作为初始化数据，创建一个数组[20,9]
var animals = new Array("dog","cat","rabbit"); //创建一个包含3个字符串的数组
var animals = new Array("elephant"); //创建一个包含一项的数组
- 数组字面量方法
var animals = ["dog","cat","rabbit"]; //创建一个包含3个字符串的数组
var animals = []; //创建一个空数组
var animals = [1,2,]; //不推荐写法；会创建一个包含2项或3项的数组
var animals = [,,,,,] //不推荐写法；会创建一个包含5项或6项的数组
2.访问值和设置值
var animals = ["dog","cat","rabbit"];
console.log( animals[0] ); //dog；按索引访问显示数组第一项
animals[2] = "elephant"; //修改数组第三项
console.log(animals); //["dog", "cat", "elephant"]
animals[3] = "zebra"; //新增第四项
console.log(animals); //["dog", "cat", "elephant", "zebra"]
3.length属性
- 数组的项数也就是长度保存在
length属性中 -
length属性不是只读的 - 数组最后一项的索引是
length - 1
var animals = ["dog","cat","rabbit"];
console.log(animals.length); //3
animals.length = 2; //移除数组最后一项
console.log( animals[2] ); //undefined
console.log(animals); //["dog", "cat"]
animals.length = 3; //新增数组最后一项
console.log( animals[2] ); //undefined
console.log(animals.length); //3
var animals = ["dog","cat","rabbit"];
animals[animals.length] = "elephant"; //末尾添加
console.log(animals); //["dog", "cat", "rabbit", "elephant"]
var animals = ["dog","cat","rabbit"];
animals[99] = "zebra"; //在数组索引99添加一个字符串"zebra"
console.log(animals.length); //100；该数组其中3-98索引的值都为undefined
4.转换方法
-
toString()：调用数组每一项的该方法，返回由数组中的每个值的字符串形式拼接成的字符串；alert()要接收字符串参数，因此会后台调用toString()方法
var animals = ["dog","cat","rabbit"];
console.log( animals.toString() ); //dog,cat,rabbit
alert(animals); //dog,cat,rabbit
-
valueOf()：返回的还是个数组
var animals = ["dog","cat","rabbit"];
console.log( animals.valueOf() ); //["dog", "cat", "rabbit"]
-
toLocaleString()：类似toString()方法，调用数组每一项的该方法并返回一个字符串 -
join()：使用不同分隔符将数组连接成字符串；只接收一个参数，用来作为分隔符的字符串，返回包含所以数组项的字符串
var num = [1,2,3,4,5];
console.log( num.join("-") ); //1-2-3-4-5
console.log( num.join() ); //1,2,3,4,5；不传参的情况下，则默认使用逗号分隔，相当于toString()
console.log(num); //[1, 2, 3, 4, 5]；该方法不改变原数组
-
split()：将一个String对象分割成字符串数组
var str = "hello my name is hunger";
console.log( str.split(" ") ); //["hello", "my", "name", "is", "hunger"]
5.栈方法
- 栈是一种LIFO（Last-In-First-Out）后进先出的数据结构，栈中项的推入和弹出只发生在栈的顶部
-
push()：接收任意数量的参数，逐个添加到数组末尾，返回修改后数组的长度
var animals = ["dog","cat","rabbit"];
console.log( animals.push("elephant","zebra") ); //5
console.log(animals); //["dog", "cat", "rabbit", "elephant", "zebra"]；改变原数组
-
pop：从数组末尾移除最后一项，返回移除项
var animals = ["dog", "cat", "rabbit", "elephant", "zebra"];
console.log( animals.pop() ); //zebra
console.log(animals); //["dog", "cat", "rabbit", "elephant"]；改变原数组
6.队列方法
- 队列数据结构的访问规则是FIFO（First-In-First-Out）；队列在末端添加项，前端移除项
-
unshift()：在数组前端添加任意个项并返回新数组的长度
var animals = ["rabbit", "elephant", "zebra"];
console.log( animals.unshift("dog","cat") ); //5
console.log(animals); //["dog", "cat", "rabbit", "elephant", "zebra"]；改变原数组
-
shift()：移除数组中的第一项并返回被移除项
var animals = ["rabbit", "elephant", "zebra"];
console.log( animals.shift() ); //rabbit
console.log(animals); //["elephant", "zebra"]；改变原数组
7.重排序方法
-
reverse()：反转数组项的顺序
var num = [0,1,2,3,4,5];
console.log( num.reverse() ); //[5, 4, 3, 2, 1, 0]
console.log(num); //[5, 4, 3, 2, 1, 0]；改变原数组
-
sort()：升序排列数组，调用数组的每一项的toString()方法，然后比较得到的字符串；即使数组中的每一项都是数值，比较的依然是字符串；但这种排序方式不太实用，因此sort()方法可接收一个比较函数作为参数，来确定哪个值位于哪个值的前面
var num = [0,1,5,10,15];
console.log( num.sort() ); //[0, 1, 10, 15, 5]；根据字符串排序的结果
console.log(num); //[0, 1, 10, 15, 5]；改变原数组
//带参数的情况：
//比较函数接收2个参数，value1和value2，如果value1在value2之前则返回负数，如果value1等于value2则返回0，如果value1在value2之后则返回正数
var arr = [1,3,5,2,4,6];
function compare1(value1,value2){
return value1 - value2;
}
function compare2(value1,value2){
return value2 - value1;
}
var result1 = arr.sort(compare1);
console.log(result1); //[1, 2, 3, 4, 5, 6]
var result2 = arr.sort(compare2);
console.log(result2); //[6, 5, 4, 3, 2, 1]
8.操作方法
-
concat()：用于拼接数组，基于当前数组中的所有项创建一个新数组
var animals = ["rabbit", "elephant", "zebra"];
var arr = animals.concat(); //无参数时仅复制当前数组并返回新数组
console.log(arr); //["rabbit", "elephant", "zebra"]
var arr = animals.concat("dog",1,[2,3,4]); //参数为数组时将数组中的每一项添加进去
console.log(arr); //["rabbit", "elephant", "zebra", "dog", 1, 2, 3, 4]；生成新数组
console.log(animals); //["rabbit", "elephant", "zebra"]；不改变原数组
-
slice()：基于当前数组中的一个或多个项创建一个新数组；有2个参数时分别表示起始位置和结束位置，当只有一个参数时表示只有起始位置
var num = [0,1,2,3,4,5];
console.log( num.slice(1) ); //[1, 2, 3, 4, 5]；只有一个参数，表示从起始位置至当前数组末尾
console.log( num.slice(1,4) ); //[1, 2, 3]；有2个参数时，返回的新数组不包括结束位置的项
console.log( num.slice(4,1) ); //[ ]；起始位置小于结束位置时，返回空数组
console.log( num.slice(1,-1) ); //[1,2,3,4]；参数为负数时，用数组长度加上该数计算，则num.slice(1,5)
console.log(num); //[0,1,2,3,4,5]；不改变原数组
-
splice()：最强大的数组方法，主要用途是向数组的中部插入项- 删除：可以删除任意数量的项，需指定2个参数：删除的起始位置和删除的项数
var num = [0,1,2,3,4,5];
console.log( num.splice(1,2) ); //[1, 2]；返回被删除的项
console.log(num); //[0,3,4,5]；改变原数组
- 插入：可以向指定位置插入任意数量的项，需提供3个参数：插入的起始位置，0（删除的项数，因为是插入所以为0）和要插入的项
var num = [0,1,2,3,4,5];
console.log( num.splice(2,0,"cat","milk") ); //[ ]；因为没被删除的项，所以返回空数组
console.log(num); //[0, 1, "cat", "milk", 2, 3, 4, 5]；改变原数组
- 替换：可以向指定位置插入任意数量的项，且删除任意数量的项，需3个参数：起始位置，要删除的项数和要插入的任意项；插入的项数与删除的项数不需要相等
var num = [0,1,2,3,4,5];
console.log( num.splice(1,4,"cat","milk") ); //[1, 2, 3, 4]；返回被删除的项
console.log(num); //[0, "cat", "milk", 5]；改变原数组
9.位置方法
-
indexOf()：返回要查找的项的索引（比较查找项与数组的每一项时使用全等操作符），从数组开头开始查找；接收2个参数：要查找的项和查找的起点位置（可选，默认从0开始）； -
lastIndexOf()：返回要查找的项的索引（比较查找项与数组的每一项时使用全等操作符），从数组末尾开始查找；接收2个参数：要查找的项和查找的起点位置（可选，默认从0开始）；
var arr = [0,3,9,"milk",2,9,"cat",5];
console.log( arr.indexOf(9) ); //2；从开头查找第一个数字9
console.log( arr.indexOf(9,3) ); //5；从下标为3的位置（"milk"）开始查找数字9
console.log( arr.lastIndexOf(9) ); //5；从末尾开始查找数字9，返回其在数组中的索引值
console.log( arr.lastIndexOf(9,3) ); //2；从末尾下标3查找
console.log( arr.lastIndexOf(4) ); //-1；没找到时返回-1
10.迭代方法
- 每个方法都接收2个参数：要在每一项都运行的函数和运行该函数的作用域对象（影响
this的值，可选）；其中每个函数接收3个参数：数组每一项的值，索引值及数组对象本身-
every()和some()：都用于查询数组的项是否满足某个条件，返回一个布尔值
-
var num = [1,2,3,4,5,4,3,2,1];
var everyResult = num.every(function(item,index,array){
return (item > 2); //如果数组的每一项都大于2返回true，否则返回false
})
console.log(everyResult); //fasle；如果函数对每一项都返回true，则返回true，否则返回false
console.log(num); //[1, 2, 3, 4, 5, 4, 3, 2, 1]；不改变原数组
var num = [1,2,3,4,5,4,3,2,1];
var everyResult = num.some(function(item,index,array){
return (item > 2); //如果数组中任意一项大于2返回true，否则返回false
})
console.log(everyResult); //true；如果函数对任意一项返回true就返回true，否则返回false
console.log(num); //[1, 2, 3, 4, 5, 4, 3, 2, 1]；不改变原数组
-
filter()：利用指定函数确定是否包含某一项；对查询是否符合某些条件很有用，返回一个满足函数的数组项组成的数组
var num = [1,2,3,4,5,4,3,2,1];
var everyResult = num.filter(function(item,index,array){
return (item > 2); //返回一个所有数值都大于2的数组
})
console.log(everyResult); //[3, 4, 5, 4, 3]；创建一个新数组每一项都满足函数
console.log(num); //[1, 2, 3, 4, 5, 4, 3, 2, 1]；不改变原数组
-
map()：返回每次函数调用的结果组成的数组
var num = [1,2,3,4,5,4,3,2,1];
var everyResult = num.map(function(item,index,array){
return (item * 2); //让数组每一项都乘2
})
console.log(everyResult); //[2, 4, 6, 8, 10, 8, 6, 4, 2]；返回数组每一项都执行函数后的结果组成的新数组
console.log(num); //[1, 2, 3, 4, 5, 4, 3, 2, 1]；不改变原数组
-
forEach()：对数组的每一项执行给定函数，没有返回值；本质上与for循环遍历数组一样
var num = [1,2,3,4,5,4,3,2,1];
var everyResult = num.forEach(function(item,index,array){
//执行某操作
})
11.归并方法
-
reduce()和reduceRight()：遍历数组，调用回调函数，将数组元素组合成一个值并返回；reduce从索引最小值开始，reduceRight反向；接收2个参数：函数和初始值（可选）
var num = [1,2,3,4,5];
var value = num.reduce(function(prev,cur,index,array){ //4个参数分别为前一个值、当前值、索引值和数组对象
return prev + cur;
})
console.log(value); //15
//第一次迭代发生时，数组前两项分别是第一、二个参数，函数的返回值会作为第一个参数传给下一项
//比如第一次迭代1+2=3，那么3就作为下一次迭代的第一个参数
console.log(num); //[1, 2, 3, 4, 5]；不改变原数组
var num = [1,2,3,4,5,6];
var value = num.reduceRight(function(prev,cur,index,array){
return prev - cur;
},100) //初始值（prev）为100，
console.log(value); //79
console.log(num); //[1, 2, 3, 4, 5]；不改变原数组
12.用splice实现push、pop、shift、unshift方法
var arr = [1,2,3,4,5];
var pushArr = arr.splice(arr.length,0,9,99,999); //[1, 2, 3, 4, 5, 9, 99, 999]
var popArr = arr.splice(arr.length-1,1); //[1, 2, 3, 4]
var shiftArr = arr.splice(0,1); //[2, 3, 4, 5]
var unshiftArr = arr.splice(0,0,9,99,999); //[9, 99, 999, 1, 2, 3, 4, 5]
13.写一个find函数，实现下面的功能
var arr = [ "test", 2, 1.5, false ];
find(arr, "test"); // 0
find(arr, 2); // 1
find(arr, 0); // -1
var arr = [ "test", 2, 1.5, false ];
function find(array,item){
if ( array.length > 0 ){
for(var i=0;i<array.length;i++){
if ( item === array[i] ) {
return i; //本题关键是一旦匹配到相符的就立即return，不然函数会一直执行下去直到return -1;
}
}
}
return -1;
}
console.log( find(arr, "test") ); // 0
console.log( find(arr, 2) ); // 1
console.log( find(arr, 0) ); // -1
14.写一个函数，把数组arr中的数字过滤出来赋值给新数组newarr， 原数组arr不变
var arr = ["a", "b", 1, 3, 5, "b", 2];
var narr = arr.filter(function(item){
return (typeof item === 'number');
})
console.log(narr); // [1,3,5,2]
console.log(arr); //["a", "b", 1, 3, 5, "b", 2]
15.写addClass、removeClass函数
var obj = {
className: 'open menu'
};
function addClass(object,cls){
var arr = object.className.split(" ");
for(var i=0;i<arr.length;i++){
if( arr[i] === cls ){
return "已存在";
}
if( i === arr.length-1 ){
arr.push(cls);
return object.className = arr.join(" "); //对原始数组遍历结束之后就可以return了，不然新增项之后数组改变了，会继续遍历
}
}
}
function removeClass(object,cls){
var arr = object.className.split(" ");
for(var i=0;i<arr.length;i++){
if( arr[i] === cls ){
arr.splice(i,1);
object.className = arr.join(" ");
return object.className;
}
if( i === arr.length-1 ){
return "无匹配项";
}
}
}
console.log( addClass(obj,'new') ); //open menu new
console.log( addClass(obj,'open') ); //已存在
console.log( addClass(obj,'me') ); //open menu new me
console.log( removeClass(obj,'open') ); //menu new me
console.log( removeClass(obj,'blabla') ); //无匹配项
16.写一个camelize函数，把my-short-string形式的字符串转化成myShortString形式的字符串
function camelize(str){
var arr = str.toLowerCase().split("-");
for(var i=1;i<arr.length;i++){
arr[i] = arr[i].substring(0,1).toUpperCase() + arr[i].substring(1);
}
return arr.join("");
}
console.log( camelize("background-color") ); //backgroundColor
console.log( camelize("list-style-image") ); //listStyleImage
console.log( camelize("my-short-string") ); //myShortString
17.写一个函数isPalindrome,判断一个字符串是不是回文字符串（正读和反读一样，比如abcdcba是回文字符串，abcdefg不是）
function isPalindrome(str){
var arr = str.split("");
if( arr.length % 2 != 0 ) {
var arr1 = arr.slice(0, (arr.length - 1) / 2);
var arr2 = arr.slice((arr.length + 1) / 2);
var str1 = arr1.reverse().join("");
var str2 = arr2.join("");
if ( str1 === str2 ) {
return "回文";
}
}
if( arr.length % 2 == 0 ){
var arr1 = arr.slice(0, (arr.length) / 2);
var arr2 = arr.slice((arr.length) / 2);
var str1 = arr1.reverse().join("");
var str2 = arr2.join("");
if ( str1 === str2 ) {
return "回文";
}
}
return "不是回文";
}
console.log( isPalindrome("abcba") ); //回文
console.log( isPalindrome("abccba") ); //回文
console.log( isPalindrome("abcdcba") ); //回文
console.log( isPalindrome("aa") ); //回文
console.log( isPalindrome("abcdba") ); //不是回文
18.写一个ageSort函数实现数组中对象按age从小到大排序
var john = { name: "John Smith", age: 23 }
var mary = { name: "Mary Key", age: 18 }
var bob = { name: "Bob-small", age: 6 }
var people = [ john, mary, bob ];
function ageSort(arr){
arr.sort(function(a,b){
return a.age - b.age;
})
console.log(arr);
}
ageSort(people); // [ bob, mary, john ]
19.写一个filter(arr, func)函数用于过滤数组，接受两个参数，第一个是要处理的数组，第二个参数是回调函数(回调函数遍历接受每一个数组元素，当函数返回true时保留该元素，否则删除该元素)
function isNumeric(el){
return typeof el === 'number';
}
function isPositive(val){
return typeof val === "number" && val > 0
}
arr = ["a",3,4,true, -1, 2, "b"];
function filter(arr,func){
for(var i=0;i<arr.length;i++){
if( !func(arr[i]) ){
arr.splice(i,1);
}
}
console.log(arr);
}
filter(arr,isNumeric); //[3, 4, -1, 2]
filter(arr, isPositive); //[3, 4, 2]
