[ ES6 ] 快速掌握常用 ES6 (二)
本篇文章是對之前文章的一個補充,可以使 JavaScript 代碼更簡潔
函數
- 參數默認值
在 JavaScript 傳統語法中如果想設置函數默認值一般我們採用判斷的形式
function example (a,b,c) {
a = a|'string';
b = b|'number';
c = c|'json';
console.log(a);
console.log(b);
console.log(c); // 'string' 'number' 'json'
}
在新的語法中我們可以在參數聲明的同時賦予默認值
function example (a = 'string',b = 'number',c = 'json') {
console.log(a);
console.log(b);
console.log(c); // 'string' 'number' 'json'
}
- 參數展開
在 JavaScript 傳統語法中如果不確定參數的數量,並且想獲取所有的參數,一般使用 arguments (函數自帶的變量,數組類型,存放所有的參數)
function example (){
console.log(arguments);
}
在新的語法中我們可以在參數聲明的同時賦予默認值
function example (...oVar){
console.log(oVar);
}
還可以結合結構賦值,實現不用按順序傳遞參數
function (...opaction){
let {url,type,succ,err} = opaction;
if(!url){
return false;
}else{
console.log(url);
console.log(type);
console.log(succ);
console.log(err);
}
}
數組
- map() 方法創建一個新數組,然後每次從開始給回調函數傳遞一個原來數組的成員,直到結束
let oArray = [5, 7, 1, 56];
const oMap = array1.map(x => x * 3);
console.log(oArray);// Array [15, 21, 3, 168]
//映射: 一個對一個
- reduce() 方法接收一個函數作爲累加器(升序執行),最終計算爲一個值
var numbers = [1, 2, 3, 4];
function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum)); // 10
//彙總:一堆 返回 一個
- filter() 方法創建一個新的數組,新數組中的元素是回調函數中符合條件的所有元素。
var ages = [95, 59, 18, 21];
function checkAdult(age) {
return age >= 60;
}
console.log(ages.filter(checkAdult));// 95
//過濾:一堆 返回 部分
- forEach() 方法調用數組的每個元素,並將元素傳遞給回調函數
//遍歷: 以上的都可以通過 forEach() 來手動實現,並且可以實現更加個性的自定義操作
var array1 = ['a', 'b', 'c'];
array1.forEach(element => {
console.log(element);
});// a b c
- Array.from() 方法用於將兩類對象轉爲真正的數組:類似數組的對象(array-like object)和可遍歷(iterable)的對象
//常見的類似數組的對象是 DOM 操作返回的 NodeList 集合,以及函數內部的 arguments 對象
// NodeList對象
let ps = document.getElementsByClassName('p');//所有取到的 dom 元素都是 NodeList 格式,不是真正意義上的數組
Array.from(ps).filter(p => {
return p.textContent.length > 9;//先用 from() 將所有取到的 p 標籤轉換爲真正的數組 然後過濾掉前十個
});
// arguments對象
function foo() {
var args = Array.from(arguments);
// arguments 也不是真正意義上的數組
}
json
關於什麼是 json 這裏不過多介紹,主要看看 ES6 裏 json 是怎樣的
- key and value
當鍵名和鍵值是一樣的情況下可以只寫一個,在引入組件與庫中特定方法時,可以看到(關於如何引入其他文件,將在之後的文章寫)
//傳統
{
name: name,
}
//ES6
{
name
}
- function
如果在之前瞭解過微信小程序,vue ,或者將要學習那麼應該會經常看到這兩種函數的寫法
{
onLoad() {
butClick() {
return false;
}
}
methods: {
butClick() {
return false;
}
}
}
但是如果不用框架,寫這樣的代碼,會報錯
這是因爲框架其實可以看做一個函數,上面這種代碼是傳遞給函數的參數(這個參數的接收方法在本篇文章的開頭)
這個參數是以 json 對象的形式傳遞的,
而 ES6 中當 value 旳值是一個函數時可以省略冒號和 function 關鍵字
//傳統 json
{
butClick: function (){
return false;
}
}
//ES6 json
{
butClick() {
return false;
}
}
本系列文章僅適合快速入門,想深入學習的小夥伴可以看看阮一峯老師的《ECMAScript 6 入門》
[ ES6 ] 快速掌握常用 ES6 (一)
[ ES6 ] 快速掌握常用 ES6 (二)