七, 数组方法
1. map
作用
处理原来数组, 来返回新数组
map 数组的一个方法, 也会遍历 数组 接收到一个函数
<script>
// map 返回 处理后数组
const arr = ['a', 'b', 'c'];
// ['<li>a</li>','<li>b</li>','<li>c</li>']
// 1.
// const newArr = [];
// arr.forEach(function (value) {
// newArr.push(`<li>${value}</li>`);
// });
// console.log(newArr);
// 2.
const newArr = arr.map(function(value, index){
return `<li>${index}-${value}</li>`
})
console.log(newArr);
</script>
map和箭头函数的结合
<script>
const arr = ['a', 'b', 'c'];
// 1.
const newArr = arr.map(value => `<li>${value}</li>`)
console.log(newArr);
// 2.
// const newArr = arr.map(function(value){
// return `<li>${value}</li>`
// })
</script>
2. filter
作用
过滤数组
<script>
// filter 过滤 返回 过滤后的数组
// 1.
const arr = [1, 3, 5, 7, 9];
// 返回 大于 3的数据 重新组成数组 low!!!
// const newArr = [];
// arr.forEach(function (value) {
// if (value > 3) {
// newArr.push(value);
// }
// });
// console.log(newArr);
// 2.
// filter 会遍历数组 返回 满足你条件的 (函数内返回 true) !!! 新的数组
// const newArr = arr.filter(function(value){
// // 判断条件,大于三的 就 返回到新数组 为 true
// if(value > 3){
// return true
// }else {
// return false
// }
// })
// 3.
// const newArr = arr.filter(value => value = value > 3 ? true:false)
// true 和 false 可以省略不谢
// 4. 简洁
const newArr = arr.filter(value => value > 3)
console.log(newArr);
</script>
filter-小案例
<script>
const names = [
'龙傲天',
'塞东江',
'一起走',
'下大雨',
'一根筋',
'达达',
'慌啥速',
'不写乐',
];
// 需求 输出两个字的数组
const newArr = names.filter(function(value){
if(value.length < 3){
return true
}else{
return false
}
});
console.log(newArr);
</script>
filter-大案例
<body>
<div>
同学姓名的长度
<select>
<option value="">请选择</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<ul></ul>
</div>
<script>
const names = [
'龙傲天',
'塞东江',
'一起走',
'下大雨是',
'一根筋q',
'达达',
'慌啥速',
'不写乐是',
'龙傲天',
'塞东江',
'一起走',
'下大雨',
'一根筋',
'达达',
'慌啥速',
'不写乐',
];
const select = document.querySelector('select');
select.addEventListener('change', function () {
const length = this.value;
renderByNameLength(length);
});
// 根据数字来渲染对应长度的名称
function renderByNameLength(length) {
const filterList = names.filter((value) => value.length == length);
let html = '';
filterList.forEach((value) => {
html += `<li>${value}</li>`;
});
const ul = document.querySelector('ul');
ul.innerHTML = html;
}
</script>
</body>
3. every
作用
要求数组中每个元素都符合要求, 才会返回true
every 检测数值元素的每个元素是否都符合条件 全部都符合 返回 true 否则就返回false
<script>
// every 检测数值元素的每个元素是否都符合条件 全部都符合 返回 true 否则就返回false
// const names = ['黄圣飞', '梁聪', '王锦双', '韦嘉敏', '刘雅琴'];
// // 判断一下 上面所有同学的名称 是不是 长度 都是大于2
// const result = names.every(function (value) {
// console.log(value);
// if (value.length > 2) {
// return true;
// } else {
// return false;
// }
// });
// const result2 = names.every((v) => v.length > 2);
// console.log(result);
// every 对于空数组 也会直接返回true
const arr = [];
const result = arr.every((v) => false);
console.log(result);
</script>
4. some
作用
要求数组中有一个元素满足要求, 就回返回true
<script>
const arr = [
'哎嗨',
'哎嗨',
'哎嗨',
'哎嗨',
'没挨',
'哎嗨',
'哎嗨',
'哎嗨',
]
const newArr = arr.some(value => value === '没挨')
if (newArr) {
console.log('true');
} else {
console.log('false');
}
</script>
