一、ECMAScript的歷史
ES6是ECMAScript標準十余年來變動最大的一個版本,為其添加了許多新的語法特性,
?1997年ECMAScript1.0誕生,
?1998年6月ECMAScript2.0誕生,包含一些小的更改,用于同步獨立的ISO國際標準,
?1999年12月ECMAScript3.0誕生,它是一個巨大的成功,在業界得到了廣泛的支持,它奠定了JS的基本語法,被其后版本完全繼承,直到今天,我們一開始學習JS,其實就是在學3.0版的語法,
?2000年的ECMAScript4.0是當下ES6的前身,但由于這個版本太過激烈,對ES3做了徹底升級,所以暫時被"和諧"了,
?2009年12月,ECMAScript5.0版正式發布,ECMA專家組預計ECMAScript的第五個版本會在2013年中期到2018年作為主流的開發標準,2011年6月,ES5.1版發布,并且成為ISO國際標準,
?2013年,ES6草案凍結,不再添加新的功能,新的功能將被放到ES7中;2015年6月,ES6正式通過,成為國際標準,
二、基本資料型別:
number、string、boolean、null、undefined、Symbol
三、復合資料型別:
array、object
四、獲得型別:
typeof
五、宣告變數:
1、var
1.只要在函式內宣告變數的時候,使用了 var 關鍵字,那么這個變數就是區域變數
2.如果沒有使用 var 關鍵字,那么只有在這個函式被呼叫之后,這個變數才是全域變數(函式內部定義的方法和變數,要等到函式執行過以后,才會真正定義)
3.var 定義的變數存在變數提升的現象,也就是在未宣告之前即可使用,只不過這時變數的值是 undefined
2、let
1.變數所屬的作用域是塊級作用域(在 ES6 之前,js只存在函式作用域以及全域作用域)
2.不存在變數提升,即變數在宣告之前不可使用
3.不能重復定義,即使用 let 關鍵字重復宣告同一個變數
4.存在暫時性死區(暫時性死區的本質就是,只要一進入當前作用域,當前作用域的所有變數就已經存在了,但是不可獲取,只有等到宣告變數的那一行代碼出現,才可以獲取和使用該變數)
3、const
1.const 是用來宣告常量,且宣告的常量是不允許改變的,而且在宣告的同時必須初始化
2.const 與 let 一樣,其定義的變數都屬于塊級作用域,不存在變數提升,不允許重復定義,同時也存在暫時性死區
3.const 的本質: 使用 const 定義的變數并非所有的都是常量,當我們使用 const 來定義常量物件或常量陣列時,常量物件或常量陣列里的內容其實是可變的,只是不能對這個常量物件或常量陣列進行重新賦值的操作,即不能修改(值型別)數字,字串,布爾且建議變數名大寫
六、Symbol型別
1.Symbol 定義的值唯一 ,獨一無二,最大的用法是用來定義物件的唯一屬性名,
2. 屬性名唯一:由于每一個Symbol的值都是不相等的,所以Symbol作為物件的屬性名,可以保證屬性不重名,
3. 常量值唯一:使用Symbol定義常量,這樣就可以保證這一組
常量的值都不相等,
4.Symbol.for()全域創建獲得, 單例模式
(首先會在全域搜索被登記的Symbol中是否有該字串引數作為名稱的Symbol值,如果有即回傳該Symbol值,若沒有則新建并回傳一個以該字串引數為名稱的Symbol值,并登記在全域環境中供搜索)
var x = Symbol.for(5)
var y = Symbol.for(5)
console.log(x==y)
5.Symbol.keyFor()
(回傳一個已登記的Symbol型別值的key,用來檢測該字串引數作為名稱的Symbol值是否已被登記)
注意:
Symbol函式前不能使用new命令,否則會報錯因為生成的Symbol是一個原始型別的值,不是物件,
由于Symbol值不是物件,所以不能添加屬性,基本上,它是一種類似于字串的資料型別,
Symbol函式可以接受一個字串作為引數,表示對Symbol實體的描述,主要是為了在控制臺顯示,或者轉為字串時,比較容易區分,
Symbol值不能與其他型別的值進行運算,會報錯,
Symbol值可以顯式轉為字串
Symbol值也可以轉為布林值,但是不能轉為數值
在物件的內部,使用Symbol值定義屬性時,Symbol值必須放在方括號之中,
Symbol值作為屬性名時,該屬性還是公開屬性,不是私有屬性,
Symbol作為屬性名,遍歷物件的時候,該屬性不會出現在for…in、for…of回圈中,也不會Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()回傳
七、字串
擴展的方法:
?includes():回傳布林值,判斷是否找到引數字串,
?trim():回傳新的字串,去除字串的頭尾空格
?startsWith():回傳布林值,判斷引數字串是否在原字串的頭部,
?endsWith():回傳布林值,判斷引數字串是否在原字串的尾部,
?repeat():回傳新的字串,表示將字串重復指定次數回傳,
?padStart:回傳新的字串,表示用引數字串從頭部(左側)補全原字串,
?padEnd:回傳新的字串,表示用引數字串從尾部(右側)補全原字串,
<script>
letstring="apple,banana,orange";
string.includes("banana");//true
string.startsWith("apple");//true
string.endsWith("apple");//false
string.startsWith("banana",6)//true
console.log("Hello,".repeat(2));//"Hello,Hello,"
console.log("Hello,".repeat(2.2));//"Hello,Hello,"
console.log("Hello,".repeat("2"));//"Hello,Hello,"
console.log("h".padStart(5,"o"));//"ooooh"
console.log("h".padEnd(5,"o"));//"hoooo"
console.log("h".padStart(5));//"h"
</script>
八、模板字串
模板字串相當于加強版的字串,用反引號,除了作為普通字
符串,還可以用來定義多行字串,還可以在字串中加入變
量和運算式,
1.實作多行字串
2.使用${變數名}的格式將變數與字串拼接
3.字串插入變數和運算式,變數名寫在${}中,${}中可以放
入JavaScript運算式和函式,
4.console.log 的占位輸出方式
console.log('姓名:%s,年齡:%s',name_,age_)
九、解構賦值
解構賦值是對賦值運算子的擴展,
他是一種針對陣列或者物件進行模式匹配,然后對其中的變數進行賦值,
在代碼書寫上簡潔且易讀,語意更加清晰明了;
也方便了復雜物件中資料欄位獲取,
?解構的源,解構賦值運算式的右邊部分,
?解構的目標,解構賦值運算式的左邊部分
1.陣列模型的解構(Array)
(1)遍歷陣列 forEach, 無回傳
let x = [3,1,7,9,12]
x.forEach(function(value,index,arr){
// value 值
// index 索引
// arr 陣列物件
console.log(value,index,arr)
})
(2)映射陣列 map ,回傳新陣列
let x = [1,2,3,4,5]
let y = x.map(function(value,index,arr){
return value*2
})
console.log(y)
(3)過濾 filter ,回傳新陣列(現有陣列通過一定的規則過濾出新的陣列,回傳true保留,false 不保留)
let x = [1,2,3,4,5]
let y = x.filter(function(value,index,arr){
return value>3
})
console.log(y)
(4)累計 reduce (方法接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值)
let x = [1, 2, 3, 4, 5]
let y = x.reduce(function(a,b){
// a 引數是上一次遍歷的結果
return a*b
})
console.log(y)
(5)一個 some 檢測陣列元素中是否有元素符合指定條件(回傳true或者false,只要回呼函式有一個為true 則整個都回傳true)
let x = [3, 1, 4, 6, 2, 4, 9, 14]
let y = x.some(function(value, index, arr) {
return value > 50
})
console.log(y)
(6)每個every檢測數值元素的每個元素是否都符合條件(回傳true或者false,回呼函式都回傳為true則整個都回傳true)
let x = [3, 1, 4, 6, 2, 4, 9, 14]
let y = x.every(function(value, index, arr) {
return value > 10
})
console.log(y)
(7)復制陣列 copyWithin(替換位置,拷貝開始,拷貝結束)(方法用于從陣列的指定位置拷貝元素到陣列的另一個指定位置中)
let x = ['張三','李四','王五','趙六']
x.copyWithin(3,1,2)
console.log(x)
(8)包含 includes(obj) 回傳一個布林值 arr是否包含obj
let x = [3,1,4,98,2,5]
console.log(x.indexOf(5))
console.log(x.includes(5))
(9)查找 find 回傳通過測驗(函式內判斷)的陣列的第一個元素的值
let x = [3, 15, 41, 98, 2, 5]
let y = x.find(function(value) {
return value > 10
})
console.log(y)
(10)查找 findIndex 回傳通過測驗(函式內判斷)的陣列的第一個元素的索引值
let x = [3, 15, 41, 98, 2, 5]
let y = x.findIndex(function(value){
return value>10
})
console.log(y)
(11)填充 fill(內容,start,end) 使用一個固定值來填充陣列
let x = ['張三','李四','王五','趙六']
x.fill('白七',1,3)
console.log(x)
2.解構賦值,賦值運算的擴展用法
(1)陣列的解構
- 基本解構
let [a,b,c] = [1,2,3]
console.log(a,b,c)
- 嵌套解構
let [a,[b,c],d] = [1,[2,3],4]
console.log(a,b,c,d)
- 忽略解構
let [, [, a], ] = [1, [2, 3], 4]
console.log(a)
- 默認值解構
let [a,b=3]=[7]
console.log(a,b)
- 不完全解構
let [a,b=3]=[ ]
console.log(a,b)
- 剩余運算子解構
let [a,...b] = [1,2,3,4,5,6,7,9]
console.log(a,b)
function myFun(...a){
console.log(a)
}
myFun(5,6,7,8,9)
3.字串的解構
let [a,b,c,...d] = 'hello world'
console.log(a,b,c,d)
4.物件的解構
- 基本賦值解構
let {name,age}={name:'張三',age:18}
let {sex:sex}={sex:'男'}
console.log(name,age)
console.log(sex)
- 可嵌套解構
let {student: [name, { age }] } = {student: ['張三', {age: 18}] };
console.log(name,age)
- 可忽略解構
let {p: [x, { }] ,q} = {p: ['hello', {y: 'world'}],q:'張三'};
console.log(x,q)
- 不完全解構
let {p: [x, { }] ,q} = {p: ['hello', {y: 'world'}]};
console.log(x,q)
- 剩余運算子解構
let {a,b,...c} = {a:'張三',b:'李四',c:'王五',d:'趙六',e:'田七'}
console.log(a,b,c)
- 默認值解構
let {a = 10, b = 5} = {a: 3};
a = 3; b = 5;
console.log(a,b)
let {a: aa = 10, b: bb = 5} = {a: 3};
aa = 3; bb = 5;
console.log(aa,bb)
十、Set的屬性和方法(類似于陣列,但是成員的值都是唯一的,沒有重復的值):
let x = new Set([1,2,3,3,2,1])
console.log(x) //Set(3) {1, 2, 3}
?Set.size:回傳Set實體的成員總數,
let x = new Set([1,2,3,3,2,1])
console.log(x.size)
?Set.add(value):添加某個值,回傳Set結構本身,
let x = new Set([1,2,3,3,2,1])
x.add('張三')
console.log(x) //Set(4) {1, 2, 3, "張三"}
?Set.delete(value):洗掉某個值,回傳一個布林值,表示洗掉是否成功,
let x = new Set([1,2,3,3,2,1])
x.delete(1)
console.log(x) //Set(2) {2, 3}
?Set.has(value):回傳一個布林值,表示該值是否為Set的成員,
let x = new Set([1, 2, 3, 3, 2, 1])
console.log(x.has(1)) //true
?Set.clear():清除所有成員,沒有回傳值,
let x = new Set([1, 2, 3, 3, 2, 1])
console.log(x) //Set(3) {1, 2, 3}
x.clear()
console.log(x) //Set(2) {}
?Set.keys():回傳鍵名的遍歷器
let x = new Set([1, 2, 3, 3, 2, 1])
for(let i of x.keys()){
console.log(i) // 1,2,3
}
?Set.values():回傳鍵值的遍歷器
let x = new Set([1, 2, 3, 3, 2, 1])
for(let i of x.values()){
console.log(i) // 1,2,3
}
?Set.entries():回傳鍵值對的遍歷器
let x = new Set([1, 2, 3, 3, 2, 1])
for(let [i,j] of x.entries()){
console.log(i,j)
}
?Set.forEach():使用回呼函式遍歷每個成員
let x = new Set([1, 2, 3, 3, 2, 1])
x.forEach(function(val,index,set){
console.log(val,index,set)
})
十一、Map的屬性和方法(Map結構類似于物件,也是鍵值對的集合,但是“鍵”的范圍不限于字串,各種型別的值(包括物件)都可以當作鍵,也就是說,Object結構提供了“字串—值”的對應,Map結構提供了“值—值”的對應,是一種更完善的Hash結構實作,如果你需要“鍵值對”的資料結構,Map比Object更合適,):
let x = {
name:'張三',
age:18,
[Symbol('name')]:'李四'
}
console.log(x) //{name: "張三", age: 18, Symbol(name): "李四"}
?Map.size:屬性回傳Map結構的成員總數,
let x = new Map([
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
console.log(x.size) //4
?Map.set(key,value):設定鍵名key對應的鍵值為value,然后回傳整個Map結構,如果key已經有值,則鍵值會被更新,否則就新生成該鍵,
let x = new Map([
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
x.set('新鄉', '小雨')
console.log(x) //{"鄭州" => "晴天", "洛陽" => "陰天", "開封" => "晴天", "東京" => "海嘯", "新鄉" => "小雨"}
x.set('鄭州', '晴轉多云')
console.log(x) //{"鄭州" => "晴轉多云", "洛陽" => "陰天", "開封" => "晴天", "東京" => "海嘯", "新鄉" => "小雨"}
?Map.get(key):get方法讀取key對應的鍵值,如果找不到key,回傳undefined,
let x = new Map([
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
console.log(x.get('鄭州')) //晴天
console.log(x.get('許昌')) //undefined
?Map.has(key):has方法回傳一個布林值,表示某個鍵是否在當前Map物件之中,
let x = new Map([
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
console.log(x.has('鄭州')) //true
?Map.delete(key):delete方法洗掉某個鍵,回傳true,如果洗掉失敗,回傳false,
let x = new Map([
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
x.delete('鄭州') //{"洛陽" => "陰天", "開封" => "晴天", "東京" => "海嘯"}
console.log(x)
?Map.clear():clear方法清除所有成員,沒有回傳值,
let x = new Map([
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
x.clear() // 清空
console.log(x)
?Map.keys():回傳鍵名的遍歷器,
for(let i of x.keys()){
console.log(i,x.get(i))
}
?Map.values():回傳鍵值的遍歷器,
for(let i of x.values()){
console.log(i)
}
?Map.entries():回傳所有成員的遍歷器,
for(let [i,j] of x.entries()){
console.log(i,j)
}
?Map.forEach():遍歷Map的所有成員,
x.forEach(function(value,key,map){
console.log(value,key)
})
小結
給你這樣一個 Map結構
{“a”=>1,“b”=>2,“c”=>1}
轉換為
{1=>[“a”,“c”],2=>[“b”]}
let x = new Map([
['許昌', '陰天'],
['鄭州', '晴天'],
['洛陽', '陰天'],
['開封', '晴天'],
['東京', '海嘯']
]);
console.log(x)
function change(map) {
let temp = new Map();
for (let i of new Set(map.values())) {
temp.set(i, [])
}
for (let [i, j] of map) {
temp.get(j).push(i)
}
return temp
}
console.log(change(x))
console.log(change(x).get('晴天'))
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/203348.html
標籤:其他
下一篇:Vue入門案例:TodoList
