2020/3/8
ES6部分(其一)
var let const
- var聲明可以重復(fù)聲明 重新定義 屬于當(dāng)前的函數(shù)
if(true){
var a=1;
}
console.log(a);//編譯通過(guò)
- let&conset僅在其所在代碼塊有效
let a=1 ;//全局
if(true){
let a=2; //局部
console.log(a);
}
console.log(a);
輸出結(jié)果：2 1
for (var a = 0; a <= 2; a++) {
console.log(a)
setTimeout(function() {
console.log(a)
}, 1000)
}
輸出：1 2 2 2
for (let a = 0; a <= 2; a++) {
console.log(a)
setTimeout(function() {
console.log(a)
}, 1000)
}
輸出：1 2 1 2
let可以重復(fù)賦值涧窒，const不能重新復(fù)制但能改變其屬性（類似Kt中的val）
Temporal Dead Zone (TDZ) 暫時(shí)性死區(qū)
不要在變量未聲明前使用變量
使用規(guī)則：
- 默認(rèn)使用conset
- 需要重新綁定或者更新使用let
- 盡量不適用var
箭頭函數(shù)
const nums=[1,2,3,4,5,6,7]
const nums2=nums.map((number,i)=>{
console.log(`${i}:${number*2}`)
})
輸出：
0:2
1:4
2:6
3:12
···
規(guī)則：去掉function欢嘿，加=>
const chengkeyu = {
name: "chengkeyu",
hobbies: ['Eating', 'Sleeping'],
printHobbies: function() {
this.hobbies.map(function(hobby){
console.log(`${this.name} like ${hobby}`)
})
}
}
chengkeyu.printHobbies()
輸出：like Eating
like Sleeping
name沒(méi)有侯勉，因?yàn)閖s中，this實(shí)在運(yùn)行時(shí)才綁定的此時(shí)的this.name所在的函數(shù)是一個(gè)獨(dú)立函數(shù)，所以指向的是window
const chengkeyu = {
name: "chengkeyu",
hobbies: ['Eating', 'Sleeping'],
printHobbies: function() {
this.hobbies.map((hobby)=>{
console.log(`${this.name} like ${hobby}`)
})
}
}
chengkeyu.printHobbies()
輸出：chengkeyu like Eating
chengkeyu like Sleeping
原因：箭頭函數(shù)是詞法作用域，沒(méi)有自己的this，繼承于父級(jí)函數(shù)
字符串模板
格式：
`文本${變量或者代碼塊}文本`
字符串模板允許嵌套
示例：
const objs = [{
firstName: "yang",
lastName: "weizhi"
},
{
firstName: "cheng",
lastName: "keyu"
},
{
firstName: "zhao",
lastName: "qian"
},
]
const temp=`
<ul>
${objs.map(name=>`<li>${name.firstName}性男子</li>`)}
</ul>
`
document.body.innerHTML=temp
數(shù)組解構(gòu)
數(shù)組對(duì)數(shù)組
const nums=[1,2,3,4]
const [one,two]=nums
console.log(one,two)
打用揭邸： 1 2
Restful的寫法
const nums=[1,2,3,4]
const [one,...others]=nums
console.log(one,others)
打印：1234
注意：...僅能聲明在最后宪迟，不然會(huì)報(bào)錯(cuò)
數(shù)組解構(gòu)實(shí)現(xiàn)變量交換
const a=1
const b=2
[a,b]=[b,a]
默認(rèn)值
const [a = 1, b] = [undefined, 2]
console.log(a, b)
const [c = 1, d] = [null, 2]
console.log(c, d)
打雍ㄖ浴：1 2
null 2
undefined表示不給值，null表示給個(gè)null值
對(duì)象解構(gòu)
原則：key值對(duì)應(yīng)
const Chengkeyu={
name:"陳科宇",
sex:"男",
hobbies:["羽毛球","睡覺(jué)"],
}
const {name,hobbies}=Chengkeyu
console.log(`${name}喜歡${hobbies}`)
打硬妊椤：陳科宇喜歡羽毛球,睡覺(jué)
重命名
const Chengkeyu={
name:"陳科宇",
sex:"男",
hobbies:["羽毛球","睡覺(jué)"],
}
const {name:a,hobbies:b}=Chengkeyu
console.log(`${a}喜歡$`)
注意點(diǎn)：
錯(cuò)誤寫法
const Chengkeyu={
name:"陳科宇",
sex:"男",
hobbies:["羽毛球","睡覺(jué)"],
}
{name:a,hobbies:b}=Chengkeyu
console.log(`${a}喜歡$商玫`)
此時(shí)會(huì)報(bào)錯(cuò)
報(bào)錯(cuò)原因：大括號(hào)內(nèi)的內(nèi)容{name:a,hobbies:b}會(huì)被編譯器當(dāng)作代碼塊而非變量
所以需要加外部加括號(hào)且提前聲明
拓展運(yùn)算符
const nums1=[1,2,3]
const nums2=[5,6,7]
const nums3=[...nums1,4,...nums2]
const nums4=nums3
console.log(nums4)
打踊丁： 123456
Warning：此時(shí)nums4持有的是nums3的索引，所以對(duì)nums4進(jìn)行修改會(huì)導(dǎo)致nums3同時(shí)變化
所以正確賦值姿勢(shì)應(yīng)該為const nums4=[].concat(nums3)
Rest運(yùn)算符（剩余參數(shù)）
function a(...nums) {
console.log(nums)
}
a(1, 23, 4, 234)
打尤：(4) [1, 23, 4, 234]
nums以array的形式保存了這些參數(shù)
2020/3/10
Js的基礎(chǔ)復(fù)習(xí)
網(wǎng)頁(yè)的生成流程
- HTML代碼轉(zhuǎn)換成DOM袭异、
- CSS代碼轉(zhuǎn)換為CSSOM（CSS Object Model）
- 結(jié)合DOM和CSSOM，生成渲染樹(shù)炬藤，Render tree御铃，包含各個(gè)節(jié)點(diǎn)的視覺(jué)信息
- 耗時(shí)操作 生成布局Layout,j將所有的渲染樹(shù)的所有節(jié)點(diǎn)進(jìn)行平面整合
- 耗時(shí)操作 將布局繪制（paint）在屏幕上
- 生成的布局flow與繪制paint合稱渲染
- 網(wǎng)頁(yè)生成之時(shí)至少渲染一次碴里，用戶訪問(wèn)過(guò)程中不會(huì)中斷渲染
- 重新渲染包含：重排和重繪，重繪不一定要重排上真，重排一定會(huì)重繪
JS的組成
- ECMAScript：定義語(yǔ)法規(guī)范
- DOM：文檔對(duì)象模型
- BOM：瀏覽器對(duì)象模型
arguments：
function pringArgs(){
console.log(arguments)
}
pringArgs(10,11)
此處的arguments為10,11
函數(shù)的定義方式
- 函數(shù)聲明方式：function 關(guān)鍵字 命名函數(shù)
- 函數(shù)表達(dá)式 匿名函數(shù)
- new Function() 執(zhí)行效率低咬腋，較少使用
注意：所有函數(shù)都是Function對(duì)象
作用域
- 全局變量（盡可能不要使用）
- 局部變量
- 塊級(jí)作用域
- 詞法作用域
JS的預(yù)解析過(guò)程
- 變量聲明提升至當(dāng)前作用域的最前，僅會(huì)提升聲明睡互，而不會(huì)賦值
- 把函數(shù)的聲明提升到最前根竿，僅會(huì)提升聲明，而不會(huì)調(diào)用
- 先var 再function
對(duì)象存儲(chǔ)
簡(jiǎn)單類型的存儲(chǔ)： 會(huì)獨(dú)立的存于堆內(nèi)存中
復(fù)雜對(duì)象的存儲(chǔ)：棧僅存儲(chǔ)指針就珠，指向堆中的對(duì)象
2020/3/11
ES6部分（其二）
標(biāo)簽?zāi)０?/h3>
再字符串模板中加入方法名標(biāo)簽寇壳，使之返回我們規(guī)定要求的字符
//標(biāo)簽?zāi)０遄址?function hightLight(string,...values) {
debugger;
return 'laravist'
}
const user="marry"
const topic="learn to use md"
const sentence=hightLight`${user} has commend on your topic ${topic}`
console.log(sentence)
運(yùn)行結(jié)果：laravist
strings為自帶字符串所組成集合
values為模板字符串所組成的集合（user，topic）
新增的字符串函數(shù)
- startWith
- endWith
- includies
- repeat
示例
const id="1234567890"
const fan="I Love Sleep"
console.log(id.startsWith(234,1))//true
console.log(id.endsWith(6789,9))//true
console.log(id.includes(12,7))//第七位后是否包含12
console.log(fan.repeat(2))//重復(fù)兩次
//repeat實(shí)現(xiàn)右對(duì)齊
function padder(string,length=25) {
return `${' '.repeat(Math.max(length-string.length,0))}${string}`
}
for of
傳統(tǒng)的循環(huán)的缺點(diǎn)
- for循環(huán)語(yǔ)法繁瑣
- for in循環(huán)會(huì)打印所有的對(duì)象而非只有數(shù)組內(nèi)的對(duì)象
- for each不能中斷
for of 只會(huì)獲取數(shù)組內(nèi)的對(duì)象妻怎，不會(huì)引入其所有內(nèi)容
const fruits=['香蕉','核桃','檸檬','火龍果']
//for in會(huì)打印所有 of只會(huì)打印數(shù)組內(nèi)的
for (let fruit of fruits){
console.log(fruit)
}
/**
Map
與java中的map類似
具體看示例
const people = new Map();
//添加元素
people.set("cky", 18);
people.set("ywz", 20);
people.set("zq", 22);
console.log(people);
//獲取大小
people.size;
//判斷有無(wú)
people.has("zq");
//刪除
people.delete("zq");
//全清
people.clear();
const nums=[1,2,3,4,5,5]
//直接賦值
const fruits = new Map([['apple', 12], ['banana', 23]]);
WeakMap
weakMap不能循環(huán)壳炎，沒(méi)有size，沒(méi)有clear逼侦，key必須是對(duì)象
但weakMap會(huì)自動(dòng)回收匿辩，可用于內(nèi)存優(yōu)化
week map
const strong=new Map();
const weak=new WeakMap();
Class
傳統(tǒng)的對(duì)象，如果聲明方法需要使用prototype偿洁，而且存在變量提升
例：
function User(name, email) {
this.name = name;
this.email = email;
}
const yang = new User(123, 123)
User.prototype.speak = function () {
console.log(`Hi I am ${this.name}`)
}
但在Class中撒汉，使用構(gòu)造方法和直接聲明方法的方式替代了原先的姿勢(shì)
例：
class Book {
constructor(name, email) {
//構(gòu)造函數(shù)
this.name = name
this.email = email
}
info(){
console.log(`Hi I am ${this.name}`)
}
//直接BOOK調(diào)用，示例不可調(diào)用
static desc(){
console.log("hello world")
}
}
new Book(123,123).info()
Book.desc()
值得注意的是
- class不會(huì)存在變量提升涕滋，所有要先聲明在使用
- class中的靜態(tài)方法睬辐，只能自身調(diào)用，自身的示例無(wú)法調(diào)用
如上示例
