數組函數forEach()、map()、filter()、find()、every()、some()、reduce()等
數組函數
（這里的回調函數中的index和arr都可以省略，回調函數后有參數是設置調整this指向的，這里暫時不使用）
forEach() -----循環
map()— —更新數組
filter()、includes()、find()、findIndex()— —篩選（刪除）數組
some()、every()— —判斷數組
reduce()— —疊加數組
arr.forEach()
遍歷數組全部元素，利用回調函數對數組進行操作，自動遍歷數組.length次數，且無法break中途跳出循環
因此不可控
不支持return操作輸出，return只用於控制循環是否跳出當前循環
因此難操作成新數組，新值，故不作多分析
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [1, 2, 3, 4, 5]; arr.forEach((item, index) => { console.log(index); console.log(item); console.log('-----'); }) } } }; </script>
arr.map()— —更新數組
1、創建新數組
2、不改變原數組
3、輸出的是return什么就輸出什么新數組
4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)
5、使用return操作輸出，會循環數組每一項，並在回調函數中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [ { name: 'zhangsan', age: 17 }, { name: 'lisi', age: 18 }, { name: 'wangwu', age: 19 }, { name: 'xiaoliu', age: 20 } ]; let arr2 = arr.map(item => item.name); console.log(arr2); } } }; </script>
arr.join()— —生成字符串
1、生成以括號內符號分隔開的字符串
2、不改變原數組
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [1, 2, 3, 4, 5]; let str = arr.join('-'); console.log(str); } } }; </script>
arr.filter()、includes()、find()、findIndex()— —篩選數組
一、arr.filter()
1、創建新數組
2、不改變原數組
3、輸出的是判斷為true的數組元素形成的新數組
4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)
5、使用return操作輸出，會循環數組每一項，並在回調函數中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [1, 2, 3, 4, 5]; let arr2 = arr.filter(item => item > 3); console.log(arr2); } } }; </script>
二、arr.includes()
只是判斷數組是否含有某值，不用return，不用回調函數，輸出一個true或false
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [1, 2, 3, 4, 5]; let result = arr.includes(3); console.log(result); let result2 = arr.includes(6); console.log(result2); } } }; </script>
三、arr.find()
1、不創建新數組
2、不改變原數組
3、輸出的是一旦判斷為true則跳出循環輸出符合條件的數組元素
4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)
5、使用return操作輸出，會循環數組每一項，並在回調函數中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [ { name: 'zhangsan', age: 17 }, { name: 'lisi', age: 18 }, { name: 'wangwu', age: 19 }, { name: 'xiaoliu', age: 20 } ]; let person = arr.find(item => item.name === 'lisi'); console.log(person); } } }; </script>
四、arr.findIndex()— — 與find()相同
1、不創建新數組
2、不改變原數組
3、輸出的是一旦判斷為true則跳出循環輸出符合條件的數組元素序列
4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)
5、使用return操作輸出，會循環數組每一項，並在回調函數中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [ { name: 'zhangsan', age: 17 }, { name: 'lisi', age: 18 }, { name: 'wangwu', age: 19 }, { name: 'xiaoliu', age: 20 } ]; let result = arr.findIndex(item => item.name === 'wangwu'); console.log(result); let result2 = arr.findIndex(item => item.name === 'tuzi'); console.log(result2); } } }; </script>
arr.some()、every()— —判斷數組
(不常用)
一、some()
1、不創建新數組
2、不改變原數組
3、輸出的是判斷為true則馬上跳出循環並return成true
4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)
5、使用return操作輸出，會循環數組每一項，並在回調函數中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [1, 2, 3, 4, 5]; let result = arr.some(item => item > 4); console.log(result); let result2 = arr.some(item => item > 6); console.log(result2); } } }; </script>
二、every()— —與some相反
1、不創建新數組
2、不改變原數組
3、輸出的是判斷為false則馬上跳出循環並return成false
4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)
5、使用return操作輸出，會循環數組每一項，並在回調函數中操作
<template>
<section class="p-10">
<div class="app">
<el-button type="danger" @click="get()">點擊</el-button>
</div>
</section>
</template>
<script> export default { methods: { get() { let arr = [1, 2, 3, 4, 5]; let result = arr.every(item => item > 0); console.log(result); let result2 = arr.every(item => item > 3); console.log(result2); } } }; </script>
嗯，就醬~~
參考 https://blog.csdn.net/kingan123/article/details/79818566