es6-9集結
// 箭頭函數
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
複製代碼
1、babel轉化
1.環境搭建：
創建目錄：
src：書寫ES6代碼的文件夾，寫的js程序都放在這裏。
dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面須要引入的時這裏的js文件。
html
(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
配置轉碼包:java
"presets":[
"es2015"
],
"plugins":[]
}
複製代碼
在pakejson中配置轉碼命令：react
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
//命令行運行npm run build 便可將js轉碼到dist文件夾
複製代碼
2、語法：
es6
// ------------------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}
}
}
// ------------------------七、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
})
function fetch(callback) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('請求處理');
}, 2000)
})
}
fetch().then(
function (data) {
console.log('請求處理' + 1);
console.log(data + 2);
},
function (data) {
console.log('觸發異常');
console.log(data);
}
)
//catch 等價於then中的第二個函數
function fetch(callback) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('請求失敗');
}, 2000)
})
}
fetch()
.then(
function(data){
console.log('請求處理');
console.log(data);
}
).catch(function(reason){
console.log('觸發異常');
console.log(reason);
});
https://www.cnblogs.com/sweeeper/p/8442613.html（這個博文建議看看）
// 一個全新的 promise 對象從每一個 then 的調用中返回。
// Promise的then()方法有三個參數： 成功回調，失敗回調，前進回調
// Promise對象狀態：
// Promise 對象表明一個異步操做，其不受外界影響，有三種狀態：
// 1.Pending（進行中、未完成的）
// 2.Resolved（已完成，又稱 Fulfilled）
// 3.Rejected（已失敗）。
————————————————————————————————————————————————————————————————————————————————————————————————————
***通常promise和async一步函數用：：：
async function hs() {
return '哈哈'
//Promise {<resolved>: "哈哈"}_proto__: Promise
//[[PromiseStatus]]: "resolved"
//[[PromiseValue]]: "哈哈"
}
hs().then(val => {
console.log(val); //哈哈
});
async中也常常用到await
****await(await 操做符用於等待一個 Promise 對象, 它只能在異步函數 async function 內部使用。)
例子：
function testAwait(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("testAwait");
resolve();
}, 1000);
});
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
**
注：async 函數執行時，若是遇到 await 就會先暫停執行 ，等到觸發的異步操做完成後，恢復 async 函數的執行並返回解析值。
await 關鍵字僅在 async function 中有效。若是在 async function 函數體外使用 await ，你只會獲得一個語法錯誤。
**
****正常狀況下，await 命令後面是一個 Promise 對象，它也能夠跟其餘值，如字符串，布爾值，數值以及普通函數。
function testAwait(){
console.log("testAwait");
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
****await針對所跟不一樣表達式的處理方式：
Promise 對象：await 會暫停執行，等待 Promise 對象 resolve，而後恢復 async 函數的執行並返回解析值。
非 Promise 對象：直接返回對應的值。
//-----------------------------------------------------10.模塊化操做-------------------------
// export : 負責進行模塊化，也是模塊的輸出。
// import : 負責把模塊引，也是模塊的引入操做。
// 1.export能夠將變量，對象，函數進行模塊化，提供外部調用的接口,讓外部進行引用
export var a = 'www';-> //temp.js文件
import { a } from './temp.js';
console.log(a);
//多變量的輸出
var a = 'aaa';
var b = 'bbb';
var c = 'ccc';
export { a, b, c }
//函數的模塊化輸出
export function add(a, b) {
return a + b;
}
```
歡迎各位大佬進羣技術交流 哈哈
複製代碼
相關文章
- 1. SQL 操做結果集 -並集、差集、交集、結果集排序
- 2. 集合總結
- 3. JDBC結果集
- 4. 集合 總結
- 5. ResultSet 結果集
- 6. 集合小結
- 7. Android集結號
- 8. 集合結構
- 9. 7.16 集訓總結
- 10. Java集合總結
- 更多相關文章...
- • Rust 結構體 - RUST 教程
- • XML 樹結構 - XML 教程
- • ☆技術問答集錦（13）Java Instrument原理
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. SQL 操做結果集 -並集、差集、交集、結果集排序
- 2. 集合總結
- 3. JDBC結果集
- 4. 集合 總結
- 5. ResultSet 結果集
- 6. 集合小結
- 7. Android集結號
- 8. 集合結構
- 9. 7.16 集訓總結
- 10. Java集合總結