本文介紹一些ES6的新語法可將代碼化繁爲簡

時間 2019-11-25

原文原文鏈接

廢話很少說，直接上代碼，看註釋便可html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/*
* ES6的一些好玩的東西
*/
//一、ES6提供了新的數據結構Set
let arr = [1,2,3];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr);
//二、Object.assign()是ES6提供的對象的拓展方法，用於對象的合併拷貝
let obj1 = {"name":"lbp"};
let obj2 = {"age":"22"};
let obj3 = Object.assign({},obj1,obj2);
console.log(obj3);
//三、map()。方法用於遍歷數組，有返回值，能夠對數組的每一項進行操做並生成一個新的數組。有時候能夠代替for和forEach循環，簡寫代碼
let arr3 = [1,2,3,4,5];
let newArr3 = arr3.map((k,v)=>k*10);
console.log(newArr3);
//四、filter()方法一樣用於遍歷數組，過濾數組，在每一項元素後面觸發一個回調函數。經過判斷，保留或者移除當前項，最後返回一個新的數組
let arr4 = [1,2,3,4,5,6];
let newArr4 = arr4.filter((k,v)=>k%2==0);
console.log(newArr4);
//五、some方法用於遍歷數組，在每一項元素後面觸發一個回調函數，只要一個知足條件就返回true，不然返回false，相似於 || .
let arr5 = [{result:true},{result:false}];
let newArr5 = arr5.some((k,v)=>k.result);
console.log(newArr5);
//六、every()。every方法用於遍歷數組。在每一項元素後面觸發一個回調函數，只要一個不知足條件就返回false，不然返回true。相似於 &&
let arr6 = [{result:true},{result:false}];
let newArr6 = arr6.every((k,v)=>k.result);
console.log(newArr6);
//七、~~運算符.~符號用在Javascript中有按位取反的做用，~~是取反二次，而位運算符的操做值要求是證書，其結果也是整數，因此通過位運算符的都會自動變成整數，能夠巧妙的去掉小數部分，相似於ParseInt()
let a = 1.23;
let b = -1.23;
console.log(~~a);
console.log(~~b);
//八、||運算符。巧妙滴使用||運算符能夠給變量設置默認值
let c = 1;
let d = c||2;
console.log(d);
//九、...運算符。...運算符是ES6中用於解析數組的方法，能夠用於快速獲取數組的參數
let [num1,...nums] = [1,2,3];
console.log(num1);
console.log(nums);
//十、三元運算符。能夠簡化if else的寫法
let e = true,
f = '';
if (e) {
f = "man";
}else{
f = "woman";
}
//等同於
f = e?"man":"womn";
console.log(f);
</script>
</head>
<body>
</body>
</html>