閱讀更多

4頂
0踩

編程語言

轉載新聞 ES6 javascript 實用開發技巧

2018-04-16 10:48 by 副主編 jihong10102006 評論(3) 有40026人瀏覽
定義變量/常量

ES6 中新增加了 let 和 const 兩個命令,let 用于定義變量,const 用于定義常量 兩個命令與原有的 var 命令所不同的地方在于,let, const 都是塊級作用域,其有效范圍僅在代碼塊中,實例如下:
//es5
if(1==1){
  var b = 'foo';
}
console.log(b);//foo

//es6
if(1==1){
  let b = 'foo';
}
console.log(b);//undefined

定義常量對象

const a = {a:1,b:2};
a.b = 3;
console.log(a);//{a:1,b:3}

上例中,常量 a 中的內容在定義后,再進行修改依然有效,原因是對于對象類型的使用是指針式引用,常量只是指向了對象的指針,對象本身的內容卻依然可以被修改,注意,數組(Array) 也是對象; 那么如果在定義常量時使用基礎數據類型:string, number, boolean 等
const a = 1;
a = 2;// Uncaught TypeError: Assignment to constant variable.

在使用中,建議使用 let 與 const 完全代替 var 命令

數值擴展

轉換
Number.parseInt - 將字符串或數字轉換為整數 Number.parseFloat - 將字符串或數字轉換為浮點數

Number.parseInt, Number.parseFloat 與 parseInt, parseFloat 功能一致,在ES6中,推薦使用 Number. 的方式進行調用,這么做的目的是為了讓代碼的使用方式盡可能減少全局性方法,使用得語言逐步模塊化

測試函數

//測試是否整數
Number.isInteger(21)//true
Number.isInteger(1.11)//false

//測試是否NaN
Number.isNaN(Nan)//true
Number.isNaN(1)//false

字符串擴展

字符串內容測試
'abcdef'.includes('c');//true
'abcdef'.includes('ye');//false
'abcdef'.startsWith('a');//true
'abcdef'.endsWitch('f');//true
//includes(), startsWith(), endsWith() 都支持第二個參數,
//類型為數字類型,意為從第 n 個字符開始,endsWith()的第二個參數有點不一樣
'abcdef'.includes('c', 4);//false 從第5個字符開始查找是否有 'c' 這個字符
'abcdef'.startsWith('d', 3);//true 從第4個字符開始查找是否是以 'd' 字符為開頭
'abcdef'.endsWith('d', 4);//true 前面的4個字符里,是否以 'd' 字符為結尾

字符串內容重復輸出

'a'.repeat(5);//aaaaa 重復輸出5遍

原生支持模板語言
//es5
$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);
//es6
//在es6中,內容模板,可以定義在 `` 包起來的字符串中,其中的內容會保持原有格式
//另外可以在字符串中直接使用模板語言進行變量填充,優雅而簡潔
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

字符串遍歷輸出
//for ...of 格式為 es6 中的 Iterator 迭代器的輸出方式
for(let c of 'abc'){
  console.log(c);
}
//a
//b
//c

字符串補全

//參數1:[number] 目標字符串長度
//參數2:[string] 進行補全的字符串
'12345'.padStart(7, '0')//0012345 - 字符串不足7位,在頭部補充不足長度的目標字符串
'12345'.padEnd(7, '0')//1234500 - 在尾部進行字符串補全

數組擴展

合并數組

let a = [1, 2];
let b = [3];
let c = [2, 4];
let d = [...a, ...b, ...c];//[1, 2, 3, 2, 4] 所有內容合并,但并不會去除重復

快速轉換為數組

Array.of(3,4,5)//[3,4,5]

數組內容測試

//判斷對象是否為數組
if(Array.isArray(obj)){...}

[1,2,3].includes(5);//false,檢索數據中是否有5

//找出第一個匹配表達式的結果,注意是只要匹配到一項,函數即會返回
let a = [1, 3, -4, 10].find(function(value, index, arr){
  return value < 0;
});
console.log(a);//-4

//找出第一個匹配表達式的結果下標
let a = [1, 3, -4, 10].findIndex(function(value, index, arr){
  return value < 0;
});
console.log(a);//2

內容過濾

//排除負數內容
let a = [1, 3, -4, 10].filter(function(item){
  return item > 0;
});
console.log(a);//[1, 3, 10]

內容實例

keys() - 獲得數組中所有元素的鍵名(實際上就是下標索引號)
values() - 獲得數組中所有元素的數據
entries() - 獲得數組中所有數據的鍵名和數據
for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

.entries(), .keys(), .values() 功能與 Object 中的幾個同名函數功能類似,實際使用中實用性不高,對于數組的操作,直接進行遍歷即可

對象擴展

屬性的簡潔表示

//直接使用變量/常量的名稱個為對象屬性的名稱
let a = 'abc';
let b = {a};//{a: 'abc'}

function f(x, y){ return {x, y};}
//等效于
function f(x, y){ return {x: x, y: y}}

let o = {
  f(){ return 1; }
}
//等效于
let o = {
  f: function(){ return 1; }
}

判斷對象是否為數組

if(Object.isArray(someobj)){}

對象內容合并

let a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};
let d = Object.assign(a, b, c);
console.log(d);//{a:1,b:4,c:5}
console.log(a);//{a:1,b:4}
//上面的合并方式會同時更新 a 對象的內容,a 的屬性如果有多次合并會被更新數據,
//但自身沒有的屬性,其它對象有的屬性不會被添加到 a 身上;
//參數列中的對象只會影響第一個,后面的參數對象不會被修改數據

//推薦使用這種方式進行對象數據合并
let a = {a:1,b:2}, b = {b:3}, c = {b:4,c:5};
let d = Object.assign({}, a, b, c);//第一個參數增加一個空對象,在合并時讓它被更新,不影響實際的對象變量內容
console.log(d);//{a:1,b:4,c:5}//與上面的方式合并結果一致,使用這種方式, a 對象的內容就不會被影響了

對象內容合并的方向是從參數順序的后向前合并

對象內容集合

Object.keys() - 獲得對象中所有的鍵名,以數組的形式返回
var obj = { a:1,b:2 };
var names = Object.keys(obj);//['a', 'b']

Object.values() - 獲得對象中所有的值內容,以數組的形式返回
var obj = { a:1,b:2 };
var values = Object.values(obj);//[1, 2]

Object.entries() - 獲得對象中所有的成員數據,以數組的形式返回,成員的內容也是數組形式
var obj = { a:1,b:2 };
var values = Object.entries(obj);//[['a',1], ['b',2]]

其實觀察可發現,Object.keys(), Object.values(), Object.entries(),與 Java 的 MAP 中的方法是一致的,不論是方法名還是具體的用法,這也可以幫忙理解這些功能 API

解構賦值

let [a, b, c] = [1, 2, 3];
//定義了三個變量,并對應賦了值;如果值的個數與變量名個數不匹配,沒有對應上的變量值為 undefined

let [a, b, c='default'] = [1, 2];
//指定默認值,在定義變量時就指定了默認值,如果賦值時,沒有給定內容,則會取默認值

let [a, …b] = [1,2,3];
//這里 b 的值為[2,3],這樣可以快速使用剩余的數據賦值給變量,
//但實際使用中為了避免代碼閱讀的歧義,不推薦這么使用,僅作了解即可

let [a,b,c] = 'yes';
console.log(a);//y
console.log(b);//e
console.log(c);//s
字符串的解構賦值會以單個字符的方式進行賦值

let {length}='yes';
console.log(length);//3
以對象賦值的方式,如果名稱是字符串的自帶屬性,則會獲得屬性值

let arr = [1,2];
let obj = {a:1,b:2};
function test ({a = 10, b}){
	console.log('a:',a);
	console.log('b:',b);
}
test(obj);
解構賦值的使用實例,作為函數傳參,并使用默認值

對象結構解構

let obj = {a: 1, b: 2};
let {a, b} = obj;//a=1,b=2
使用變量的方式進行結構賦值,需要嚴格匹配名稱,數組的模式是嚴格匹配下標

let obj = {a: 1, b: 2};
let {a=0, b=5} = obj;
賦值并給定默認值

let obj = {a: 1, b: 2};
let {a:A, b} = obj;//A=1,b=2,a報錯,變量未定義
獲得內容后,將變量進行改名

let obj = {a: 1, b: 2};
let a = 0;
({a, b} = obj);
對已存在的 a 進行修改值,并生成新的變量 b

let obj = {
	arr: ['aaa',{a:1}]
};
let {arr:[b, {a}]} = obj;//這里的arr互相映射
console.log(b);
console.log(a);
獲得對象的子數據,并映射到相應的變量,這里需要注意的是結構要對應

模塊化

最簡單實例的使用場景

//a.js
let a = {a:1,b:2,c:3};
export default a;

//b.js
import a from 'a.js';//假設 a.js 與 b.js 同在一個目錄中
console.log(a.a);//1

以上簡單的實例就兩個腳本文件舉例說明了兩個文件在實際使用,可以進行互相引用,并獲得目標文件中的數據;我們可以認為一個腳本文件就是一個 模塊,那么在實際開發過程中,可以將業務處理內容,或是數據處理過程 抽象 在一個文件中,在需要使用時,由其它模塊引入并使用其中的數據

完整內容:https://github.com/TerryZ/js-develop-skill-summary
來自: oschina
4
0
評論 共 3 條 請登錄后發表評論
3 樓 wj181291228 2018-10-30 11:21
 
寫的很好
2 樓 Alex_Cheung 2018-06-06 06:41
直接看網上阮一峰老師的《ECMAScript 6 入門》也很不錯。開源書籍來的。
1 樓 bewithme 2018-04-20 11:49
寫得很通俗易懂

發表評論

您還沒有登錄,請您登錄后再發表評論

相關推薦

  • JavaScript ES6 函數式編程入門經典-試讀

    JavaScript ES6函數式編程入門經典》使用JavaScript ES6帶你學習函數式 編程。你將學習柯里化、偏函數、高階函數以及Monad等概念。   目前,編程語言已經將焦點從對象轉移到函數。JavaScript支持函數式編 程,并允許開發者編寫精心設計的代碼。

  • JavaScript必讀書單,其中包括es6標準入門,js高級程序設計,js權威指南,高性能js,js設計模式,jsDOM編程藝術

    javaScript高手必讀書單,其中包括《es6標準入門》,《js高級程序設計》,《js權威指南》,《高性能js》,《js設計模式》,《js DOM編程藝術》 1.js高級程序設計:絕對的一本好書,里面包括js的所有語言內容,無論是初學者,還是js高手都應該認真看看 2.js權威指南:講js講的特別細,無論是瀏覽器端的js還是nodejs端的js,而且還細致的講了瀏覽器模型,瀏覽器端的js api 3.高性能js:教你如何在瀏覽器端寫出高性能的js代碼,而且還配上實驗數據 4.js設計模式:js設計模式講的最好的一本書,講解了js常用的16種設計模式,重生活問題出發,講解每一種設計模式的意義 5.js DOM編程藝術:這是一本專門講js DOM操作的書籍 6.es6標準入門:想學es6?這本書不看可不行。這本書絕對是講es6最透徹,最易懂的書籍了。

  • Rediscovering JavaScript Master ES6, ES7, and ES8

    本書為現代JavaScript的導引,全面介紹了ES6,ES7,ES8的最新特性 JavaScript is no longer to be feared or loathed - the world's most popular and ubiquitous language has evolved into a respectable language. Whether you're writing frontend applications or server side code, the phenomenal features from ES6 and beyond - like the rest operator, generators, destructuring, object literals, arrow functions, modern classes, promises, async, and metaprogramming capabilities - will get you excited and eager to program with JavaScript. You've found the right book to get started quickly and dive deep into the essence of modern JavaScript. Learn practical tips to apply the elegant parts of the language and the gotchas to avoid.

  • JavaScript ES6函數式編程入門經典 中文 Anto,Aravinth 著,梁宵 譯

    JavaScript ES6函數式編程入門經典 Anto,Aravinth 著,梁宵 譯 AntoAravinth是來自VisualBIChennai研發中心的高級商業智能開發工程師。在過去的五年中,他曾使用Java、JavaScript語言以及ReactJs、Angular等框架開發Web應用。他對Web和Web標準有透徹的理解。他也是流行框架ReactJs、Selenium和Groovy的開源貢獻者。AntoAravinth在業余時間喜歡打乒乓球。他很有幽默感!他也是ReactQuickly一書的技術開發編輯,此書在2017年由Manning出版社出版。

  • JavaScript es6函數式編程

    javascript Es6高清pdf,適合大數據入門提升實戰,歡迎下載!

  • JavaScript+ES6函數式編程入門經典

    JavaScript+ES6函數式編程入門經典PDF版,僅供個人學習用,如有侵權,請聯系我刪除,如該書籍對你有較大幫助的話還請購買原版書籍,支持作者

  • JavascriptES6 實戰視頻課程

    JavascriptES6 實戰視頻課程

  • javascript -es6

    es6新特性全套視頻教學,百度云下載,內含鏈接與密碼 es6新特性全套視頻教學,百度云下載,內含鏈接與密碼

  • JavaScript 參考手冊集合 chm版打包

    對于初學JavaScript開發的廣大程序員來說,有一份參考資料,有利于大家全面了解JScrip的各個部分,在這里給大家提供了一個整理好的幫助手冊合集

  • codecasts的es6視頻教程

    CODECASTS網站的es6教程,有需要的大家帶走吧,祝大家學習愉快

  • JavaScript ES6函數式編程入門經典

    JavaScript ES6函數式編程入門經典》使用JavaScript ES6帶你學習函數式 編程。你將學習柯里化、偏函數、高階函數以及Monad等概念。 目前,編程語言已經將焦點從對象轉移到函數。JavaScript支持函數式編 程,并允許開發者編寫精心設計的代碼。

  • JavaScript函數式編程_PDF電子書下載 高清 帶索引書簽目錄.pdf

    JavaScript函數式編程_PDF電子書下載 高清 帶索引書簽目錄.pdf

  • ES6標準入門(第二版).pd

    ES6JavaScript,js,ES6標準入門(第二版) ES6JavaScript,js

  • JavaScript函數式編程.pdf

    JavaScript函數式編程.pdf 個人收集電子書,僅用學習使用,不可用于商業用途,如有版權問題,請聯系刪除!

  • JavaScript+參考手冊集合+chm版打包

    JavaScript+參考手冊集合+chm版打包

  • JavaScript es6

    es6筆記整理

  • 深入淺出ES6(ES6 in depth) 簡體中文

    曾經聽許多前端從業者說:“前端發展太快了。”這里的快,十有八九是說層出不窮的新概念,余下的一二,大抵只是抒發一下心中的苦悶罷——前兩日剛習得的新技術轉眼就“落后”——仔細品味這苦悶,除卻不得不持續奔跑的無奈,更多的是一口氣,一口卯足了勁兒也要把新知識全數攬入囊中的不服氣。作為剛入行的新人,對這點體會頗深。就像是驀地從某個時間點切入,半數時間向前走,半數時間向后看,瞻前顧后,回味揣摩這十年間的歲月精魄,還得翹首盼著花花新世界,不時再問自己一句,這樣走下去真的會好么?是的,其實答案人盡皆知,同時也無人知曉,因為沒人能預言未來,頂多只能預測未來,但有一件事情永不會錯,當你篤定地沿著一條路走下去,結果通常不會太糟糕,但凡能在浮躁的社會冷靜下來潛心磨礪,多少總會有收獲。幸而我有意弱化了對新信息的執念,開始做一些事情,《深入淺出ES6》就是其中一件。 縱觀整個系列,亦即縱觀ECMAScript 2015的整個體系,吸取了諸多成功經驗:借鑒自CoffeeScript的箭頭函數;始于C++項目Xanadu,接著被E語言采用,后來分別于Python和JavaScript框架Dojo中以Deferred對象的面貌出現的Promise規范(詳見Async JavaScript一書3.1章);借鑒了C++、Java、C#以及Python等語言的for-of循環語句;部分借鑒Mustache、Nunjucks的模板字符串。 當然,新的語言體系也在之前的基礎上查漏補缺:彌補塊級作用域變量缺失的let和const關鍵字;彌補面向大型項目缺失的模塊方案;標準委員會甚至為JavaScript增加了類特性,有關這一方面的特性褒貶不一,Douglas Crockford曾在2014年的Nordic.js大會發表了題為《The Better Parts》的演講,重新闡述了他個人對于ECMAScript 6的看法,他認為Class特性是所有新標準中最糟糕的創新(我個人也略贊同這一說法,類的加入雖然有助于其它語言的使用者開始使用JavaScript,但是卻無法發揮出JavaScript原型繼承的巨大優勢);以及為了保持非侵入式彌補其它新特性而誕生的Symbols。 其它的新特性也相當誘人,熟練掌握可以大幅度提升開發效率:迭代器Iterator、生成器Generators、不定參數Rest、默認參數Default、解構Destructuring、生成器Generator、代理Proxy,以及幾種新類型:Set、Map、WeakSet、WeakMap、集合Collection。 以上提及的新特性只是其中的一部分,更多的新特性等待著大家進一步挖掘。整個系列的翻譯歷時150余天,堅持專欄翻譯的日子艱苦也快樂,編輯徐川細心地幫我審校每一篇文章,編輯丁曉昀贈予錢歌川先生詳解翻譯之著作讓我大開眼界,與李松峰老師的交流也讓我深刻理解了“閱讀、轉換、表達”的奧義所在,最感謝我的母親,在我遇到困難需要力量的時候永遠支持著我。選擇ES6作為前端生涯的切入點實之我幸,恰遇這樣的機會讓我可以一心一意地向前走,向未來走。我很敬佩在“洪荒”和“戰亂”年代沉淀無數經 驗的前輩們,你們在各種不確定的因素中左右互搏,為終端用戶提供統一的用戶體驗,直到如今你們依然孜孜不倦地吸取業內新鮮的經驗。技術在進步,也為前端人 提供著無限的可能性,我們有責任也有義務去推動新標準的發展和普及,誠然在商業的大環境下我們不愿放棄每一寸用戶的土壤,但攜眾人之力定將能推動用戶終端 的革新。ES7標準的提案紛紛提上日程,用不了多久也將登上前端大舞臺。也感謝午川同學友情提供譯文《深入淺出ES6(十):集合 Collection》,讓我在困難時期得以順利過渡。最后祝愿國內前端社區向著更光明美好的未來蓬勃生長!

  • Exploring ES6(中文版)

    這本書比阮一峰老師那本《ES6入門》更深入,翻譯質量也挺好的,值得一讀。 翻譯版權歸譯者。 Exploring JS: JavaScript books for programmers Most of the following books are free to read online. I hope you’ll like them so much that you’ll buy the offline versions. — Dr. Axel Rauschmayer (author of the 2ality blog) The books Versions of JavaScript “ES” stands for “ECMAScript” (ES6 is ECMAScript 6, etc.). Past versions: ES1, ES2, ES3, ES5, ES6 (also: ES2015), ES2016, ES2017 Current version: ES2018 Next version (in progress): ES2019

  • es6標準入門.pdf 第三版 阮一峰 中文 JavaScript

    前端開發,es6 標準入門.pdf第三版 阮一峰 高清 JavaScript必看書籍,希望對你們有幫助

  • 深入理解ES6.mobi

    深入理解 ES6 javascript

Global site tag (gtag.js) - Google Analytics 真人娱乐官方网站 栖霞市| 阜宁县| 泉州市| 满洲里市| 岑溪市| 泸西县| 阿鲁科尔沁旗| 盖州市| 南开区| 山西省| 都兰县| 安顺市| 南雄市| 吴堡县| 临高县| 衢州市| 云浮市| 璧山县| 甘德县| 济源市| 海伦市| 镇安县| 平度市| 田东县| 开平市| 阿克苏市| 桐柏县| 册亨县| 延吉市| 微博| 安化县| 武平县| 洞头县| 张北县| 屏山县| 弥勒县| 玉山县| 新平| 二连浩特市| 靖远县| 芦溪县| 苍梧县| 龙川县| 娄底市| 长泰县| 峨边| 梅州市| 玉山县| 铁力市| 皋兰县| 普安县| 宜川县| 石门县| 彭阳县| 富源县| 扎兰屯市| 平遥县| 彰化县| 邢台县| 太仆寺旗| 绥江县| 永年县| 三亚市| 邛崃市| 铅山县| 湘潭县| 新营市| 梓潼县| 灵台县| 平谷区| 海口市| 焦作市| 崇文区| 邯郸市| 高台县| 云安县| 盘锦市| 荔波县| 宜城市| 平和县| 阳曲县| 东海县| 延吉市| 武城县| 皮山县| 东阿县| 阿克| 柳河县| 桓台县| 天水市| 原阳县| 甘德县| 东港市| 海安县| 屯门区| 类乌齐县| 屏东市| 抚宁县| 阳西县| 松潘县| 阿拉尔市| 乌兰县| 霍山县| 沐川县| 滦南县| 千阳县| 闽清县| 曲麻莱县| 大港区| 天台县| 太湖县| 察哈| 精河县| 大宁县| 武定县| 崇义县| 阿坝| 安福县| 黄陵县| 来宾市| 宁强县| 枣强县| 磐石市| 平武县| 雅江县| 连平县| 利津县| 新竹县| 金秀| 新化县| 尉氏县| 岑溪市| 德江县| 怀来县| 南昌县| 湖口县| 腾冲县|