-----書接上文,前文中我們總結了關於JS的組成部分以及如何快速開展學習JS,相信已經有很多朋友掌握到這些方法。接下來就從更深的ECMAScript開始說起。
1.什麼是ES6?
ECMAScript(European Computer Manufacturers Association) 6: 是JavaScript語言的下一代標準,已經在2015年6月正式釋出了。Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。
簡單來說ES6在JS中的作用就是語言的標準。它裡面定義瞭如何去定義變數,如何寫函式,如何寫陣列....
相對於ES5來講ES6中多出來幾點新特性,而且普及速度相對於ES5來講要快很多,現在主流版本的瀏覽器如Chrome 和 Firefox 瀏覽器可以支援ES6中絕大多數特性。
接下來圍繞ES6的新特性開始說起。
2.ES6特性---量的宣告(let and const)
(1)使用Let宣告變數
前面說到,JS中宣告變數是通過 var 來宣告 var 是variable的簡寫。 variabel是變化的意思。
而在ES6中推薦使用let宣告區域性變數,相比於之前的var宣告的全域性變數,
使用Let宣告變數不會使變數提升:
console.log(b);
let b = 666; // b is not defined
複製程式碼
使用Let不能重複宣告:
let a =1;
let a =1; //Identifier 'a' has already been declared
複製程式碼
Let可以形成一個塊級作用域:
if (true){
var a = 100;
}
console.log(a);// a = 100
複製程式碼
if (true){
let a = 100;
}
console.log(a);// a is not defined
複製程式碼
(2)使用Const宣告常量
使用Const宣告常量不會使常量提升:
console.log(PI);
const PI = 3.14;// PI is not defined
複製程式碼
使用Const不能重複宣告:
const PI = 3.14;
PI = 666;//Assignment to constant variable
複製程式碼
Const可以形成一個塊級作用域:
{
const PI = 3.14;
}
console.log(PI);//PI is not defined
複製程式碼
總結一下:
相同點:Let與Const不會使量提升,不能重複宣告,都能形成塊級作用域。
不同點:Let宣告變數,Const宣告常量。
3.ES6特性---箭頭函式(Arrow Functions)
箭頭函式是函式的簡寫,是ES6中非常強大的簡寫形式。不需要 function 關鍵字來建立函式。省略 return 關鍵字。繼承當前上下文的 this 關鍵字(沒有自己的this)。
var f = function(a){
console.log(a);
}
//?
var f = (a)=>{
console.log(a);
}
//?
var f = a =>{
console.log(a);
}// 當引數只有一個的時候,()是可以省略的
複製程式碼
箭頭函式沒有自己的this,所以使用的時候要格外小心。
var obj = {
name: 'wsq',
getName() {
console.log(this.name);
}
}
obj.getName(); // wsq
var obj = {
name: 'wsq',
getName: () => {
console.log(this.name);
}
}
obj.getName(); // undefined
複製程式碼
4.ES6特性---模板字串(Template Literals)
允許嵌入表示式的字串字面量,可以使用多行字串和字串插值功能。
1.用${}來將表示式嵌入字串中進行拼接。
2.使用(``)進行包裹。
var name = 'wsq';
var aa = `test ${name} `;
console.log(aa); // test wsq
複製程式碼
5.ES6特性---函式的引數預設值
在ES6中,函式的引數預設值定義要更加簡單:
function print(key = 'hello') {
console.log(key);
}
print('f'); // f
print();// hello
複製程式碼
這說明了,在ES6中,JS的形參是可以有預設值的。
6.ES6特性---For...of
新的迴圈方式,代替之前的 for...in 和 forEach 方法。 可在可迭代物件(包括 Array,Map,Set,String,arguments 物件等等)進行迭代迴圈
for...of 遍歷陣列:
let root = ['a', 'b', 'c'];
for (let x of root) {
console.log(x);
} //a,b,c
複製程式碼
7.ES6特性---ES6中的類
前面我們都是建立構造器,然後去new構造器,構造器就相當於一個類,在ES6中,就可以使用Class來建立物件了。
不使用Class,去建立一個類,如下:
function man (name,age,height){
this.name = name;
this.age = age;
this.height = height;
}
man.prototype.say = function(){
console.log(`我是${this.name}`)
}
var p = new man("wsq","22","180");
console.log(p);
複製程式碼
使用Class,去建立一個類,如下:
class Man{
constructor(name,age,height){
this.name = name;
this.age = age;
this.height = height;
}
say(){
console.log(`我是${this.name}`)
}
}
var p1 = new Man("wsq","22","180");
console.log(p1.say());
複製程式碼
8.ES6特性---物件超類與繼承
ES6 允許在物件中使用 super 方法並使用Extends來實現繼承:
class Man{
constructor(name,age,height){
this.name = name;
this.age = age;
this.height = height;
}
say(){
console.log(`我是${this.name}`)
}
}
class MVP extends Man{
constructor(name,age,height,year){
super(name,age,height)
this.year = year;
}
showMVP(){
console.log(`我是${this.name},我是${this.year}年的MVP`)
}
}
var mvp1 = new MVP("wsq","22","180",2016);
mvp1.say();
mvp1.showMVP();
複製程式碼
9.ES6特性---物件擴充套件
(1)Obect.getOwnProertyDescriptor();
獲取一個物件中某個屬性的詳細資訊。
var a =1;
console.log(Object.getOwnPropertyDescriptor(window,"a"));//{value: 1, writable: true, enumerable: true, configurable: false}
複製程式碼
(2)Object.defineProperty();
精細化設定一個物件的屬性。
(3)Object.defineProperties() ;
直接在一個物件上定義新的屬性或修改現有屬性,並返回該物件。
var obj = {}
Object.defineProperties(obj,{
"name":{
configurable:false,
Writable:false,
enumerable:false,
value:"wsq"
},
"age":{
configurable:false,
Writable:false,
enumerable:false,
value:"66"
}
});
console.log(obj.name,obj.age);//wsq 66
複製程式碼
(4)getOwnPropertyNames();
獲取自的屬性,以陣列的格式返回。
var obj = {
name : "wsq",
age : 88
};
console.log(Object.getOwnPropertyNames(obj));//["name", "age"]
複製程式碼
(5)Object.keys();
使用Object.getOwnPropertyNames()和Object.keys()都可以得到一個物件的屬性名,屬性名是放在一個陣列中的。
var obj = {
name : "wsq",
age : 88
};
console.log(Object.keys(obj));//["name", "age"]
複製程式碼
(6)Object.values();
獲取物件的值,放到陣列中。
var obj = {
name : "wsq",
age : 88
};
console.log(Object.values(obj));//["wsq", 88]
複製程式碼
10.ES6特性---其他補充
(1)Set與Map
set和資料差不多,也是一種集合,區別在於:它裡面的值都是唯一的,沒有重複的。
const s = new Set();
arrSet.add(1); // Set(1) {1}
arrSet.add(2); // Set(2) {1, 2}
arrSet.add(2); // Set(2) {1, 2}
複製程式碼
map類似於物件,裡面存放也是鍵值對,區別在於:物件中的鍵名只能是字串,如果使用map,它裡面的鍵可以是任意值。
var m = new Map([
["a","hello"],
[1,"123"]
]);
m.set(false,"abc")
m.set([1,2,3]),{name:"wsq"}
console.log(m);//Map(4){"a" => "hello", 1 => "123", false => "abc", Array(3) => undefined}
複製程式碼
(2)Trim
除去字串空格的。
trim 左右空格去掉
trimLeft 左空格去掉
trimRight 右空格去掉
var str = " a abn abc "
str.trim();
/* "a abn abc"
str.trimLeft();
"a abn abc "
str.trimRight();
" a abn abc" */
複製程式碼
(3)Repeat
構造並返回一個新字串,該字串包含被連線在一起的指定數量的字串的副本。
var str = "12345"
console.log(str.repeat(5));//1234512345123451234512345
複製程式碼
(4)Includes
用來判斷一個字串是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。
/* var str = "abc dde";
str.includes("a")
true
str.includes("z")
false
str.includes("c d")
true
*/
複製程式碼
(5)StrartsWith
用來判斷一個字串是否是以指定內容開頭,根據情況,如果包含則返回 true,否則返回false。
/*
var str = "abc dde";
str.strartsWith("abc")
true
str.strartsWith("abdc")
false
*/
複製程式碼
(6)EndsWidth
用來判斷一個字串是否是以指定內容結尾,根據情況,如果包含則返回 true,否則返回false。
/*
var str = "abc dde";
str.endsWith("dde")
true
str.endsWith("abdc")
false
*/
複製程式碼
(7)PadStart
如果這個字串不夠指定長度,會在頭部補全。
/*
var str = "abc def"
str.padStart(15,"*")
"********abc def"
*/
複製程式碼
(8)PadEnd
如果這個字串不夠指定長度,會在尾部補全。
/*
var str = "abc def"
str.padStart(15,"*")
"abc def********"
*/
複製程式碼
關於ES6中的特性還有很多,本文僅僅是列舉出較為有特點的一部分來說,有不足之處歡迎大家在評論裡留言討論,僅 此以為謝。