4.默认参数

1.es3/es5/es6中如何给默认参数赋值？

举个例子，函数传入x,y,z参数相加，如果y,z不传入值。则默认为2、3

//ES3、ES5
 function foo(x,y,z){
   if(y === undefined){
      var y = 2;
   } 
   if(z === undefined){
      var z = 3;
   }
   return x + y + z
}
console.log(foo(1));

//ES6
  function foo2(x,y = 2,z = 3){
      return x + y + z
  }
  console.log(foo2(1))

控制台结果：输出都为6, 如果console.log(foo(1,5))，那么输出为9
这里写图片描述

结论：ES3、ES5中参数声明默认值在{}中进行，而ES6中可直接在()内声明默认值。

2.es6中如何对必选参数优雅的抛出异常？

刚刚第一个例子是x必须输入默认参数，如果x不输入呢？

function checkError(){
      throw new Error('出错了')
   }
   function foo(x = checkParameter(), y = 2, z = 3) {
    return x + y + z
   }
   console.log(foo(1));

这时候后台输入为6。

//如果在上面代码加上
try {
    foo()
  } catch (e) {
    console.log(e);
  } finally {}

控制台显示：报错
这里写图片描述

3.当默认参数多个时es3/es5/es6如何处理？

举个例子，函数foo的默认参数相加输出的值：

//ES3,ES5可变参数
 function foo(){
    var a = Array.prototype.slice.call(arguments,0);//调用方法的参数截取出来，转换成一个数组对象
    var sum = 0;
    a.forEach(function(item){  //item参数指数组的每个元素，并将元素传递给回调函数
      sum += item * 1 //这里乘以1是为了转化为number
    })
    return sum     
  }
  console.log(foo(1,2,3));

//ES6可变参数
  function foo2(...a){ //...a可扩展性运算符
    var sum = 0;
    a.forEach(item => sum += item * 1); 
    return sum;
  }
  console.log(foo2(1,2,3));

控制台输出结果相同：
这里写图片描述

总结：当函数有多个参数时，ES6可直接用“…a”来代替，例如用在函数+-×÷这块

4.关于ES3/ES5和ES6合并数组的区别？

举个例子：

   //ES5合并数组
   var array = [1995,'女','前端',true];
   var array2 = ['广州','阿蔡'].concat(array);
   console.log(array2); 

  //ES6合并数组
  var array = [1995,'女','前端',true];
  var array2 = ['广州','阿蔡',...array];
  console.log(array2);

控制台结果：输出相同

这里写图片描述

总结：“…a”可扩展性运算符除了可以代替多个默认参数之外还可以合并数组

5.对象代理

什么是对象代理？比如我们封装了一组数据，通过访问代理，对数据访问做限制，而用户访问的是代理层，而不是源数据。这样就进行数据保护。

ES3/ES5 和ES6数据保护区别

 //ES3,ES5写法
  var Person = function(){
    var data = {
       name:'阿蔡',
       sex:'female',
       age:23
    }
    this.get =  function(key){
        return data[key]
    }
    this.set = function(key,value){
        if(key !== 'sex'){
           data[key] = value
        }
    }
  }

  var person = new Person();
  console.table({
     name: person.get('name'),
     sex:person.get('sex'),
     age: person.get('age')
  })

控制台结果
这里写图片描述

现在我们修改name属性：person.set(‘name’, ‘acai’);
控制台结果：修改成功
这里写图片描述

如果我们修改sex属性呢？修改为男性 person.set(‘sex’, ‘man’);
这里写图片描述
可以看到sex没有变化，属性不可修改。

当然还有一个另一种方法，就是利用ES5的一个特性，defineProperty()方法。用于定义对象新属性或修改原有属性。如：

//ES5写法
//ES5
  var Person = {
     name: '阿蔡',
     age: 23   
  }
  Object.defineProperty(Person,'sex',{
     writable:false,
     value:'female'
  })
  console.table({
     name: Person.name,
     sex:Person.sex,
     age: Person.age
  })

控制台结果跟之前输出结果一样。
现在来修改sex属性，控制台报错。不可修改sex属性。因为该属性设置只读。
这里写图片描述

最后来看下ES6数据保护写法

let Person = {
    name: '阿蔡',
    sex: '女',
    age: 23
  }
  let person = new Proxy(Person,{ //Person为代理的对象
   //get为读取操作,参数target为代理对象的数据，key是你要读的哪个属性。
     get:function(target, key){ 
         return target[key]
     },
     //set为设置修改操作，value为属性值
     set:function(target,key,value){
         if(key!=='sex'){ 
            target[key]=value; 
         }
     }
  })
  console.table({
    name:person.name,
    sex:person.sex,
    age:person.age
  });

控制台结果：
这里写图片描述

注：这里是ES6新特性：Proxy代理器使用new Proxy创建代理器，第一个参数为一个对象，第二个参数也为一个对象，返回被包裹后的代理器，我们使用基本的get和set写一个demo：

然后我们来修改一下sex属性 person.sex=’男’;
修改失败，报错。
这里写图片描述

总结：通过访问代理，解决变量私有保护，对数据访问做限制，而用户访问的是代理层，而不是源数据。这样就据进行数保护了。

ES6和ES5语法区别（默认参数、对象代理）

4.默认参数

5.对象代理

猜你喜欢