es6數組的一些函數方法使用
數組函數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
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
es6數組的一些函數方法使用