惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
雷峰网
雷峰网
Recent Announcements
Recent Announcements
月光博客
月光博客
G
Google Developers Blog
腾讯CDC
S
Secure Thoughts
大猫的无限游戏
大猫的无限游戏
T
Tenable Blog
云风的 BLOG
云风的 BLOG
W
WeLiveSecurity
博客园 - 【当耐特】
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 聂微东
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
P
Privacy International News Feed
MyScale Blog
MyScale Blog
K
Kaspersky official blog
T
The Blog of Author Tim Ferriss
Attack and Defense Labs
Attack and Defense Labs
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
aimingoo的专栏
aimingoo的专栏
I
Intezer
Vercel News
Vercel News
小众软件
小众软件
Simon Willison's Weblog
Simon Willison's Weblog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
N
Netflix TechBlog - Medium
P
Proofpoint News Feed
Latest news
Latest news
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Tor Project blog
S
Security Affairs
P
Proofpoint News Feed
博客园 - 三生石上(FineUI控件)
博客园 - Franky
C
Cyber Attacks, Cyber Crime and Cyber Security
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
美团技术团队
Recent Commits to openclaw:main
Recent Commits to openclaw:main
S
Security @ Cisco Blogs
L
LINUX DO - 热门话题
Know Your Adversary
Know Your Adversary
Project Zero
Project Zero
D
Docker
L
Lohrmann on Cybersecurity
F
Full Disclosure

Dmitri Pavlutin Blog

Pure Functions in JavaScript: A Beginner's Guide Record Type in TypeScript: A Quick Intro How to Write Comments in React: The Good, the Bad and the Ugly 4 Ways to Create an Enum in JavaScript React forwardRef(): How to Pass Refs to Child Components TypeScript Function Types: A Beginner's Guide How to Use v-model to Access Input Values in Vue Mastering Vue refs: From Zero to Hero Environment Variables in JavaScript: process.env 5 Must-Know Differences Between ref() and reactive() in Vue How to Destructure Props in Vue (Composition API) Triangulation in Test-Driven Development How to Use nextTick() in Vue Programming to Interface Vs to Implementation A Smarter JavaScript Mapper: array.flatMap() Array Grouping in JavaScript: Object.groupBy() How to Access ES Module Metadata using import.meta JSON Modules in JavaScript How to Trim Strings in JavaScript TypeScript Function Overloading How to Debounce and Throttle Callbacks in Vue How to Show/Hide Elements in Vue Sparse vs Dense Arrays in JavaScript How to Fill an Array with Initial Values in JavaScript Covariance and Contravariance in TypeScript What are Higher-Order Functions in JavaScript? How to Use TypeScript with React Components Index Signatures in TypeScript How to Use React useReducer() Hook unknown vs any in TypeScript A Guide to React Context and useContext() Hook How to Use Promise.any() 2 Ways to Remove a Property from an Object in JavaScript 'return await promise' vs 'return promise' in JavaScript How to Use Promise.allSettled() How to Use fetch() with JSON JavaScript Promises: then(f,f) vs then(f).catch(f) What is a Promise in JavaScript? How to Use Promise.all() A Simple Guide to Component Props in React Don't Stop Me Now: How to Use React useTransition() hook A Simple Explanation of JavaScript Variables: const, let, var ES Modules Dynamic Import How to Memoize with React.useMemo() How to Cleanup Async Effects in React Why Math.max() Without Arguments Returns -Infinity How to Debounce and Throttle Callbacks in React Don't Confuse Function Expressions and Function Declarations in JavaScript How to Use ES Modules in Node.js Solving a Mystery Behavior of parseInt() in JavaScript How to Use Array Reduce Method in JavaScript 3 Ways to Merge Arrays in JavaScript A Guide to Jotai: the Minimalist React State Management Library The Difference Between Values and References in JavaScript How to Implement a Queue in JavaScript A Helpful Algorithm to Determine "this" value in JavaScript React useRef() Hook Explained in 3 Steps 7 Interview Questions on "this" keyword in JavaScript. Can You Answer Them? How to Greatly Enhance fetch() with the Decorator Pattern 7 Interview Questions on JavaScript Closures. Can You Answer Them? What's a Method in JavaScript? array.sort() Does Not Simply Sort Numbers in JavaScript How to Solve the Infinite Loop of React.useEffect() The New Array Method You'll Enjoy: array.at(index) What's the Difference between DOM Node and Element? Why Promises Are Faster Than setTimeout()? Everything About Callback Functions in JavaScript How React Updates State 5 Mistakes to Avoid When Using React Hooks 5 Best Practices to Write Quality JavaScript Variables Type checking in JavaScript: typeof and instanceof operators 3 Ways to Check if a Variable is Defined in JavaScript React Forms Tutorial: Access Input Values, Validate, Submit Forms Prototypal Inheritance in JavaScript How to Timeout a fetch() Request How to Learn JavaScript If You're a Beginner A Simple Explanation of React.useEffect() A Simple Explanation of JavaScript Iterators How to Use React Controlled Inputs Everything about null in JavaScript How to Use Fetch with async/await Getting Started with Arrow Functions in JavaScript An Interesting Explanation of async/await in JavaScript Front-end Architecture: Stable and Volatile Dependencies Is it Safe to Compare JavaScript Strings? How to Access Object's Keys, Values, and Entries in JavaScript What Actually is a String in JavaScript? 3 Ways to Shallow Clone Objects in JavaScript (w/ bonuses) Checking if an Array Contains a Value in JavaScript JavaScript Event Delegation: A Beginner's Guide How to Parse URL in JavaScript: hostname, pathname, query, hash How to Get the Screen, Window, and Web Page Sizes in JavaScript 3 Ways to Check If an Object Has a Property/Key in JavaScript How to Compare Objects in JavaScript Object.is() vs Strict Equality Operator in JavaScript Own and Inherited Properties in JavaScript 5 Differences Between Arrow and Regular Functions How to Use Object Destructuring in JavaScript Your Guide to React.useCallback() 5 JavaScript Scope Gotchas
3 Ways to Detect an Array in JavaScript
Dmitri Pavlutin · 2020-06-30 · via Dmitri Pavlutin Blog

Checking whether a value is an array in JavaScript is necessary when a variable is expected to be an array, but it could be a plain object or even a primitive.

In this post, you'll find 3 good ways to detect an array instance in JavaScript.

1. Array.isArray(value)

If you don't have time to read the entire post, here's a good way to detect an array in JavaScript: just use Array.isArray(value) utility function.

But if you want to know more, let's continue.

Here are a few examples of using Array.isArray():


const array = [1, 2, 3];

const object = { message: 'Hello!' };

const string = 'Hello!';

const empty = null;

Array.isArray(array); // => true

Array.isArray(object); // => false

Array.isArray(string); // => false

Array.isArray(empty); // => false


Array.isArray() has a good browser support. It's the recommended way to check for an array in JavaScript.

Array.isArray(value) utility function returns true if value is an array.

2. value instanceof Array

An array is an object. And like any object in JavaScript, the array instance has a constructor function — Array.

Array invoked as a constructor (prefixed with new keyword) creates array instances:


const array = new Array(1, 2, 3);

array; // => [1, 2, 3]


Moreover, the array instance exposes its constructor using a property .constructor:


const array = [1, 2, 3];

array.constructor === Array; // => true


What is the operator that verifies whether a function is the constructor of an instance? instanceof!

Now emerges the next way to detect an array: value instanceof Array evaluates to true if value is an array.

Let's see a few examples:


const array = [1, 2, 3];

const object = { message: 'Hello!' };

const string = 'Hello!';

const empty = null;

array instanceof Array; // => true

object instanceof Array; // => false

string instanceof Array; // => false

empty instanceof Array; // => false


Resuming:

value instanceof Array expressions evaluates to true if value is an array.

Note: value instanceof Array evaluates to false when value is an array created in a different iframe than the Array constructor function. If you're not writing cross-frames JavaScript, use this approach without worries.

3. ().toString.call(value)

toString() method of a plain JavaScript object returns '[object <type>]', where <type> is the object type it was called upon. Take a look at the specification which indicates how exactly Object.prototype.toString() works.

In the simplest case, when toString() method is invoked directly on a plain object, it returns '[object Object]':


({}).toString(); // => '[object Object]'


However, you can use an indirect call of toString() on different types of values, and the method returns the corresponding string representation of the type:


const array = [1, 2, 3];

const object = { message: 'Hello' };

const string = 'Hello!';

const empty = null;

({}).toString.call(array); // => '[object Array]'

({}).toString.call(object); // => '[object Object]'

({}).toString.call(string); // => '[object String]'

({}).toString.call(empty); // => '[object Null]'


Now you can spot the idea: ({}).toString.call(value) equals to '[object Array]' if value is an array.


const array = [1, 2, 3];

({}).toString.call(array) === '[object Array]'; // => true


In conclusion:

({}).toString.call(value) === '[object Array]' expression evaluates to true if value is an array.

4. Summary

To detect an array my recommendation is to use Array.isArray(value). The function returns a boolean whether value is an array. Simple as is.

Another approach is value instanceof Array expression that evaluates to true if value is an array. This approach uses the idea that Array function is the constructor of the arrays.

Finally, not the most aesthetic approach is to use the expression ({}).toString.call(value) === '[object Array]' that is true if value is an array.

Object.prototype.toString() returns the type representation of the object it was invoked upon, and the type representation of arrays is '[object Array]'.

What is your favorite way to detect arrays in JavaScript?