JS Array中的常用方法

Posted 2023-05-04

参考技术A 在Js Array中的方法大致分为两类：方法改变原数组 & 方法生成新数组（不改变原数组）

1.push()：向原数组的最后一位添加一个元素。返回数组长度
2.unshift()：向原数组的最前添加一个元素。返回数组长度
3.pop()：截取数组中最后一个元素。返回被截取的元素
4.shift()：截取数组中第一个元素。返回被截取的元素
以上四个方法可以放在一起记忆，不要被方面名所误导。
5.splice()：splice(index, howmany, item1,...itemX) 方法有多个参数可选，常用于分割数组。返回处理后的数组
第一个参数：从第n个元素的下标开始截取；
第二个参数：从第n个元素的下标开始截取多少个元素；
第三到n个参数：将截取的元素替换为什么
6.sort()：sort(fn) 方法有一个参数可选，用于给数组排序。在不写参数的情况下会对数组中的元素进行从小到大的顺序排序。但不会识别数字（按照数字ACSLL编码表进行排序）
可选参数：参数返回一个函数，这个函数中有两个形参 .sort(function(a, b)) 。形参中的a和b会类冒泡的访问数组中的元素；例：[1, 2, 3, 4] a b 分别会选择 1,2、 1,3 、 1,4 、 2,3 、 2,4 、 3,4。当a-b>1时，交换ab的值；当a-b<1时，不动。由此，可在此函数体中写出自定义的排序规则。返回排序后的数组

7.reverse()：倒序排列整个数组。返回数组

1.concat()：concat(arr)将两个数组拼接在一起。返回新数组
2.join()：join('str')一个可选参数，返回以一个字符串将数组中的元素拼接成字符串。与str的split('str')方法相反，split()是将字符串以一个字符串拆分成数组。
3.toString()：与join()函数不填写参数一样，返回一个一 逗号 ，拼接的字符串。
4.slice()：选取数组中的第n个元素到第n个元素。返回新数组，也可不写参数返回数组的副本。
5.indexOf()：index(item, start)方法有两个参数。返回指定元素在数组中的索引值；如果未找到指定元素，返回 -1
第一个参数：指定的元素
第二个参数：从填入的索引开始寻找

js中关于array的常用方法

最近总结了一些关于array中的常用方法，

其中大部分的方法来自于《JavaScript框架设计》这本书，

如果有更好的方法，或者有关于string的别的常用的方法，希望大家不吝赐教。

直接上代码：

  1 /**
  2  * 判定数组是否包含指定目标
  3  * @param target
  4  * @param item
  5  * @returns {boolean}
  6  */
  7 function contains(target,item) {
  8     return target.indexOf(item) > -1;
  9 }
 10 
 11 /**
 12  * 移除数组中指定位置的元素，返回布尔表示成功与否
 13  * @param target
 14  * @param index
 15  * @returns {boolean}
 16  */
 17 function removeAt(target,index) {
 18     return !!target.splice(index,1).length;
 19 }
 20 
 21 /**
 22  * 移除数组中第一个匹配传参的那个元素，返回布尔表示成功与否
 23  * @param target
 24  * @param item
 25  * @returns {boolean}
 26  */
 27 function remove(target,item) {
 28     const index = target.indexOf(item);
 29     if (~index) {
 30         return removeAt(target,index);
 31     }
 32     return false;
 33 }
 34 
 35 /**
 36  * 对数组进行洗牌
 37  * @param array
 38  * @returns {array}
 39  */
 40 function shuffle(array) {
 41     let m = array.length, t, i;
 42     // While there remain elements to shuffle…
 43     while (m) {
 44         // Pick a remaining element…
 45         i = Math.floor(Math.random() * m--);
 46 
 47         // And swap it with the current element.
 48         t = array[m];
 49         array[m] = array[i];
 50         array[i] = t;
 51     }
 52     return array;
 53 }
 54 
 55 /**
 56  * 从数组中随机抽选一个元素出来
 57  * @param target
 58  * @returns {*}
 59  */
 60 function random(target) {
 61     return target[Math.floor(Math.random() * target.length)];
 62 }
 63 
 64 /**
 65  * 对数组进行平坦化处理，返回一个一维的新数组
 66  * @param target
 67  * @returns {Array}
 68  */
 69 function flatten (target) {
 70     let result = [];
 71     target.forEach(function(item) {
 72         if(Array.isArray(item)) {
 73             result = result.concat(flatten(item));
 74         } else {
 75             result.push(item);
 76         }
 77     });
 78     return result;
 79 }
 80 
 81 /**
 82  * 去重操作,有序状态
 83  * @param target
 84  * @returns {Array}
 85  */
 86 function unique(target) {
 87     let result = [];
 88     loop: for (let i = 0,n = target.length;i < n; i++) {
 89         for (let x = i + 1;x < n;x++) {
 90             if (target[x] === target[i]) {
 91                 continue loop;
 92             }
 93         }
 94         result.push(target[i]);
 95     }
 96     return result;
 97 }
 98 
 99 /**
100  * 去重操作，无序状态，效率最高
101  * @param target
102  * @returns {Array}
103  */
104 function unique1(target) {
105     let obj = {};
106     for (let i = 0,n = target.length; i < n;i++) {
107         obj[target[i]] = true;
108     }
109     return Object.keys(obj);
110 }
111 
112 /**
113  * 过滤属性中的null和undefined,但不影响原数组
114  * @param target
115  * @returns {Array.<T>|*}
116  */
117 function compat(target) {
118     return target.filter(function(el) {
119         return el != null;
120     })
121 }
122 
123 /**
124  * 根据指定条件（如回调或对象的某个属性）进行分组，构成对象返回。
125  * @param target
126  * @param val
127  * @returns {{}}
128  */
129 function groupBy(target,val) {
130     var result = {};
131     var iterator = isFunction(val) ? val : function(obj) {
132         return obj[val];
133     };
134     target.forEach(function(value,index) {
135         var key = iterator(value,index);
136         (result[key] || (result[key] = [])).push(value);
137     });
138     return result;
139 }
140 function isFunction(obj){
141     return Object.prototype.toString.call(obj) === ‘[object Function]‘;
142 }
143 
144 // 例子
145 function iterator(value) {
146    if (value > 10) {
147        return ‘a‘;
148    } else if (value > 5) {
149        return ‘b‘;
150    }
151    return ‘c‘;
152 }
153 var target = [6,2,3,4,5,65,7,6,8,7,65,4,34,7,8];
154 console.log(groupBy(target,iterator));
155 
156 
157 
158 /**
159  * 获取对象数组的每个元素的指定属性，组成数组返回
160  * @param target
161  * @param name
162  * @returns {Array}
163  */
164 function pluck(target,name) {
165     let result = [],prop;
166     target.forEach(function(item) {
167         prop = item[name];
168         if (prop != null) {
169             result.push(prop);
170         }
171     });
172     return result;
173 }
174 
175 /**
176  * 根据指定条件进行排序，通常用于对象数组
177  * @param target
178  * @param fn
179  * @param scope
180  * @returns {Array}
181  */
182 function sortBy(target,fn,scope) {
183     let array = target.map(function(item,index) {
184         return {
185             el: item,
186             re: fn.call(scope,item,index)
187         };
188     }).sort(function(left,right) {
189         let a = left.re, b = right.re;
190         return a < b ? -1 : a > b ? 1 : 0;
191     });
192     return pluck(array,‘el‘);
193 }
194 
195 /**
196  * 对两个数组取并集
197  * @param target
198  * @param array
199  * @returns {Array}
200  */
201 function union(target,array) {
202     return unique(target.concat(array));
203 }
204 
205 /**
206  * 对两个数组取交集
207  * @param target
208  * @param array
209  * @returns {Array.<T>|*}
210  */
211 function intersect(target,array) {
212     return target.filter(function(n) {
213         return ~array.indexOf(n);
214     })
215 }
216 
217 /**
218  * 返回数组中的最小值，用于数字数组
219  * @param target
220  * @returns {*}
221  */
222 function min(target) {
223     return Math.min.apply(0,target);
224 }
225 
226 /**
227  * 返回数组中的最大值，用于数字数组
228  * @param target
229  * @returns {*}
230  */
231 function max(target) {
232     return Math.max.apply(0,target);
233 }

 

最后模拟一下数组中的pop,oush,shift和unshift的实现原理

 1 const _slice = Array.prototype.slice;
 2 Array.prototype.pop = function() {
 3     return this.splice(this.length - 1,1)[0];
 4 };
 5 Array.prototype.push = function() {
 6     this.splice.apply(this,[this.length,0].concat(_slice.call(arguments)));
 7     return this.length;
 8 };
 9 Array.prototype.shift = function() {
10     return this.splice(0,1)[0];
11 };
12 Array.prototype.unshift = function() {
13     this.splice.apply(this,
14         [0,0].concat(_slice.call(arguments)));
15     return this.length;
16 };