数组的概念、基本属性方法 补充(深入)

  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>

 

posted @ 2022-08-09 21:40  YBYZ  阅读(84)  评论(0)    收藏  举报