es6的一些技巧

1,强制要求参数

es6 有默认参数设置机制；允许在入参的括号里给参数赋予默认值；防止函数在调用时没有传参；

我们知道在js函数在入参的时候是入几个都可以的；

这就给了我们发挥的空间，我们来强制要求参数必须有，否则就报错；

const required  = ()=>{ throw new Error（"Missing parameter"）}

const add=(a=required(),b=required())
=>a+b;
add(1,2);
add(1)

这样的话，如果少参数，那么控制台就会Uncaught Error: Missing parameter；达到强制输入参数的目的；

2，set 方法的妙用

（1）使用set来实现数组去重；

我们都知道set只存储唯一值；

所以这样 const arr=[1,2,3,3];

const arr1 =Array.from(new Set(arr));

或者这样

扫描二维码关注公众号，回复： 1718399 查看本文章

 
   const 
   arr 
   =[ 
   1, 
   2, 
   3, 
   3]; 
  
 
   const 
   arr1 
   =[ 
   ...new 
   Set( 
   arr)]; 
  

使用Array.from 或者 ...都可以实现Set 到数组的转换；

（2）基于以上去重操作那么我们就可以实现一些东西了；

Array.from 或者 ...都已经使得set变为数组了，那么就可以使用一些原生的api 例如 forEach,some ,every,filter,map,reduce

数组方法；

例如

 
   const 
   arr 
   =[ 
   1, 
   2, 
   3, 
   3, 
   4, 
   4, 
   5, 
   6]; 
  
 
   const 
   arr1 
   =[ 
   ...new 
   Set( 
   arr)]. 
   filter((item,index) 
   => 
   item 
   > 
   3); 
  

3，解构赋值

3.1 对象解构

3.1.1删除对象上不需要的属性

例如：

 
   const 
   obj 
   ={name: 
   "xiaoming",age: 
   20,skill:[ 
   "coding", 
   "cooking", 
   "learning"],field:[ 
   "football", 
   "fun"]}; 
  
const {name,age,...otherAttrbute}=obj;

这样我们就可以拿到除了name,age的其他的属性，变相的删除了这俩属性；其他的属性放在otherAttrbute对象中；

以备后用；

3.1.2 合并对象；

利用...运算符来做结构；

例如：

 
   const 
   obj1 
   ={name: 
   "xiaoming",age: 
   20,address: 
   "hangzhou"}; 
  
 
   const 
   obj2 
   ={name: 
   "lily",age: 
   18,address: 
   "shanghai"}; 
  
 
   const 
   obj3 
   ={name: 
   "lucy",age: 
   18,address: 
   "beijing"}; 
  

 
   const 
   newObj 
   ={ 
   ... 
   obj1, 
   ... 
   obj2, 
   ... 
   obj3}; //{name: "lucy", age: 18, address: "beijing"} 
  

这样就实现了对象的结构合并，注意：相同Key名后面的对象覆盖前面；

3.1.3 在函数的参数中解构入参的对象；

例如：

 
   const 
   xiaohong 
   ={ 
  
    address: 
   "hangzhou", 
  
    age: 
   20, 
  
    someAttrbute:{ 
  
    face: 
   "guaziface", 
  
    leg: 
   "biglongleg", 
  
    } 
  
    } 
  
   const 
   getSomeAttrbute 
   =({address,someAttrbute:{face},someAttrbute}) 
   =>{ 
  
   console. 
   log( 
   address, 
   face, 
   someAttrbute) 
  
    } 
  
   getSomeAttrbute( 
   xiaohong);

这样的话就可以直接拿到该对象的某些个属性；

3.2 数组解构

3.2.1 数值交换

例如：

 
   let 
   a 
   = 
   1; 
  
 
   let 
   b 
   = 
   2; 
  

    [ 
   b, 
   a] 
   =[ 
   a, 
   b] 
  
 
   console. 
   log( 
   a);//2 
  
 
   console. 
   log( 
   b);//1 
  

这样就实现了值的互换；

3.2.2 接收函数返回的多个结果；

 
   async 
   function 
   getFullPost(){ 
  
   return 
   await 
   Promise. 
   all([ 
  
   fetch( 
   "/post"), 
  
   fetch( 
   "/comments") 
  
    ]) 
  
    }; 
  
   cosnt [ 
   post, 
   comments] 
   = 
   getFullPost();

这样getFullPost()函数调用会得到一个数组，我们就可以通过解构赋值直接拿到每个返回结果的数据，方便处理；

4 关于reduce的一些妙用

首先声明这是关于es5的方法，只是归并到这个文章了；

 
   const 
   arr 
   =[ 
   1, 
   2, 
   3, 
   4, 
   5]; 
  
 
   const 
   result 
   = 
   arr. 
   reduce((a,b) 
   => 
   a 
   + 
   b); 
  
 
    console. 
   log( 
   result); //15 
  

首先来说一下这个api的简单用法；实现数组中的每一项相加，参数a是初始值, 或者计算结束后的返回值，b是当前元素；这是简单用法，前方高能。

4.1.1 使用reduce同时实现map和filter

 
   const 
   nums 
   =[ 
   10, 
   20, 
   30, 
   40, 
   50, 
   60, 
   70]; 
  
 
   const 
   result 
   = 
   nums. 
   reduce((a,b) 
   =>{ 
  
 
   b 
   = 
   b 
   * 
   2; 
  
 
   if( 
   b 
   > 
   50){ 
  
 
   a. 
   push( 
   b); 
  

    } 
  
 
   return 
   a 
  

    },[]) 
  
 
   console. 
   log( 
   result);//[60, 80, 100, 120, 140] 
  

这里后面是空数组是可选参数，是指a的初始值；

这样一来实现了map方法，重新返回一个处理过的新的副本，

二来实现了filter方法实现了过滤；

这样就可以实现替代map和filter的结果；

4.1.2 统计数组中相同项的个数；

 
   var 
   cars 
   =[ 
   "BWM", 
   "BENZ", 
   "BENZ", 
   "TESLA", 
   "BWM", 
   "TOYOTA"]; 
  
 
   var 
   result 
   = 
   cars. 
   reduce((a,b) 
   =>{ 
  
 
   a[ 
   b] 
   = 
   a[ 
   b] 
   ?++ 
   a[ 
   b] 
   : 
   1; 
  
 
   return 
   a; 
  

    },{}); 
  
 
   console. 
   log( 
   result);//{BWM: 2, BENZ: 2, TESLA: 1, TOYOTA: 1} 
  

这样就得到了数组中每个元素的数量；

猜你喜欢