0


js数组方法返回值和数组的解构

数组方法

**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>

标签: javascript 前端 html

本文转载自: https://blog.csdn.net/qq_53963503/article/details/127013379
版权归原作者 达不U 所有, 如有侵权,请联系我们删除。

“js数组方法返回值和数组的解构”的评论:

还没有评论