ES6语法收集

 

盘ES6、ES7、ES8、ES9、ES10 思维导图

字符串处理

 

参考

数组

按条件删除数组中一个元素

fileList.splice(fileList.findIndex(item => item.uid === file.uid), 1)

 Vuex-Action Xxx:({commit})=>{}

参考

例1:

actions:{
　　getCityItem:({
　　　　commit
　　}) => {

　　}
}

Xxx:({commit})=> {

    commit('参数1','参数2')  //可以理解为简化写法
}

 

例子2:
actions: {
    setNumber: ({
      commit,
      state
    }, number) => {
      // console.log(state.number, number)
      return commit('SET_NUMBER', number)
    }
}

 ...fn(['a', 'b', 'c'])  ... : 对象展开运算符

是ES6新增语法, 对象展开运算符，大体有两个主要功能，收集参数与将数组表达式或者string在语法层面展开。这里不做过多介绍

参考1(高质量)   参考   

export 用法(联系模块编程)

俗话说:难的不会,会的不难,早个10年(基于2020年),那时在开发网站,写JS代码,也就这么用了,突然发现JS里面有所谓的  import/export , require/exports 一脸茫然.

说明自己在JS编程领域有知识缺陷,想知道原因,于是踏上了满满自学路.

涉及搜关键词:前端工程化; JavaScript模块化编程. 至2021年,在前端JS项目按modules分类可以分为:(1). JavaScript modules (import/export) (2) CommonJS (require/exports) 

相关参考:前端项目下安装ESlint模块时看到了这样的信息,感觉可以事成相识,知识果然是这么串联的,并不孤立,关键在于自己要系统的学习一个知识体系.

2).What type of modules does your project use? ...
JavaScript modules (import/export)
CommonJS (require/exports)
None of these

属于JS 模块化编程知识范畴(JS模板化编程3种规范,在Webpack学习时也有涉及), 在vue开发中是常用语法

export default {
  getSearchPositionHistory(states) {
    return states.searchPositionHistory;
  }
}

 src\store\mutations_types.js  定义导出的常量

export const SEARCHPOSITIONHISTORY = 'SEARCHPOSITIONHISTORY';

 src\store\function.js  封装localStoreage方法,这里以变量local暴露给调用端

const LocalEvent = function (item) {
  this.get = function () {
      //console.log("function.js")
      return localStorage.getItem(item) ? JSON.parse(localStorage.getItem(item)) : '';
  };
  this.set = function (obj) {
      localStorage.setItem(item, JSON.stringify(obj));
  };
  this.clear = function () {
      localStorage.removeItem(item);
  };
};

export const local = new LocalEvent('vuex_demo');

 src\store\mutations.js Vuex的 mutations模块

import * as type from './mutations_types.js'; //常量模块,如定义了type.SEARCHPOSITIONHISTORY
import * as func from './function';  //封装的localStorage方法
export default {
  //使用箭头函数实现set功能,传入state和对应的value
  //语法学习:1).ES可以根据 const 所定义的常量调用对应的方法,至于这样的原因,待研究
  [type.SEARCHPOSITIONHISTORY](states, searchPositionHistory) {
    states.searchPositionHistory = searchPositionHistory;
    func.local.set(states); //语法学习:参考function.js,  其内部还是调用localStorage,func见第2行, local见function.js
  }
}

 箭头函数

参考

//没有箭头
render: function (createElement) {
    return createElement(App);
}

//省略冒号和关键词 function
render (createElement) {
    return createElement(App);
}

//继续缩写
render (h) {
    return h(App);
}

//用箭头函数继续缩写
h => h(App);

箭头函数, 箭头函数的左边相当于匿名函数,h作为匿名函数的形式参数,连小括号都省略了,在这里右边是形式参数的执行逻辑,并默认return

关键词: async;  await

参考

API 方法收集

从数组中删除一个元素, findIndex估计是ES5的API

handleRemove(file, fileList) {
  fileList.splice(
    fileList.findIndex(item => item.uid === file.uid),
    1
  );
},