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=’男’;
修改失败,报错。
总结:通过访问代理,解决变量私有保护,对数据访问做限制,而用户访问的是代理层,而不是源数据。这样就据进行数保护了。