一猎物、全局變量以及對應(yīng)的作用域、this動態(tài)作用域
1）變量提升
在es5中var變量 在一個作用域內(nèi)胸蛛，變量的聲明會提升，也就是一個作用域里面炕横，無論變量聲明的位置在什么地方，在執(zhí)行過程中葡粒，都會把聲明提到代碼最前執(zhí)行
funcation example(){
console.log(a);
var a;
}
# 輸出內(nèi)容:undefined 因為a這個變量已經(jīng)聲明 ，但是并沒有初始化內(nèi)容
2)全局變量的聲明和屬性值的區(qū)分
# 在index.js中
var a = 0 #聲明了一個window的全局變量
a = 0 # 聲明了一個window屬性
在實際用到的過程中膜钓，看似效果差不多嗽交，但是其實本質(zhì)并不同。
3）閉包的作用
#在es5中
function fun1(){
var a = 2;
function fun2(){
return a + 4颂斜；
}
return fun2;
}
輸出：6
在es5中夫壁，如果在fun2函數(shù)中找不到變量a的聲明，則會一層一層向上直到找到聲明,否則會報錯沃疮。如下就實現(xiàn)了閉包盒让。
4）塊變量 let 和const
在es5中var變量根據(jù)作用域分有：全局作用域、局部作用域
#es5用法
function test(){
var a = 1;
}
二司蔬、array數(shù)組的遍歷邑茄、轉(zhuǎn)換、生成俊啼、查找有哪些相關(guān)的函數(shù)
1)數(shù)組遍歷
- forEach 輸出的每一項都是key所對應(yīng)的value值肺缕，不支持continue，break這些關(guān)鍵詞
let arry = [2,3,4,5];
array.forEach(functon(item){
console.log(item)
})
- 如果回調(diào)函數(shù)返回了false時 則結(jié)束遍歷授帕，否則繼續(xù)循環(huán)
arry.every(funcation(item){
console.log(item)
return true
})
- for ....in 循環(huán) 獲取到的是key 也就是獲取索引值,針對的是對象同木，數(shù)組可以看做是一種特殊的對象
for(let i in arry){
console.log(array[i])
}
- for ... of 循環(huán)，獲取到的key所對應(yīng)的value值
for(let item of arry){
console.log(item)
}
2）數(shù)組的查找
- 使用過濾器filter,篩選過程中跛十，無論是否尋找到合適的內(nèi)容彤路，都會返回一個數(shù)組。
var arr = [1,2,3,4,5,6];
arr.filter(item=>{
return item%2 == 0
})
輸出:[2,4,6]
- 使用find進行查找芥映，只會查找到第一個符合條件的第一個value,而findIndex返回索引
array.find(function(item){
return item % 2 == 0;
})
輸出：2
array.findIndex(funcation(item){
return item % 2 == 0;
})
輸出:1
三洲尊、es6和es5在class類的原型鏈中掛載一個函數(shù)
- es5 定義構(gòu)造函數(shù)
let Animal = function(type){
this.type = type;
this.fun1 = function(){
console.log("輸出內(nèi)容")
}
}
let dog = mew Animal("dog");
#在原型鏈掛載函數(shù),所有實例公用一個
dog.constructor.prototype.eat =function(){
console.log("輸出內(nèi)容")
}
- es6中無需手動掛載远豺，自動實現(xiàn)
class Animal(){
contructor(type){
this.type = type;
}
eat(){
consolo.log("自動掛載在原型鏈中")
}
}
四、es6使用set和get進行class屬性的讀寫操作（內(nèi)含閉包）
let realage =7 ;
class example(){
get age(){
return realage;
}
set age(val){
realage = val;
}
}
let ww = new example();
console.log(ww.age);
ww.age = 10;
console.log(ww.age);
輸出：7,10
五颊郎、es5與es6的繼承
//在es5中繼承
let dog = function(){
//初始化構(gòu)造函數(shù)
Animal.call(this,"dog") //使用call改變this的指向
//在子類中掛載一些方法
this.run = function(){
////
}
}
//把子類原型鏈指向到父類原型鏈
this.dog.prototype = this.Animal.prototype
總結(jié)es6在class的聲明憋飞、 屬性、方法姆吭、繼承
class parent{
//重定義構(gòu)造函數(shù)
constructor(type){
this.type = type //定義屬性
}
//定義靜態(tài)·方法
static walk(){
console.log("This is a static methods榛做！")
}
func1(){
console.log("自動被掛載在原型鏈的method")
}
class child extends parent(){
constructor(type){
super(type) //繼承
this.type = type //定義屬性
}
this.run = funcation(){
console.log("自定義函數(shù)")
}
}
}
六、 處理不確定參數(shù)
對于es5 使用arguements獲取執(zhí)行的參數(shù)
function sum(x,y,z){
console.log(Array.from(this.arguement))
return x + y + z;
}
在es6 使用 ...num 淺拷貝的形式獲取 Rest parameter
function sum(...data){
let nums = 0;
data.forEach(function(item){
nums += item;
})
return data;
}
let datas=[1,2,4];
sum(...datas);
九内狸、Arrow Function (箭頭函數(shù))
箭頭函數(shù)是對函數(shù)寫法一個簡化,對this的指向也有了一個變化检眯，之前的函數(shù) 是誰執(zhí)行函數(shù)this指向誰，而箭頭函數(shù)中的this是定義時的綁定
# 當參數(shù)有且僅有一個的時候小括號可以省略昆淡，當函數(shù)體內(nèi)容是表達式花括號可以省略
let arrow = () =>{}
下面舉一個經(jīng)典的例子
let x = 11;
let obj={
x:22,
say:()=>{
console.log(this.x);
}
}
obj.say();
//輸出的值為11
原因如下,say和箭頭函數(shù)相當于是obj對象中key和value的關(guān)系锰瘸，say函數(shù)本身所在的對象是obj，可是因為obj只有在函數(shù)被調(diào)用昂灵，或者通過構(gòu)造函數(shù)new Object()的形式才會有this,因此this向上執(zhí)行繼承父類window的this
十避凝、對象屬性
在es6中，對對象的使用更加便捷化眨补，對象中的key值可以是表達式管削、變量，且當key和value相同撑螺，可以省略很多東西
let x = 1, y = 2, z=3;
let obj = {
x,
y,
[z+x]:5,
<!--eat(){-->
<!-- console.log("這個是一個方法");-->
<!--}-->
}
console.log(obj);
輸出：{x:1,y:2,4:5}
十一含思、set數(shù)據(jù)結(jié)構(gòu)
set對象的增刪改查，以及常用的一些函數(shù)甘晤，最大的特點是會自動去重含潘，但是不可以修改內(nèi)容，遍歷方法可參照數(shù)組遍歷方法线婚。
let s =new Set();//聲明一個set對象
s.add(1).add(2); //增加一個元素
console.log(s.keys(),s.values(),s.entries());//獲取所有key遏弱、value值、所有的內(nèi)容
s.size //獲取元素個數(shù)
s.has(1) //true 獲取某元素是否存在
s.delete(1)//刪除某個元素
十二酌伊、map數(shù)據(jù)結(jié)構(gòu)
map對元素有一定的要求腾窝，需要是可遍歷的，并且每一個元素都有對應(yīng)的鍵值對居砖，相對于來說比set類型的數(shù)據(jù)性能更好虹脯，以下是和set數(shù)據(jù)結(jié)構(gòu)有些不同的部分
let m = new Map([[2,"value1"],[4,"value3"]]); //聲明形式如下，[2,"value1"] 是其中的一個元素
m.set(5,"values"); //增加元素
m.set(2,"value11"); //修改元素
m.has(2) //判斷的是key值
m.get(5) //獲取對應(yīng)的value
# 兩種遍歷方式
m.forEach(function(value,key){ //注意key和value的位置
console(value,key);
})
for(let [key,value] of m){
console(value,key);
}
十三奏候、字符串模板
字符串模板可以解決在和字符串拼接過程中遇到 字符串換行循集、包含變量、邏輯運算的簡潔方法
const price = 10;
const retails = "retail"
const showText1 = `您購買的價格是${price}`; //和字符串常量中加入表達式
const showText2 = `我是第一行
我是第二行` //可以直接識別模板
function hanlePrice(strings,type){ //strings是獲取到的
let s1 = `這個是一個測試蔗草！`
return `${strings[0]}${s1}`
}
let showText3 = handlePrice`您好${retail}`
console.log(showText3)
輸出：您好這個是一個測試咒彤！
十四疆柔、解構(gòu)賦值
解構(gòu)賦值是對可遍歷對象的取值做了一個極大的貢獻，使得賦值的過程變得簡潔.可以嘗試的用在獲取接口數(shù)據(jù)镶柱、函數(shù)參數(shù)的場景中旷档。
- 數(shù)組的解構(gòu)賦值
let arry = [1,2,3,4];
let [one,two] = array;
console.log(one,two);
//輸出：1,2
- 獲取需要的內(nèi)容
let [one,,three] = array;
console.log(one,three);
//輸出：1,3
- 獲取需要內(nèi)容并且使用rest變量保留剩余內(nèi)容
let [one,two,...last] = array;
console.log(one,two,last);
//輸出：1,2,[3,4]
- 解構(gòu)對象
let option ={width:100,height:30}
let [width,height] = option
console.log(width,height);
//輸出 100 30
let options ={
size:{
width:100,
height:20
},
items:['Cakes','Dount'],
extra:true
}
let [size:{width},items:[one]] = options;
console.log(width,one);
//輸出：100，Cakes
