let和const

  1. webpack构建的项目,直接废弃var,直接使用let代替var
  2. for循环中使用let而不是var
  3. 变量声明之后就不会改变,请使用const

解构赋值

概念: 先解构再赋值,先从一堆数据中找出自己需要的数据,然后将找到的数据赋值给事先定义好的变量

// 对象的解构赋值// 使用场景// 1,等号右边是大json,等号左边是变量,这样可快速获取大json中数据,后续可进行push到数组等一系列操作// 2,react在render中,直接对组件props或state进行解构赋值之后,在渲染页面直接使用该数据const response = { foo: 'aaa', bar: 'bbb', result: 'hello world'}  // 这个数据一般是ajax请求得到let { foo, bar } = response // 拿请求数据中对本业务有用的数据let result = []result.push({ foo, bar })console.log(foo) // aaaconsole.log(bar) // bbbconsole.log(result) // [ { foo: 'aaa', bar: 'bbb' } ]// 数组的解构赋值/*解构: 从数组和对象中提取值,对变量进行赋值,如果解构不成功,直接undefined*/let [a, b, c] = [1, 11, 12]console.log(a) // 1console.log(b) // 11console.log(c) // 12let [d, e] = [1]console.log(e) // undefinedlet [head, ...tail] = [1, 2, 3, 4]console.log(head) // 1console.log(tail) // [2, 3, 4]// 以下这种是不完全解构let [f, g] = [1, 2, 3]console.log(f) // 1console.log(g) // 2// 解构的时候,可以设置默认值,这样就不会undefinedlet [h, i = 1212] = [1]console.log(h)console.log(i)

数组扩展

{  /*  * 扩展运算符: 数组前面加..., 可直接把数组中内容提取出来  * */  console.log('-------------扩展运算符-------------')  const array1 = [1, 2, 3]  const array2 = [4, 5, 6]  console.log(...array1)  console.log(1, ...[2,3,4], 5)  function add(a, b) {    return a + b  }  console.log(add(...array1))  console.log('返回值是数组的长度: ' + array1.push(...array2))  console.log(array1)  console.log('ES6写法,求数据中最大值: ' + Math.max(...[1,2,3])) // 3  const copyArray = [...array2]  console.log(copyArray instanceof Array)  console.log(copyArray)  console.log([...'hello world']) // 将字符串转换成数组}{  /*  * Array.from(): 将类似数组对象转换成数组,比如 document.querySelectorAll('p')获取到所有p标签集合就是类似数组对象  *  * */  console.log('------------Array.from()-------------')  const likeArray = {    '0': 'a',    '1': 'b',    '2': 'c',    'length': 3,    'name': 'wujiedong'  }  const array = Array.from(likeArray)  console.log(array)  /*const p = document.querySelectorAll('p')  Array.from(p).filter(item => {    return item.textContent.length > 100  })*/}{  /*  * Array.of(): 将一组值转换成数组,它直接替代了 new Array()和Array()  * */  console.log('------------Array.of()-------------')  console.log(Array.of('北京', '上海', '广州'))}{  /** find():参数传递一个function,查找第一个符合条件的数组元素,返回该元素的值* findIndex():参数传递一个function,查找第一个符合条件的数组元素,返回该元素在数组中位置* */  console.log('------------find()和findIndex()------------')  const array = [1, 22, 33, 44, 55, 56]  const result = array.find((item, index, array) => { /*(当前值,当前位置,原数组)*/    return item > 23  })  console.log(result)  const index = array.findIndex((item, index) => {    if (item > 23) {      return index    }  })  console.log(index)}{  /*  * 数组中是否包含某个元素  * Array.includes(参数1, 参数2)  参数1: 查询的参数  参数2: 查询位置,如果是负数,表示倒数的位置  * */  console.log('------------includes()------------')  const array = [1, 22, 33, 44, 55, 56]  console.log(array.includes(1))  console.log(array.includes(1, 0))  console.log(array.includes(1, 2))}{  /*  * 数组实例的 entries()，keys() 和 values()  * entries: key-value的遍历  * keys: key的遍历  * values: value的遍历  * */  console.log('------------entries()，keys() 和 values()------------')  for (let [index, elem] of ['a', 'b'].entries()) {    console.log(index, elem);  }}

Module语法

  1. export: 导出接口,使用{}将变量包裹起来,对外可以让其他js使用,import { 名字一致 } from 'js路径'
  2. export default: 导出接口,对外可以让其他js使用,import 名字随意起 from 'js路径'
  3. import: 导入,需要使用到其他js文件
/*写法1: 先单独定义,然后一次性export,导出需要加上{}let name = 'wujiedong'const getName = function () {    console.log('getName')}export { name, getName }*//** 写法2: 每写一个变量就进行一次导出* */export const name = 'wujiedong'export const getName = () => {  console.log('getName')}/** 上述2种方式的导出,在import导入的时候,如果要使用,需要指定导入名字,比如 export中name,那在import的时候需指定name一致,而且必须加上{}* *//*export default* 导出的时候不指定名字,这样如果import需要使用了,直接 import xxx from 'js路径' , xxx可随意定义名字,不需要加{}* */export default function foo() {  console.log('foo');}export default {  name: '中国',  setName: function (name) {    this.name = name  },  getName: function () {    return this.name  },  doubleName: function () {    console.log(this)    const result = () => this.name + '====' + this.name    return result()  // 这里可以正常输出  }  /*sayHello: () => {    console.log(this)  undefined  }*/}/* 这种方式的导出是错误,它导出的不是接口,是一个数值var i = 1export i// 报错function f() {}export f;// 正确export function f() {};// 正确function f() {}export {f};*/

最佳实践,对整个项目接口地址进行单独js文件管理

// config.js单独文件维护// import { constants } from 'config.js路径'即可使用接口地址// 单独将serverAddress服务器地址抽取出来,生产和开发一般都是2个不同服务器const serverAddress = 'http://10.12.3.80:8080'  // jinfeng// const serverAddress = 'http://20.78.14.88:8888'  // qinghaiexport const constants = {  searchTimeDateApi: serverAddress + '/qh_plat/met_plot/wea_fore/timebar',  picdzApi: serverAddress + '/qh_plat/met_plot/wea_fore/jsondata',  searchSelectCjApi: serverAddress + '/qh_plat/met_plot/wea_fore/config?source=qh',  weatherApi: serverAddress + '/qh_plat/met_stations/wea_std/stations',  weatherDetailApi: serverAddress + '/qh_plat/met_stations/wea_std/forecast',}