数组的概念、基本属性方法 补充(深入)
1 <script> 2 //一、数组是一个特殊的对象 3 //1、数组是按顺序排列的一组值(元素)每个位置都有编号从0开始,这个编号叫索引(下标)。数组的值可以是任意数据类型 4 var arr1 = ['a', 'b', 'c', 3, { a: 1 }, [2, 2, 3]] 5 //2.数组的索引可以理解是number类型的属性名,只能用[]取相应的值 6 console.log(arr1[0]);//a 7 //3.数组有length的属性,就是数组里面元素的数量 8 console.log(arr1.length); 9 //4.可以动态给数组添加值,根据索引添加或者修改元素 10 arr1[0] = 'd' 11 console.log(arr1); 12 13 14 //二、in 运算符可以判断数组里面是否有该元素 15 console.log(31 in arr1);//false 16 17 18 //三、for...in可以遍历数组,一般不用for...in 因为开销比较大。 19 for (var item in arr1) { 20 console.log(arr1[item]); 21 } 22 23 24 //四、forEach(function(item){})可以遍历数组,一般数组用for循环或者forEach来遍历。forEach遍历不能使用break. 25 arr1.forEach(function (item) { 26 console.log(item); 27 }) 28 29 30 //五、数组的控制,数组的元素是空 31 //数组中空位返回的值是undefined, length包含空位 32 var arr2 = [1, , 2, 3]//4 33 console.log(arr2); 34 console.log(arr2.length);//4 35 //delete删除数组的元素,位置会被保留,一般不用delete删除数组元素 36 delete arr2[0] 37 console.log(arr2); 38 console.log(arr2.length);//4 39 40 41 //六、类似数组对象,有下标和length属性的对象,长得像数组,但是不能按数字的方法去使用。真数组的length会随元素变化。 42 var arrObj = { 43 0: 'a', 44 1: 'b', 45 2: 'c', 46 length: 3 47 } 48 console.log(arrObj); 49 console.log(arrObj[0]); 50 console.log(arrObj.length); 51 //函数的arguments参数就是一个类数组对象 52 function f1() { 53 console.log(arguments); 54 console.log(Array.isArray(arguments));//false 不是一个数组 55 } 56 f1(1, 2, 3) 57 58 59 60 //七、Array是一个js原生对象(主要包含了处理数组的方法和属性),Array()也是一个构造函数(可以构造一个数组出来)。 61 var arr3 = new Array(3)//如果传递一个数字参数,则是创建数组并指定数组的长度 62 var arr4 = new Array('a', 'b', 0)//如果床底的是非数字或者数字大于1,则是设置数组的元素 63 console.log(arr4); 64 65 66 //八、Array.isArray()判断是否是一个数组 67 console.log(Array.isArray({}));//false 不是一个数组 返回false 68 69 70 //九、创建的数组都会继承Array对象,可以使用很多数组内置的属性和方法 71 //1、valueOf();返回数组本身 72 console.log(arr3.valueOf());//[empty × 3] 73 74 //2、toString();返回数组的字符串形式 75 console.log(arr4.toString());//a,b,0 76 77 //3、push() 在数组的末尾添加一个或者多个元素 返回新增后数组的长度 78 arr3.push(1, 2, 3);//[empty × 3, 1, 2, 3] 79 console.log(arr3); 80 81 //4、pop();删除数组的最后一个元素,并返回该元素 82 console.log(arr3.pop());//3 83 84 //5.unshift() 在数组的头部插入一个或者多个元素 返回数组的长度 85 arr4.unshift(1, 2) 86 console.log(arr4);//[1, 2, "a", "b", 0] 87 88 //6、shift() 删除头部元素,并返回该元素 89 var item = arr4.shift(); 90 console.log(item);//1 91 console.log(arr4);//[2, "a", "b", 0] 92 console.log('---------------------------------------'); 93 94 //7、join() 把数组转为指定分隔符的字符串,返回一个字符串,原数组不变 95 var arr5 = ['a', 'b', 'c', 'd'] 96 console.log(arr5.join(','));//a,b,c,d 97 console.log(arr5.join(';'));//a;b;c;d 98 console.log(arr5); 99 100 //8.concat() , 可以合并多个数组,返回一个新的数组 101 var arr6 = ['a', 'b'] 102 var arr7 = [1, 2] 103 var newArr = arr6.concat(arr7, ['c', 'd'])//把arr7数组元素和['c','d']进行合并,返回一个新的数组 104 console.log(newArr); 105 //8.1 concat()可以接受其它类型的参数,把参数作为数组元素合并到数组里面,返回一个新的数组.push()可以接受其它类型的参数,是在原数组的基础上进行操作,影响原数组 106 console.log(arr6.concat('aaaaa', { name: 'zs' })); 107 108 //9、reverse() 可以倒序数组,改变原数组,返回值为改变后的数组 109 var arr8 = ['a', 'b', 1, 2] 110 console.log(arr8.reverse());//[ [2, 1, "b", "a"]] 111 console.log(arr8);// [2, 1, "b", "a"] 112 113 //10. slice(startIndex,endIndex)截取数组中的一部分,返回一个新的数组,原数组不变 114 //startIndex指开始截取的索引,endIndex指的是结束索引(不包含该索引)(如果省略,则是截取到结尾) 115 console.log(arr5.slice(1, 3));//['b','c'] 原数组为['a','b','c','d'] 116 117 //11.splice(startIndex,count,element1,element2,...)删除原数组的一部分成员,还可以在删除的位置添加新的成员,返回值是被删除的元素,影响原数组 118 var arr = [1, 2, 3, 4] 119 /* 120 var res = arr.splice(1, 2)//从索引为1开始,删除2个元素,被删除元素会作为数组返回 121 console.log(arr);//[1,4] 122 console.log(res);//[2,3] 123 */ 124 /* 125 var res = arr.splice(1, 2, 'a', 'b')//从索引1开始,删除2个元素,然后再从1索引开始插入'a' 'b'元素,相当于替换了2和3 126 console.log(arr);// [1, "a", "b", 4] 127 console.log(res);//[2,3] 128 */ 129 //可以用此方法在数组中插入元素 130 arr.splice(1, 0, 'a', 'b')//在索引为1的地方不删除元素,插入'a''b'元素 131 console.log(arr);//[1, "a", "b", 2, 3, 4] 132 133 //12、map(function(item){return return item})遍历数组的成员,把成员作为函数的参数,函数里面依次返回成员,最后返回一个新的数组,不会影响原数组。此方法可以用来修改数组成员,返回新数组。 134 var arr9 = [1, 2, 3, 4] 135 var newArr9 = arr9.map(function (item) { 136 item += 'a' 137 return item; 138 }) 139 console.log(newArr9);//["1a", "2a", "3a", "4a"] 140 console.log(arr9);//[1, 2, 3, 4] 141 142 //13.filter(function(item){return true})用户过滤数组成员,满足条件的成员组成一个新的数组返回 143 var arr10 = [1, 2, 3, 4, 5, 6, 7] 144 var newArr10 = arr10.filter(function (item) { 145 return item > 3; 146 }) 147 console.log(newArr10); 148 149 //14.reduce(function(a,b){return })依次处理数组的成员,最终累计为一个值。reduceRight(),和reduce一样的作用,reduce 是从左往右开始累计,reduceRight()是从右往左开始累计。 150 var count = arr10.reduce(function (a, b) { 151 return a + b 152 }) 153 console.log(count); 154 155 //15.sort(function(a,b){})数组排序。可以接受一个函数作为参数,a,b两个参数时数组相邻的两个元素,如果返回值大于0,则第一个成员在第二个成员的后面,其他元素不变。此方法会改变原数组,返回的是排序后的数组 156 var small = arr10.sort(function (a, b) { 157 return b - a; 158 }) 159 console.log(small);//[7, 6, 5, 4, 3, 2, 1] 160 //a-b是从小到大 b-a是从大到小 161 var arr11 = [ 162 { 163 name: 'ls', 164 age: 18 165 }, 166 { 167 name: 'zs', 168 age: 19 169 }, 170 { 171 name: 'wem', 172 age: 20 173 } 174 175 ] 176 var big = arr11.sort(function (a, b) { 177 return b.age - a.age 178 }) 179 console.log(big); 180 181 //16.some(function(ele,index,arr){return })只要有一个成员返回true。整个some就返回true,否则返回false 182 var arr11 = [1, 2, 3, 3, 4, 5, 6, 7] 183 var flag = arr11.some(function (element) { return element > 3 })//查询数组里面是否有大于3的数字 184 console.log(flag);//true 185 186 //17.every(function(ele,index,arr){return })所有成员返回true,整个some返回true,否则返回false 187 var ok = arr11.every(function (element) { return element > 3 })//查看数组里面是否每个数字都大于3 188 console.log(ok);//false 189 190 //18.indexOf(element)返回查询元素在数组中第一次出现的序列号,如果没有查询到,则返回-1 191 //可以用该方法查询数组里面是否存在某个元素 192 var position = arr11.indexOf(3); 193 console.log(position);//2 194 195 //19.lastIndexOf(element)返回查询元素最后一次出现的位置,从右往左找 196 var lastPosition = arr11.lastIndexOf(3) 197 console.log(lastPosition);//3 198 199 200 //链式操作,如果方法返回的是数组,可以用链式操作 201 //从小到大的顺序排列,每一个对象添加一个属性,筛选出年龄大于9的 202 var arr12 = [{ name: "a1", age: 10 }, { name: "a2", age: 8 }, { name: "a3", age: 13 }, { name: "a4", age: 9 }] 203 var newArr12 = arr12.sort(function (a, b) { 204 return a.age - b.age 205 }) 206 .map(function (item, index) { 207 item.number = index; 208 return item 209 }) 210 .filter(function (item) { 211 return item.age > 9 212 }) 213 console.log(newArr12); 214 215 216 217 </script>