数组方法
**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()方法,讲数组从左到右计算为为一个值,一般用于
计算数组的总合、页面的渲染
**
数组去重的时候进行取反操作,意为当结果不成立时
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>
全选案例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><thclass="allCheck"><inputtype="checkbox"name=""id="checkAll"><spanclass="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><inputtype="checkbox"name="check"class="ck"></td><td>小米手机</td><td>小米</td><td>¥1999</td></tr><tr><td><inputtype="checkbox"name="check"class="ck"></td><td>小米净水器</td><td>小米</td><td>¥4999</td></tr><tr><td><inputtype="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>
解构
用变量获取数组里的元素
<script>const arr =[1,2,3,4,5]//声明变量let[a, b, c, d, e, f]= arr
console.log(a, b, c, d, e, f);//1 2 3 4 5 undefined
<script>let a =1;let b =2;[b, a]=[a, b];let obj ={uname:'姓名',age:'年龄'};let{ uname, age }= obj;
console.log(a, b, uname, obj);</script>//输出结果21'姓名'
Object
age:"年龄"uname:"姓名"
数组复制(延展运算符的运用)
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 =newSet(arr);
console.log(set);// 再将对象转换为数组(延展运算符)
arr =[...set];
console.log(arr);</script>
版权归原作者 达不U 所有, 如有侵权,请联系我们删除。