webpack構(gòu)建的項(xiàng)目,直接廢棄var,直接使用let代替var

for循環(huán)中使用let而不是var

變量聲明之后就不會(huì)改變,請(qǐng)使用const

概念: 先解構(gòu)再賦值,先從一堆數(shù)據(jù)中找出自己需要的數(shù)據(jù),然后將找到的數(shù)據(jù)賦值給事先定義好的變量

// 對(duì)象的解構(gòu)賦值
// 使用場(chǎng)景
// 1,等號(hào)右邊是大json,等號(hào)左邊是變量,這樣可快速獲取大json中數(shù)據(jù),后續(xù)可進(jìn)行push到數(shù)組等一系列操作
// 2,react在render中,直接對(duì)組件props或state進(jìn)行解構(gòu)賦值之后,在渲染頁(yè)面直接使用該數(shù)據(jù)
const response = { foo: "aaa", bar: "bbb", result: "hello world"}  // 這個(gè)數(shù)據(jù)一般是ajax請(qǐng)求得到
let { foo, bar } = response // 拿請(qǐng)求數(shù)據(jù)中對(duì)本業(yè)務(wù)有用的數(shù)據(jù)
let result = []
result.push({ foo, bar })
console.log(foo) // aaa
console.log(bar) // bbb
console.log(result) // [ { foo: "aaa", bar: "bbb" } ]
// 對(duì)象接口中key的命名是下劃線方式,而前端使用駱駝方式,可以在解構(gòu)的時(shí)候,直接賦予它別名,demo如下
const { cc_dd: ccDd } = response
console.log("cc_dd解構(gòu)賦值別名使用: ", ccDd)

// 數(shù)組的解構(gòu)賦值
/*解構(gòu): 從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,如果解構(gòu)不成功,直接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]

// 以下這種是不完全解構(gòu)
let [f, g] = [1, 2, 3]
console.log(f) // 1
console.log(g) // 2
// 解構(gòu)的時(shí)候,可以設(shè)置默認(rèn)值,這樣就不會(huì)undefined
let [h, i = 1212] = [1]
console.log(h)
console.log(i)

{
  /*
  * 擴(kuò)展運(yùn)算符: 數(shù)組前面加..., 可直接把數(shù)組中內(nèi)容提取出來(lái)
  * */
  console.log("-------------擴(kuò)展運(yùn)算符-------------")
  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("返回值是數(shù)組的長(zhǎng)度: " + array1.push(...array2))
  console.log(array1)
  console.log("ES6寫(xiě)法,求數(shù)據(jù)中最大值: " + Math.max(...[1,2,3])) // 3

  const copyArray = [...array2]
  console.log(copyArray instanceof Array)
  console.log(copyArray)

  console.log([..."hello world"]) // 將字符串轉(zhuǎn)換成數(shù)組
}

{
  /*
  * Array.from(): 將類似數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組,比如 document.querySelectorAll("p")獲取到所有p標(biāo)簽集合就是類似數(shù)組對(duì)象
  *
  * */
  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(): 將一組值轉(zhuǎn)換成數(shù)組,它直接替代了 new Array()和Array()
  * */
  console.log("------------Array.of()-------------")
  console.log(Array.of("北京", "上海", "廣州"))
}

{
  /*
* find():參數(shù)傳遞一個(gè)function,查找第一個(gè)符合條件的數(shù)組元素,返回該元素的值
* findIndex():參數(shù)傳遞一個(gè)function,查找第一個(gè)符合條件的數(shù)組元素,返回該元素在數(shù)組中位置
* */
  console.log("------------find()和findIndex()------------")
  const array = [1, 22, 33, 44, 55, 56]
  const result = array.find((item, index, array) => { /*(當(dāng)前值,當(dāng)前位置,原數(shù)組)*/
    return item > 23
  })
  console.log(result)

  const index = array.findIndex((item, index) => {
    if (item > 23) {
      return index
    }
  })
  console.log(index)
}

{
  /*
  * 數(shù)組中是否包含某個(gè)元素
  * Array.includes(參數(shù)1, 參數(shù)2)  參數(shù)1: 查詢的參數(shù)  參數(shù)2: 查詢位置,如果是負(fù)數(shù),表示倒數(shù)的位置
  * */
  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))
}

{
  /*
  * 數(shù)組實(shí)例的 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);
  }
}

export: 導(dǎo)出接口,使用{}將變量包裹起來(lái),對(duì)外可以讓其他js使用,import { 名字一致 } from "js路徑"

export default: 導(dǎo)出接口,對(duì)外可以讓其他js使用,import 名字隨意起 from "js路徑"

import: 導(dǎo)入,需要使用到其他js文件

/*
寫(xiě)法1: 先多帶帶定義,然后一次性export,導(dǎo)出需要加上{}
let name = "wujiedong"
const getName = function () {
    console.log("getName")
}
export { name, getName }*/

/*
* 寫(xiě)法2: 每寫(xiě)一個(gè)變量就進(jìn)行一次導(dǎo)出
* */
export const name = "wujiedong"
export const getName = () => {
  console.log("getName")
}
/*
* 上述2種方式的導(dǎo)出,在import導(dǎo)入的時(shí)候,如果要使用,需要指定導(dǎo)入名字,比如 export中name,那在import的時(shí)候需指定name一致,而且必須加上{}
* */


/*export default
* 導(dǎo)出的時(shí)候不指定名字,這樣如果import需要使用了,直接 import xxx from "js路徑" , xxx可隨意定義名字,不需要加{}
* */
export default function foo() {
  console.log("foo");
}
export default {
  name: "中國(guó)",
  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
  }*/
}

/* 這種方式的導(dǎo)出是錯(cuò)誤,它導(dǎo)出的不是接口,是一個(gè)數(shù)值
var i = 1
export i
// 報(bào)錯(cuò)
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};
*/

最佳實(shí)踐,對(duì)整個(gè)項(xiàng)目接口地址進(jìn)行多帶帶js文件管理

// config.js多帶帶文件維護(hù)
// import { constants } from "config.js路徑"即可使用接口地址
// 多帶帶將serverAddress服務(wù)器地址抽取出來(lái),生產(chǎn)和開(kāi)發(fā)一般都是2個(gè)不同服務(wù)器
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",
}

{
  console.log("-----------------------------Object.is()-----------------------------")
  /*Object.is() 同值相等,如果比較的是對(duì)象,那就是false*/
  const a1 = {
    name: "zhangsan",
    hobbies: ["看書(shū)", "學(xué)習(xí)"]
  }
  const a2 = {
    name: "zhangsan",
    hobbies: ["看書(shū)", "學(xué)習(xí)"]
  }
  console.log(Object.is(a1, a2)) // false

  const a3 = "hello world"
  const a4 = "hello world"
  console.log(Object.is(a3, a4)) // true

  const a5 = {
    name: "zhangsan"
  }
  const a6 = {
    name: "zhangsan"
  }
  console.log(Object.is(a5, a6))  // false
}

{
  console.log("-----------------------------Object.assign()-------------------------------")
  /*Object.assign() 對(duì)象復(fù)制,將源對(duì)象可枚舉的全部復(fù)制到目標(biāo)對(duì)象,不會(huì)改變?cè)磳?duì)象的值
  * 參數(shù)1: 目標(biāo)對(duì)象, 參數(shù)2到N,源對(duì)象,  把從參數(shù)2到N -> 參數(shù)1目標(biāo)對(duì)象
  * 目標(biāo)對(duì)象和源對(duì)象有相同的key,后面key中value會(huì)覆蓋前面key中value
  * 是淺拷貝,如果value是對(duì)象,那拷貝的是引用,不是值
  * */
  const a1 = {
    name: "zhangsan",
  }
  const a2 = {
    hobbies: ["看書(shū)", "學(xué)習(xí)"],
    json: {
      age: 12
    }
  }
  const a3 = {
    birthday: "2019-11-11"
  }
  const target = {}
  Object.assign(target, a1, a2, a3)
  console.log("target: ", target)
  console.log("a1: ", a1)
  console.log("a2: ", a2)
  a2.hobbies.push("睡覺(jué)")
  a2.json.age = 22
  console.log("target中hobbies的值: ", target.hobbies)
  console.log("a2中hobbies的值: ", a2.hobbies)
  console.log("target中hobbies數(shù)據(jù)類型: ", typeof target.hobbies)
  console.log("a2中hobbies數(shù)據(jù)類型: ", typeof a2.hobbies)
  console.log("target中json: ", target.json)
  console.log("a2中json: ", a2.json)

  a1.name = "lisi"
  console.log("a1中name的類型: ",typeof a1.name)
  console.log("target中name的類型: ",typeof target.name)
  console.log("a1中name的值: ", a1.name) // lisi
  console.log("target中name的值: ", target.name) // zhangsan

  // 最佳實(shí)踐
  /*
  * 需求: 將數(shù)組[{id: 0, date: "2012-12-12"}, {id: 1, date: "2012-12-13"}, {id: 2, date: "2012-12-14"}]
  *       轉(zhuǎn)成對(duì)象 {1: "2012-12-12", 2: "2012-12-13", 3: "2012-12-14"}
  * 在ant的Slider組件中,做一個(gè)關(guān)于日期數(shù)據(jù)的組件,就可以使用該最佳實(shí)踐
  * */
  const dates = [
                {id: 0, date: "2012-12-12"},
                {id: 1, date: "2012-12-13"},
                {id: 2, date: "2012-12-14"}
                ]
  let dateObj = {}
  for (let item of  dates) {
    const { id, date } = item
    const temp = {[id]: date}  // id是變量,在json中key如果是變量,必須加上[]
    Object.assign(dateObj, temp)
  }
  console.log("dateObj", dateObj) //{ "0": "2012-12-12", "1": "2012-12-13", "2": "2012-12-14" }
}

{
  let a = {
    name: "wujiedon"
  }
  const b = a
  a.name = "zhangsan"

  console.log(b.name)

  let c = ["zhangsan", "lisi"]
  const d = c
  c.push("wangwu")
  console.log(d)
}

{
  console.log("---Object.entries()---")
  /*Object.entries(): 將一個(gè)對(duì)象變成數(shù)組
  * 需求: 將 {a: 1, b: 2, c: 3} => {[{name: "a", value: 1}, {name: "b", value: 2}, {name: "c", value: 3}]}
  * 服務(wù)器接口中如果返回的json,其中key是一個(gè)變量,就可以通過(guò)該需求,轉(zhuǎn)換成正常的json數(shù)據(jù)
  * */
  const obj = {a: 1, b: 2, c: 3}
  console.log(Object.entries(obj)) // [ [ "a", 1 ], [ "b", 2 ], [ "c", 3 ] ]
  const result = Object.entries(obj).map(item => {
    return {name: item[0], value: item[1]}
  })
  /* 輸出:
  * [ { name: "a", value: 1 },
    { name: "b", value: 2 },
    { name: "c", value: 3 } ]
  * */
  console.log(result)
}

/*概念: 使用 ... 取出參數(shù)對(duì)象中所有可遍歷的屬性,拷貝到當(dāng)前對(duì)象中
* 在React框架的開(kāi)發(fā)中,在處理state數(shù)據(jù)的時(shí)候,會(huì)經(jīng)常使用該技巧
* */
{
  const state = {
    name: "zhangsan",
    age: 30,
    city: "wuxi"
  }
  // 使用擴(kuò)展運(yùn)算符完成對(duì)象屬性拷貝,在react中,子組件接收父組件state,可直接拷貝,然后再接著寫(xiě)自己的屬性
  const copyState = {
    ...state, // 從父組件拷貝過(guò)來(lái)的組件
    bithday: "2011-11-11",  // 自己的屬性
    country: "china"
  }

  console.log(state)
  console.log(copyState)

  // 擴(kuò)展運(yùn)算符后面可跟表達(dá)式,表達(dá)式之后,還能再寫(xiě)屬性
  const a = 1
  const info = {
    ...(a > 1 ? {b: 111} : {b: 222}),
    c: 333
  }
  console.log(info)
}

{
  /*擴(kuò)展運(yùn)算符,實(shí)現(xiàn)舊json對(duì)新json的復(fù)制*/
  const food = {
    id: 1,
    name: "雪花啤酒",
    amount: 12,
    price: 3.2,
    type: "飲料"
  }

  const newFood = {
    ...food,
    amount: 0
  }
  console.log(newFood)
}

{
  /*屬性和function的簡(jiǎn)潔寫(xiě)法*/
  let birthday = "2012-11-11"
  /*ES6寫(xiě)法*/
  const person = {
    name: "zhangsan",
    birthday,
    sayInfo() {
      console.log("person info:" , this.name, this.birthday)
    }
  }
  /*等價(jià)*/
  const oldPerson = {
    name: "zhangsan",
    birthday: birthday,
    sayInfo: function () {
      console.log("person info:" , this.name, this.birthday)
    }
  }

  person.sayInfo()
  oldPerson.sayInfo()
  console.log(oldPerson.sayInfo.name) // 返回函數(shù)名字

  for (let key in oldPerson) {
    console.log(key)
  }
}

{
  /*當(dāng)作函數(shù)返回值*/
  function getPoint(x, y) {
    return {x, y}
  }

  console.log(getPoint(1, 2)) /*{ x: 1, y: 2 }*/
}

// js
/*let name = "wujiedong"
let age = 29
let html = "
"
html += " 
" + name + "
"
html += " 
" + age + "
"
html += " 
"
console.log(html)*/
// ES6
const name = "wujiedong"
const age = 29
const html = `

                                
${name}
                                
${age}
                            
`
console.log(html)

/*最佳實(shí)踐1: 根據(jù)傳入?yún)?shù)組裝url接口地址,這樣可以少寫(xiě)很多+號(hào)*/
function getApi(name, age) {
  return `http://127.0.0.1:8888?name=${name}&age=${age}`
}

const api = getApi("wujiedong", 29)
console.log("api:", api)

/*最佳實(shí)踐2: 在React開(kāi)發(fā)中,難免會(huì)在js文件中寫(xiě)一些css代碼,這種情景,就可以使用多行字符串
* 以下是一段偽代碼
* */
const myCustomColour = "red" // 抽取頁(yè)面經(jīng)常需求變動(dòng)的數(shù)據(jù)變量
const markStyle = `
                background-color:${myCustomColour};
                display:block;
                border-radius:5px;
                width:6px;
                height:6px;`;
console.log("markStyle", markStyle)

{
  const city = "wuxi"
  console.log(city.indexOf("w")) // 0  ES5, 字符串存在,返回0
  console.log(city.indexOf("wx")) // -1 字符串不存在,返回 -1
  console.log(city.includes("wux")) // true  ES6, 返回boolean值 表示是否找到了參數(shù)字符串。
  console.log(city.startsWith("w")) // true  ES6, 返回boolean值 表示參數(shù)字符串是否在原字符串的頭部。
  console.log(city.endsWith("xi")) // true   ES6, 返回boolean值 表示參數(shù)字符串是否在原字符串的尾部。
  console.log(city.repeat(2)) // wuxiwuxi 返回一個(gè)新字符串，表示將原字符串重復(fù)n次。
}