前端开发JS——数组

25、数组

1）声明数组：

　　①构造函数创建数组

var arr = new Array();

console.log(arr):        //[]

 

var arr = new Array(20);   //设置数组的长度为20

console.log(arr);         //[,,,,,,,,,,,]   单个打印的值为undefined

 

var arr = new Array('zhangsan', 'lisi');

console.log(arr);     //['zhangsan', 'lisi']

console.log(arr.length);   //2

console.log(arr[1]);         //lisi

console.log(arr[100])     //undefined

 

　　②数组字面量创建数组

var arr = [];

console.log(arr);    //[]

var arr = ['zhangsan', 'lisi' ];

console.log(arr);   //['zhangsan', 'lisi']

 

2）访问数组 

var arr = [1, 'zhangsan', 'lisi', 'hello'];

console.log(arr[2]);    //lisi

console.log(arr[100]);     //undefined

 

//给index为10的位置设置123，空余的位置补undefined

arr[10] = 123;

console.log(arr);                   //[1, 'zhangsan', 'lisi', 'hello',,,,,,,,,123]

console.log(arr.length);          //11

 

//更改数组的长度100，空余的位置补undefined

arr.length = 100;

console.log(arr);        //[1, 'zhangsan', 'lisi', 'hello',,,,,,,,,,,,,,,,]

//更改数据的长度2，0，1的位置的值保持不变，其余删除

arr.lenght = 2;

console.log(arr);        //[1, 'zhangsan',]

 

3）数组测试和数组序列化 

　　①数组测试

var arr = [1,2,3,4];

console.log(typeof arr);      //object

consolel.log(arr instanceof Array);       //true

console.log(arr instanceof Object);          //true

console.log(Array.isArray(arr));       //true

 

//arguments不是一个数组

function test(){

console.log(Array.isArray(arguments));

}

test(); //false

 

　　②数组序列化

console.log(arr);         //[1,2,3,4]  这里是数组类型

//数组序列化

console.log(arr.toString());  //1,2,3,4

console.log(arr.join());       //1,2,3,4

console.log(arr.join(&));   //1&2&3&4

console.log(JSON.stringify(arr));   // [1,2,3,4]  这里是字符串类型

 

4）栈，队列方法  

　　①栈 LIFO (Last-In-First-Out) 

push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度 

var arr = [2,3,4,5,6,7];

console.log(arr.push(8));   //7

console.log(arr);   //[2,3,4,5,6,7,8]

 

pop() 从数组的末尾移除最后一项，减少数组的length值，返回移除的项 

console.log(arr.pop());  //8

console.log(arr);   //[2,3,4,5,6,7]

 

　　②队列 FIFO (First-In-First-Out) 

shift() 移除数组中的第一个项并且返回该项，同时将数组的长度减一。 

console.log(arr.shift());   //2

console.log(arr);             //[3,4,5,6,7]

 

unshift() 在数组的前端添加任意个项，并返回新数组的长度。

console.log(arr.unshift(2));   //6

console.log(arr);             //[2,3,4,5,6,7]

 

5）排序 

　　①reverse() 反转数组项的顺序  （原数组发生更改）

var arr = [5,2,4,67,32,64,752,45];

console.log(arr);   //[5,2,4,67,32,64,752,45]

console.log(arr.reverse());   // [45,752,64,32,67,4,2,5]

console.log(arr);     //[45,752,64,32,67,4,2,5]

 

　　②sort() 

默认排序：该方法会调用每个数组项的toString() 方法，然后按照字符序列排序 

     console.log(arr.sort());     //[2,4,5,32,45,64,67,752]

 

自定义排序：

a.该方法可以接受一个比较函数作为参数，比较函数有两个参数

b.如果第一个参数位于第二个参数之前，返回负数

c.如果第一个参数位于第二个参数之后，返回正数

这个是相当于冒泡排序一样

function com(a, b){

　　return a-b

}

console.log(arr.sort(com));   //[2,4,5,32,45,64,67,752]

 

                                        //根据字段进行排序

var stus = [

　　{name:'zhangsan',age:21,},

　　{name:'lisi',age:22,}

];

console.log(stus);            //[{name:'zhangsan',age:21,},  {name:'lisi',age:22,}]

stus.sort(compare('name', 'asc'))

console.log(stus);          //[ {name:'lisi',age:22,}， {name:'zhangsan',age:21,}]

function compare(attr,rules){

　　return function(o1,o2){

　　　　if(rules === 'asc'){

　　　　　　if(o1[attr]<o2[attr){

　　　　　　　　return -1;

　　　　　　}

　　　　　　else{

     　　　　　　return 1;

　　　　　　}

　　　　}

　　　　else{

　　　　　　if(o1[attr]>o2[attr]){

　　　　　　　　return -1;

　　　　　　}

　　　　　　else{

　　　　　　　　return 1;

　　　　　　}

　　　　}

　　};

}

 

26、数组（后续）

①截取方法

　　concat() 数组拼接，先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾， 返回副本，不改变原数组。

　　　　var arr = [3,4,5,2,4];

　　　　var arr2 = [1,2,3,4,5];

　　　　arr.push(arr2)

　　//这是直接用push的方法，会将整个列表添加在末尾，而且原数组也会改变

          console.log(arr);   //[3,4,5,2,4,[1,2,3,4,5] ] 

 

　　//这里可以采用遍历arr2数组，再arr.push(arr[i])

　　　　if(Array.isArray(arr2)){

　　　　　　for(var i = 0; i < arr2.length; i++){

　　　　　　　　arr.push(arr2[i]);

　　　　　　}

　　　　}

          //如果是数组类型的值，就展开放进去

　　　　var result = arr.concat(arr2);

　　　　console.log('原数组',arr);   //原数组[3,4,5,2,4]

　　　　console.log('结果',result);//结果[3,4,5,2,4,1,2,3,4,5 ]

 

　　//如果不是数组类型的数据，直接放在末尾

　　　　var result = arr.concat('hello');

　　　　console.log('原数组',arr);   //原数组[3,4,5,2,4]

　　　　console.log('结果',result);//结果[3,4,5,2,4,'hello' ]

 

concat的执行过程：

Ⅰ.不改变原数组，创建副本

Ⅱ.如果参数是数组，展开放进去

Ⅲ.如果参数是其他类型，直接将这个值放在末尾

Ⅳ.返回副本

 

重写concat方法

Array.prototype.myConcat = function(param){

//1、创建副本

var temp = [];    

for(var i = 0; i < this.length; i++){

　　temp.push(this[i]);

}

//2、数组类型

if(Array.isArray(param)){

　　for(var j = 0; j < param.length; i++){

　　　　temp.push(param[i]);

　　}

}

//3、其他类型

else{

　　temp.push(param);

}

//4、返回副本

return temp;

}

var result = arr.myConcat(arr2);

console.log('原数组',arr);   //原数组[3,4,5,2,4]

console.log('结果',result);//结果[3,4,5,2,4,1,2,3,4,5 ]

 

slice() 数组切割，可接受一个或者两个参数（返回项的起始位置，结束位置），返回的是一个数组，不改变原数组

　　①当接受一个 参数，从该参数指定的位置开始，到当前数组末尾的所有项

var arr = [12,34,45,65,76,89,98];

var result = arr.slice(2);

console.log(arr);     //[12,34,45,65,76,89,98]

console.log(resule);   //[45,65,76,89,98]

 

　　②当接受两个参数，起始 到结束之间的项，但是不包含结束位置的项。

var result2 = arr.slice(2,4);

console.log(result2);     //[45,65]

 

splice() 向数组的中部插入数据将始终返回一个数组，该数组中包含从原始数组中删除的项。 

删除：指定两个参数(删除的起始位置，要删除的项数，返回的是一个删除项组成的数组) 

var arr = [32,4,9,3,0];

var result = arr.splice(1,3);  

console.log(result);    //[4,9,3]

console.log(arr);   //[32,0]  //原数组改变

 

插入：指定三个参数(起始位置，0，要插入的项任意数量的项) 在起始位置插入项

arr.splice(1,0,'hello','sss');

console.log(arr);   //[32,'hello','sss',0]

 

替换：指定三个参数(起始位置，要删除的项数，要插入的任意数量的项)

arr.splice(1,2,1,2);

console.log(arr);   //[32,1,2,0]

 

　　②索引方法(索引值都是从左到右定义的) 

indexOf() 从数组开头向后查找，使用全等操作符，找不到该元素返回-1。第一个参数为要查找 的项，第二个参数（可选）为索引开始位置

var arr = [2,5,67,'2',3,2,45];

console.log(arr.indexOf(2));     //0

console.log(arr.indexOf(2,1));    //5   从索引为1的位置开始查找

console.log(arr.indexOf(22));    //-1

 

lastIndexOf() 从数组末尾向前查找，使用全等操作符，找不到该元素返回-1。第一个参数为要查找 的项，第二个参数（可选）为索引开始位置

          var arr = [2,5,67,'2',3,2,45];

console.log(arr.lastIndexOf(2));     //5

console.log(arr.lastIndexOf (2,3));    //0   从索引为1的位置开始查找

console.log(arr.lastIndexOf (22));    //-1

 　　

　　③迭代方法    参数： 每一项上运行的函数，运行该函数的作用域对象（可选）

every() 对数组中的每一运行给定的函数，如果该函数对每一项都返回true,则该函数返回true 

var arr = [23,45,1,4,3,45,7];

var result = arr.every(function(item, index, arr){

　　console.log(this);    //{}   这个结果是因为第二个参数是{}

　　return item > 40;

},{})

console.log(result);    //false

//如果是return item > 20，输出是{} {} {} false

 

every()方法重写

　　Array.prototype.myEvery = function(fun, funThis){

　　　　var result;

　　　　for(var i = 0; i < this.length; i++){

　　　　　　result = fun.call(funThis, this[i], i, this);  //result = fun.apply(funThis, [this[i], i, this];

　　　　　　if(!result){

    　　　　　　 break;

　　　　　　}

　　　　}

　　return result;

　　}

 

var arr = [23,45,1,4,3,45,7];

var result = arr.myEvery(function(item, index, arr){

console.log(this);    //{}   这个结果是因为第二个参数是{}

　　return item > 40;

},{})

console.log(result);    //false

//如果是return item > 20，输出是{} {} {} false

 

some() 对数组中的每一运行给定的函数，如果该函数对任一项都返回true,则返回true

var stus = [

　　{name:'xiaoer',age:12, },

　　{name:'zhangsan',age:22,},

　　{name:'lisi',age:20, },

　　{name:'wangwu',age:22,},

];

console.log(stus);

//判断数组中是否都是成年人，都是返回true，否则返回false

var result = !(stus.some(function(item,index,arr){

　　return item.age < 18;

}));

console.log(result);   //false

//判断是否有未成年人，有返回true，否则返回false

var result = stus.some(function(item,index,arr){

　　return item.age < 18;

});

console.log(result);   //true

 

filter() 对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组

var result = stus.filter(function(item, index, arr){

　　return item.age >= 18;

});

console.log(result);   //[{name:'zhangsan',age:22,},{name:'lisi',age:20, },{name:'wangwu',age:22,}]

 

map() 对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组

//只查找名字

var result = stus.map(function(item, index, arr){

　　return item.name;

});

console.log(result);   //['xiaoer','zhangsan', 'lisi', 'wangwu',]

 

//查找所有未成年人的名字

var result = stus.filter(function(item,index,arr){

　　return item.age < 18;

}).map(function(item, index, arr){

　　return item.name;

});

console.log(result);  //['xiaoer']

 

forEach() 对数组中的每一元素运行给定的函数,没有返回值，常用来遍历元素

var arr = [ 

　　{name:'zhangsan'},

　　{name:'lisi'},

　　{name:'terry'}

] ;

var ageInit = 10;

arr.forEach(function(item, index, arr){

　　//console.log(item, index, arr);         //

　　item.age = 12;     //每个对象的年龄都为12

 　　item.age = ageInit++;      //每个对象的年龄都在累加

});