es6中一些不一樣的地方
阿新 • • 發佈:2019-03-05
作用 win 相對 {} map UNC 數組 通過 value
一、定義變量
1、let
以前定義變量都是var,相對於var,let定義變量有其特殊的地方:
1.let沒有聲明提前
2.以前只有全局和函數,這裏多了一個塊級作用域 {}
3.var如果重復聲明,後面會覆蓋前面,現在,let不允許重復聲明
2、const
const用來定義常量,一次定義,後面不可以修改。
就算提前聲明後面賦值也是不能進行修改的,聲明的時候其值就已經為undefined,不能修改。
const a; a = 100;
二、字符串的拼接
以前我們字符串拼接" "+ +" ",而且進行換行等操作會異常麻煩,不換行在一行內又很難看清。
es6裏面字符串拼接``就省去了很多麻煩,可以進行換行操作且沒有影響,中間添加變量直接用${}不用"+"連接,修改起來也很方便。
str += `<ul> <li>${uname}</li> <li>nan</li> <li>18</li> <li>150123456878</li> <li>[email protected]</li> </ul>`
三、數組的復制
... 超引用
我們用原來的方法復制一個數組,對復制出來的數組進行修改會改動原有數組。
var arr = [1,2,3,4,5]; var arr2 = arr; arr2.push(6); console.log(arr); console.log(arr2)
es6中用...超引用就可以復制一個數組並進行相應的修改。
var arr4 = [...arr]; arr4.push(6) console.log(arr); console.log(arr4)
四、解構賦值
讓賦值變得簡單,
// 讓你的賦值變得更簡單,方便 var a = 10; var b = 20; var c = 30; var a = 10,b = 20,c = 30; console.log(a,b,c) 解構,數組的格式 var [a,b,c] = [40,20,30]; console.log(a,b,c) json格式 var {a,b,c} = {a:10,c:30,b:20}; //可以調換順序 console.log(a,b,c); var [a,[b,c],d] = [5,[10,20],30]; //格式對應即可 console.log(a,b,c,d) // 解構 var [{a,b},c,[d,e],f] = [{b : "jack",a : "100"},5,[10,20],30]; console.log(a,b,c,d,e,f)
五、循環
先回顧一下es5中的循環:
for 遍歷數組
for in 遍歷obj
for each 遍歷obj
es6中的for of 循環,語法跟for in相同:
var arr = ["red","green","blue","yellow","black"]; for(var i = 0;i < arr.length;i++){ console.log(arr[i]); } for(var i in arr){ console.log(i); //輸出的是索引 console.log(arr[i]); } for(var i of arr){ console.log(i); //輸出的直接是值 }
但是,for of不能用來遍歷obj:
var json = { "a" : "black", "b" : "grenn", "c" : "yellow", "d" : "red", "e" : "blue" } for(var name of json){ //for of 循環不能用來遍歷obj console.log(name); //err }
六、Map對象
// map就是用來存東西的,跟obj類似 var map = new Map(); // console.log(map); map.abc = "jack"; map.age = "100"; console.log(map); // 設置值 增 該 map.set("a","red"); map.set("b","green"); // console.log(map) //查 console.log(map.abc); console.log(map.get(‘a‘)); // 刪除 delete map.abc; delete map.a; map.delete("a"); console.log(map)
另外,Map對象可以通過for of進行遍歷:
var map = new Map(); map.set("a","red"); map.set("b","green"); map.set("c","blue"); map.set("d","yellow"); map.set("e","black"); for(var index of map.entries()){ //全寫 console.log(index); } // 只想循環key for(var key of map.keys()){ console.log(key); } // 只想循環value for(var value of map.values()){ console.log(value); }
七、箭頭函數
es6裏面的箭頭函數除了寫法不同外,比較需要註意的點就在不能用this,也不能用arguements:
var box = document.getElementById("box"); // box.onclick = function(){ // fun(); // } // function fun(){ // this.style.background = ‘#f00‘; // } box.onclick = () => { this.style.background = ‘#f00‘; } // function fun(){ // console.log(arguments); // } var fun = () => { console.log(arguments); } fun(1,2,3,4) // 註意的地方 // 1.不能用this,箭頭函數中的this指向window // 2.不能使用arguments
八、原型
在ES6以前,必須有類和構造,在ES6以前是沒有類的概念,構造函數即是構造,也是類、到了ES6,就將其完全劃分開了:
// class 類 // constructor 構造函數 class Person{ //類 constructor(name,age){ //構造 this.name = name; this.age = age; } showName(){ return this.name; } showAge(){ return this.age; } } var person = new Person("jack",18); // var person2 = new Person("mack",20); // console.log(person.showName === person2.showName) // console.log(person.constructor === Person) // 繼承 // class Student extends Person{}; // var student = new Student("mack",50); // console.log(student); class Student extends Person{ constructor(name,age,pid){ // this.name = name; // this.age = age; super(name,age); this.pid = pid; } showPid(){ return this.pid; } } var student = new Student("mack",50,"00001"); console.log(student);
es6中一些不一樣的地方