JavaScript中的解构及数组对象操作

深碍√TFBOYSˉ_ 2021-12-16 10:04 204阅读 0赞

# JavaScript中的解构及数组对象操作 #

### 文章目录 ###

*  JavaScript中的解构及数组对象操作
 *   *  解构
     *   *  列表解构
         *  参数解构
         *  数组解构
         *  对象解构
     *  数组操作
     *  对象的操作

JS的结构很灵活，参考：  
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread\_syntax][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_Spread_syntax]

*  搜集多个参数使用`【...变量名】`表示
 *  结构参数使用`【...需要解构的变量名】`表示

## 解构 ##

### 列表解构 ###

var parts = ['shoulder','knees'];
    var lyrics = ['head',...parts,'and','toes'];//使用...结构
    console.log(lyrics) // [ 'head', 'shoulder', 'knees', 'and', 'toes' ]

### 参数解构 ###

function f(x,y,z){ 
        console.log(x+y+z);
    }
    
    var args = [2,3,4];
    f(...args);//9

### 数组解构 ###

*  解构的时候，变量从左到右和元素对齐，可变参数放到最右边。
 *  能对应到数据就返回数据，对应不到数据的返回默认值，如果没有默认值返回undeﬁned。

const arr = [100,200,300];
    let [x,y,z] = arr;
    console.log('1----',x,y,z);
    
    //丢弃
    const [,b,] = arr;
    console.log('2----',b);
    // b=5 //异常，b声明未const
    
    //少于数组元素
    const [d,e] = arr;
    console.log('3---',d,e);
    
    //多余数组元素
    const [m,n,o,p] = arr;
    console.log('4----',m,n,o,p);
    
    //可变变量
    const [f,...args] = arr
    console.log('5----',f);
    console.log('6----',args)
    
    //支持默认值
    const [j=1,k,,,i=10] = arr;
    console.log(j,k,i)

![array\_001][array_001]

### 对象解构 ###

1.  简单对象解构
    
     *  解构时需要提供对象的属性名，会根据属性名找到对应的值。没有找到的返回缺省值，没有缺省值则返回 undeﬁned。
    
        const obj={ 
            a:100,
            b:200,
            c:300
        }
        
        var { x,y,z} = obj;
        console.log(x,y,z) // undefined undefined undefined
        
        var { a,b,c} = obj;
        console.log(a,b,c); // 100,200,300
        
        var { a:m,b:n,c}=obj; //重命名
        console.log(m,n,c); //100,200,300
        
        var { a:M,c:N,d:D='python'} = obj; //缺省值
        console.log(M,N,D);// 100,300,python
    
    ![001][]
2.  复杂解构
    
        const arr= [1,[2,3],4];
        
        const [a,[b,c],d] = arr;
        console.log(a,b,c,d);// 1,2,3,4
        
        const [e,f] = arr;
        console.log(e,f);//1,[2,3]
        
        const [g,h,i,j=18] = arr;
        console.log(g,h,i,j);//1,[2,3] 4,18
        
        const [k,...y] = arr;
        console.log(k,y);// 1,[[2,3],4]
    
    ![array\_003][array_003]
    
     *  对象解构
    
        var data = { 
            a:100,
            b:[
                { 
                    c:200,
                    d:[],
                    a:300
                },
                { 
                    c:1200,
                    d:[1],
                    a:1300
                }
            ],
            c:500
        }
        
        var { a:m,b:[{ a:n},{ a:n1}]} = data;
        console.log(m,n,n1)
    
    ![array\_004][array_004]

## 数组操作 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">push(…items)</td> 
   <td align="left">尾部增加多个元素</td> 
  </tr> 
  <tr> 
   <td align="left">pop()</td> 
   <td align="left">移除最后一个元素，并返回它</td> 
  </tr> 
  <tr> 
   <td align="left">map</td> 
   <td align="left">引入处理函数来处理数组中每一个元素，返回新的数组</td> 
  </tr> 
  <tr> 
   <td align="left">filter</td> 
   <td align="left">引入处理函数处理数组中每一个元素，此处理函数返回true的元素保留，否则该元素被过滤掉，保留的元素构成新的数组返回。</td> 
  </tr> 
  <tr> 
   <td align="left">foreach</td> 
   <td align="left">迭代所有元素，无返回值</td> 
  </tr> 
 </tbody> 
</table>

const arr = [1,2,3,4,5];
    arr.push(6,7);
    console.log(arr);
    arr.pop();
    console.log(arr);
    
    //map 
    const powerArr = arr.map(x => x*x); //新数组
    console.log(powerArr);
    
    newarr2 = []
    const newarr = arr.forEach(x => newarr2.push(x+10));// 无返回值
    console.log(newarr,arr,newarr2)
    
    console.log(arr.filter(x => x%2==0)) //新数组

![array\_005][array_005]

*  练习：有一个数组\[1,2,3,4,5\],要求算出所有元素平方值是偶数且大于10的平方值

const arr = [1,2,3,4,5];
    
    //第一种思路
    low = Math.sqrt(10);
    newarr = arr.filter(x => x>low && (x & 1) == 0).map(x => x*x);
    console.log(newarr)
    
    //第二种思路
    newarr2 = []
    low = Math.sqrt(10);
    arr.forEach(x=> (x>low && (x & 1) == 0)?newarr2.push(x*x):'');
    console.log(newarr2)

![array\_006][array_006]

## 对象的操作 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Object的静态方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Object.keys(obj)</td> 
   <td align="left">ES5开始支持，返回所有key</td> 
  </tr> 
  <tr> 
   <td align="left">Object.values(obj)</td> 
   <td align="left">返回所有值，试验阶段，支持较差</td> 
  </tr> 
  <tr> 
   <td align="left">Object.entries(obj)</td> 
   <td align="left">返回所有值，试验阶段，支持较差</td> 
  </tr> 
  <tr> 
   <td align="left">Object.assign(target,…sources)</td> 
   <td align="left">使用多个source对象，来填充target对象，返回target对象</td> 
  </tr> 
 </tbody> 
</table>

![002][]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_Spread_syntax]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[array_001]: /images/20211214/b2bdfc81038e46d6a5feb0d57140b5a0.png
[001]: /images/20211214/3a6eb048f0334413b3f74f3e52fed87b.png
[array_003]: /images/20211214/ef3fa704bb2d47afbf37b5ca2d9a3e14.png
[array_004]: /images/20211214/3a97f482846a4beb9bd52110965a34ce.png
[array_005]: /images/20211214/7798fe81e707482ca82dfe6c9ddf6a3a.png
[array_006]: /images/20211214/4e49f2d7d0474f88b88775564fafbce1.png
[002]: /images/20211214/43995b06a9404c3587b63be156fe6a0b.png