// 箭頭函式
let f = a => a + 1;
// 等價於
var f = function(a) {
return a + 1;
}
// 模版字串
let a = 'react'
let s = `hello ${a}`; // hello react
// 解構賦值
let [lang, ...other] = ['js', 'java', 'react']; // js , ['java', 'react']
// 擴充套件運算子 合併陣列
let arr1 = ['a', 'a1'];
let arr2 = ['b'];
let newArr = [...arr1, ...arr2] // ['a', 'a1', 'b']
// 物件解構
let {
person: {
name,
age
},
foo
} = {
person: {
name: 'tom',
age: 4
},
foo: 'foo'
}
console.log(name, foo, age) // tom , foo , 4
// 預設值
let t = (a = 1) => a + 2
t(2) // 4
t() // 3
let o = '';
let temp = o || 1 // 1
// map用法
arr1.map(item => (
item
))
// filter
arr1.filter(item => (item != 'a')) // a1
// swap 變數值交換
let foo = 1
let bar = 2
;
[foo, bar] = [bar, foo] // foo = 2 , bar = 1
複製程式碼一、babel轉化
1.環境搭建：
建立目錄：
src：書寫ES6程式碼的資料夾，寫的js程式都放在這裡。
dist：利用Babel編譯成的ES5程式碼的資料夾，在HTML頁面需要引入的時這裡的js檔案。
(1)在專案資料夾 命令列初始化 npm init -y
(2)全域性安裝babel-cli npm install -g babel-cli
(3)本地安裝babel-preset-es2015 和 babel-cli :
npm install --save-dev babel-preset-es2015 babel-cli
(4)新建.babelrc
配置轉碼包:
"presets":[
"es2015"
],
"plugins":[]
}
複製程式碼在pakejson中配置轉碼命令：
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
//命令列執行npm run build 即可將js轉碼到dist資料夾
複製程式碼二、語法：
// ------------------1.變數的解構賦值--------------------------
// ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構
// *陣列解構
let [a, b, c] = [1, 2, 3]; //可以從陣列中提取值，按照位置的物件關係對變數賦值。
let [q, [w], e] = [1, [2], 3] //陣列模式和賦值模式統一：
let [t, y = 'js'] = ['技s']; //解構的預設值
console.log(t + y);
//*物件的解構賦值
let { foo, bar } = { foo: 'ss', bar: 'ee' };
// 物件的解構與陣列有的不同。陣列的元素是按次序排列的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。
let oop;({oop} = {oop:'slce'})// 如果在物件解構前定義了變數 再用此變數解構時會出錯，表示式外加()即可
//*字串解構
const [z,x,m,v,ll,n] = "JSPang";
//物件的函式解構
// 直接把這個JSON格式資料當作引數，傳遞到函式內部進行處理
{
let jsons = {
"pp":"aa",
"bb":"cc"
}
function lop ({pp,bb}) {
console.log(pp,bb)
}
lop(jsons);
}
//陣列的函式解構
{
let ayy = [88,77,55];
function ayys (a,b,c) {
console.log(a- b -c);
}
ayys(...ayy);
}
// ----------------------------------------2.擴充套件運算子和rest運算子（解決引數和物件陣列未知情況下的程式設計，讓程式碼更健壯和簡潔。）
//(1)傳入的引數不確定可以用...
function oop (...pl) {
console.log(pl);
}
oop(1,2,3,4);
//(2)解決對記憶體堆疊的引用，真正的賦值(用物件擴充套件運算子解決)原理是用[].concat(_a)
let a = [1];
let b = a; //對記憶體堆疊的引用，不是真正的賦值
b.push(2);
console.log(a) //[1,2]
{
let a = [1];
let b = [...a];
b.push(2);
console.log('...解決變數的賦值' + a + "---" +b);
}
//reset運算子可以用做實參(代替它前面的實參所對應的形參所後面剩餘的形參) 返回array型別
function rest (o,l,...p) {
console.log(p);
}
rest(2,4,6,8,0);
document.write('jdf'.repeat(3));//複製3個字串
//---------------------------------------------------------------3.js對數字操作-------------------------------
//(1)數字判斷和轉換
console.log(Number.isFinite(098)) //只要是數字則返回true，否則false;
console.log(Number.isInteger(0.33)); //判斷是否為整數,是---true,否則false
console.log(Number.parseInt(3.3)) //3 浮點數轉換為整數
console.log(Number.MAX_SAFE_INTEGER); //最大安全整數
console.log(Number.MIN_SAFE_INTEGER); //最小安全整數
let a = Math.pow(2, 53) - 1;
console.log(Number.isSafeInteger(a));//false 安全整數判斷isSafeInteger()
//----------------------------------------------------------------4.陣列---------------------------
// （1）.json陣列轉換為陣列
let json = {
'0': 'ssss',
'1': 'aaaa',
'2': 'cccc',
length: 3
}
console.log(Array.from(json)); //["ssss", "aaaa", "cccc"] -----ES6中絕大部分的Array操作都存在於Array物件裡。用Array.from(xxx)來進行轉換
console.log(Array.of(2,'kk')) // 將文字||變數轉換為陣列
//find()例項方法: val：表示當前查詢的值。 index：表示當前查詢的陣列索引。 arr：表示當前陣列。
// 所謂的例項方法:就是並不是以Array物件開始的，而是必須有一個已經存在的陣列
console.log(
[1, 2, 3, 4].find(
(val, index, arr) => {
return val > 1; //找到了符合條件的值，如果找不到會顯示undefined。
}
)
);
//(2).fill() 方法用於將一個固定值替換陣列的元素。
//array.fill(value, start, end)
//value 必需。填充的值。
// start 可選。開始填充位置。從0開始
// end 可選。停止填充位置(預設為 array.length)
['ni','hao','me','me','da'].fill('哈哈',0,1);
//(3). keys() 方法用於從陣列建立一個包含陣列鍵的可迭代物件。 如果物件是陣列返回 true，否則返回 false。
//返回值：一個陣列可迭代物件。
Object.keys({p:'d'})//用於物件返回其鍵 //p
["Banana", "Orange", "Apple", "Mango"].keys().next().value; //0 建立一個可迭代的物件，該物件包含陣列的鍵
for (let i of [3,4,5].keys()) {
console.log(i); //迴圈陣列 返回陣列的索引 0 1 2
}
{let a = [3, 4, 5, 6];
let s = a.keys();
console.log(s.next().value);//0
console.log(s.next().value)//1 -----------逐個輸出陣列的索引
}
//(4). entries() 方法返回一個陣列的迭代物件，該物件包含陣列的鍵值對(key / value) 。
//迭代物件中陣列的索引值作為 key， 陣列元素作為 value。
for (let [index,val] of [7,8].entries()) {
'use strict';
console.log(index + 'h' + val); //0h7 1h8 //同時輸出陣列索引和其對應的值; [7,8].entries().next().value 輸出[0,7]
}
//---------------------------------------------5.函式--------------------------------------------------
// （1）函式中的嚴謹模式
// 我們在ES中就經常使用嚴謹模式來進行程式設計，但是必須寫在程式碼最上邊，相當於全域性使用。在ES6中我們可以寫在函式體中，相當於針對函式來使用。
// function add(aS, bS = 1) {
// 'use strict'
// if (aS == 0) {
// throw new Error('This is error');
// }
// return aS + bS;
// }
// console.log(add(1));
// 上邊的程式碼，瀏覽器控制檯報錯，這是ES6中的一個坑，。這個錯誤的原因就是使用了預設值，再使用嚴謹模式的話，就會有衝突，所取消預設值的操作。
function add(aS, bS) {
'use strict'
if (aS == 0) {
throw new Error('This is error');
}
return aS + bS;
}
console.log(add(1, 2));
//in 方法判斷物件或陣列中是否有某個值
// 判斷物件中是否有某個值
{
let lkj = {
"oop":"oop",
"shift":"shfit"
}
console.log('oop' in lkj);
}
// 判斷陣列中是否有某個值
// 之前用陣列的length來判斷陣列是否為空，但是有弊端，
// 比如:[,,,].length //3 其實是空值
//用in解決判斷索引
console.log(0 in [,,,]); //false
console.log(0 in ['q','w','e']); //true
// join()方法 在陣列元素中間，加了一些間隔，開發中很有用處。
let arr = ['j', 'w', 'e'];
console.log(arr.join('|')); //j|w|e
//---------------------------------------------------6.物件-------------------------------
// (1).d物件賦值：
// ES6允許把宣告的變數直接賦值給物件:
{
let [ab,ba] = [1,2];
var obs = {ab,ba}
}
// (2).物件Key值構建
// 擷取數字
var yaoxi = "http://172.16.2.77:10800/play.html?channel=44";
var nani = parseInt(yaoxi.slice(yaoxi.split('').indexOf('=') + 1));
console.log(typeof nani + nani);
var yaoxi = "http://172.16.2.77:10800/play.html?channel=44";
console.log(yaoxi.split('=')[1].split('l').toString())
Object.is() //物件比較
// 物件的比較方法, 以前進行物件值的比較，經常使用 === 來判斷，比如下面的程式碼：
var obj1 = { name: 'eeee' };
var obj2 = { name: 'eeee' };
console.log(obj1.name === obj2.name);//true
// 那ES6為我們提供了is方法進行對比。
var obj1 = { name: 'eeee' };
var obj2 = { name: 'eeee' };
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name, obj2.name)); //true
// 區分 === 和 is方法的區別是什麼，看下面的程式碼輸出結果。
console.log(+0 === -0); //true
console.log(NaN === NaN); //false
console.log(Object.is(+0, -0)); //false
console.log(Object.is(NaN, NaN)); //true
// === 為同值相等，is()為嚴格相等。
Object.assign() //物件合併
{
let a = {a:'opop',bd:12};
let b = {v:'pppp',dd:12};
console.log(Object.assign(a,b));
}
// symobol在物件中的作用 對物件元素的保護
// symobol是es6新增的原始資料型別 它是JavaScript的第七種資料型別 表示獨一無二的值
// Symbol值通過Symbol函式生成，只要屬性名是屬於Symbol型別的，就是獨一無二的，可以保證不會與其他屬性名產生衝突。
let s = Symbol('name'); //symbol 代表的是 唯一且不與其他任何型別相同的值
// 用Symbol構建物件的Key，並呼叫和賦值。
{
let sy = Symbol();
var sys = {
[sy]:'la'
}
console.log(sys[sy]) //la
}
// 用Symbel對對物件的某個值進行保護 不讓其輸出
{
let hu = {name:"hh",phone:'000',age:12};
// 不讓程式輸出age
// 先複製後刪除
let ageClone = hu.age;
delete hu.age;
let ages = Symbol();
hu[ages] = ageClone;
for (let x in hu) {
console.log(hu[x]) //{name: "hh", phone: "000", Symbol(): 12}
}
}
// ------------------------7、Set和WeakSet及map的資料結構-----------------------------
// 1.Set的資料結構(是以陣列的形式構建的，實質並不是陣列) 返回一個類陣列
// Set和Array的顯著區別：Set不允許陣列有重複的元素()去重
new Set([1, 2, 3, 4, 1, 1, 1, 1]) //{1, 2, 3, 4}
// （1）Set 的增刪改查
// add新增元素
new Set([1]).add('hh') //{1, "hh"}
{
//delete刪除元素
let del = new Set([1,1,2]);
del.delete(1); //刪除陣列元素1
console.log(del) //{2}
}
{
// has查詢元素是否存在 返回Boolea
let cha = new Set([1,2,4,4]);
cha.has(4);//true 查詢是否存在元素4
}
{
//clear 清空陣列內容
let vb = new Set([2,3,45]);
vb.clear();
console.log(vb); //{}
}
{
//size是Set的內建屬性 獲得Set值的數量
new Set([1,2,3,4]).size //4
let bop = new Set([1,2,3]);
bop.forEach((item) => {console.log(item)})
}
// 2. weakSet 傳入的值必須是物件 返回一個物件陣列
{
let weakObj = new WeakSet();
let obj = { a: '33', b: '44' }
let obj1 = obj;
weakObj.add(obj);
weakObj.add(obj1);
console.log(weakObj); //value: { a: "33", b: "44" } value是他的內建屬性
}
//3.map資料結構 （常見處理物件的鍵和值） 可以將其看成key/value 返回類陣列
{
let ma = {
name:'ppp',
age:111
}
let map = new Map();
map.set(ma,'dep') //key: "ppp" value: "llll"
map.get(ma) //dep 得到value
map.delete(ma);//{} 清空鍵
}
//---------------------------------------8鉤子函式--------------------------------
// 鉤子函式：在執行函式前初始化一些資料，在改變物件值後做一些善後處理。這些都算鉤子函式（可理解為是函式或者物件的生命週期。）
// Proxy的應用可以使函式更加強大，業務邏輯更加清楚，而且在編寫自己的框架或者通用元件時非常好用
new Proxy ({},{});
// 第一個花括號就相當於方法的主體，後邊的花括號是Proxy代理處理區域，相當寫鉤子函式的地方。
{
var obj = {
add:function (x) {
return 2 + x
}
}
console.log(obj.add(2));
// 用 new Proxy()處理obj
var objProxy = new Proxy(
{
add:function (xx) {
return xx + 22
},
name: 'new Proxy',
ads:function () {
}
},
{
get: function (target,key,property) {
new function () {
alert(0);
}
console.log('在函式方法執行前執行鉤子函式');
return target[key];
//target代表 new Proxy({},{})中第一個括號中的內容,[key]值代表第一個{}中的屬性值
}
}
)
console.log(objProxy.name); //輸出-》 //在函式方法執行前執行鉤子函式 // new Proxy
// add屬性函式執行前先執行get屬性的函式
// get屬性;
// get屬性是在得到某物件屬性值時預處理的方法，他接受三個引數
// target：得到的目標值
// key：目標的key值，相當於物件的屬性
// property：不太常用
//-----------------------------------------------------9.Promise物件的使用-----------------------------------
// Promise解決了：es5函式的多層巢狀（回撥地獄），程式碼層次過多，難以維護和二次開發
let state = 1;
function step1(resolve, reject) {
if (state == 1) {
resolve('ff');
} else {
reject('ww');
}
}
new Promise(step1).then(function (val) {
console.log(val + 'e'); //ffe
})
// 一個全新的 promise 物件從每個 then 的呼叫中返回。
// Promise的then()方法有三個引數： 成功回撥，失敗回撥，前進回撥
// Promise物件狀態：
// Promise 物件代表一個非同步操作，其不受外界影響，有三種狀態：
// 1.Pending（進行中、未完成的）
// 2.Resolved（已完成，又稱 Fulfilled）
// 3.Rejected（已失敗）。
}
```
複製程式碼