{"id":12195,"date":"2020-12-10T00:00:00","date_gmt":"2020-12-09T16:00:00","guid":{"rendered":"https:\/\/fgchen.com\/wpedu2\/2020\/12\/10\/%e3%80%90javascript%e3%80%91%e9%99%a3%e5%88%97%e6%96%b9%e6%b3%95\/"},"modified":"2026-03-30T14:40:10","modified_gmt":"2026-03-30T06:40:10","slug":"%e3%80%90javascript%e3%80%91%e9%99%a3%e5%88%97%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2020\/12\/%e3%80%90javascript%e3%80%91%e9%99%a3%e5%88%97%e6%96%b9%e6%b3%95\/","title":{"rendered":"\u3010JavaScript\u3011\u9663\u5217\u65b9\u6cd5"},"content":{"rendered":"<p id=\"mcetoc_1ep7afp5r1\"><a href=\"https:\/\/morioh.com\/p\/ba8c191446ca\" target=\"_blank\" rel=\"noopener\">JavaScript Array Methods | javaScript Tutorial for Beginners<\/a><\/p>\n\n<h1 id=\"mcetoc_1ep7ai62r0\">\u9663\u5217\u65b9\u6cd5\/Array methods<\/h1>\n\n&nbsp;\n\n&nbsp;\n\n<ul>\n    <li>Array pop() Method<\/li>\n    <li>Array push() Method<\/li>\n    <li>Array toString() Method<\/li>\n    <li>Array join() Method<\/li>\n    <li>Array splice() Method<\/li>\n    <li>Array sort() Method<\/li>\n    <li>Array shift() Method<\/li>\n    <li>Array unshift() Method<\/li>\n    <li>Array reverse() Method<\/li>\n    <li>Array concat() Method<\/li>\n    <li>Array slice() Method<\/li>\n    <li>Array filter() Method<\/li>\n    <li>Array find() Method<\/li>\n    <li>Array forEach() Method<\/li>\n    <li>Array map() Method<\/li>\n    <li>Array reduce() Method<\/li>\n    <li>Array some() Method<\/li>\n    <li>Array every() Method<\/li>\n<\/ul>\n\n<h2 id=\"1-array-pop-method\">Array pop() Method<\/h2>\n\nThe \u201cpop()\u201d method is used when you want to remove the last element of an array.\n\nThe method returns the removed items value.\n\n<h4 id=\"ex\">Ex<\/h4>\n\n<pre><code>  var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n  lang.pop();   <\/code><\/pre>\n\nResult of the above example is:\n<strong>Output<\/strong>\n\n<pre><code> \/\/ New array: Python,Vuejs,Nodejs<\/code><\/pre>\n\n<h3 id=\"2-array-push-method\">2. Array push() Method<\/h3>\n\nThe \u201cpush()\u201d method is used to add a new element to the end of an array.\n\n<h4 id=\"ex-1\">Ex:<\/h4>\n\n<pre><code>   var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    lang.push(\"angular\");   <\/code><\/pre>\n\nResult of the above example is:\n\n<strong>Output<\/strong>\n\n<pre><code> \/\/ New array: Python,Vuejs,Nodejs,javascript,angular<\/code><\/pre>\n\n<h3 id=\"3-array-tostring-method\">3. Array toString() Method<\/h3>\n\nThe \u201ctoString()\u201d method is used to convert array to string.\n\n<h4 id=\"ex-\">Ex:-<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    lang.toString();    <\/code><\/pre>\n\nResult of the above example is:\n\n<pre><code>Python,Vuejs,Nodejs,javascript<\/code><\/pre>\n\n<a title=\"Javascript \u2013 Remove Duplicates from Array\" href=\"https:\/\/morioh.com\/p\/713b72e1065a\" target=\"_blank\" rel=\"noopener\">Javascript \u2013 Remove Duplicates from Array<\/a>\n\n<h4 id=\"4-array-join-method\">4. Array join() Method<\/h4>\n\nThe join() used to join the elements of an array into a string.\nThe \u201cjoin()\u201d method puts all the elements of the array into a string list. This method difference from \u201ctoString()\u201d method.\n\n<h4 id=\"ex-2\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n     lang.join(\"-\");\n\n     var x = document.getElementById(\"demo\");\n     x.innerHTML = lang.join(\"-\");<\/code><\/pre>\n\nResult of the above example is:\n\n\/\/ output\n\n<pre><code>Python-Vuejs-Nodejs-javascript<\/code><\/pre>\n\n<h3 id=\"5-array-splice-method\">5. Array splice() Method<\/h3>\n\nThe \u201csplice()\u201d method can add and remove items form an array.\n\n<h1 id=\"syntax\">syntax<\/h1>\n\n<pre><code>array.splice(index, howMany, [element1][, \u2026, elementN]);<\/code><\/pre>\n\n<ul>\n    <li>index \u2212 Index param specifies where a new item should be inserted.<\/li>\n    <li>howMany \u2212 An integer indicating the number of old array elements to remove.<\/li>\n    <li>If howMany set to 0, no items will be removed in array list.<\/li>\n<\/ul>\n\n<h4 id=\"ex-3\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    lang.splice(2, 0, \"Mongodb\", \"Rust\"); <\/code><\/pre>\n\nResult of the above example is:\n\n\/\/ Output\n\n<pre><code>new array: Python,Vuejs,Mongodb,Rust,Nodejs,javascript<\/code><\/pre>\n\n<h3 id=\"6-array-sort-method\">6. Array sort() Method<\/h3>\n\nThis method either alphabetic or numeric sorts an array.\n\n<h4 id=\"ex-4\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    lang.sort();<\/code><\/pre>\n\nResult of the above example is:\n\n<pre><code>\/\/ Outuput\n\narray: Nodejs,Python,Vuejs,javascript<\/code><\/pre>\n\n<h3 id=\"7-array-shift-method\">7. Array shift() Method<\/h3>\n\nThis method removes the first element of an array. like the \u201cpop()\u201d method, removes an element from an array.\n\n<h4 id=\"ex--1\">Ex:-<\/h4>\n\n<pre><code>  var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n  lang.shift(); <\/code><\/pre>\n\nResult of the above example is:\n\n\/\/ Output\n\n<pre><code>new array: Vuejs,Nodejs,javascript<\/code><\/pre>\n\n<h3 id=\"8-array-unshift-method\">8. Array unshift() Method<\/h3>\n\nThe unshift() method adds a new element to the beginning of an array.\n\n<h4 id=\"ex-5\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    lang.unshift(\"Rust\");   <\/code><\/pre>\n\nResult of the above example is:\n\n\/\/Output\n\n<pre><code>New array: Rust,Python,Vuejs,Nodejs,javascript<\/code><\/pre>\n\n<h3 id=\"9-array-reverse-method\">9. Array reverse() Method<\/h3>\n\nThe method is used for reverses the order of the elements in an array.\n\n<h4 id=\"ex-6\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    lang.reverse();    <\/code><\/pre>\n\nResult of the above example is:\n\n\/\/ Outuput\n\n<pre><code>array: javascript,Nodejs,Vuejs,Python<\/code><\/pre>\n\n<h3 id=\"10-array-concat-method\">10. Array concat() Method<\/h3>\n\nThe \u201cconcat()\u201d method joins two or more arrays and makes a new one.\n\n<h4 id=\"ex-7\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    var newlang = [\"Angular\", \"Rust\"];      \n    var join = lang.concat(newlang);    <\/code><\/pre>\n\nResult of the above example is:\n\n\/\/ Output\n\n<pre><code>New array: Python,Vuejs,Nodejs,javascript,Angular,Rust<\/code><\/pre>\n\n<h3 id=\"11-array-slice-method\">11. Array slice() Method<\/h3>\n\nThe method is used to selected elements in an array and makes a new one. It can take one or two arguments.\n\n<h4 id=\"ex-8\">Ex:<\/h4>\n\n<pre><code>    var lang = [\"Python\", \"Vuejs\", \"Nodejs\", \"javascript\"];\n    var cars = lang.slice(1, 4);  <\/code><\/pre>\n\nResult of the above example is:\n\n\/\/Output\n\n<pre><code>New Array : Vuejs,Nodejs,javascript<\/code><\/pre>\n\n<h3 id=\"12-array-filter-method\">12. Array filter() Method<\/h3>\n\nThis filter method is used to filter the array, according our conditions.\n\n<h4 id=\"ex-9\">Ex:<\/h4>\n\n<pre><code>var number = [10, 5, 16, 4, 6, 7, 12, 18, 20];\n\nfunction isCheck(value) {\n  return value &gt; 9;\n}\n\nvar filter = number.filter(isCheck);\ndocument.getElementById(\"demo\").innerHTML = filter;\n<\/code><\/pre>\n\nResult of the above example is:\n\nOutput\n\n<pre><code> \/\/new array: 10,16,12,18,20<\/code><\/pre>\n\nIn this example the function filter() creates a new array. Those elements that satisfy the condition checked by isCheck() function.\n\n<h3 id=\"13-array-find-method\">13. Array find() Method<\/h3>\n\nThis find method is used find the first element of an array.\n\n<h4 id=\"ex-10\">Ex:<\/h4>\n\n<pre><code>var number = [10, 5, 16, 4, 6, 7, 12, 18, 20];\n\nfunction isCheck(value) {\n  return value &gt;= 9;\n}\n\nvar find = number.find(isCheck);\ndocument.getElementById(\"demo\").innerHTML = find;<\/code><\/pre>\n\nResult of the above example is:\n\nOutput\n\n<pre><code>\/\/ 10<\/code><\/pre>\n\n<h3 id=\"14-array-foreach-method\">14. Array forEach() Method<\/h3>\n\nThe JavaScript Array Method \u2013 forEach () imposes a specific function for each item in a particular array individually:\n\n<h4 id=\"ex-11\">Ex:<\/h4>\n\n<pre><code>var num = [10, 5, 16, 4, 6, 7, 12, 18, 20];\n num.forEach(function(item) {\n    document.writeln(item);\n });<\/code><\/pre>\n\nResult of the above example is:\n\nOutput\n\n<pre><code> \/\/ return \n10 5 16 4 6 7 12 18 20<\/code><\/pre>\n\n<h3 id=\"15-array-map-method\">15. Array\u00a0map()\u00a0Method<\/h3>\n\nThe map () method in JavaScript creates an array by calling a specific function on each element in the original array.\n\n<h4 id=\"ex-12\">Ex:<\/h4>\n\n<pre><code>var num = [4, 9, 16, 25];\nvar x = num.map(Math.sqrt);\ndocument.write(x);<\/code><\/pre>\n\nResult of the above example is:\n\nOutput\n\n<pre><code> \/\/ return   \n 2,3,4,5 <\/code><\/pre>\n\n<h3 id=\"16-array-reduce-method\">16. Array reduce() Method<\/h3>\n\nThe\u00a0javascript array reduce()\u00a0method reduces the array to a single value.\n\n<h4 id=\"ex-13\">Ex:<\/h4>\n\n<pre><code>var numArr = [\n        {  name: 'a', num: 50},\n        {  name: 'b', num: 50},\n        {  name: 'c', num: 75},\n        {  name: 'd', num: 35},\n        {  name: 'e', num: 25 },\n        {  name: 'f', num: 40 },\n    ];\n\n    var sum = numArr.reduce(function (total, currentValue) {\n        return total + currentValue.num;\n    }, 0);\n\n    document.write( \"javascript- Sum of the array value is :- \" + sum );<\/code><\/pre>\n\nResult of the above example is:\n\nOutput\n\n<pre><code> \/\/ return  \n javascript- Sum of the array value is :- 275<\/code><\/pre>\n\n<h3 id=\"17-array-some-method\">17. Array some() Method<\/h3>\n\nThe javascript array some() method checks whether at least one element of the array matches the given predicate. if none of the array elements match the predicate, then it will return false\n\n<h4 id=\"ex-14\">Ex:<\/h4>\n\n<pre><code>var nums = [10, 12, 12, 20, 25];\n\nfunction checkNumber(num) {\n  return num &gt;= 25;\n}\n\ndocument.write(nums.some(checkNumber));<\/code><\/pre>\n\nResult of the above example is:\n\nOutput\n\n<pre><code> \/\/ return   \n True<\/code><\/pre>\n\n<h3 id=\"18-array-every-method\">18. Array every() Method<\/h3>\n\nThe javascript array every() method checks whether all elements of the array match the predicate:\n\n<h4 id=\"ex-15\">Ex:<\/h4>\n\n<pre><code>var nums = [10, 12, 12, 20, 25];\n\nfunction checkNumber(num) {\n  return num &gt;= 3;\n}\n\ndocument.write(nums.every(checkNumber));<\/code><\/pre>\n\nResult of the above example is:\n\n<pre><code> \/\/ return   \n true<\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>JavaScript Array Methods | javaScript Tu &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-12195","post","type-post","status-publish","format-standard","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=12195"}],"version-history":[{"count":1,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12195\/revisions"}],"predecessor-version":[{"id":13795,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12195\/revisions\/13795"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=12195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=12195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=12195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}