ES6 扩展运算符(...)、[]用法&以及Vuex辅助函数原理，以mapState为例

ES6 扩展运算符(…)、[]用法&以及Vuex辅助函数原理

1、…

通俗来说一般用于将对象展开

示例代码：

let obj = {
    
    
    name:'ivan',
    age:21
}

let obj2 = {
    
    
    ...obj
}

console.log(obj2)

此时输出的obj2包含obj的属性name,age

用法：

1. 不定参数，es6不再使用arguments对象

示例代码：

var demo = function (...arg){
    
    
   for (let item of arg){
    
    
       console.log(item);
   }
}
demo(1,2,3);
// 1
// 2
// 3

2. 对象的拷贝，如上面的示例代码
3. 字符串转数组

示例代码

var demo = "hello"
var str = [...demo];
console.log(str);
// ["h", "e", "l", "l", "o"]

2、[]

在声明函数名时，如需动态使用字符串作为函数名可以使用

示例代码

let str = "myFun"

function [str](){
    
    
    console.log(123)
}

let str = "myFun"

let obj = {
    
    
    [str]: function() {
    
    
        console.log(123);
    }
}

obj.myFun()
obj[str]()

//123
//123

3、Vuex辅助函数原理

直接上代码

function mapState(arr) {
    
    
  let obj = {
    
    };
  arr.forEach(key => {
    
    
    obj[key] = function() {
    
    
      console.log(this);
      return this.$store.state[key];
    };
  });
  return obj;
}

调用：

computed: {
    
    
    ...mapState(['name','age'])
}

正是使用了扩展运算符和[]实现

同理 mapGetters、mapMutations等原理与之相同