数组方法
-
1.foreach(),数组的
遍历
,一般利用箭头函数,不能用break打断循环 -
2.map(),数组的遍历并且返回一个新数组,一般转换成字符串后用于
页面渲染
-
3.filter(),数组的筛选,筛选后返回一个
新数组
,一般用于筛选数组对象中某个属性满足条件后的新数组 -
4.every(),检测数组是否每一个元素都满足条件,返回true或false,数组为空时返回为true,一般用于
全选按钮案例
-
5.some(),检测数组是否有一个满足条件的元素,返回true或false,数组为空时返回false,
工作中最常用
-
6.find(),找到符合元素的第一个元素,返回找到的那个元素,只返回一个元素,没有则返回undefined
-
7.findIndex(),找到符合元素的下标,只返回找到那个元素的第一个元素的下标,不满足则返回-1
-
8.includes(),找到是否包含某个元素的元素并且输出包含元素的元素,不能用于复杂的查找,复杂的查找用find(),没有则返回false
-
9.indexOf(),判断数组中的所有元素是否包含某个元素,包含则返回数组的下标,不包含则返回-1
-
10.Array.isArray(),判断是否是数组
-
11.reduce()方法,讲将数组从左到右计算为为一个值,一般用于
计算数组的总合、页面的渲染
数组去重的时候进行取反操作,意为当结果不成立时
- **.sort() 方法用原地算法对数组的元素进行排序,并返回数组 **
- .fill()固定填充元素,填充成指定元素,从起始索引到终止索引
- .reverse() 将数组中元素的位置颠倒,并返回该数组
findIndex()和indexOf()方法的区别
-
indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
-
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
findIndex()方法可以接收一个测试函数,根据测试函数来寻找索引
用set方法数组去重
-
实例化一个set对象,实例化的时候传入需要去重的数组
let set = new Set(需要去重的数组)
-
将去重后得到的set对象转换为数组赋值给原数组
arr=[...set]
-
得到去重后的数组
every(),返回true或false-常用案例(全选)
1.此方法意为是否全部满足条件,全满足为true,不全满足为false
2.此方法为数组的使用方法,如果是伪数组的话是不可以使用的,伪数组可以使用[…伪数组]转为真数组
3.此方法如果数组为空时返回值是true
<script>
const arr = [11, 23, 45]
let yes = arr.every(v => v > 10)
console.log(yes);//true
</script>
全选案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>¥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>¥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>¥5999</td>
</tr>
</table>
<script>
const cks = document.querySelectorAll('.ck');
const checkAll = document.querySelector('#checkAll');
cks.forEach(v => {
v.addEventListener('click', function () {
let selall = [...cks].every(v => v.checked)
if (selall) {
checkAll.checked = true
} else {
checkAll.checked = false
}
})
})
checkAll.addEventListener('click', function () {
if (checkAll.checked) {
cks.forEach(v => {
v.checked = true
})
} else {
cks.forEach(v => {
v.checked = false
})
}
})
</script>
</body>
</html>
数组复制(延展运算符的运用)
1.如果将两个数组直接用=连接起来的话,两个数组指向的地址是一样的,所以任意一个数组的值发生了改变的话两个数组的值都会一起改变
2.为了避免这种情况的发生,使用延展运算符进行数组的复制
<script>
let arr = [1, 2, 3, 4];
let newarr = [];
newarr = [...arr];
newarr[0] = 10;
console.log(arr, newarr);
let obj = { u: '1', a: 'a' };
let newobj = { ...obj };
newobj.u = 'u';
console.log(obj, newobj);
</script>
Set对象
永远不会有重复元素的对象
<script>
let arr = [1, 3, 4, 5, 6, 6, 6];
// 将数组转换为set对象(去重)
let set = new Set(arr);
console.log(set);
// 再将对象转换为数组(延展运算符)
arr = [...set];
console.log(arr);
</script>