JS method to convert non-array objects into arrays

This article mainly introduces some methods of converting JS from non-array objects to arrays, namely Array.prototype.slice.call(obj), Array.from(obj), [...obj] and Object.values( obj) and other methods, friends in need can refer to it, I hope it can help everyone.

Array.prototype.slice.call(obj)

This method can convert an array-like object into an array, the so-called class An array object is an object containing length and index properties.

The returned array length depends on the value of the object's length property, and the value of a non-index property, or a value with an index greater than length will not be returned to the array.

The actual hammer is as follows

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33,
 'length': 3,
 'name': 330
}
let arr = Array.prototype.slice.call(obj)
// [3, 13, 23]

Concise writing method[].slice.call(obj)

##Array.from(obj )

This method can convert array-like objects and iterable objects into arrays

Array-like objects have been mentioned above, what are iterable objects? ?

• Array, Set, Map and String are all iterable objects (WeakMap/WeakSet are not iterable objects)

• String changes Became an iterable object, solving the coding problem

• These objects have default iterators, that is, they have the Symbol.iterator attribute

• You can use the for of loop

• All iterators created by generators are iterable objects

• document.getElementsByTagName(" p") Returns an iterable object but not an array
  Array.isArray(document.getElementsByTagName('p')) Returns false

Create iterable objects through generators

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}

function *createIterator(obj){
 for(let value in obj){
  yield obj[value]
 }
}

let iterator = createIterator(obj)
let arr = Array.from(iterator)
// [3, 13, 23, 33]

Transform the object itself to make it an iterable object

By default, a developer-defined object They are all non-iterable objects, but if you add a generator to the

Symbol.iterator property, you can turn it into an iterable object

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}

obj[Symbol.iterator] = function* () {
 for(let value in this){
  yield this[value]
 }
}

let arr = Array.from(obj)
// [3, 13, 23, 33]

Judgement Methods of whether the object is an iterable object

typeof obj[Symbol.iterator] === 'function'

A little extension of for of and forEach and for in

for of is used to loop iterable objects, including Array, Set, Map, String

And Array, Set, Map all have forEach method

In addition, NodeList is not Array, Set, Map, but an iterable object, you can use for Traversal

In addition, when using for of to loop an object, you can terminate it early through break, but forEach cannot jump out of the loop early

for in traverses the enumerable properties of the object, including properties on its prototype chain , and the order is not guaranteed

To traverse the enumerable properties of the object itself, use the

hasOwnProperty() method to determine whether the property is the object's own property

Object.getOwnPropertyNames(obj) , returns the enumerable or non-enumerable properties of the object itself

Anyway, we have gone too far, so let’s go a little further,

Object.assign() Method copies the values ​​of all enumerable properties from one or more source objects to the target object

[…obj]

The spread operator can convert an iterable object into an array

For example,

[...'obj'] Returns ["o", "b", "j "]

String deduplication

[...new Set('objobj')]

Object.values(obj)

By default, the objects defined by developers are non-iterable objects, but methods are provided to return iterators

• entries()

• values()

##keys()
By using these methods, you can return related arrays

Unlike array-like objects that require objects to have length values,

Object.values(obj)

Returns the enumerable property values ​​​​of the object itself Collection

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}
let arr = Object.values(obj) // [3, 13, 23, 33]

The relationship between strings and arrays

To a large extent, strings can be regarded as String array,

all have length attribute

all have

concat()

/ indexOf() / includes() / slice() MethodHowever, it is worth noting that there is no method on string that can modify its own content in place, all of which return a new string

string There is also a

repeat()

method to create a specified number of string copies.

The above is the detailed content of JS method to convert non-array objects into arrays. For more information, please follow other related articles on the PHP Chinese website!