[{"data":1,"prerenderedAt":911},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fjs-array":3,"surround:\u002Fposts\u002F2022\u002Fjs-array":900},{"id":4,"title":5,"body":6,"canonical":875,"categories":876,"date":878,"description":879,"draft":880,"extension":881,"image":882,"meta":883,"navigation":884,"path":885,"permalink":875,"readingTime":886,"recommend":875,"references":891,"seo":895,"sitemap":896,"stem":897,"tags":898,"type":875,"updated":878,"__hash__":899},"content\u002Fposts\u002F2022\u002Fjs-array.md","js数组",{"type":7,"value":8,"toc":803},"minimark",[9,13,17,21,32,35,38,44,47,54,60,63,66,72,79,85,88,95,101,104,110,116,122,129,135,142,148,151,158,164,171,177,180,186,189,197,200,203,209,212,215,221,225,231,234,237,243,246,252,255,261,264,270,273,279,282,285,291,294,297,303,306,312,315,321,324,330,333,336,342,345,348,354,358,364,367,370,376,379,385,391,397,401,404,410,413,419,422,425,429,434,437,443,447,450,456,461,467,472,478,484,487,490,496,499,505,511,515,518,521,527,533,537,540,546,550,556,559,565,568,571,574,580,584,590,593,597,603,607,610,616,627,633,637,640,646,650,653,659,663,669,673,676,679,682,685,688,694,698,704,707,710,716,719,722,725,731,735,741,745,751,755,761,765,771,775,781,785,788,794,797],[10,11,12],"h2",{"id":12},"基本操作",[14,15,16],"h3",{"id":16},"声明",[18,19,20],"p",{},"数组里可以存放任何类型的数据",[22,23,29],"pre",{"className":24,"code":26,"language":27,"meta":28},[25],"language-js","\u002F\u002F 使用构造函数创建\nconst arr = new Arrary(0, 1, 2, 3)\n\u002F\u002F 字面量方式创建\nconst newArr = [0, 1, 2, 3]\n","js","",[30,31,26],"code",{"__ignoreMap":28},[14,33,34],{"id":34},"获取元素",[18,36,37],{},"根据下标获取，从 0 开始",[22,39,42],{"className":40,"code":41,"language":27,"meta":28},[25],"const arr = [0, 1, 2, 3, 4]\n\u002F\u002F 获取第三个元素\ncosnole.log(arr[2]) \u002F\u002F 2\n\nconst arr1 = [\n    [1, 2],\n    [2, 3],\n]\nconsole.log(arr[0]) \u002F\u002F [1,2]\n",[30,43,41],{"__ignoreMap":28},[14,45,46],{"id":46},"获取数组长度",[18,48,49,50,53],{},"根据 ",[30,51,52],{"code":52},"arr.length"," 获取数组长度",[22,55,58],{"className":56,"code":57,"language":27,"meta":28},[25],"const arr = [0, 1, 2, 3, 4]\nconsole.log(arr.length) \u002F\u002F 5\n\narr[10] = 2\nconsole.log(arr.length) \u002F\u002F 10，6-9会填充为empty\nconsole.log(arr[7]) \u002F\u002F undefined\n",[30,59,57],{"__ignoreMap":28},[14,61,62],{"id":62},"注意",[18,64,65],{},"使用构造函数创建数组时， 如果只填写一个为 number 类型的值，就会将此数组填充为对应长度的数组",[22,67,70],{"className":68,"code":69,"language":27,"meta":28},[25],"const arr = Array.from({ length: 10 })\nconsole.log(arr.length) \u002F\u002F 10\n",[30,71,69],{"__ignoreMap":28},[18,73,74,75,78],{},"在 es6 以后，使用 ",[30,76,77],{"code":77},"Array.of"," 可以解决此问题",[22,80,83],{"className":81,"code":82,"language":27,"meta":28},[25],"const arr = Array.of(10)\nconsole.log(arr.length) \u002F\u002F 1\nconsole.log(arr) \u002F\u002F [10]\n",[30,84,82],{"__ignoreMap":28},[14,86,87],{"id":87},"类型检测",[18,89,90,91,94],{},"可以使用 ",[30,92,93],{"code":93},"Array.isArray"," 检测一个数据是否是数组",[22,96,99],{"className":97,"code":98,"language":27,"meta":28},[25],"console.log(Array.isArray([])) \u002F\u002F true\nconsole.log(Array.isArray(\"\")) \u002F\u002F false\nconsole.log(Array.isArray({})) \u002F\u002F false\nconsole.log(Array.isArray(1)) \u002F\u002F false\nconsole.log(Array.isArray(false)) \u002F\u002F false\n",[30,100,98],{"__ignoreMap":28},[14,102,103],{"id":103},"转换为字符串",[18,105,90,106,109],{},[30,107,108],{"code":108},"数组.toString"," 将数组转换为字符串",[22,111,114],{"className":112,"code":113,"language":27,"meta":28},[25],"console.log([].toString()) \u002F\u002F ''\nconsole.log([1, 2, 3].toString()) \u002F\u002F '1,2,3'\n",[30,115,113],{"__ignoreMap":28},[117,118,119],"alert",{},[18,120,121],{},"后端需要传递一个 id 字符串时，可以使用此方法转换",[18,123,124,125,128],{},"可以使用数组 ",[30,126,127],{"code":127},"String(数组)"," 来转换",[22,130,133],{"className":131,"code":132,"language":27,"meta":28},[25],"console.log(String([1, 2, 3, 4])) \u002F\u002F '1,2,3,4'\n",[30,134,132],{"__ignoreMap":28},[18,136,137,138,141],{},"可以使用",[30,139,140],{"code":140},"数组.join('拼接的字符')","来自定义用什么符号拼接为字符串",[22,143,146],{"className":144,"code":145,"language":27,"meta":28},[25],"console.log([1, 2, 3, 4].join(\"-\")) \u002F\u002F '1-2-3-4'\nconsole.log([1, 2, 3, 4].join(\",\")) \u002F\u002F '1,2,3,4'\n",[30,147,145],{"__ignoreMap":28},[14,149,150],{"id":150},"其他类型数据转换为数组",[18,152,153,154,157],{},"字符串可以使用",[30,155,156],{"code":156},"字符串.split()","转换为数组",[22,159,162],{"className":160,"code":161,"language":27,"meta":28},[25],"console.log(\"1,3,4,6\".split(\",\")) \u002F\u002F [1,3,4,6]\n",[30,163,161],{"__ignoreMap":28},[18,165,166,167,170],{},"元素中有 length 属性时，可以使用 ",[30,168,169],{"code":169},"Array.from(元素)"," 转换",[22,172,175],{"className":173,"code":174,"language":27,"meta":28},[25],"const string = \"weilog.me\"\nconsole.log(Array.from(string))\n\u002F\u002F ['w', 'h', 'b', 'b', 'i', 't','.', 'c', 'n']\n",[30,176,174],{"__ignoreMap":28},[18,178,179],{},"Object 也可以使用此特性转换：",[22,181,184],{"className":182,"code":183,"language":27,"meta":28},[25],"const obj = {\n    0: 'weilog.me',\n    1: 'wxw'\n}\nconsole.log(Array.from(obj)) \u002F\u002F []\nobj.length = 2\nconsole.log(Array.from(obj)) \u002F\u002F ['weilog.me', 'wxw']\n",[30,185,183],{"__ignoreMap":28},[18,187,188],{},"Arrar.from()有第二个参数，是对第一个元素的操作",[22,190,195],{"className":191,"code":193,"language":194,"meta":28},[192],"language-html","\u003Cdiv>1\u003C\u002Fdiv>\n\u003Cdiv>2\u003C\u002Fdiv>\n\u003Cscript>\n  let divs = document.querySelectorAll(\"div\")\n  \u002F\u002F 将div元素的color设置为红色\n  Array.from(divs, (item) => {\n    item.style.color = \"red\"\n    return item\n  })\n\u003C\u002Fscript>\n","html",[30,196,193],{"__ignoreMap":28},[10,198,199],{"id":199},"扩展运算符",[14,201,202],{"id":202},"数组拼接",[22,204,207],{"className":205,"code":206,"language":27,"meta":28},[25],"const className = [\"js\", \"css\", \"html\"]\nconst numbers = [1, 2, 3]\nconsole.log([...numbers, className])\n",[30,208,206],{"__ignoreMap":28},[14,210,211],{"id":211},"函数传参",[18,213,214],{},"参数数量不确定时可以使用展开语法将所有参数接收到一个数组中",[22,216,219],{"className":217,"code":218,"language":27,"meta":28},[25],"function sum(...rest) {\n    return rest.reduce((s, v) => (s += v), 0)\n}\n\nsum(1, 2, 3, 4)\n",[30,220,218],{"__ignoreMap":28},[14,222,224],{"id":223},"dom-节点操作","dom 节点操作",[22,226,229],{"className":227,"code":228,"language":194,"meta":28},[192],"\u003Cdiv>1\u003C\u002Fdiv>\n\u003Cdiv>2\u003C\u002Fdiv>\n\u003Cscript>\n  let divs = document.querySelectorAll(\"div\")\n  \u002F\u002F 直接进行遍历会报错\n  \u002F\u002F divs.map(item => console.log(item)) \u002F\u002F 报错\n  \u002F\u002F 需要转换为数组进行遍历\n  ;[...divs].map((item) => {\n    console.log(item)\n  })\n\u003C\u002Fscript>\n",[30,230,228],{"__ignoreMap":28},[10,232,233],{"id":233},"解构赋值",[18,235,236],{},"不使用解构赋值",[22,238,241],{"className":239,"code":240,"language":27,"meta":28},[25],"const arr = [\"wxw\", 23]\nconst name = arr[0]\nconst age = arr[1]\n",[30,242,240],{"__ignoreMap":28},[18,244,245],{},"使用解构赋值",[22,247,250],{"className":248,"code":249,"language":27,"meta":28},[25],"const [name, age] = [\"wxw\", 23]\n",[30,251,249],{"__ignoreMap":28},[18,253,254],{},"过滤某个值",[22,256,259],{"className":257,"code":258,"language":27,"meta":28},[25],"const [, age] = [\"wxw\", 23]\n",[30,260,258],{"__ignoreMap":28},[18,262,263],{},"结合扩展运算符",[22,265,268],{"className":266,"code":267,"language":27,"meta":28},[25],"const [name, ...rest] = [\"wxw\", 23, \"weilog.me\"]\n",[30,269,267],{"__ignoreMap":28},[18,271,272],{},"赋值默认值",[22,274,277],{"className":275,"code":276,"language":27,"meta":28},[25],"function show([name, year, site = 10]) {\n    console.log(name, year, site) \u002F\u002F 'wxw', 23, 10\n}\nshow([\"wxw\", 23])\n",[30,278,276],{"__ignoreMap":28},[10,280,281],{"id":281},"数组方法",[14,283,284],{"id":284},"数组元素添加",[22,286,289],{"className":287,"code":288,"language":27,"meta":28},[25],"let arr = [0, 1]\n\u002F\u002F 数组后追加\narr[arr.length] = [2]\narr[arr.length] = [3]\narr = [...arr, 4]\narr.push(5) \u002F\u002F 返回值是数组长度\n\u002F\u002F 在数组前添加\narr.unshift(-1) \u002F\u002F 返回值是数组长度\narr = [-2, ...arr]\n",[30,290,288],{"__ignoreMap":28},[14,292,293],{"id":293},"数组删除元素",[18,295,296],{},"使用 pop()弹出数组最后一个元素，会改变原数组",[22,298,301],{"className":299,"code":300,"language":27,"meta":28},[25],"const arr = [0, 1]\nconst val = arr.pop()\nconsole.log(val) \u002F\u002F 1\n",[30,302,300],{"__ignoreMap":28},[18,304,305],{},"使用 shift() 弹出数组第一个元素，会改变原数组",[22,307,310],{"className":308,"code":309,"language":27,"meta":28},[25],"const arr = [0, 1]\nconst val = arr.shift()\nconsole.log(val) \u002F\u002F 0\n",[30,311,309],{"__ignoreMap":28},[14,313,314],{"id":314},"数组填充",[22,316,319],{"className":317,"code":318,"language":27,"meta":28},[25],"console.log(Array.from({ length: 3 }).fill(0)) \u002F\u002F [0,0,0]\n",[30,320,318],{"__ignoreMap":28},[18,322,323],{},"在指定位置填充",[22,325,328],{"className":326,"code":327,"language":27,"meta":28},[25],"\u002F\u002F 从下标为1填充至下标为3，不包含3\nconsole.log([1, 2, 3, 4].fill(\"wxw\", 1, 3))\n\u002F\u002F [1, 'wxw', 'wxw', 4]\n",[30,329,327],{"__ignoreMap":28},[14,331,332],{"id":332},"splice",[18,334,335],{},"会改变原数组，返回值为受改变的元素",[22,337,340],{"className":338,"code":339,"language":27,"meta":28},[25],"const arr = [0, 1, 2, 3, 4]\n\u002F\u002F 第一个参数从下标为几开始 第二个参数截取几位，第三个\u002Fn个参数：替换的元素\nconst change = arr.slice(1, 2)\nconsole.log(change) \u002F\u002F [1,2]\n",[30,341,339],{"__ignoreMap":28},[14,343,344],{"id":344},"slice",[18,346,347],{},"不会改变原数组，返回值为受改变的元素",[22,349,352],{"className":350,"code":351,"language":27,"meta":28},[25],"const arr = [0, 1, 2, 3, 4]\n\u002F\u002F 第一个参数从下标为几开始 第二个参数到下标为几结束\nlet change = arr.slice(1, 2)\nconsole.log(change) \u002F\u002F [2]\n\u002F\u002F 从0截取到末尾\nchange = arr.slice()\nconsole.log(change) \u002F\u002F [0,1,2,3,4]\n\u002F\u002F 从1截取到末尾\nchange = arr.slice(1)\nconsole.log(change) \u002F\u002F [1,2,3,4]\n",[30,353,351],{"__ignoreMap":28},[14,355,357],{"id":356},"案例移动数组元素方法","案例：移动数组元素方法",[22,359,362],{"className":360,"code":361,"language":27,"meta":28},[25],"function move(array, from, to) {\n    if (from \u003C 0 || to >= array.length) {\n        console.log(\"参数错误\")\n        return\n    }\n    const newArray = [...array]\n    const item = newArray.splice(from, 1)\n    newArray.splice(to, 0, ...item)\n    return newArray\n}\nconst array = [0, 1, 2, 3]\nconsole.log(move(array, 1, 3))\n",[30,363,361],{"__ignoreMap":28},[14,365,366],{"id":366},"清空数组",[18,368,369],{},"赋值一个新数组，内存地址更改为新数组的地址。对原有内存地址数据没有改变",[22,371,374],{"className":372,"code":373,"language":27,"meta":28},[25],"let array = [0, 1, 2, 3, 4]\nconst w = array\narray = []\nconsole.log(array) \u002F\u002F []\nconsole.log(w) \u002F\u002F [0, 1, 2, 3, 4]\n",[30,375,373],{"__ignoreMap":28},[18,377,378],{},"长度设置为 0，对原有内存地址数据进行操作。其他引用该地址的数据也会清空",[22,380,383],{"className":381,"code":382,"language":27,"meta":28},[25],"const array = [0, 1, 2, 3, 4]\nconst w = array\narray.length = 0\nconsole.log(array) \u002F\u002F []\nconsole.log(w) \u002F\u002F []\n",[30,384,382],{"__ignoreMap":28},[22,386,389],{"className":387,"code":388,"language":27,"meta":28},[25],"const array = [0, 1, 2, 3, 4]\narray.splice(0)\n",[30,390,388],{"__ignoreMap":28},[22,392,395],{"className":393,"code":394,"language":27,"meta":28},[25],"const array = [0, 1, 2, 3, 4]\n\u002F\u002F eslint-disable-next-line no-empty\nwhile (array.pop()) {}\n",[30,396,394],{"__ignoreMap":28},[10,398,400],{"id":399},"数组拆分合并","数组拆分\u002F合并",[18,402,403],{},"拆分",[22,405,408],{"className":406,"code":407,"language":27,"meta":28},[25],"const str = \"1,2\"\nconst arr = str.split(\",\")\n",[30,409,407],{"__ignoreMap":28},[18,411,412],{},"合并 concat() 或 扩展运算符",[22,414,417],{"className":415,"code":416,"language":27,"meta":28},[25],"const arr1 = [1, 2, 3]\nconst arr2 = [4, 5, 6]\narr1.concat(arr2)\n",[30,418,416],{"__ignoreMap":28},[18,420,421],{},"复制指定元素至指定位置 copyWithin()",[10,423,424],{"id":424},"查找数据",[14,426,428],{"id":427},"indexof-和-lastindexof","indexOf 和 lastIndexOf",[430,431,433],"h4",{"id":432},"indexof","indexOf",[18,435,436],{},"从数组左侧开始查找对应元素。元素存在就返回当前元素在数组中第一次出现的位置，不存在就返回-1",[22,438,441],{"className":439,"code":440,"language":27,"meta":28},[25],"const arr = [1, 2, 3, 4]\nconsole.log(arr.indexOf(2)) \u002F\u002F 1\nconsole.log(arr.indexOf(8)) \u002F\u002F -1\n",[30,442,440],{"__ignoreMap":28},[430,444,446],{"id":445},"lastindexof","lastIndexOf",[18,448,449],{},"从数组右侧开始查找对应的元素。元素存在就返回当前元素最后一次出现的位置，不存在就返回 -1",[22,451,454],{"className":452,"code":453,"language":27,"meta":28},[25],"const arr = [1, 2, 3, 4, 3]\nconsole.log(arr.lastIndexOf(3)) \u002F\u002F 4\nconsole.log(arr.lastIndexOf(6)) \u002F\u002F -1\n",[30,455,453],{"__ignoreMap":28},[117,457,458],{},[18,459,460],{},"indexOf 和 lastIndexOf会进行类型匹配",[22,462,465],{"className":463,"code":464,"language":27,"meta":28},[25],"const arr = [1, 2, 3, 4, \"5\"]\nconsole.log(arr.indexOf(5)) \u002F\u002F -1\nconsole.log(arr.lastIndexOf(5)) \u002F\u002F -1\n",[30,466,464],{"__ignoreMap":28},[117,468,469],{},[18,470,471],{},"indexOf 和 lastIndexOf可以传递第二个参数，表示从第几个元素开始查找",[473,474,475],"blockquote",{},[18,476,477],{},"返回值还是该元素在数组中出现的第一次或最后一次",[22,479,482],{"className":480,"code":481,"language":27,"meta":28},[25],"const arr = [1, 2, 3, 4, 2]\nconsole.log(arr.indexOf(2, 1)) \u002F\u002F 1\nconsole.log(arr.indexOf(3, 1)) \u002F\u002F 4\n",[30,483,481],{"__ignoreMap":28},[14,485,486],{"id":486},"includes",[18,488,489],{},"查找对应的元素是否在对应的数组中，返回 boolean 类型",[22,491,494],{"className":492,"code":493,"language":27,"meta":28},[25],"const arr = [1, 2, 3, 4, 5]\nconsole.log(arr.includes(2)) \u002F\u002F true\nconsole.log(arr.includes(10)) \u002F\u002F false\n",[30,495,493],{"__ignoreMap":28},[18,497,498],{},"includes 实现原理",[22,500,503],{"className":501,"code":502,"language":27,"meta":28},[25],"function includes(array, val) {\n    \u002F\u002F eslint-disable-next-line no-unreachable-loop\n    for (const value of array) {\n        if (value === val)\n            return true\n        return false\n    }\n}\nconst array = [1, 2]\nconsole.log(includes(array, 2)) \u002F\u002F true\n",[30,504,502],{"__ignoreMap":28},[22,506,509],{"className":507,"code":508,"language":27,"meta":28},[25],"const lesson = [{ name: \"html\" }, { name: \"js\" }, { name: \"css\" }]\n\nconsole.log(lesson.includes({ name: \"html\" })) \u002F\u002F false\n\u002F\u002F 内存地址不一致导致没有找到对应的元素\n",[30,510,508],{"__ignoreMap":28},[14,512,514],{"id":513},"find-和-findindex","find 和 findIndex",[430,516,517],{"id":517},"find",[18,519,520],{},"find 可以传递一个回调函数，回调函数返回值为 true 时就返回找到第一个值，回调函数返回为 false 时就返回 undefined",[22,522,525],{"className":523,"code":524,"language":27,"meta":28},[25],"const arr = [1, 2, 3]\nconsole.log(arr.find(item => true)) \u002F\u002F 1\nconsole.log(arr.find(item => item === 2)) \u002F\u002F 2\nconsole.log(arr.find(item => item === \"2\")) \u002F\u002F undefined\nconsole.log(arr.find(item => item === 200)) \u002F\u002F undefined\n",[30,526,524],{"__ignoreMap":28},[22,528,531],{"className":529,"code":530,"language":27,"meta":28},[25],"const lesson = [{ name: \"html\" }, { name: \"js\" }, { name: \"css\" }]\n\nconsole.log(lesson.find(item => item.name === \"html\")) \u002F\u002F {name: 'html'}\n",[30,532,530],{"__ignoreMap":28},[430,534,536],{"id":535},"findindex","findIndex",[18,538,539],{},"findIndex 可以传递一个回调函数，回调函数返回值为 true 时就返回找到第一个值所在的位置，回调函数返回为 false 时就返回 -1",[22,541,544],{"className":542,"code":543,"language":27,"meta":28},[25],"const lesson = [{ name: \"html\" }, { name: \"js\" }, { name: \"css\" }]\n\nconsole.log(lesson.findIndex(item => item.name === \"html\")) \u002F\u002F 1\n",[30,545,543],{"__ignoreMap":28},[430,547,549],{"id":548},"自定义-find","自定义 find",[22,551,554],{"className":552,"code":553,"language":27,"meta":28},[25],"function find(array, callback) {\n    for (const value of array) {\n        if (callback(value)) {\n            return value\n        }\n    }\n    return undefined\n}\nfind([1, 2, 3, 4], item => item === 2) \u002F\u002F 2\n",[30,555,553],{"__ignoreMap":28},[18,557,558],{},"在原型链上定制 findValue 方法",[22,560,563],{"className":561,"code":562,"language":27,"meta":28},[25],"\u002F\u002F eslint-disable-next-line no-extend-native\nArray.prototype.findValue = function (callback) {\n    for (const value of this) {\n        if (callback(value))\n            return value\n    }\n    return undefined\n}\n;[1, 2, 3, 4].findValue(item => item === 2) \u002F\u002F 2\n",[30,564,562],{"__ignoreMap":28},[10,566,567],{"id":567},"排序",[14,569,570],{"id":570},"sort",[18,572,573],{},"回调函数返回值小于 0 两者位置互换，大于 0 不变",[22,575,578],{"className":576,"code":577,"language":27,"meta":28},[25],"const arr = [1, 3, 2, 4, 5]\n\u002F\u002F 从小到大排序\narr.sort((a, b) => a - b) \u002F\u002F [1,2,3,4,5]\n\u002F\u002F 从大到小排序\narr.sort((a, b) => b - a) \u002F\u002F [5,4,3,2,1]\n\nlet cart = [\n    { name: \"html\", price: 20 },\n    { name: \"css\", price: 25 },\n    { name: \"js\", price: 30 },\n]\n\u002F\u002F 按价格从小到大排\ncart = cart.sort((a, b) => a.price - b.price)\n\u002F\u002F 按价格从大到小排\ncart = cart.sort((a, b) => b.price - a.price)\n",[30,579,577],{"__ignoreMap":28},[430,581,583],{"id":582},"sort-实现","sort 实现",[22,585,588],{"className":586,"code":587,"language":27,"meta":28},[25],"function sort(array, callback) {\n    for (const n in array) {\n        for (const m in array) {\n            if (callback(array[n], array[m]) \u003C 0) {\n                ;[array[n], array[m]] = [array[m], array[n]]\n            }\n        }\n    }\n    return array\n}\n\narr = sort([2, 3, 1], (a, b) => a - b)\narr = sort([2, 3, 1], (a, b) => b - a)\n",[30,589,587],{"__ignoreMap":28},[10,591,592],{"id":592},"数组循环",[14,594,596],{"id":595},"for-循环","for 循环",[22,598,601],{"className":599,"code":600,"language":27,"meta":28},[25],"const lessons = [\n    { name: \"html\", price: 20 },\n    { name: \"css\", price: 25 },\n    { name: \"js\", price: 30 },\n]\nfor (let i = 0; i \u003C lessons.length; i++) {\n    console.log(lessons[i])\n}\n\u002F\u002F { name: \"html\", price: 20 }\n\u002F\u002F { name: \"css\", price: 25 }\n\u002F\u002F { name: \"js\", price: 30 }\n",[30,602,600],{"__ignoreMap":28},[14,604,606],{"id":605},"for-of","for ... of",[18,608,609],{},"拿到的值是对应元素的值",[22,611,614],{"className":612,"code":613,"language":27,"meta":28},[25],"const lessons = [\n    { name: \"html\", price: 20 },\n    { name: \"css\", price: 25 },\n    { name: \"js\", price: 30 },\n]\nfor (const lesson of lessons) {\n    lesson.click = true\n}\nconsole.log(lessons)\n\u002F**\n [\n  { name: \"html\", price: 20, click: true},\n  { name: \"css\", price: 25, click: true},\n  { name: \"js\", price: 30, click: true},\n ]\n *\u002F\n",[30,615,613],{"__ignoreMap":28},[117,617,618,624],{},[619,620,621],"template",{"v-slot:title":28},[18,622,623],{},"为什么可以改变原数组呢？",[18,625,626],{},"这里的 lesson 是重新赋值的一个元素，可以改变原数组是因为这是直接改变内存地址中的值",[22,628,631],{"className":629,"code":630,"language":27,"meta":28},[25],"const arr = [1, 2, 3]\nfor (let value of arr) {\n    value = 3\n}\nconsole.log(arr) \u002F\u002F [1,2,3]\n",[30,632,630],{"__ignoreMap":28},[14,634,636],{"id":635},"for-in","for ... in",[18,638,639],{},"拿到的值是对应元素的下标",[22,641,644],{"className":642,"code":643,"language":27,"meta":28},[25],"const lessons = [\n    { name: \"html\", price: 20 },\n    { name: \"css\", price: 25 },\n    { name: \"js\", price: 30 },\n]\nfor (const index in lessons) {\n    console.log(lessons[index])\n}\n\u002F\u002F { name: \"html\", price: 20 }\n\u002F\u002F { name: \"css\", price: 25 }\n\u002F\u002F { name: \"js\", price: 30 }\n",[30,645,643],{"__ignoreMap":28},[14,647,649],{"id":648},"foreach","forEach",[18,651,652],{},"forEach 可以收两个参数，第一个参数是一个回调函数，第二个参数是 this 指向。回调函数可以接受三个参数，第一个是当先循环的元素，第二个是当前循环的下标，第三个元素是原数组",[22,654,657],{"className":655,"code":656,"language":27,"meta":28},[25],"const lessons = [\n    { name: \"html\", price: 20 },\n    { name: \"css\", price: 25 },\n    { name: \"js\", price: 30 },\n]\nlessons.forEach((item, index, lessons) => {\n    console.log(item, index, lessons)\n})\n",[30,658,656],{"__ignoreMap":28},[14,660,662],{"id":661},"interator-迭代器","interator 迭代器",[22,664,667],{"className":665,"code":666,"language":27,"meta":28},[25],"const lessons = [\n    { name: \"html\", price: 20 },\n    { name: \"css\", price: 25 },\n    { name: \"js\", price: 30 },\n]\nconsole.log(lessons.keys().next())\n",[30,668,666],{"__ignoreMap":28},[14,670,672],{"id":671},"some-every","some & every",[430,674,675],{"id":675},"some",[430,677,678],{"id":678},"every",[10,680,681],{"id":681},"数组过滤",[14,683,684],{"id":684},"filter",[18,686,687],{},"返回符合条件的数据数组",[22,689,692],{"className":690,"code":691,"language":27,"meta":28},[25],"const arr = [1, 2, 3]\nconsole.log(arr.filter(item => item > 2)) \u002F\u002F [3]\n",[30,693,691],{"__ignoreMap":28},[430,695,697],{"id":696},"filter-实现","filter 实现",[22,699,702],{"className":700,"code":701,"language":27,"meta":28},[25],"const arr = [1, 2, 3]\nfunction filter(array, callback) {\n    const newArray = []\n    for (const value of array) {\n        if (callback(value) === true) {\n            newArray.push(value)\n        }\n    }\n    return newArray\n}\nconst res = filter(arr, item => item > 2)\nconsole.log(res) \u002F\u002F [3]\n",[30,703,701],{"__ignoreMap":28},[10,705,706],{"id":706},"map",[18,708,709],{},"返回一个操作后的数组",[22,711,714],{"className":712,"code":713,"language":27,"meta":28},[25],"const arr = [1, 2, 3]\nconst newArr = arr.map(item => item + 2)\nconsole.log(newArr) \u002F\u002F [3,4,5]\n",[30,715,713],{"__ignoreMap":28},[10,717,718],{"id":718},"reduce",[18,720,721],{},"reduce 接收两个参数，第一个参数为一个回调函数，第二个参数是初始值",[18,723,724],{},"回调函数第一个值是上一次回调函数的返回值，第一次调用时 reduce 没有传递第二个参数，就默认为数组的第一个参数，第二个参数有传值就为第二个参数传递的值",[22,726,729],{"className":727,"code":728,"language":27,"meta":28},[25],"const arr = [1, 2, 3, 4, 5]\n\u002F\u002F eslint-disable-next-line array-callback-return\narr.reduce((pre, value, index, array) => {\n    console.log(pre, value)\n})\n\u002F**\n 1,2\n undefined, 3\n undefined, 4\n undefined, 5\n *\u002F\n\u002F\u002F eslint-disable-next-line array-callback-return\narr.reduce((pre, value, index, array) => {\n    console.log(pre, value)\n}, 2)\n\u002F**\n 2,1\n undefined, 2\n undefined, 3\n undefined, 4\n undefined, 5\n *\u002F\n\narr.reduce((pre, value, index, array) => {\n    console.log(pre, value)\n    return 22\n}, 2)\n\u002F**\n 2,1\n 22, 2\n 22, 3\n 22, 4\n 22, 5\n *\u002F\n",[30,730,728],{"__ignoreMap":28},[430,732,734],{"id":733},"案例统计元素出现次数","案例：统计元素出现次数",[22,736,739],{"className":737,"code":738,"language":27,"meta":28},[25],"function arrayCount(array, item) {\n    return array.reduce((total, cur) => {\n        total += item === cur ? 1 : 0\n        return total\n    }, 0)\n}\nconsole.log(arrayCount([1, 2, 2, 2, 1, 1, 2], 2)) \u002F\u002F 4\nconsole.log(arrayCount([1, 2, 2, 2, 1, 1, 2], 1)) \u002F\u002F 3\n",[30,740,738],{"__ignoreMap":28},[430,742,744],{"id":743},"案例获取元素中的最大值","案例：获取元素中的最大值",[22,746,749],{"className":747,"code":748,"language":27,"meta":28},[25],"function getMaxItem(array, item) {\n    return array.reduce((pre, cur) => (pre > cur ? pre : cur))\n}\nconsole.log(getMaxItem([1, 2, 3, 444, 555]))\n",[30,750,748],{"__ignoreMap":28},[430,752,754],{"id":753},"案例获取阅读次数最多的文章","案例：获取阅读次数最多的文章",[22,756,759],{"className":757,"code":758,"language":27,"meta":28},[25],"function max(array) {\n    return array.reduce((pre, cur) => {\n        return pre.count > cur.count ? pre : cur\n    })\n}\n\nconst article = [\n    { title: \"js基础\", count: 100 },\n    { title: \"css基础\", count: 200 },\n    { title: \"ts基础\", count: 10 },\n    { title: \"html基础\", count: 500 },\n]\nconsole.log(max(article))\n",[30,760,758],{"__ignoreMap":28},[430,762,764],{"id":763},"案例所有文章阅读总数","案例：所有文章阅读总数",[22,766,769],{"className":767,"code":768,"language":27,"meta":28},[25],"function count(array) {\n    return array.reduce((pre, cur) => (pre += cur.count), 0)\n}\n\nconst article = [\n    { title: \"js基础\", count: 100 },\n    { title: \"css基础\", count: 200 },\n    { title: \"ts基础\", count: 10 },\n    { title: \"html基础\", count: 500 },\n]\nconsole.log(count(article))\n",[30,770,768],{"__ignoreMap":28},[430,772,774],{"id":773},"案例文章阅读总数大于-200-的文章名称","案例：文章阅读总数大于 200 的文章名称",[22,776,779],{"className":777,"code":778,"language":27,"meta":28},[25],"function getTitleByCount(array, count) {\n    return array\n        .reduce((arr, cur) => {\n            if (cur.count > count) {\n                arr.push(cur)\n            }\n            return arr\n        }, [])\n        .map(item => item.title)\n}\n\nconst article = [\n    { title: \"js基础\", count: 100 },\n    { title: \"css基础\", count: 200 },\n    { title: \"ts基础\", count: 10 },\n    { title: \"html基础\", count: 500 },\n]\nconsole.log(getTitleByCount(article, 200))\n",[30,780,778],{"__ignoreMap":28},[430,782,784],{"id":783},"案例-数组去重","案例： 数组去重",[18,786,787],{},"使用 reduce",[22,789,792],{"className":790,"code":791,"language":27,"meta":28},[25],"const arr = [1, 2, 2, 2, 3, 34, 4, 1, 1, 1, 2, 3, 4, 5]\nconst result = arr.reduce((arr, cur) => {\n    if (!arr.includes(cur)) {\n        arr.push(cur)\n    }\n    return arr\n}, [])\nconsole.log(result)\n",[30,793,791],{"__ignoreMap":28},[18,795,796],{},"使用扩展运算符和 Set",[22,798,801],{"className":799,"code":800,"language":27,"meta":28},[25],"const arr = [1, 2, 2, 2, 3, 34, 4, 1, 1, 1, 2, 3, 4, 5]\nconst result = [...new Set([...arr])]\nconsole.log(result)\n",[30,802,800],{"__ignoreMap":28},{"title":28,"searchDepth":804,"depth":804,"links":805},4,[806,817,822,823,832,833,845,850,861,866,867],{"id":12,"depth":807,"text":12,"children":808},2,[809,811,812,813,814,815,816],{"id":16,"depth":810,"text":16},3,{"id":34,"depth":810,"text":34},{"id":46,"depth":810,"text":46},{"id":62,"depth":810,"text":62},{"id":87,"depth":810,"text":87},{"id":103,"depth":810,"text":103},{"id":150,"depth":810,"text":150},{"id":199,"depth":807,"text":199,"children":818},[819,820,821],{"id":202,"depth":810,"text":202},{"id":211,"depth":810,"text":211},{"id":223,"depth":810,"text":224},{"id":233,"depth":807,"text":233},{"id":281,"depth":807,"text":281,"children":824},[825,826,827,828,829,830,831],{"id":284,"depth":810,"text":284},{"id":293,"depth":810,"text":293},{"id":314,"depth":810,"text":314},{"id":332,"depth":810,"text":332},{"id":344,"depth":810,"text":344},{"id":356,"depth":810,"text":357},{"id":366,"depth":810,"text":366},{"id":399,"depth":807,"text":400},{"id":424,"depth":807,"text":424,"children":834},[835,839,840],{"id":427,"depth":810,"text":428,"children":836},[837,838],{"id":432,"depth":804,"text":433},{"id":445,"depth":804,"text":446},{"id":486,"depth":810,"text":486},{"id":513,"depth":810,"text":514,"children":841},[842,843,844],{"id":517,"depth":804,"text":517},{"id":535,"depth":804,"text":536},{"id":548,"depth":804,"text":549},{"id":567,"depth":807,"text":567,"children":846},[847],{"id":570,"depth":810,"text":570,"children":848},[849],{"id":582,"depth":804,"text":583},{"id":592,"depth":807,"text":592,"children":851},[852,853,854,855,856,857],{"id":595,"depth":810,"text":596},{"id":605,"depth":810,"text":606},{"id":635,"depth":810,"text":636},{"id":648,"depth":810,"text":649},{"id":661,"depth":810,"text":662},{"id":671,"depth":810,"text":672,"children":858},[859,860],{"id":675,"depth":804,"text":675},{"id":678,"depth":804,"text":678},{"id":681,"depth":807,"text":681,"children":862},[863],{"id":684,"depth":810,"text":684,"children":864},[865],{"id":696,"depth":804,"text":697},{"id":706,"depth":807,"text":706},{"id":718,"depth":807,"text":718,"children":868},[869,870,871,872,873,874],{"id":733,"depth":804,"text":734},{"id":743,"depth":804,"text":744},{"id":753,"depth":804,"text":754},{"id":763,"depth":804,"text":764},{"id":773,"depth":804,"text":774},{"id":783,"depth":804,"text":784},null,[877],"代码","2022-12-07 14:01:02","js 数组的基础知识",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fjs-array.jpg",{},true,"\u002Fposts\u002F2022\u002Fjs-array",{"text":887,"minutes":888,"time":889,"words":890},"15 min read",15,900000,3000,[892],{"title":893,"link":894},"后盾人文档库\u002F后盾人网站","https:\u002F\u002Fwww.hodunren.com",{"title":5,"description":879},{"loc":885},"posts\u002F2022\u002Fjs-array",[27],"XZC1DjdNuVmI3i1ijf5yI8A59rQE30m8V3dzmTx0RZ8",[901,906],{"title":902,"path":903,"stem":904,"date":905,"type":875,"children":-1},"使用GitHubActions部署","\u002Fposts\u002F2022\u002Fgithubactions-deploy","posts\u002F2022\u002FGitHubActions-deploy","2022-12-05 16:25:27",{"title":907,"path":908,"stem":909,"date":910,"type":875,"children":-1},"视频网站封面图制作","\u002Fposts\u002F2022\u002Fchannel-cover","posts\u002F2022\u002Fchannel-cover","2022-12-08 22:15:26",1789642595795]