es6学习笔记（七）

函数的扩展

1.函数参数的默认值

• es6允许为函数的参数设置默认值，即直接写在参数定义的后面

  function log(x,y='world'){
  	console.log(x,y);
  ｝
  log('hello')//hello world
  log('hello','world') //hello world
  log('hello',' ') //hello
  

• 参数变量不能再函数内再次用let或者const声明

  function(x=5){
    	let x=1; //error
    	const x=2; //error
  ｝
  

• 使用参数默认值时，函数不能用同名参数

  //不使用参数默认值时不会报错，当参数名字相同时
  function foo(x,x,y){
  	//...
  ｝
  
  //当使用参数默认值时就会报错
  function foo(x,x,y=1){
  	//....
  }
  

• 与解构赋值默认值结合使用
  在使用解构赋值默认值的时候，同时也要使用参数的默认值否则会报错

  //函数只有解构赋值默认值
  function foo({x,y=5}){
  	console.log(x,y);
  ｝
  
  foo({}); //undefined 5
  foo({x:1}); //1 5
  foo({x:1,y:2}) //1 2
  foo() // TypeError: Cannot read property 'x' of undefined
  
  //当函数解构赋值和参数默认值都有时，传入的参数为空时才不会报错
  function foo({x,y=5}={}){
  	console.log(x,y);
  ｝
  foo() //undefined 5
  

  //两种不同的写法
  function m1({x=0,y=0}={}){
    return [x,y];
  ｝
  function m2({x,y}={x:0,y:0}){
     return [x,y]
  ｝
    
  //函数没有参数的情况
  m1() //[0,0]
  m2() //[0,0]
    
  // x 和 y 都有值的情况
  m1({x: 3, y: 8}) // [3, 8]
  m2({x: 3, y: 8}) // [3, 8]
    
  // x 有值，y 无值的情况
  m1({x: 3}) // [3, 0]
  m2({x: 3}) // [3, undefined]
    
  // x 和 y 都无值的情况
  m1({}) // [0, 0];
  m2({}) // [undefined, undefined]
    
  m1({z: 3}) // [0, 0]
  m2({z: 3}) // [undefined, undefined]
  

• 参数默认值的位置
  设有默认值的参数一般是都是函数的尾参数，否则的话这个函数在调用时该参数不能省略而不省略其后的参数，省略会报错，除非显示的给其值为undefined，触发默认值，显示的设置为null并不会触发默认值，而只会让该参数的值为null。

  function f(x=1,y){
  	return [x,y]
  ｝
  f(); //[1,undefined]
  f(2) // [2, undefined])
  f(, 1) // 报错
  f(undefined, 1) // [1, 1]
  
  function f(x, y = 5, z) {
   return [x, y, z];
  }
  f() // [undefined, 5, undefined]
  f(1) // [1, 5, undefined]
  f(1, ,2) // 报错
  f(1, undefined, 2) // [1, 5, 2]
  

• 函数的 length 属性
  指定了默认值以后，函数的length属性，将返回没有指定默认值得参数个数

  (function(a){}).length //1
  (function(a=5){}).length //0
  (function(a,b,c=5){}).length //2
  

  reset参数也不会被计入length属性

  (function(...args) {}).length //0
  

  如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了

  (function (a=0,b,c) {}).length //0
  (function (a,b=1,c) {}).length //1
  

• 作用域
  一旦设置了参数的默认值，函数进行生命初始化时，参数会形成一个单独的作用域。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

2.rest 参数

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

• rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错

   // 报错
   function f(a, ...b, c) {
     // ...
   }
  

• 函数的length属性，不包括 rest 参数

3.箭头函数

• 基本用法
  ES6 允许使用“箭头”（=>）定义函数。

  var f = v => v;
  //等同于
  var f = function(v){
  	return v;
  }
  

  如果箭头函数不需要或需要多个参数，就使用一个圆括号代表参数部分。

  var f = () =>5;
  //等同于
  var f = function () {return 5};
  
  var sum = (num1,num2) => num1+num2;
  //等同于
  var sum = function (num1,num2){
     return num1+num2;
  }
  

  如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

  var sum = (num1, num2) => { return num1 + num2; }
  
  //如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
  let getTempItem = id => ({ id: id, name: "Temp" });
  

对象的扩展

1.属性的简洁表示法

• 属性简写 属性名和属性值一样

  const foo = 'bar';
  const baz = {foo};
  
  //等同于
  const baz = {foo:foo}
  

• 方法简写

  const o = {
  	method() {
  		return 'Hello';
  	}
  ｝
  
  //等同于
  const o = {
  	method: function(){
  		return 'Hello'
       ｝
  }
  

2.属性名表达式

let a='b';
let es5_obj={
     a:'c'
}
let es6_obj={
	[a]:'c'
｝
console.log(es5_obj，es6_obj);
//{a:'c'} , {b:'c'}

3.obj新增api

• Object.is()判断两个值是否相等

  //在功能上和===是一样的
  console.log('字符串',Object.is('abc','abc')); //true
  
  //因为数组为引用类型，所以两个数组的引用地址是不一样的所以不相等
  console.log('字符串',Object.is([],[])); //false
  

• Object.assign()对象拷贝，该拷贝是浅拷贝，只拷贝自身属性，不会拷贝继承属性和不可枚举属性

  //第一个参数要拷贝的对象上，第二个参数要被拷贝的对象
  //将对象{b:'b'}拷贝到对象{a:'a'}
   console.log('拷贝',Object.assign({a:'a'},{b:'b'})); //{a:'a'，b:'b'｝
  

• Object.entries()遍历对象的键值对

  let test = {k:123,o:456}
  for(let [key,value] of Object.entries(test)){
   console.log([key,value])
  }