ES6 之函数扩展和对象扩展

Posted 2020-11-26 lk-food

简单记录，方便快速复习~

函数扩展： 参数默认值、rest 参数、扩展运算符、箭头函数、尾调用...

对象扩展： 简洁表示、属性表达式、新增API等...

//函数扩展

// 参数默认值
function fn(x,y=1){
  console.log(x+y)
}
fn(2)
{ // 注意作用域
  let x = 1
  function test(x,y=x) {
    console.log(x,y)
  }
  test(2) // 2 2 
}
{ // 注意作用域
  let x = 1
  function test1(a,y=x){
    console.log(a,y)
  }
  test1(2) // 2 1
}


// rest参数
function fn1(...args) {
  console.log(args)
}
fn1(1,2,3)

function fn2(x,y,...z){
  console.log(z)
}
fn2(1,2,3,4,5)

// 扩展运算符
{
  console.log(‘a‘,...[1,2,3,4])
}

// 箭头函数 —— 注意this指向问题
// ES5 中 this指向函数调用的地方， ES6中 this指向函数定义的地方
let fn4 = (x,y) => {
  console.log(x + y)
}
console.log(typeof fn4)
fn4(1,3)

// 尾调用
function util(x) {
  console.log(x)
}
function mUtil(x) {
  return util(x)
}
mUtil(1)

// 对象扩展
// 简洁表示
{
  let a = 1,b = 2
  let es5 = {
    a: a,
    b: b
  }
  console.log(es5)
}
{
  let a =1, b = 2
  let es6 = {
    a,
    b
  }
  console.log(es6)
}

let es5_method = {
  sum: function(x,y) {
    console.log(x+y)
  }
}
es5_method.sum(1,2)

let es6_method = {
  sum(x,y) {
    console.log(x+y)
  }
}
es6_method.sum(1,2)
// 属性表达式
let a = "name"
let es6_obj = {  // [a] 是一个表达式
  [a]: "zhangsan"
}
console.log(es6_obj)
// 新增API
console.log( Object.is(‘abc‘,‘abc‘) ) //等同于 ===
console.log(Object.is([],[])) //false

console.log(‘浅拷贝‘,Object.assign({a:‘a‘},{b: ‘b‘}))
{ 
let {a,b,...c} = {a: ‘a‘,b:‘b‘,c: ‘c‘,d: ‘d‘}
console.log(c)
}