這篇文章主要是記錄ES6的基礎(chǔ)知識倦炒，將長期更新丈挟。
ES6的開發(fā)環(huán)境搭建
初始化項目
在安轉(zhuǎn)Babel之前刁卜，需要用npm init先初始化項目
npm init -y
注意，-y是默認(rèn)的意思曙咽，當(dāng)然也可以自己輸入蛔趴。命令執(zhí)行結(jié)束后，會在項目根目錄下生產(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選項
"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
簡化轉(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]
對象的解構(gòu)賦值
let {firstName,lastName} = {firstName:'Gping',lastName:'Feng'}
字符串解構(gòu)
字符串也可以解構(gòu)烁竭，這個時候字符串被轉(zhuǎn)換成為了類似數(shù)組的的對象
const [a,b,c,d] = "Gpin";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
擴(kuò)展運(yùn)算符和reset運(yùn)算符
對象擴(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
可以傳入多個值菲茬，并且就算方法中引用多了也不會報錯。
之前存在的問題：
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);
這個時候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ù)字驗證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驗證
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ù)組知識
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()實例方法
let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 5;
}))
fill()方法實例
它接收三個參數(shù)，第一個參數(shù)是填充的變量痊剖，第二個是開始填充的位置韩玩，第三個是填充到的位置。
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'));
