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) // aaa
console.log(bar) // bbb
console.log(result) // [{ foo: 'aaa', bar: 'bbb'} ]

// 数组的解构赋值
/* 解构: 从数组和对象中提取值, 对变量进行赋值, 如果解构不成功, 直接 undefined*/
let [a, b, c] = [1, 11, 12]
console.log(a) // 1
console.log(b) // 11
console.log(c) // 12

let [d, e] = [1]
console.log(e) // undefined

let [head, ...tail] = [1, 2, 3, 4]
console.log(head) // 1
console.log(tail) // [2, 3, 4]

// 以下这种是不完全解构
let [f, g] = [1, 2, 3]
console.log(f) // 1
console.log(g) // 2
// 解构的时候, 可以设置默认值, 这样就不会 undefined
let [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 = 1
export 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'  // qinghai

export 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',
}