-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjs-array.html
More file actions
137 lines (137 loc) · 46.6 KB
/
Copy pathjs-array.html
File metadata and controls
137 lines (137 loc) · 46.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Js Array - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Summary of commonly used JavaScript array methods. You will no longer be confused between slice() and splice(). Methods that do not change the original array, methods that change the original array, and methods that determine whether an object is an array Array.isArray()"><meta name=keywords content="JavaScript array methods,slice,splice,Array.isArray"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/js-array.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/js-array.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Js Array"><meta property="og:description" content="Summary of commonly used JavaScript array methods. You will no longer be confused between slice() and splice(). Methods that do not change the original array, methods that change the original array, and methods that determine whether an object is an array Array.isArray()"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2017-04-06T22:31:32+08:00"><meta property="article:modified_time" content="2017-04-06T22:31:32+08:00"><meta property="article:tag" content="Array"><meta itemprop=name content="Js Array"><meta itemprop=description content="Summary of commonly used JavaScript array methods. You will no longer be confused between slice() and splice(). Methods that do not change the original array, methods that change the original array, and methods that determine whether an object is an array Array.isArray()"><meta itemprop=datePublished content="2017-04-06T22:31:32+08:00"><meta itemprop=dateModified content="2017-04-06T22:31:32+08:00"><meta itemprop=wordCount content="1524"><meta itemprop=keywords content="JavaScript array methods,slice,splice,Array.isArray"><meta name=twitter:card content="summary"><meta name=twitter:title content="Js Array"><meta name=twitter:description content="Summary of commonly used JavaScript array methods. You will no longer be confused between slice() and splice(). Methods that do not change the original array, methods that change the original array, and methods that determine whether an object is an array Array.isArray()"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Js Array</h1><div class=post-meta><span class=post-time>2017-04-06</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>1524 words </span><span class=more-meta>8 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#method-without-changing-the-original-array>Method without changing the original array:</a></li><li><a href=#method-to-change-the-original-array>Method to change the original array:</a></li><li><a href=#arrayisarray>Array.isArray()</a></li></ul></nav></div></div><div class=post-content><h2 id=method-without-changing-the-original-array>Method without changing the original array:</h2><ol><li><p><code>indexOf()</code> and <code>lastIndexOf()</code></p></li><li><p>1 <code>indexOf()</code>: Returns the index of the element in the array, starting from <code>0</code>. If the element does not exist in the array, <code>-1</code> is returned.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>indexOf</span>(<span style=color:#ae81ff>1</span>); <span style=color:#75715e>//0
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>indexOf</span>(<span style=color:#ae81ff>10</span>); <span style=color:#75715e>//-1
</span></span></span></code></pre></div><ol><li>2 <code>lastIndexOf()</code>:
Returns the index of the last occurrence of an element in the array, or -1 if it does not appear.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>, <span style=color:#ae81ff>4</span>, <span style=color:#ae81ff>2</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>lastIndexOf</span>(<span style=color:#ae81ff>2</span>); <span style=color:#75715e>// 4
</span></span></span></code></pre></div><ol start=2><li><p><code>slice()</code>: Like the <code>substring()</code> method of <code>string</code>, it intercepts a part of the array and returns a new array.</p></li><li><p>1 Usually, it accepts 2 parameters as a left-closed and right-open interval, that is, it includes the element at the starting index position, but does not include the element at the ending index position.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>,<span style=color:#ae81ff>4</span>,<span style=color:#ae81ff>5</span>,<span style=color:#ae81ff>6</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>slice</span>(<span style=color:#ae81ff>0</span>,<span style=color:#ae81ff>2</span>) <span style=color:#75715e>// [1, 2] only returns elements at index 0,1
</span></span></span></code></pre></div><ol start=2><li>2 You can omit the second parameter, that is, intercept the last element of the original array.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>slice</span>(<span style=color:#ae81ff>2</span>,); <span style=color:#75715e>//[3, 4, 5, 6]
</span></span></span></code></pre></div><ol start=2><li>3 If no parameters are passed, a new array intercepting all elements from beginning to end will be returned. Can be used to copy an array.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>copyArr</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>slice</span>();
</span></span><span style=display:flex><span> <span style=color:#a6e22e>copyArr</span>; <span style=color:#75715e>//[1, 2, 3, 4, 5, 6]
</span></span></span></code></pre></div><ol start=3><li><p><code>concat()</code>: merge arrays. Concatenates the current array with another array and returns a new array.</p></li><li><p>1 The parameters of the <code>concat()</code> method can have multiple parameters, or any type, such as <code>numeric</code>, <code>string</code>, <code>Boolean</code>, <code>array</code>, and <code>object</code>. The parameters will be added to the new array.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr1</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>,<span style=color:#ae81ff>4</span>,<span style=color:#ae81ff>5</span>,<span style=color:#ae81ff>6</span>];
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr2</span> <span style=color:#f92672>=</span> [<span style=color:#e6db74>'a'</span>,<span style=color:#e6db74>'b'</span>,<span style=color:#e6db74>'c'</span>];
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr3</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>arr1</span>.<span style=color:#a6e22e>concat</span>(<span style=color:#a6e22e>arr2</span>);
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr3</span>; <span style=color:#75715e>//[1, 2, 3, 4, 5, 6, "a", "b", "c"]
</span></span></span></code></pre></div><ol start=3><li>2 Note that if the parameter is an <code>array</code>, it will be flattened once, that is, the array will be split and added to a new array. See specific examples:</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr1</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr2</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>arr1</span>.<span style=color:#a6e22e>concat</span>(<span style=color:#ae81ff>66</span>,<span style=color:#e6db74>'abc'</span>,<span style=color:#66d9ef>true</span>,[<span style=color:#ae81ff>10</span>,<span style=color:#ae81ff>20</span>],[<span style=color:#ae81ff>30</span>,[<span style=color:#ae81ff>31</span>,<span style=color:#ae81ff>32</span>]],{<span style=color:#a6e22e>x</span><span style=color:#f92672>:</span><span style=color:#ae81ff>100</span>});
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr2</span>; <span style=color:#75715e>//[1, 2, 3, 66, "abc", true, 10, 20, 30, [31,32], {x:100}]
</span></span></span></code></pre></div><ol start=4><li><p><code>join()</code>: Convert to string. It will concatenate each element of the current Array with the specified string, and then return the concatenated string.</p></li><li><p>1 The parameter is a string used to specify the connection. See sample code:</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>join</span>(<span style=color:#e6db74>'*'</span>) <span style=color:#75715e>//"1*2*3"
</span></span></span></code></pre></div><ol start=4><li>2 If no parameters are specified, the default is to use <code>,</code> to connect.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>join</span>() <span style=color:#75715e>//"1,2,3"
</span></span></span></code></pre></div><ol start=5><li><code>toString()</code>: Returns the string form of the array</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>toString</span>() <span style=color:#75715e>// "1,2,3"
</span></span></span></code></pre></div><ol start=6><li><code>valueOf()</code>: Returns the array itself</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>valueOf</span>() <span style=color:#75715e>// [1, 2, 3]
</span></span></span></code></pre></div><ol start=7><li><p><code>map()</code>:</p></li><li><p>1 Call a function on all members of the array in sequence, and the return value is a new array.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>map</span>(<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>elem</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>elem</span><span style=color:#f92672>*</span><span style=color:#ae81ff>2</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>//[2, 4, 6, 8]
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>//[1, 2, 3]
</span></span></span></code></pre></div><ol start=7><li>2 The <code>map</code> method accepts a function as a parameter. When the function is called, the map method will pass in 3 parameters, namely the current member, the current position and the array itself (the last 2 parameters are optional).</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>map</span>(<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>elem</span>, <span style=color:#a6e22e>index</span>, <span style=color:#a6e22e>arr</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>elem</span> <span style=color:#f92672>*</span> <span style=color:#a6e22e>index</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>//[0, 2, 6]
</span></span></span></code></pre></div><ol start=7><li><p>3 The <code>map</code> method can also accept a second parameter, which represents the object pointed to by <code>this</code> when the callback function is executed.</p></li><li><p><code>forEach()</code>: Very similar to the map method, it also traverses all members of the array and performs some operation. <strong>Note</strong>: The <code>forEach</code> method generally has no return value</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>];
</span></span><span style=display:flex><span> <span style=color:#66d9ef>function</span> <span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>element</span>, <span style=color:#a6e22e>index</span>, <span style=color:#a6e22e>array</span>) {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#e6db74>'['</span> <span style=color:#f92672>+</span> <span style=color:#a6e22e>index</span> <span style=color:#f92672>+</span> <span style=color:#e6db74>'] = '</span> <span style=color:#f92672>+</span> <span style=color:#a6e22e>element</span>);
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>forEach</span>(<span style=color:#a6e22e>log</span>);
</span></span><span style=display:flex><span> <span style=color:#75715e>// [0] = 1
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// [1] = 2
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// [2] = 3
</span></span></span></code></pre></div><p><strong>Note</strong>: The <code>forEach</code> method cannot interrupt execution and will always traverse all members. If you want to interrupt the traversal when certain conditions are met, use a <code>for loop</code>.</p><ol start=9><li><p><code>filter()</code>:</p></li><li><p>1 Filter the elements of the array, and the return value is a new array composed of elements that meet the filter conditions.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>, <span style=color:#ae81ff>4</span>, <span style=color:#ae81ff>5</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>filter</span>(<span style=color:#66d9ef>function</span> (<span style=color:#a6e22e>elem</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> (<span style=color:#a6e22e>elem</span> <span style=color:#f92672>></span> <span style=color:#ae81ff>3</span>);
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>//[4, 5]
</span></span></span></code></pre></div><ol start=9><li>2 The <code>filter</code> method accepts a function as a parameter. When the function is called, the <code>fitler</code> method will pass in 3 parameters, namely the current member, the current position and the array itself (the last two parameters are optional).</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>, <span style=color:#ae81ff>4</span>, <span style=color:#ae81ff>5</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>filter</span>(<span style=color:#66d9ef>function</span> (<span style=color:#a6e22e>elem</span>, <span style=color:#a6e22e>index</span>, <span style=color:#a6e22e>arr</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>index</span> <span style=color:#f92672>%</span> <span style=color:#ae81ff>2</span> <span style=color:#f92672>===</span> <span style=color:#ae81ff>1</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>//[2, 4]
</span></span></span></code></pre></div><ol start=9><li><p>3 The <code>filter</code> method can also accept the second parameter, which specifies the <code>context object</code> (ie <code>this object</code>) where the test function is located.</p></li><li><p><code>some()</code> and <code>every()</code>: similar to “assert”, used to determine whether array members meet certain conditions.</p></li><li><p>1 Accepts a function as a parameter, all array members execute the function in sequence, and return a <code>Boolean value</code>. This function accepts three parameters, which are the member of the current position, the sequence number of the current position and the entire array.</p></li><li><p>2 The <code>some</code> method is that as long as the return value of one array member is true, the return value of the entire some method is true, otherwise it is false.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>, <span style=color:#ae81ff>4</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>some</span>(<span style=color:#66d9ef>function</span> (<span style=color:#a6e22e>elem</span>, <span style=color:#a6e22e>index</span>, <span style=color:#a6e22e>arr</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>elem</span> <span style=color:#f92672>>=</span> <span style=color:#ae81ff>3</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>// true
</span></span></span></code></pre></div><ol start=10><li>3 The <code>every</code> method returns true only if the return values of all array members are true, otherwise false.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>, <span style=color:#ae81ff>4</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>every</span>(<span style=color:#66d9ef>function</span> (<span style=color:#a6e22e>elem</span>, <span style=color:#a6e22e>index</span>, <span style=color:#a6e22e>arr</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>elem</span> <span style=color:#f92672>>=</span> <span style=color:#ae81ff>3</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>// false
</span></span></span></code></pre></div><ol start=10><li><p>4 Note that for <code>empty array</code>, the <code>some</code> method returns false and the <code>every</code> method returns true</p></li><li><p>5 The <code>some</code> and <code>every</code> methods can also accept a second parameter, which is used to bind the <code>this keyword</code> in the function.</p></li><li><p><code>reduce()</code> and <code>reduceRight()</code>: Process each member of the array in turn, and finally accumulate a value.</p></li><li><p>1 <code>reduce</code> is processed from <code>left to right</code> (from the first member to the last member)</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>reduce</span>(<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>x</span>, <span style=color:#a6e22e>y</span>){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>x</span>, <span style=color:#a6e22e>y</span>)
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>x</span> <span style=color:#f92672>+</span> <span style=color:#a6e22e>y</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>// 1 2
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// 3 3
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// 6
</span></span></span></code></pre></div><ol start=11><li>2 <code>reduceRight</code> is processed from <code>right to left</code> (from the last member to the first member)</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>reduceRight</span>(<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>x</span>, <span style=color:#a6e22e>y</span>){
</span></span><span style=display:flex><span> <span style=color:#a6e22e>console</span>.<span style=color:#a6e22e>log</span>(<span style=color:#a6e22e>x</span>, <span style=color:#a6e22e>y</span>)
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>x</span> <span style=color:#f92672>+</span> <span style=color:#a6e22e>y</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>// 3 2
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// 5 1
</span></span></span><span style=display:flex><span> <span style=color:#75715e>// 6
</span></span></span></code></pre></div><h2 id=method-to-change-the-original-array>Method to change the original array:</h2><ol><li><code>push()</code>: Add several elements to the end of the array. The return value is the changed array length.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>push</span>(<span style=color:#ae81ff>3</span>) ;<span style=color:#75715e>// 3
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>// [1, 2, 3]
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>push</span>(<span style=color:#e6db74>'b'</span>,<span style=color:#e6db74>'c'</span>); <span style=color:#75715e>//5
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>//[1, 2, 3, "b", "c"]
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>push</span>([<span style=color:#ae81ff>10</span>,<span style=color:#ae81ff>20</span>]); <span style=color:#75715e>//6
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>//[1, 2, 3, "b", "c", [10,20]]
</span></span></span></code></pre></div><ol start=2><li><code>pop()</code>: Delete the last element of the array. The return value is the deleted element.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span>[<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>, <span style=color:#e6db74>"b"</span>, <span style=color:#e6db74>"c"</span>, [<span style=color:#ae81ff>10</span>,<span style=color:#ae81ff>20</span>]];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>pop</span>(); <span style=color:#75715e>//[10, 20]
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>// [1, 2, 3, "b", "c"]
</span></span></span></code></pre></div><ol start=3><li><code>unshift()</code>: Add several elements to the head of the array. The return value is the changed array length.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>unshift</span>(<span style=color:#ae81ff>3</span>,<span style=color:#ae81ff>4</span> ); <span style=color:#75715e>//4
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>// [3, 4, 1, 2]
</span></span></span></code></pre></div><ol start=4><li><code>shift()</code>: Delete the last element of the array. The return value is the deleted element.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#e6db74>'a'</span>, <span style=color:#e6db74>'b'</span>, <span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>shift</span>(); <span style=color:#75715e>//'a'
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>//['b', 1, 2]
</span></span></span></code></pre></div><ol start=5><li><p><code>sort()</code>: Array sorting.</p></li><li><p>1 <strong>Note</strong>: The default is to convert all elements into <code>string</code> and then sort by <code>string Unicode code point</code>. The return value is the new array.</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>12</span>, <span style=color:#e6db74>'a'</span>, <span style=color:#e6db74>'b'</span>, <span style=color:#e6db74>'ab'</span>, <span style=color:#e6db74>'A'</span>, <span style=color:#e6db74>'B'</span>]
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>sort</span>(); <span style=color:#75715e>// [1, 12, 2, "A", "B", "a", "ab", "b"] Note: 12 comes before 2
</span></span></span></code></pre></div><ol start=5><li>2 If the elements are all numbers and they need to be sorted from small to large, you can pass in a callback function as a parameter.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>12</span>, <span style=color:#ae81ff>100</span>]
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>sort</span>(<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>a</span>,<span style=color:#a6e22e>b</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>a</span><span style=color:#f92672>-</span><span style=color:#a6e22e>b</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>// [1, 2, 12, 100]
</span></span></span></code></pre></div><ol start=5><li>3 If you want to sort from large to small:</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>sort</span>(<span style=color:#66d9ef>function</span>(<span style=color:#a6e22e>a</span>,<span style=color:#a6e22e>b</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>return</span> <span style=color:#a6e22e>b</span><span style=color:#f92672>-</span><span style=color:#a6e22e>a</span>;
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#75715e>//[100, 12, 2, 1]
</span></span></span></code></pre></div><ol start=6><li><code>reverse()</code>: Reverse the position of elements in the array</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>, <span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>12</span>, <span style=color:#e6db74>'a'</span>, <span style=color:#e6db74>'b'</span>, <span style=color:#e6db74>'ab'</span>, <span style=color:#e6db74>'A'</span>, <span style=color:#e6db74>'B'</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>reverse</span>();
</span></span><span style=display:flex><span> <span style=color:#75715e>//["B", "A", "ab", "b", "a", 12, 2, 1]
</span></span></span></code></pre></div><ol start=7><li><p><code>splice()</code>: Modify array elements (add, delete, replace). Delete <code>several</code> elements starting from <code>specified index</code>, and then add <code>several elements</code> from that position. The return value is an array of deleted elements. Parameter 1 is the starting index of the element to be deleted, parameter 2 is the number of elements to be deleted, and the subsequent parameters are the elements to be added.</p></li><li><p>1 Only delete, not add. You can pass in 2 parameters:</p></li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#e6db74>'Alibaba'</span>, <span style=color:#e6db74>'Tencent'</span>, <span style=color:#e6db74>'Baidu'</span>, <span style=color:#e6db74>'XiaoMi'</span>, <span style=color:#e6db74>'360'</span>];
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#75715e>// Delete 3 elements starting from index 2
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>splice</span>(<span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>3</span>); <span style=color:#75715e>// Return deleted elements ['Baidu', 'XiaoMi', '360']
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>// ['Alibaba', 'Tencent']
</span></span></span></code></pre></div><ol start=7><li>2 Only add, not delete. The second parameter is set to <code>0</code>, which means the element will not be deleted.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>splice</span>(<span style=color:#ae81ff>2</span>, <span style=color:#ae81ff>0</span>, <span style=color:#e6db74>'Toutiao'</span>, <span style=color:#e6db74>'Meituan'</span>, <span style=color:#e6db74>'Didi'</span>); <span style=color:#75715e>// Returns [] because no elements were deleted
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>//["Alibaba", "Tencent", "Toutiao", "Meituan", "Didi"]
</span></span></span></code></pre></div><ol start=7><li>3 First delete several elements, and then add several elements at the deleted positions.</li></ol><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span>[<span style=color:#e6db74>"Alibaba"</span>, <span style=color:#e6db74>"Tencent"</span>, <span style=color:#e6db74>"Toutiao"</span>, <span style=color:#e6db74>"Meituan"</span>, <span style=color:#e6db74>"Didi"</span>]
</span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>.<span style=color:#a6e22e>splice</span>(<span style=color:#ae81ff>2</span>,<span style=color:#ae81ff>2</span>,<span style=color:#e6db74>'Apple'</span>,<span style=color:#e6db74>'Google'</span>); <span style=color:#75715e>//["Toutiao", "Meituan"]
</span></span></span><span style=display:flex><span> <span style=color:#a6e22e>arr</span>; <span style=color:#75715e>//["Alibaba", "Tencent", "Apple", "Google", "Didi"]
</span></span></span></code></pre></div><h2 id=arrayisarray>Array.isArray()</h2><p>Used to determine whether a value is an array. If the parameter is an array, return true, otherwise, return false.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>arr</span> <span style=color:#f92672>=</span> [<span style=color:#ae81ff>1</span>,<span style=color:#ae81ff>2</span>]
</span></span><span style=display:flex><span> Array.<span style=color:#a6e22e>isArray</span>(<span style=color:#a6e22e>arr</span>); <span style=color:#75715e>//true;
</span></span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> Array.<span style=color:#a6e22e>isArray</span>(<span style=color:#e6db74>'a'</span>); <span style=color:#75715e>//false
</span></span></span></code></pre></div></div><footer class=post-footer><div class=post-tags><a href=/en/tags/array/>array</a></div><nav class=post-nav><a class=prev href=/es6-let-const.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Es6 Let Const</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/throw-away-vocabulary-books.html><span class="next-text nav-default">Throw Away Vocabulary Book</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>