變量
- var 聲明變量
沒有塊級作用域
可以重復(fù)聲明
不能限制 - let 聲明變量
支持塊級作用域
禁止重復(fù)聲明 - const 聲明常量
支持塊級作用域
禁止重復(fù)聲明
控制修改
作用域
- 傳統(tǒng)
沒有塊級作用域
函數(shù)級作用域 - ES6
有塊級作用域的概念坛芽，針對let和const
語法塊包括：{}、if(){}阱穗、for(){}
解構(gòu)賦值
let {a,b,c}={a: 12, b: 55, c: 99};
let [a,b,c]=[12,5,8];
- 左右兩邊一樣
- 右邊是一種數(shù)據(jù)格式
函數(shù)
- 箭頭函數(shù)
傳統(tǒng)：function (參數(shù)){}
ES6：(參數(shù))=>{}
如果镣奋，有且僅有1個參數(shù)岖常，()也可以省
如果歧寺，有且僅有1條return語句翅雏，{}可以省
箭頭修復(fù)this指向問題纵散，在聲明中就已經(jīng)定義好 - 參數(shù)展開
剩余參數(shù)——必須放在函數(shù)形參的最后一個位置
展開數(shù)組——就跟把數(shù)組的東西寫在那兒一樣function show(a, b, ...arr) { console.log(a, b, arr); // arr === [44, 7, 85, 34, 33] } show(12, 5, 44, 7, 85, 34, 33);let arr=[12,5,8,99,27]; // ...arr === 12,5,8,99,27 function sum(a, b, c, d, e) { return a + b + c + d + e; } sum(arr[0], arr[1], arr[2], ..., arr[n-1], arr[n]) === sum(...arr) === sum(12, 5, 8, 99, 27); let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr = [...arr1, ...arr2]; arr === [1, 2, 3, 4, 5, 6];
系統(tǒng)對象
- Array
map——形參(value, index, array) 映射 1對1
forEach 遍歷 循環(huán)一遍
filter 過濾
reduce——形參(tmp, value, index, array) 減少 多對1let arr = [12, 66, 81, 92]; let res = arr.reduce((tmp, item, index) => { if (index < arr.length - 1) { return tmp + item; } else { return (tmp + item) / arr.length; } }); - String
字符串模板
startsWith: url.startsWith("http://")let age= 18; let str = `我的年齡是:${age}`
endsWith: url.endsWith(".com") - JSON
標(biāo)準(zhǔn)寫法: {"key": "aaa", "key2": 12}
JSON對象: JSON.stringify()梳码、JSON.parse()
異步處理
- 什么是異步操作？
異步——多個操作可以一起進(jìn)行伍掀，互不干擾
同步——操作一個個進(jìn)行 - Promise
封裝異步操作的對象
Promise.all()let p1 = $.ajax('data/1.json'); let p2 = $.ajax('data/2.json'); let p3 = $.ajax('data/3.json'); Promise.all([p1, p2, p3]).then(([data1, data2, data3]) => { // 形參用到了解構(gòu)賦值 console.log(data1, data2, data3); }); - async/await
async函數(shù)是可以暫停的掰茶，在等待promise完成之前會被暫停async function show(){ // 部分成功，部分失敗的時(shí)候 try{}catch() {} // 一般情況下 let data1 = await $.ajax({url: 'data/1.json', dataType: 'json'}); if (data1.a < 10) { let data2 = await $.ajax({url: 'data/2.json', dataType: 'json'}); alert('a'); } else { let data3 = await $.ajax({url: 'data/3.json', dataType: 'json'}); alert('b'); } } show();
兼容性
- babel
Babel 是一個工具鏈蜜笤，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法濒蒋，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。 - 在線編譯（不推薦使用）
引用babel
設(shè)置頁面腳本script標(biāo)簽type="text/babel"
在線編譯會給瀏覽器造成負(fù)擔(dān)，導(dǎo)致頁面的卡頓 - 提前編譯
npm i @babel/core @babel/cli @babel/preset-env -D
添加腳本——package.json中加入"scripts": {"build": "babel src -d dest"},
添加.babelrc——聲明preset沪伙，{ "presets": ["@babel/preset-env"]}
ES其他版本新增特性
- ES7(ECMA 2016)
** 求冪
Array.includes() - ES8(ECMA 2017)
await/async - ES9(ECMA 2018)
rest/spread瓮顽，替代await/async
異步迭代
Promise.finally()
正則
面向?qū)ο?/h4>
- 語言發(fā)展
機(jī)器語言 -> 匯編 -> 低級語言(面向過程) -> 高級語言(面向?qū)ο? -> 模塊 -> 框架 -> API
- 面向?qū)ο筇匦?br>
封裝性
繼承性
多態(tài)性
- ES6中的面向?qū)ο蠡緦懛?br>
關(guān)鍵字 class、constructor围橡、extends暖混、super
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
show() {
alert(this.name);
alert(this.age);
}
}
class Worker extends Person {
constructor(name, age, job) {
super(name, age);
this.job = job;
}
showJob() {
alert(this.job);
}
}
let w = new Worker('wj', 18, 'worker');
w.show();
w.showJob();
閉包
- 閉包涉及到GC——垃圾回收，釋放不用的緩存
- 閉包的底層：棧
計(jì)算機(jī)執(zhí)行函數(shù)的時(shí)候翁授，每調(diào)用一次函數(shù)拣播，計(jì)算機(jī)就會替這個函數(shù)分配一個空間，這個空間叫做棧收擦。函數(shù)所有的局部變量都在這個棧里面贮配。函數(shù)執(zhí)行結(jié)束的時(shí)候，回收這個棧炬守。閉包可以使這個函數(shù)執(zhí)行結(jié)束的時(shí)候牧嫉，這個棧不會被回收。
- 閉包的上層：函數(shù)當(dāng)作對象處理
調(diào)用函數(shù)的時(shí)候减途，會創(chuàng)建一個對象酣藻，這個對象包含這個函數(shù)里面各種執(zhí)行的細(xì)節(jié)。
- 閉包——留著別刪
ES6的模塊化
- js模塊發(fā)展
沒有模塊 -> CMD -> AMD -> ES6語言提供的模塊化支持
ES6的模塊化 -> 瀏覽器還不支持 -> webpack
- webpack編譯
entry——入口地址
output——輸出 (path：絕對路徑) (filename：文件名)
mode——模式
所有當(dāng)前路徑前面加./
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
};
- export
export let a = xx;
export const b = xx;
export function xxx () {};
export class xxx {}
export {a, b, c, ...};
export default memberName;
//從另一個模塊導(dǎo)出
export * from './m2';
export {x, x, x, x} from './m2';
export {default} from './m2';
- import
import * as mod from "./xxx";
import {a, b, c, ...} from "./xxx";
//引入默認(rèn)成員
import memberName from './mod';
//模塊的代碼引入進(jìn)來鳍置，不引入內(nèi)部成員
import "./1.jpg";
import "./1.css";
//異步引入
let promise=import("./mod1");
正則
- 定界符
//
- 修飾符
i 不區(qū)分(ignore)大小寫辽剧，例如: /abc/i 可以匹配 abc、aBC税产、Abc
g 全局(global)匹配怕轿，如果不帶g，正則過程中字符串從左到右匹配辟拷，找到第一個符合條件的即匹配成功撞羽，返回。如果帶g衫冻，則字符串從左到右诀紊，找到每個符合條件的都記錄下來，直到字符串結(jié)尾位置隅俘。
var str = 'aaaaaaaa'
var reg1 = /a/; str.match(reg1) // 結(jié)果為：["a", index: 0, input: "aaaaaaaa"]
var reg2 = /a/g; str.match(reg2) // 結(jié)果為：["a", "a", "a", "a", "a", "a", "a", "a"]
- 元字符[]
任何一個——例子：/a[abc]q/邻奠，可以匹配aaq，abq为居，acq碌宴，不能匹配abbq
范圍——例子：/[a-z]/i，/[0-9]/蒙畴，/[a-z0-9]/贰镣，可以匹配任意一個字母或者任意一個數(shù)字
排除——例子：[^a-z0-9]，匹配除了字母和數(shù)字以外的字符
- 轉(zhuǎn)義
\d，匹配任意一個數(shù)字碑隆，等價(jià)于[0-9]
\w董朝，匹配任意一個數(shù)字或者字母或者下橫線，等價(jià)于[a-z0-9_]
\s干跛，匹配任何空白字符子姜，包括空格、制表符楼入、換頁符等等哥捕，等價(jià)于[ \f\n\r\t\v]。
. 嘉熊，匹配任意一個字符
\D遥赚，匹配非數(shù)字字符，等價(jià)于[^0-9]
\W阐肤，匹配非數(shù)字或者字母或者下橫線字符凫佛，等價(jià)于[^a-z0-9_]
\S，匹配 非空白
- 量詞——數(shù)量
{n}孕惜，匹配符合左邊規(guī)則的字符n次愧薛，例如：/a{6}/匹配a6次，/\d{11}/匹配數(shù)字11次
{n,m}衫画，匹配符合左邊規(guī)則的字符n到m次毫炉，例如：/\d{5,12}/，匹配數(shù)字5到12之間的任意次數(shù)
{n,}削罩，匹配符合左邊規(guī)則的字符最少n次瞄勾，例如：/\w{6,}/，匹配任意一個數(shù)字或者字母或者下橫線弥激，最少6次
+进陡，匹配符合左邊規(guī)則的字符最少1次，等價(jià)于{1,}
?微服，匹配符合左邊規(guī)則的字符0到1次趾疚，等價(jià)于{0,1}，例如/.jsx?/职辨，匹配.js或者.jsx
- 修飾符=>條件
^ 行首盗蟆，從開始就要符合右邊的規(guī)則戈二。在[]里面是排除
$ 行尾舒裤，結(jié)束的時(shí)候要符合左邊的規(guī)則。
- 邏輯或運(yùn)算符符 |
或的運(yùn)算優(yōu)先級最低
/.jpg|gif|png$/觉吭，等價(jià)于匹配包含.jpg或者包含gif或者以png結(jié)尾的字符
()腾供，可以提升優(yōu)先級。/.(jpg|gif|png)$/，匹配以.jpg或者.gif或者.png結(jié)尾的字符伴鳖。例子：/^\d|[1-9]\d{1,3}$/节值，可以匹配開始和結(jié)尾是數(shù)組，但是有或|榜聂，無法限制中間的字符搞疗，應(yīng)該寫成/^(\d|[1-9]\d{1,3})$/。
機(jī)器語言 -> 匯編 -> 低級語言(面向過程) -> 高級語言(面向?qū)ο? -> 模塊 -> 框架 -> API
繼承性
多態(tài)性
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
show() {
alert(this.name);
alert(this.age);
}
}
class Worker extends Person {
constructor(name, age, job) {
super(name, age);
this.job = job;
}
showJob() {
alert(this.job);
}
}
let w = new Worker('wj', 18, 'worker');
w.show();
w.showJob();
計(jì)算機(jī)執(zhí)行函數(shù)的時(shí)候翁授，每調(diào)用一次函數(shù)拣播，計(jì)算機(jī)就會替這個函數(shù)分配一個空間，這個空間叫做棧收擦。函數(shù)所有的局部變量都在這個棧里面贮配。函數(shù)執(zhí)行結(jié)束的時(shí)候，回收這個棧炬守。閉包可以使這個函數(shù)執(zhí)行結(jié)束的時(shí)候牧嫉，這個棧不會被回收。
調(diào)用函數(shù)的時(shí)候减途，會創(chuàng)建一個對象酣藻，這個對象包含這個函數(shù)里面各種執(zhí)行的細(xì)節(jié)。
沒有模塊 -> CMD -> AMD -> ES6語言提供的模塊化支持
ES6的模塊化 -> 瀏覽器還不支持 -> webpack
entry——入口地址
output——輸出 (path：絕對路徑) (filename：文件名)
mode——模式
所有當(dāng)前路徑前面加./
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
};
export let a = xx;
export const b = xx;
export function xxx () {};
export class xxx {}
export {a, b, c, ...};
export default memberName;
//從另一個模塊導(dǎo)出
export * from './m2';
export {x, x, x, x} from './m2';
export {default} from './m2';
import * as mod from "./xxx";
import {a, b, c, ...} from "./xxx";
//引入默認(rèn)成員
import memberName from './mod';
//模塊的代碼引入進(jìn)來鳍置，不引入內(nèi)部成員
import "./1.jpg";
import "./1.css";
//異步引入
let promise=import("./mod1");
//
i 不區(qū)分(ignore)大小寫辽剧，例如: /abc/i 可以匹配 abc、aBC税产、Abc
g 全局(global)匹配怕轿，如果不帶g，正則過程中字符串從左到右匹配辟拷，找到第一個符合條件的即匹配成功撞羽，返回。如果帶g衫冻，則字符串從左到右诀紊，找到每個符合條件的都記錄下來，直到字符串結(jié)尾位置隅俘。
var str = 'aaaaaaaa'
var reg1 = /a/; str.match(reg1) // 結(jié)果為：["a", index: 0, input: "aaaaaaaa"]
var reg2 = /a/g; str.match(reg2) // 結(jié)果為：["a", "a", "a", "a", "a", "a", "a", "a"]
任何一個——例子：/a[abc]q/邻奠，可以匹配aaq，abq为居，acq碌宴，不能匹配abbq
范圍——例子：/[a-z]/i，/[0-9]/蒙畴，/[a-z0-9]/贰镣，可以匹配任意一個字母或者任意一個數(shù)字
排除——例子：[^a-z0-9]，匹配除了字母和數(shù)字以外的字符
\d，匹配任意一個數(shù)字碑隆，等價(jià)于[0-9]
\w董朝，匹配任意一個數(shù)字或者字母或者下橫線，等價(jià)于[a-z0-9_]
\s干跛，匹配任何空白字符子姜，包括空格、制表符楼入、換頁符等等哥捕，等價(jià)于[ \f\n\r\t\v]。
. 嘉熊，匹配任意一個字符
\D遥赚，匹配非數(shù)字字符，等價(jià)于[^0-9]
\W阐肤，匹配非數(shù)字或者字母或者下橫線字符凫佛，等價(jià)于[^a-z0-9_]
\S，匹配 非空白
{n}孕惜，匹配符合左邊規(guī)則的字符n次愧薛，例如：/a{6}/匹配a6次，/\d{11}/匹配數(shù)字11次
{n,m}衫画，匹配符合左邊規(guī)則的字符n到m次毫炉，例如：/\d{5,12}/，匹配數(shù)字5到12之間的任意次數(shù)
{n,}削罩，匹配符合左邊規(guī)則的字符最少n次瞄勾，例如：/\w{6,}/，匹配任意一個數(shù)字或者字母或者下橫線弥激，最少6次
+进陡，匹配符合左邊規(guī)則的字符最少1次，等價(jià)于{1,}
?微服，匹配符合左邊規(guī)則的字符0到1次趾疚，等價(jià)于{0,1}，例如/.jsx?/职辨，匹配.js或者.jsx
^ 行首盗蟆，從開始就要符合右邊的規(guī)則戈二。在[]里面是排除
$ 行尾舒裤，結(jié)束的時(shí)候要符合左邊的規(guī)則。
或的運(yùn)算優(yōu)先級最低
/.jpg|gif|png$/觉吭，等價(jià)于匹配包含.jpg或者包含gif或者以png結(jié)尾的字符
()腾供，可以提升優(yōu)先級。/.(jpg|gif|png)$/，匹配以.jpg或者.gif或者.png結(jié)尾的字符伴鳖。例子：/^\d|[1-9]\d{1,3}$/节值，可以匹配開始和結(jié)尾是數(shù)組，但是有或|榜聂，無法限制中間的字符搞疗，應(yīng)該寫成/^(\d|[1-9]\d{1,3})$/。
