一、创建数组,数组操作
1、数组概述
数组是值的有序集合。每个值叫元素,每个元素在数组中都有数字位置编号,也就是索引,JS中的数组是弱类型的,数组中可以含有不同类型的元素,数组元素甚至可以是对象或其他数组。
var arr = [ 1, true, null ,undefined, { x : 1},[ 1,2,3 ] ];arr[0]; // 1arr[3]; //undefinedarr[4].x; //1arr[5][1]; //2
2、创建数组
1)字面量
var TAB = ['Alibaba','Tencent','Baidu'];var student = [{name:'Bosn',age:27},{name:'Nunnnly',age:3}];var arrInArr = [[1,2],[3,4,5]];var commasArr1 = [1,,2]; //1,undefined,2var commasArr1 = [ , ,]; //undefined,undefined 理解为两个undefined,最后一个省略
数组大小限制:0 ~ 2的23次幂-1
3)new Array
new可以省略
var arr = new Array();var arrWithLength = new Array(100); //undefined*100--只有一个参数认为是数组大小,数组有100个元素var arr = new Array(true,false,null,1,2,"hi"); //传入多个参数,参数作为传入数组元素。//等价于[true,false,null,1,2,"hi"]
3、数组元素读写
var arr = [1,2,3,4,5];arr[1]; //2arr.length; //5 长度arr[5] = 6; arr.length; //6delete arr[0]; //最终数组长度还是6 把第一个值改为undefinedarr[0]; //undefined
4、数组元素的增删
1)数组长度是动态的,无需指定大小
var arr = [];arr[0] = 1;arr[1] = 2;arr;//[1,2]
2)增加元素
var arr = [];arr[0] = 1;arr[1] = 2;arr.push(3); //在尾部加入arr; //[1,2,3]arr[arr.length] = 4; //equal to arr.push(4) --总是从末尾加arr; //[1,2,3,4] //在头部加入arr.unshift(0);arr; //[0,1,2,3,4]
3)删除元素
delete arr[2];arr; // [0,1,undefined,3,4] delete 将第三个元素变为undefined arr.length ; //52 in arr ; //false 会占位但,索引不存在,key不存在了,如果arr[2] = undefined in 返回 truearr.length -= 1; //长度减少1 删除尾部元素arr; // [0,1,undefined,3]arr.pop(); //从尾部弹出最后一个,3被删除了arr ;[0,1,undefined]//头部删除arr.shift(); //0删除了arr; //[1,undefined]
5、数组的迭代
var i=0,n=10;var arr = [1,2,3,4,5];for(; i
二、二维数组、稀疏数组
1、二维数组
var arr = [[0,1],[2,3],[4,5]]; //二维数组中有三个元素,每个元素又是一个数组var i =0 ;j =0;var row ;for(;i
2、稀疏数组
稀疏数组并不含有从0开始的连续索引。一半length属性值比实际元素个数大。
//arr1、arr2 都含有一个元素长度为1var arr1 = [undefined]; var arr2 = new Array(1);0 in arr1; //true 第一个有元素值为undefined0 in arr2; //false 长度为1,单第0个元素的 key是不存在的arr1.length = 100;arr1[99] = 123;99 in arr1 ; //true98 in arr1 ; //falsevar arr = [,,]; //也是稀疏数组0 in arr; //false
三、数组方法
{} => Object.prototype[] => Array.prototype
1、数组方法分类
Array.prototype.joinArray.prototype.reverseArray.prototype.sortArray.prototype.contcatArray.prototype.slice //切片Array.prototype.splice //胶接Array.prototype.forEach (ES5)Array.prototype.map (ES5)Array.prototype.every (ES5)Array.prototype.some (ES5)Array.prototype.reduce/reduceRight (ES5)Array.prototype.indexOf/lastIndexOf (ES5)Array.prototype.isArray (ES5)
1)将数组转化为字符串:Arrar.prototype.join(不改变原数组)
var arr = [1,2,3];arr.join(); //"1,2,3" 默认以,分割arr.join('_'); //"1_2_3"//函数:重复某一个字符串n次 ,第一个参数,要重复的字符串,2.要重复几次// 将要重复的字符串作为 分隔符 ,当使用空数组 join时 undefined 会被忽略掉。function repeatString(str,n){ return new Array(n+1).join(str);}repeatString("a",3); //"aaa"repeatString("Hi",5); "HiHiHiHiHi"
2)数组逆序: Array.prototype.reverse (修改原数组)
将数组逆序,会修改原数组,也会返回一个逆序数组
var arr = [1,2,3];arr.reverse(); //返回一个颠倒的结果[3,2,1]arr; //会修改原数组[3,2,1] /*var b= arr.reverse(); //返回一个颠倒的结果[3,2,1]arr; //会修改(3) [3, 2, 1]b;(3) [3, 2, 1]*/
2) 排序:Array.prototype.sort (修改原数组)
1.默认按照字母顺序排序
var arr = ["a","b","c"];arr.sort(); //["a","b","c"]
2.数字排序
//会先把数字转化为字符串排序arr = [13,24,51,3];arr.sort();//[13,24,3,51]arr;//[13,24,3,51] 修改原数组//升序排列从小到大arr.sort(function(a,b){ return a-b ; //传入比较元素返回负数}); //[3,13,24,51] //降序排列从大到小arr.sort(function(a,b){ return b-a ; //返回正数});
3)数组对象结合
var arr = [{age:25},{age:39},{age:99}];arr.sort(function(a,b){ return a.age - b.age //从小打大});//forEach 遍历查看排序结果arr.forEach(function(item){ //item为对象 console.log('age' ,item.age);})//age 25//age 39//age 99
3)数组合并:ArrayPrototype.concat(不改变原数组)
var arr = [1,2,3];var arr2 = arr.concat(4,5); //[1,2,3,4,5]arr; //[1,2,3] 不改变原数组//一维数组会被拉平var arr3 = arr.concat([10,11,12],13); //[1,2,3,10,11,13]//数组只会拉平一次,会保存子数组var arr4 = arr.oncat([1,[2,3]]); // [1,2,3,1,[2,3]]
4)返回数组片段:Array.prototype.slice(不修改原数组)
//不修改原数组var arr = [1,2,3,4,5];//返回 起始索引 到 结束索引-1 的元素 var arr2 = arr.slice(1,3) ; //[2,3]//从起始索引到最后arr.slice(1); //[2,3,4,5]//负数索引,从后往前 -1:最后一个元素arr.slice(1,-1) ; //[2,3,4] -1代表5 -1-1 :4arr.slice(-4,-3) ;//[2]
5)数组拼接: Array.prototype.splice(修改原数组)
1、删除元素
//一个参数,表示从起始到结束var arr = [1,2,3,4,5];var arr1 = arr.splice(2); //return [3,4,5] 返回从第三个元素到最后一个元素,并且删除arr; //[1,2] 修改原数组var arr = [1,2,3,4,5];//从第三个元素开始(包括第三个)删除两个元素var arr2 = arr.splice(2,2); //return [3,4]arr; //[1,2,5]
2、插入元素
var arr = [1,2,3,4,5];//从第二个元素开始,删除1个 插入 a,bvar arr1 = arr.splice(1,1,'a','b'); //return[2]返回删除的元素arr; // [1,'a','b',3,4,5]
6)数组遍历:Array.prototype.forEach
IE9及以上可以
//遍历每一个数组元素var arr = [1,2,3,4,5];//forEach接受一个函数作为参数,函数在遍历到每一个元素时调用。//函数有三个参数,1.元素的值 2.元素索引 3.指向数组本身arr.forEach(function(x, index, a){ console.log(x + '|' + index + '|'+ (a === arr))})/*1|0|true2|1|true3|2|true4|3|true5|4|true*/
7)数组映射:Array.prototype.map(不修改原数组)
改变数组中每一个元素
var arr = [1,2,3];var arr2 = arr.map(funcyion(x){ return x+10;}); //[11,12,13] 返回一个新的数组arr;//[1,2,3] 原数组不变
8)数组过滤:Array.prototype.filter(不修改原数组)
筛选特定元素:筛选出索引模3 为 0 或元素值 >=8;
var arr = [1,2,3,4,5,6,7,8,9,10];//参数 :数组元素,索引var arr2 = arr.filter(function(x,index){ return index % 3 ===0 || x>=8;}); //returns [1,4,7,8,9,10]arr; //[1,2,3,4,5,6,7,8,9,10]; //不修改原数组
9)数组判断:Array.prototype.every & some
var arr = [1,2,3,4,5];//检查数组是否是每个元素都小于10//every 每个都符合条件arr.every(function(x){ return x < 10 ;}); // 返回true// 任意一个元素符合即可arr.some(function(x){ return x === 3;}); //true
10)两两操作数组元素:Array.prototype.reduce & reduceRight(不修改原数组)
var arr = [1,2,3];//对元素求和//1.函数中,表示数组中元素,2.可选参数,代表初始 x值,不传就指向第一个元素//首选传入 0,1 求和取得 1,赋值给 x, y=2,继续var sum = arr.reduce(function(x,y){ return x+y;}, 0 ) // 返回和·6arr; //[1,2,3]//比较大小arr = [3,9,6];var max = arr.reduce(function(x,y){ console.log(x +"|" +y); return x>y ? x :y})//3|9//9|6max;//9//没有穿第二个参数,第一次遍历 x指向 3,y指向 9, 9>3 返回9 ,第二次 x=9,y=6,返回 9
reduceRight:从右到左开始遍历其余一样
10)数组检索:Array.prototype.indexOf & lastIndexOf
//参数1 为要查找的子串 ,参数2 为起始查找位置
var arr = [1,2,3,2,1];//检索子串在数组中位置arr.indexOf(2); //索引为1//从第二个元素开始查找 1 //参数1 为要查找的子串 ,参数2 为起始查找位置arr.indexOf(1,1); //索引为 4//从 倒数第三个(-1为倒数第一个)3开始搜索 1arr.indexOf(1,-3); //索引为 4//从右向左找arr.lastIndexOf(2); //3
11)判断一个对象是否为数组对象:Array.isArray
isArray是 Array构造器上的属性,不可以直接用一个变量调用
Array.isArray([]);//true[] instanceof Array ;//true({}).toString.apply([]) === '[object Array]'; //true[].constructor === Array ; //true
四、数组与其他元素的区别
1、数组与对象区别
1)相同
- 都可以继承。
- 数组是对象,对象不一定是数组。
- 都可以当做对象添加删除属性。
2)不同
- 数组自动更新length。
- 按索引访问数组,常常比访问一般对象属性迅速。
- 数组对象继承Array.prototype上大量数组操作方法
2、数组与字符串区别
var str = "hello";//可以当做数组来访问,类数组str.charAt(0); //索引为0 的字符"h"str[1];//e//但字符串没有 contact join等数组特有方法,但因为是类数组Array.prototype.join.call(str,"_");//"h_e_l_l_o"