[ ES6 ] 快速掌握常用 ES6 （二）

hidogs 發(fā)布于2019-08-23 14:07 / 2275人閱讀

摘要：本系列文章適合快速掌握入門(mén)語(yǔ)法，想深入學(xué)習(xí)的小伙伴可以看看阮一峰老師的入門(mén)本篇文章是對(duì)之前文章的一個(gè)補(bǔ)充，可以使代碼更簡(jiǎn)潔函數(shù)參數(shù)默認(rèn)值在傳統(tǒng)語(yǔ)法中如果想設(shè)置函數(shù)默認(rèn)值一般我們采用判斷的形式在新的語(yǔ)法中我們可以在參數(shù)聲明的同時(shí)賦予默認(rèn)值參數(shù)

本系列文章適合快速掌握 ES6 入門(mén)語(yǔ)法，想深入學(xué)習(xí) ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門(mén)》
本篇文章是對(duì)之前文章的一個(gè)補(bǔ)充，可以使 JavaScript 代碼更簡(jiǎn)潔

函數(shù)

參數(shù)默認(rèn)值

在 JavaScript 傳統(tǒng)語(yǔ)法中如果想設(shè)置函數(shù)默認(rèn)值一般我們采用判斷的形式

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"
}

在新的語(yǔ)法中我們可以在參數(shù)聲明的同時(shí)賦予默認(rèn)值

function example (a = "string",b = "number",c = "json") {
    console.log(a);
    console.log(b);
    console.log(c); // "string" "number" "json"
}

參數(shù)展開(kāi)

在 JavaScript 傳統(tǒng)語(yǔ)法中如果不確定參數(shù)的數(shù)量，并且想獲取所有的參數(shù)，一般使用 arguments （函數(shù)自帶的變量，數(shù)組類型，存放所有的參數(shù)）

function example (){
    console.log(arguments);
}

在新的語(yǔ)法中我們可以使用三個(gè)點(diǎn) ... 表示接收全部參數(shù)

function example (...oVar){
    console.log(oVar);
}

還可以結(jié)合解構(gòu)賦值，實(shí)現(xiàn)不用按順序傳遞參數(shù)

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);
    }
}

數(shù)組

map() 方法創(chuàng)建一個(gè)新數(shù)組，然后每次從開(kāi)始給回調(diào)函數(shù)傳遞一個(gè)原來(lái)數(shù)組的成員，直到結(jié)束

let oArray = [5, 7, 1, 56];
const oMap = oArray .map(x => x * 3);
console.log(oMap);//  Array [15, 21, 3, 168]
//映射： 一個(gè)對(duì)一個(gè)

reduce() 方法接收一個(gè)函數(shù)作為累加器(升序執(zhí)行)，最終計(jì)算為一個(gè)值

var numbers = [1, 2, 3, 4];
 
function getSum(total, num) {
    return total + num;
}
console.log(numbers.reduce(getSum)); // 10
//匯總：一堆 返回 一個(gè)

filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是回調(diào)函數(shù)中符合條件的所有元素。

var ages = [95, 59, 18, 21];

function checkAdult(age) {
    return age >= 60;
}

console.log(ages.filter(checkAdult));// 95 

//過(guò)濾：一堆 返回 部分

forEach() 方法調(diào)用數(shù)組的每個(gè)元素,并將元素傳遞給回調(diào)函數(shù)

//遍歷： 以上的都可以通過(guò) forEach() 來(lái)手動(dòng)實(shí)現(xiàn)，并且可以實(shí)現(xiàn)更加個(gè)性的自定義操作
var array1 = ["a", "b", "c"];

array1.forEach(element => {
  console.log(element);
});// a b c

Array.from() 方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對(duì)象（array-like object）和可遍歷（iterable）的對(duì)象

//常見(jiàn)的類似數(shù)組的對(duì)象是 DOM 操作返回的 NodeList 集合，以及函數(shù)內(nèi)部的 arguments 對(duì)象

// NodeList對(duì)象
let ps = document.getElementsByClassName("p");//所有取到的 dom 元素都是 NodeList 格式，不是真正意義上的數(shù)組
Array.from(ps).filter(p => {
  return p.textContent.length > 9;//先用 from() 將所有取到的 p 標(biāo)簽轉(zhuǎn)換為真正的數(shù)組 然后過(guò)濾掉前十個(gè)
});

// arguments對(duì)象
function foo() {
  var args = Array.from(arguments);
  // arguments 也不是真正意義上的數(shù)組
}

~~json~~ JavaScript對(duì)象字面量

關(guān)于什么是 json 這里不過(guò)多介紹，主要看看 ES6 里 ~~json~~ JavaScript對(duì)象字面量是怎樣的
很多JavaScript開(kāi)發(fā)人員都錯(cuò)誤地把JavaScript對(duì)象字面量（Object Literals）稱為JSON對(duì)象（JSON Objects）包括我自己
在這里推薦一篇文章,感謝那些幫我指出錯(cuò)誤并告訴我正確知識(shí)的人，謝謝

key and value

當(dāng)鍵名和鍵值是一樣的情況下可以只寫(xiě)一個(gè)，在引入組件與庫(kù)中特定方法時(shí)，可以看到（關(guān)于如何引入其他文件，將在之后的文章寫(xiě)）

//傳統(tǒng)
{
    name: name,
}

//ES6
{
    name
}

function

如果在之前了解過(guò)微信小程序，vue ，或者將要學(xué)習(xí)那么應(yīng)該會(huì)經(jīng)常看到這兩種函數(shù)的寫(xiě)法

{
    onLoad() {
        butClick() {
            return false;
        }
    }
    
    methods: {
        butClick() {
            return false;
        }
    }
}

但是如果不用框架，寫(xiě)這樣的代碼，會(huì)報(bào)錯(cuò)
這是因?yàn)榭蚣芷鋵?shí)可以看做一個(gè)函數(shù)，上面這種代碼是傳遞給函數(shù)的參數(shù)（這個(gè)參數(shù)的接收方法在本篇文章的開(kāi)頭）
這個(gè)參數(shù)是以 json 對(duì)象的形式傳遞的，
而 ES6 中當(dāng) value 旳值是一個(gè)函數(shù)時(shí)可以省略冒號(hào)和 function 關(guān)鍵字

//傳統(tǒng) 
{
    butClick: function (){
        return false;
    }
}

//ES6 
{
    butClick() {
        return false;
    }
}

[ ES6 ] 快速掌握常用 ES6 （一）
[ ES6 ] 快速掌握常用 ES6 （二）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100109.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hidogs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五#EuroHoster：vps服務(wù)器70%優(yōu)惠，獨(dú)立服務(wù)器30%優(yōu)惠，荷蘭機(jī)房/保加利亞機(jī)房，

閱讀 3029·2021-11-24 10:32
Gartner：2022年全球云收入將增至4740億美元

閱讀 687·2021-11-24 10:19
寶塔面板+docker搭建Poste.io郵件服務(wù)器

閱讀 5133·2021-08-11 11:17
深入nodejs-核心模塊Events詳解（事件驅(qū)動(dòng)）

閱讀 1467·2019-08-26 13:31
JavaScript異步基礎(chǔ)

閱讀 1267·2019-08-23 15:15
vue-cli中vuex IE兼容

閱讀 2293·2019-08-23 14:46
[ ES6 ] 快速掌握常用 ES6 （二）

閱讀 2276·2019-08-23 14:07
H5(移動(dòng)端)前端使用input type=file 上傳圖片，調(diào)用相機(jī)和相冊(cè)

閱讀 1095·2019-08-23 14:03

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[ ES6 ] 快速掌握常用 ES6 （二）

相關(guān)文章

**[ ES6 ] 快速掌握常用 ES6 （一）**

ES6-7

**前端基礎(chǔ)進(jìn)階（十四）：es6常用基礎(chǔ)合集**

快速掌握JavaScript面試基礎(chǔ)知識(shí)(二)

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

發(fā)表評(píng)論

0條評(píng)論

hidogs

男|高級(jí)講師

TA的文章

#黑五#EuroHoster：vps服務(wù)器70%優(yōu)惠，獨(dú)立服務(wù)器30%優(yōu)惠，荷蘭機(jī)房/保加利亞機(jī)房，

Gartner：2022年全球云收入將增至4740億美元

寶塔面板+docker搭建Poste.io郵件服務(wù)器

深入nodejs-核心模塊Events詳解（事件驅(qū)動(dòng)）

JavaScript異步基礎(chǔ)

vue-cli中vuex IE兼容