Shulou(Shulou.com)06/02 Report--

Today, I would like to talk to you about the use of arrays and array methods in js, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can get something from this article.

Array object

I have been reviewing the js series before, hoping to know something new, but recently, in response to business requirements, I have been doing mobile WEB with great demand and many tasks. So, only when you are idle now can you continue to js.

In JavaScript, Array is a global object used to construct an array, it is a high-order object similar to an ordered list, and it is a very important one of the JavaScript built-in objects.

Create an array:

Array literals

Var arr = []; var arr = [1,2,3]; var arr = [[1], 2, [2, [123]

Array constructor

Var arr = new Array (); / / [] var arr = new Array; / / [1recovery2] var arr = new Array (3); / / [undefined,undefined,undefined] Parameter 3 is the array length var arr = new Array ([1], 2, [2, [123]); / / [1], 2, [2, [123]

It is recommended to use the array literal method, good performance, less code, concise, after all, less code.

Array attribute

Length attribute

The length property returns the length of the array, which is a variable attribute that represents the number of elements in an array.

The index of an array starts at 0, so the leading and * * values of an array are arr [0] and arr [arr.length-1], respectively.

Var arr = [1Jing 2Jue 3]; arr.length / / 3 arr.length = 2; / / change the array length, and intercept arr / / [1Jue 2] from back to front, where arr.length is 2. So usually we can use length to manipulate the array (delete, add) arr.length = 4; arr / [1meme2undefined undefined], in which case arr.length is 2, followed by undefined.

Prototype attribute

The prototype property returns a reference to the prototype of the object type, which is inherited by all array instances, and all array methods are defined on Array.prototype. In general, we often use the prototype attribute to extend array methods:

/ / add a method to the array and return the * value Array.prototype.max = function () {return Math.max.apply (null,this);} [1meme 2je 3jue 4] .max (); / 4 / / add a method to the array Array.prototype.unique = function () {return this.filter ((item, index, arr) = > arr.indexOf (item) = index) ] .unique (); / / [11pence2, 3pd5, 5pyr23] .unique (); / / [11pd2, 3, 4pyrr5, 23]

Array deduplication: array deduplication evolution

Constructor attribute

The constructor property returns the function that created the object, the constructor. As follows:

Var arr = [1, native code 2, 3]; arr.constructor / / function Array () {[native code]} arr.constructor = Array / / true, that is, new Array var a = new Array (); a.constructor = Array / / true

This property is rarely used for arrays.

Array judgment

Array.isArray ()

The Array.isArray () method is used to determine whether a value is Array. If yes, true is returned, otherwise false is returned

Array.isArray ([]); / / true Array.isArray ([1Jing 2 Jing 3]); / / true Array.isArray (new Array ()); / / true Array.isArray (); / / false Array.isArray ({}); / / false Array.isArray (123); / / false Array.isArray ('xzavier'); / / false

Use attributes to write your own method

Array.isArray () doesn't support it before ES5, so write it yourself. But now that we are in ES6, we can leave it alone.

Array.prototype.isArray = Array.prototype.isArray | | function () {return Object.prototype.toString.call (this) = "[object Array]";} [1meme 2meme 3] .isArray (); / / true

Array traversal

Classic for

For (var index = 0; index)

< arr.length; index++) { console.log(arr[index]); } 这种写法很经典，就是语句多，但是性能好。 ES5的forEach arr.forEach(function (value) { console.log(value); }); 这种写法简洁，但这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。 不建议的for-in for (var i in arr) { console.log(arr[i]); } for-in是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。但是它能遍历数组，作用于数组的for-in循环体除了遍历数组元素外，还会遍历自定义属性。举个例子，如果你的数组中有一个可枚举属性arr.name，循环将额外执行一次，遍历到名为"name"的索引。就连数组原型链上的属性都能被访问到。所以，不建议使用。 ES6的for-of for (var value of arr) { console.log(value); // 1 2 3 } 这是最简洁、最直接的遍历数组元素的语法。这个方法避开了for-in循环的所有缺陷。与forEach()不同的是，它可以正确响应break、continue和return语句。 for (var value of arr) { if(value == 2){break;} console.log(value); //1 } 数组方法细说 splice插入、删除、替换 splice() 方法可以插入、删除或替换数组的元素，注意：同时改变了原数组。 1.删除-删除元素，传两个参数，要删除***项的位置和第二个要删除的项数 2.插入-向数组指定位置插入任意项元素。三个参数，***个参数(位置)，第二个参数(0)，第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。***个参数(起始位置)，第二个参数(删除的项数)，第三个参数(插入任意数量的项) var arr = ["q","w","e"]; //删除 var removed = arr.splice(1,1); console.log(arr); //q,e 已被改变 console.log(removed); //w ,返回删除的项 //插入 var insert = arr.splice(0,0,"r"); //从第0个位置开始插入 console.log(insert); //返回空数组 console.log(arr); //r,q,e //替换 var replace = arr.splice(1,1,"t"); //删除一项，插入一项 console.log(arr); //r,t,e console.log(replace); //q,返回删除的项 sort 排序 sort() 方法对数组的元素做原地的排序，并返回这个数组。 var arr = [1,2,4,3,1,1,2]; console.log(arr.sort());//[1, 1, 1, 2, 2, 3, 4] 然而： var arr = [1,2,10,4,3,1,1,2]; console.log(arr.sort());//[1, 1, 1, 10, 2, 2, 3, 4] 这是因为sort排序可能是不稳定的，默认按照字符串的Unicode码位点排序。 但是，sort()方法接受一个参数，这个参数是一个函数，可选，用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。 var arr = [1,2,10,4,3,1,1,2]; console.log(arr.sort(function(a,b){ return a-b; })); // [1, 1, 1, 2, 2, 3, 4, 10] 这个函数就是我们自己控制了，我们想要什么样的排序就改变这个参数函数的逻辑即可。 slice截取、转化arguments伪数组 slice()方法可从已有的数组中返回选定的元素数组。不会修改原数组，只会会浅复制数组的一部分到一个新的数组，并返回这个新数组。 语法：arrayObject.slice(start,end) 参数可为正负。 start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指***一个元素，-2 指倒数第二个元素，以此类推。 end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。 如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 var arr = [1,2,3,4,5]; arr.slice(0,3); // [1,2,3] arr.slice(3); // [4,5] arr.slice(1,-1); // [2,3,4] arr.slice(-3,-2); // [3] var arr1 = arr.slice(0); //返回数组的拷贝数组，是一个新的数组，不是赋值指向 slice方法经常用来截取一个数组，不过它更常用在将伪数组转化为真数组。平时我们的函数传的参数arguments是一个伪数组，很多数组的方法不能使用，我们就需要将伪数组转化为真数组。 function test() { var arr = arguments; arr.push('xza'); console.log(JSON.stringify(arr)); } test(1,2,3); //arr.push is not a function(…) 因为伪数组没有push方法 转换后： function test() { var arr = Array.prototype.slice.call(arguments); arr.push('xza'); console.log(JSON.stringify(arr)); } test(1,2,3); //[1,2,3,"xza"] filter 过滤 filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。简单来说就是对数组进行过滤，返回一个过滤过的数组。 语法：array.filter(function(currentValue,index,arr), thisValue) function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数 函数的三个参数:currentValue必须，当前元素的值； index可选，当期元素的索引值； arr可选，当期元素属于的数组对象 thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined" //用filter给数组添加个方法，给数组去重 Array.prototype.unique = function() { return this.filter((item, index, arr) =>

Arr.indexOf (item) = index);} [11 beats 2, 5, 5, 23] .unique (); / / [11, 3, 4, 5, 5, 23]

Filter () does not detect the empty array and does not change the original array.

Concat connection array

Var arr1 = [1mage2, 3]; var arr2 = [4, 5, 5, 6]; var arr3 = arr1.concat (arr2); / / [1, 2, 4, 5, 6] arr3.concat (7); / / [1, 2, 4, 5, 5, 6, 7]

We usually use this way, if you need to join the elements of two arrays, insert elements in the middle, you can

Var arr3 = arr1.concat ('xzavier', arr2); / / [1,2,3, "xzavier", 4,5,6]

No parameter is equivalent to a copy and returns a copy array of the array, which is a new array and does not point to the original array.

Var arr4 = arr1.concat (); / / [1Magne2 and 3] var arr5 = arr1; arr4 = arr1; / / false arr5 = arr1; / / true

Insert and delete

I mentioned earlier that a splice can insert and delete elements anywhere in an array. Here we are talking about a method that can only be inserted and deleted at the beginning and end, which is also very convenient to use.

Insert and delete at the end of the array:

The push () method can take any number of parameters, add them to the end of the array one by one, and return the length of the modified array. The pop () method removes an element from the end of the array, reduces the length value of the array, and then returns the removed element. Var arr = [1Jing 2jue 3]; arr.push (4); / / returned length 4 arr.pop (); / / returned deletion value 4 arr / / [1Jet 2p3]

Insert and delete in the array header:

The unshift () method adds an element to the front end of the array. The shift () method removes an element from the front end of the array var arr = [1 arr.unshift 2 arr.shift 3]; arr.unshift (4); / / the returned length 4 arr.shift (); / / the deleted value returned is 4 arr / / [1mem2prime3]

Other methods

The method joins two or more arrays using concat () and returns the result. Join () puts all the elements of the array into a string. Elements are separated by the specified delimiter. Reverse () reverses the order of the elements in the array. ToString () converts the array to a string and returns the result. ToLocaleString () converts the array to a local array and returns the result. ValueOf () returns the original value of the array object map () returns a new array of values returned by each element in the original array after calling a specified method. Every () tests whether all elements of the array pass the test of the specified function. Some () tests whether some elements of the array pass the test of the specified function.

Quiz: (welcome to add and correct questions, more ways to extend reading: extension of ES6 array)

Ar arr = ['xzavier',123,'jser']; console.log (arr.valueOf ()); / / [' xzavier',123,'jser'] console.log (arr.toString ()); / / xzavier,123,jser console.log (arr.toLocaleString ()); / / xzavier,123,jser var arr = ['xzavier',123,'jser']; console.log (arr.join (',')); / / xzavier,123,jser var arr = [1jue 2jue 3] Console.log (arr.reverse ()); / / [3 function (element, index, array) {return (element > = 10);}) / false [2,5,1,4,13] .some (function (element, index, array) {return (element > = 10); / / true [2,5,1,4,13] .every (function (element, index, array) {return (element > = 10);}); / false [2,5,1,4,13] .every (function (element, index, array) {return (element > = 0);}); / true

Interesting exploration

/ / true + + [] [+ []] + [+ [] = ='10]; / / true console.log ([] = =! []); / / true? After reading the above, do you have any further understanding of the use of arrays and array methods in js? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.