這篇文章主要是記錄ES6的基礎(chǔ)知識(shí)，將長(zhǎng)期更新。

ES6的開發(fā)環(huán)境搭建

初始化項(xiàng)目

在安轉(zhuǎn)Babel之前，需要用npm init先初始化項(xiàng)目

npm init -y

注意，-y是默認(rèn)的意思，當(dāng)然也可以自己輸入。命令執(zhí)行結(jié)束后，會(huì)在項(xiàng)目根目錄下生產(chǎn)package.json文件

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

全局安轉(zhuǎn)Babel-cli

npm install  -g babel-cli

本地安裝babel-preset-es2015和babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

package.json文件，已經(jīng)多了devDependencies選項(xiàng)

 "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

新建.babelrc

在根目錄下，新建.babelrc

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

新建好之后，可以在終端輸入命令

babel src/index.js -o dist/index.js

簡(jiǎn)化轉(zhuǎn)化命令

打開package.json文件，把文件修改成下面的樣子。注意下面scriptsz中的代碼。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

新的聲明

var
const
let

變量的解構(gòu)賦值

數(shù)組的解構(gòu)賦值

之前的代碼：

let a=0;
let b=1;
let c=2;

現(xiàn)在：

let[a,b,c] = [1,2,3]

對(duì)象的解構(gòu)賦值

let {firstName,lastName} = {firstName:'Gping',lastName:'Feng'}

字符串解構(gòu)

字符串也可以解構(gòu)，這個(gè)時(shí)候字符串被轉(zhuǎn)換成為了類似數(shù)組的的對(duì)象

const [a,b,c,d] = "Gpin";
console.log(a);
console.log(b);
console.log(c);
console.log(d);

擴(kuò)展運(yùn)算符和reset運(yùn)算符

對(duì)象擴(kuò)展運(yùn)算符

function simpleFun(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
jspang(1,2,3);//1,2,3undefined

可以傳入多個(gè)值，并且就算方法中引用多了也不會(huì)報(bào)錯(cuò)。
之前存在的問題：

let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr1);
//輸出如下
["www", "jspang", "com"]
["www", "jspang", "com", "shengHongYu"]

修改：

let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);

這個(gè)時(shí)候arr 1并沒有變化，sixsixsix

reset運(yùn)算符

字符串模板

之前的ES5寫法：

let jspang='技術(shù)胖';
let blog = '非常高興你能看到這篇文章，我是你的老朋友'+jspang+'。這節(jié)課我們學(xué)習(xí)字符串模版。';
document.write(blog);

現(xiàn)在的寫法：

let jspang='技術(shù)胖';
let blog = `非常高興你能看到這篇文章，我是你的老朋友${jspang}。這節(jié)課我們學(xué)習(xí)字符串模版。`;
document.write(blog);

字符串查找

Es5

let jspang='技術(shù)胖';
let blog = '非常高興你能看到這篇文章，我是你的老朋友技術(shù)胖。這節(jié)課我們學(xué)習(xí)字符串模版。';
document.write(blog.indexOf(jspang));

Es6

let jspang='技術(shù)胖';
let blog = '非常高興你能看到這篇文章，我是你的老朋友技術(shù)胖。這節(jié)課我們學(xué)習(xí)字符串模版。';
document.write(blog.includes(jspang));

判斷是否開頭存在：

blog.startsWith(jspang);

判斷結(jié)尾是否存在

blog.endsWith(jspang);

Es6的數(shù)字操作

二進(jìn)制和八進(jìn)制

let 0B010101;//開始是0，第二是B
let 0o5656;//開始也是0（零），第二是o

數(shù)字判斷和轉(zhuǎn)換

數(shù)字驗(yàn)證Number.isFinite(XX)

let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false

NaN驗(yàn)證

console.log(Number.isNaN(NaN));//true

判斷是否是整數(shù)

let a = 234.4;
console.log(Number.isInteger(a));//false

parseInt()和parseFloat()

let a = 3.423;
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));

Es6中新增的數(shù)組知識(shí)

JSON格式的轉(zhuǎn)換

將JSON轉(zhuǎn)換成了Array

let  json = {
    '0': 'jspang',
    '1': '技術(shù)胖',
    '2': '大胖逼逼叨',
    length:3
}
 
let arr=Array.from(json);
console.log(arr)

Array.of()方法

let arr =Array.of(3,4,5,6);
console.log(arr);
let arr =Array.of('技術(shù)胖','jspang','大胖逼逼叨');
console.log(arr);

find()實(shí)例方法

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

fill()方法實(shí)例

它接收三個(gè)參數(shù)，第一個(gè)參數(shù)是填充的變量，第二個(gè)是開始填充的位置，第三個(gè)是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr);

數(shù)組的遍歷

for...of

let arr=['jspang','技術(shù)胖','大胖逼逼叨']
 
for (let item of arr){
    console.log(item);
}

數(shù)組索引：

let arr=['jspang','技術(shù)胖','大胖逼逼叨']
for (let index of arr.keys()){
    console.log(index);
}

數(shù)組索引以及內(nèi)容：

let arr=['jspang','技術(shù)胖','大胖逼逼叨']
for (let [index,val] of arr.entries()){
    console.log(index+':'+val);
}

ES6箭頭函數(shù)

ES5

function add(a,b){
    return a+b;
}
console.log(add(1,2));

ES6
默認(rèn)值

function add(a,b=1){
    return a+b;
}
console.log(add(1));

箭頭函數(shù)

var add =(a,b=1) => a+b;
console.log(add(1));

var add =(a,b=1) => {
    console.log('jspang')
    return a+b;
}
console.log(add(1));

ES6中的函數(shù)和數(shù)組補(bǔ)漏

數(shù)組轉(zhuǎn)換成字符串

join()方法

let arr=['jspang','技術(shù)胖','前端教程'];
console.log(arr.join('|'));

toString()

let arr=['jspang','技術(shù)胖','前端教程'];
console.log(arr.toString());

數(shù)組中的遍歷方法

1.forEach

let arr=['jspang','技術(shù)胖','前端教程']; 
arr.forEach((val,index)=>console.log(index,val));

2.filter

let arr=['jspang','技術(shù)胖','前端教程'];
arr.filter(x=>console.log(x));

3.some

let arr=['jspang','技術(shù)胖','前端教程'];
arr.some(x=>console.log(x));

4.map

let arr=['jspang','技術(shù)胖','前端教程'];
console.log(arr.map(x=>'web'));