摘要:聲明三大關(guān)鍵字聲明變量語法語法聲明常量語法聲明變量特性支持函數(shù)作用域支持預(yù)解析所謂變量提升支持重復(fù)聲明同域同名變量函數(shù)作用域局部作用域預(yù)解析重復(fù)聲明聲明變量推薦特性支持塊作用域不支持預(yù)解析不支持重復(fù)聲明同域同名變量塊作用域局部作用域不支持預(yù)
聲明
三大關(guān)鍵字
聲明變量: var (ES5語法) let (ES6語法) 聲明常量: const (ES6語法)
var 聲明變量
特性
1、支持 函數(shù)作用域
2、支持 JS預(yù)解析 (所謂變量提升)
3、支持 重復(fù)聲明 (同域同名變量)
1、函數(shù)作用域(局部作用域) function show(){ var a = "34"; } console.log(a); //underfind 2、JS預(yù)解析 console.log(name); //underfind var name = "1234"; 3、重復(fù)聲明 var a = "123"; var a = "4565";
let 聲明變量 (推薦)
特性
1、支持 塊作用域
2、不支持 JS預(yù)解析
3、不支持 重復(fù)聲明 (同域同名變量)
1、塊作用域(局部作用域) if(true){ var a = "34"; } console.log(a); //underfind 2、不支持JS預(yù)解析 必須聲明后才能使用,否則報錯
const 聲明常量
從ES6開始引入常量概念
特性
1、let所有特性
2、聲明時必須賦值,否則報錯
3、定義常量后,再也不能更改值
1、聲明時必須賦值,否則報錯 const a; //報錯 const a = 11; //正確 2、定義常量后,基本類型是不能改了,但如果是對象或數(shù)組,是可以改對象內(nèi)或數(shù)組內(nèi)的值 const a = ["22","bb"]; a[0] = "你好"; //["你好","bb"];
只聲明,不賦值
var a; //undefined let b; //undefined
JS預(yù)解析
解構(gòu)賦值應(yīng)用場景
對象 與 數(shù)組
ES5 做法
var obj = { name:"bbb", age:12 }; var name = obj.name; var age = obj.age; var arr = [123,"wtao"]; var a = arr[0]; var b = arr[1];
ES6 做法
let obj = { name:"bbb", age:12 }; let {name,age} = obj; console.log(name); console.log(age); let arr = [123,"wtaddo"]; let [name,age] = arr; console.log(name); console.log(age);函數(shù)
默認值
剩余值
箭頭函數(shù)
模塊化注意事項
1、在一個項目里,多個不同模塊導(dǎo)入(依賴)某個相同模塊時,該模塊只會加載并執(zhí)行一次, 2、在同一個模塊中,多次導(dǎo)入相同模塊,只會加載并執(zhí)行一次 3、在模塊中,無論import(導(dǎo)入語句)寫在哪個位置,執(zhí)行時都會提前 4、模塊有模塊作用域
導(dǎo)入語法
import defaultExport from "module-name"; import * as name from "module-name"; import { export } from "module-name"; import { export as alias } from "module-name"; import { export1 , export2 } from "module-name"; import { foo , bar } from "module-name/path/to/specific/un-exported/file"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultExport, { export [ , [...] ] } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name";
導(dǎo)出語法
export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, nameN }; export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function FunctionName(){...} export class ClassName {...} export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; export { default } from …;
異步加載延遲執(zhí)行
defer 在所有html DOM結(jié)構(gòu)渲染完成和其他腳步執(zhí)行完成再執(zhí)行js代碼
html導(dǎo)入js模塊
1、導(dǎo)入普通js文件 type="application/javascript" 默認省略 默認同步加載 2、導(dǎo)入模塊js文件 type="module" 默認異步加載(defer)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/100939.html
摘要:前端培訓(xùn)初級階段語法變量值類型運算符語句前端培訓(xùn)初級階段內(nèi)置對象函數(shù)基礎(chǔ)內(nèi)容知識我們會用到。模塊定義加載模塊繼承中的繼承依賴于原型鏈繼承。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水平,打牢基礎(chǔ)知識的中心思想,我們開課啦(每周四)。 該文為前...
摘要:面向?qū)ο罄镒畲蟮奶攸c應(yīng)該就屬繼承了。在第二篇文章里說過原型實例跟構(gòu)造函數(shù)之間的繼承,并且還講了一道推算題。 通過上一篇文章想必各位老鐵已經(jīng)熟悉了class了,這篇文章接著介紹繼承。面向?qū)ο罄镒畲蟮奶攸c應(yīng)該就屬繼承了。一個項目可能需要不斷的迭代、完善、升級。那每一次的更新你是要重新寫呢,還是在原有的基礎(chǔ)上改吧改吧呢?當然,不是缺心眼的人肯定都會在原來的基礎(chǔ)上改吧改吧,那這個改吧改吧就需要...
摘要:參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解 前言 前端的模塊化之路經(jīng)歷了漫長的過程,想詳細了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版),這里根據(jù)幾位大佬們寫的文章,將模塊化規(guī)范部分做了匯總和整理,希望讀完的小伙伴能有些收獲,也希望覺得有用的小伙伴可以點個贊,筆芯。 什么是模塊 將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件)...
摘要:前端規(guī)范在實際開發(fā)中,由于團隊成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。是定義了一種的命名規(guī)范,每個名稱及其組成部分都是存在一定的含義。 前端規(guī)范 在實際開發(fā)中,由于團隊成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...
摘要:前端規(guī)范在實際開發(fā)中,由于團隊成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。是定義了一種的命名規(guī)范,每個名稱及其組成部分都是存在一定的含義。 前端規(guī)范 在實際開發(fā)中,由于團隊成員編碼習(xí)慣不一,技術(shù)層次不同,開發(fā)前定制并遵循一種代碼規(guī)范能提高代碼質(zhì)量,增加開發(fā)效率。 Javascript Javascript規(guī)范直接參考airbnb: ES6 ...
閱讀 1845·2021-11-23 09:51
閱讀 1303·2021-11-18 10:02
閱讀 974·2021-10-25 09:44
閱讀 2114·2019-08-26 18:36
閱讀 1634·2019-08-26 12:17
閱讀 1158·2019-08-26 11:59
閱讀 2755·2019-08-23 15:56
閱讀 3367·2019-08-23 15:05