前端(七)：ES6一些新特性
阿新 • • 發佈：2018-07-17
堆內存 btn The 自己 一次 至少 pytho 不同的 title
一、變量
1.var關鍵字的弊端
var關鍵字的弊端：1.可以重復聲明變量；2.無法限制變量修改；3.沒有會計作用域，只有函數作用域。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按鈕1">
<input type="button" value="按鈕2">
<input type="button" value="按鈕3">
<script>
var oBtn = document.getElementsByTagName("input");
for(var i=0; i< oBtn.length; i++){
oBtn[i].onclick = function () {
alert(i); // 三個按鈕都是3
}
}
// 點擊按鈕alert出來的都是3。因為事件沒觸發時，for循環已經遍歷結束，當事件觸發時i的值已經是3了。
</script>
</body>
</html>
慣用的解決辦法是將onclick寫進一個匿名函數。
for(var i=0; i< oBtn.length; i++){
(function (i) {
oBtn[i].onclick = function () {
alert(i); // 三個按鈕都是3
}
})(i);
}
2.let和const關鍵字
let和const關鍵字使得變量不可以被重復聲明，且變量具有塊級作用域。不同的是，let用來聲明變量，const用來聲明常量(不可被修改的常量)。
註：在Java中，Java: int a = 123; int a = 12; 報錯，變量不可以重復聲明，因為它存在堆內存中，變量直接代表一塊內存空間。而對象的值存在堆中，變量實際上這個對象的引用。js的var同樣應遵循這樣的規則。
// let寫法
for(let i=0; i< oBtn.length; i++){
oBtn[i].onclick = function () {
alert(i); // 三個按鈕都是3
}
}
二、數組
1.解構賦值
let arr = [1, 2, 3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
// 等價於
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
let {l, m, n} = {l: 1, m:2, n:3};
console.log(l, m, n);
let [x, y, z] = [{p1: 123, p2: 234}, [345, 456], 789];
console.log(x, y, z);
let [{p11, p12}, [p21, p22], p31] = [{p11: 123, p12: 234}, [345, 456], 789];
console.log(p11, p12, p21, p22, p31);
註意，當右側是一個json數據時，左側相應的變量必須與其鍵名對應。
2、新增map、reduce、filter、forEach函數
常見的數組操作函數。
// map: 用給定的映射遍歷數組，不改變原數組，生成新數組；
let arr = [12, 58, 99, 86, 45, 21];
let newArr = arr.map(item=>item>=60?"及格":"不及格");
console.log(arr, newArr);
// reduce: 遍歷累加
let sum = arr.reduce((item1, item2, index)=>item1+item2); // index表示下標，這裏可不寫
console.log(sum);
// filter: 過濾器
let filter = arr.filter(item=>item<=60);
console.log(filter);
let arr2 = [
{title: "奔馳", price: 20},
{title: "寶馬", price: 35},
{title: "路虎", price: 30},
{title: "特斯拉", price: 40},
{title: "大眾", price: 15},
{title: "標致", price:15},
];
let filter2 = arr2.filter(item=>item.price >=30);
console.log(filter2);
// forEach 循環遍歷
let newArr2 = arr.forEach((item, index)=>console.log(item, index));
newArr2; // 沒有返
三、字符串
1.新增startswith和endswith
let str = "http://www.baidu.com";
if(str.startsWith("https")){
console.log("加密網址");
}else if(str.startsWith("http")){
console.log("普通網址");
}
let str2 = "[email protected]";
if(str2.endsWith("163.com")){
console.log("163郵箱");
}else if(str2.endsWith("qq.com")){
console.log("qq郵箱");
}
2.模板字符串
用返單引號(``)包裹的字符串，其中的變量可以用${}來替換。它可以寫多行字符串。
let title="標題", content="內容";
let str = `
<div><h1>${title}</h1><p>${content}</p></div>
`;
alert(str);
四、函數
1.箭頭函數
箭頭函數是函數的一種簡寫。
let show = function () {
console.log("what the hell?")
};
show();
// es6寫法
let newShow = ()=>{
console.log("what the hell?")
};
newShow();
帶參數的寫法。如果參數只有一個，那麽()可以省略。
let alt = a=>{console.log(a*10)};// 單個參數
let add = (a, b) => {console.log(a + b);
}; // 兩個參數
add(3,5);
如果函數只有一個返回值，那麽{}省略。
let arr = [12, 234, 345, 64, 23, 87];
arr.sort(function (n1, n2) { return n1 - n2 });
// 簡寫為
arr.sort((n1, n2) =>n1 - n2);
console.log(arr);
2.默認參數
可以像python那樣在函數定義時設置默認參數的值。並且可以通過...args來展開元素，同樣類似python的*args。
function show2(a, b=4, c=123) {
console.log(a, b, c);
}
show2(7);
function show(a, b, ...args) {
console.log(a + b);
console.log(args); // 剩余的寫進...args數組裏，必須寫在最後
}
show(3, 5, 7, 9, 11);
...args甚至可以拆解數組。
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
五、json
如果鍵名和值一致，那麽鍵名可以省略。
let a=123;
let b=456;
// 當名字和值一樣時可以簡寫
let json1 = {a, b}; // 等價於let json1 = {a: a, b: b}
let json2 = {
a,
b,
show(item){
console.log(item)
} // 等價於 show: function(){console.log(item};
};
json2.show(json2.a);
六、類
相比函數構造類的外掛式寫法，添加了class和constructor來聲明類和構造函數。
// 聲明
class Person{
constructor(name, gender){
this.name = name;
this.gender = gender;
}
showName(){
console.log(this.name);
}
showGender(){
console.log(this.gender);
}
}
var sun = new Person("孫悟空", "male");
sun.showName();
sun.showGender();
// 繼承
class Child extends Person{
constructor(name, gender, age){
super(name, gender);
this.age = age;
}
showAge(){
console.log(this.age);
}
}
var child = new Child("小猴子", "male", 12);
child.showAge();
七、promise
用同步的寫法來管理異步。
function createPromise(url) {
return new Promise(function (resolve, reject) {
$.ajax({
url, // url: url
dataType: ‘json‘,
success(arr){ resolve(arr);},
error(arr){vreject(arr);}
})
});
}
// 在當前目錄下創建arr.txt和json.txt文件
Promise.all([createPromise("arr.txt"), "json.txt"]).then(function (arr) {
alert("全都成功了!");
}, function (arr) {
alert("至少有一個失敗了!");
});
高版本的Jquery中，$.ajax本身就是promise對象，所以上面的代碼可簡寫為:
Promise.all([$.ajax({url:"arr.txt", dataType:"json"}), $.ajax({url: "json.txt", dataType: "json"})]).then(function (results) {
let [arr, json] = results;
// 分別處理自己的邏輯
console.log("全都成功了！");
console.log(arr, json);
}, arr=>alert("至少有一個失敗了!"));
八、generator-yield
生成器。惰性執行函數，和python中的生成器一致。
function *show() {
console.log("------1-----");
let a = yield 12;
console.log("------2-----");
console.log(a);
return a;
}
let gen = show();
let a = gen.next(123); // 當yield 後賦值時，第一次執行到yield時返回該值
let b = gen.next(456);
console.log(a, b); // a是一個json對象
前端(七)：ES6一些新特性