let和const
webpack構建的項目,直接廢棄var,直接使用let代替var
for循環中使用let而不是var
變量聲明之后就不會改變,請使用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" } ] // 對象接口中key的命名是下劃線方式,而前端使用駱駝方式,可以在解構的時候,直接賦予它別名,demo如下 const { cc_dd: ccDd } = response console.log("cc_dd解構賦值別名使用: ", ccDd) // 數組的解構賦值 /*解構: 從數組和對象中提取值,對變量進行賦值,如果解構不成功,直接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語法
export: 導出接口,使用{}將變量包裹起來,對外可以讓其他js使用,import { 名字一致 } from "js路徑"
export default: 導出接口,對外可以讓其他js使用,import 名字隨意起 from "js路徑"
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", }對象擴展 對象新增方法
{ console.log("-----------------------------Object.is()-----------------------------") /*Object.is() 同值相等,如果比較的是對象,那就是false*/ const a1 = { name: "zhangsan", hobbies: ["看書", "學習"] } const a2 = { name: "zhangsan", hobbies: ["看書", "學習"] } 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() 對象復制,將源對象可枚舉的全部復制到目標對象,不會改變源對象的值 * 參數1: 目標對象, 參數2到N,源對象, 把從參數2到N -> 參數1目標對象 * 目標對象和源對象有相同的key,后面key中value會覆蓋前面key中value * 是淺拷貝,如果value是對象,那拷貝的是引用,不是值 * */ const a1 = { name: "zhangsan", } const a2 = { hobbies: ["看書", "學習"], 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("睡覺") a2.json.age = 22 console.log("target中hobbies的值: ", target.hobbies) console.log("a2中hobbies的值: ", a2.hobbies) console.log("target中hobbies數據類型: ", typeof target.hobbies) console.log("a2中hobbies數據類型: ", 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 // 最佳實踐 /* * 需求: 將數組[{id: 0, date: "2012-12-12"}, {id: 1, date: "2012-12-13"}, {id: 2, date: "2012-12-14"}] * 轉成對象 {1: "2012-12-12", 2: "2012-12-13", 3: "2012-12-14"} * 在ant的Slider組件中,做一個關于日期數據的組件,就可以使用該最佳實踐 * */ 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(): 將一個對象變成數組 * 需求: 將 {a: 1, b: 2, c: 3} => {[{name: "a", value: 1}, {name: "b", value: 2}, {name: "c", value: 3}]} * 服務器接口中如果返回的json,其中key是一個變量,就可以通過該需求,轉換成正常的json數據 * */ 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) }對象擴展運算符
/*概念: 使用 ... 取出參數對象中所有可遍歷的屬性,拷貝到當前對象中 * 在React框架的開發中,在處理state數據的時候,會經常使用該技巧 * */ { const state = { name: "zhangsan", age: 30, city: "wuxi" } // 使用擴展運算符完成對象屬性拷貝,在react中,子組件接收父組件state,可直接拷貝,然后再接著寫自己的屬性 const copyState = { ...state, // 從父組件拷貝過來的組件 bithday: "2011-11-11", // 自己的屬性 country: "china" } console.log(state) console.log(copyState) // 擴展運算符后面可跟表達式,表達式之后,還能再寫屬性 const a = 1 const info = { ...(a > 1 ? {b: 111} : {b: 222}), c: 333 } console.log(info) } { /*擴展運算符,實現舊json對新json的復制*/ const food = { id: 1, name: "雪花啤酒", amount: 12, price: 3.2, type: "飲料" } const newFood = { ...food, amount: 0 } console.log(newFood) }對象屬性簡潔寫法
{ /*屬性和function的簡潔寫法*/ let birthday = "2012-11-11" /*ES6寫法*/ const person = { name: "zhangsan", birthday, sayInfo() { console.log("person info:" , this.name, this.birthday) } } /*等價*/ 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) // 返回函數名字 for (let key in oldPerson) { console.log(key) } } { /*當作函數返回值*/ 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 = "ES6新增方法" html += "" console.log(html)*/ // ES6 const name = "wujiedong" const age = 29 const html = `" + name + "
" html += "" + age + "
" html += "` console.log(html) /*最佳實踐1: 根據傳入參數組裝url接口地址,這樣可以少寫很多+號*/ function getApi(name, age) { return `http://127.0.0.1:8888?name=${name}&age=${age}` } const api = getApi("wujiedong", 29) console.log("api:", api) /*最佳實踐2: 在React開發中,難免會在js文件中寫一些css代碼,這種情景,就可以使用多行字符串 * 以下是一段偽代碼 * */ const myCustomColour = "red" // 抽取頁面經常需求變動的數據變量 const markStyle = ` background-color:${myCustomColour}; display:block; border-radius:5px; width:6px; height:6px;`; console.log("markStyle", markStyle)${name}
${age}
{ 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值 表示是否找到了參數字符串。 console.log(city.startsWith("w")) // true ES6, 返回boolean值 表示參數字符串是否在原字符串的頭部。 console.log(city.endsWith("xi")) // true ES6, 返回boolean值 表示參數字符串是否在原字符串的尾部。 console.log(city.repeat(2)) // wuxiwuxi 返回一個新字符串,表示將原字符串重復n次。 }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104089.html
摘要:不用我贅述,前端開發人員一定耳熟能詳。命令會用這個配置,生成的結果都會給文件名加,文件也會壓縮。可用工具介紹啟動調試服務器,使用作為配置,不直接生成物理文件,直接內存級別響應調試服務器資源請求。 AngularJS不用我贅述,前端開發人員一定耳熟能詳。有人稱之為MVWhatever框架,意思是使用AngularJS,你可以參考任意范式進行應用開發,無論是MVC、還是MVVVM都信手拈來...
摘要:本文首發于的技術博客實用至上,非經作者同意,請勿轉載。只是最近學習生態,用起來轉換之余,也不免碰到諸多用上的教程案例,因此便稍作學習。在當前的瀏覽器市場下,想在生產環境用上,是必不可少的。 本文首發于Array_Huang的技術博客——實用至上,非經作者同意,請勿轉載。原文地址:https://segmentfault.com/a/1190000006992218如果您對本系列文章感興...
摘要:每一個模塊的源代碼都會被組織在一個立即執行的函數里。接下來看的生成代碼可以看到,的源代碼中關于引入的模塊的部分做了修改,因為無論是,或是風格的,都無法被解釋器直接執行,它需要依賴模塊管理系統,把這些抽象的關鍵詞具體化。 現在前端用Webpack打包JS和其它文件已經是主流了,加上Node的流行,使得前端的工程方式和后端越來越像。所有的東西都模塊化,最后統一編譯。Webpack因為版本的...
摘要:開發歷程項目地址這是一個什么玩意兒上有太多太多的牛人,這個東西可以幫助你通過給定的一個的用戶然后通過他關注的人找出他關注的人里的被關注數最高的幾個然后不斷的循環從而通過關系鏈找到上最受歡迎的大神這個東西還只是一個小東西如果你有興趣可 find-github-star 開發歷程: 項目地址 find-github-star 0x01. 這是一個什么玩意兒? github上有太多太多的牛人...
閱讀 2919·2023-04-25 19:08
閱讀 1416·2021-11-16 11:45
閱讀 1964·2021-10-13 09:40
閱讀 4128·2021-09-30 09:47
閱讀 2415·2019-08-30 15:44
閱讀 2261·2019-08-30 13:03
閱讀 1387·2019-08-30 12:56
閱讀 1890·2019-08-26 14:04