這篇文章主要講解了“讓JavaScript開發(fā)更加簡單的概念有哪些”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“讓JavaScript開發(fā)更加簡單的概念有哪些”吧!
創(chuàng)新互聯(lián)公司從2013年成立,先為石棉等服務建站,石棉等地企業(yè),進行企業(yè)商務咨詢服務。為石棉企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
1. 變量賦值(值與引用)
JavaScript 總是按照值來給變量賦值。當指定的值是 JavaScript 的五種原始類型之一(即 Boolean、null、undefined、String 和 Number)時,將為變量分配實際的值。但是,當指定的值是 Array、Function 或 Object 時,將為變量分配內(nèi)存的對象引用。
在下面的代碼段中,使用 var1 對 var2 賦值。由于 var1 是基本類型(String),因此 var2 的值等于 var1 的 String 值,但這個時候可以認為 var2 與 var1 完全不同。因此,重新為 var2 賦值對 var1 沒有任何影響。
let var1 = 'My string'; let var2 = var1; var2 = 'My new string'; console.log(var1); // 'My string' console.log(var2); // 'My new string'
我們將它與對象賦值進行比較。
let var1 = { name: 'Jim' } let var2 = var1; var2.name = 'John'; console.log(var1); // { name: 'John' } console.log(var2); // { name: 'John' }
如果你期望它會像原始類型賦值那樣,很可能會出問題!如果你創(chuàng)建了一個無意中會改變對象的函數(shù),就會出現(xiàn)一些非預期的行為。
2. 閉包
閉包是一種重要的 JavaScript 模式,可用于訪問私有變量。在下面的示例中,createGreeter 返回一個匿名函數(shù),這個函數(shù)可以訪問參數(shù) greeting(在這里是“Hello”)。在后續(xù)的調(diào)用中,sayHello 將有權(quán)訪問這個 greeting!
function createGreeter(greeting) { return function(name) { console.log(greeting + ', ' + name); } } const sayHello = createGreeter('Hello'); sayHello('Joe'); // Hello, Joe
在一個更真實的場景中,你可以設(shè)想一個初始化函數(shù) apiConnect(apiKey),它返回一些使用 API密鑰的方法。在這種情況下,只需要提供一次 apiKey 即可。
function apiConnect(apiKey) { function get(route) { return fetch(`${route}?key=${apiKey}`); } function post(route, params) { return fetch(route, { method: 'POST', body: JSON.stringify(params), headers: { 'Authorization': `Bearer ${apiKey}` } }) } return { get, post } } const api = apiConnect('my-secret-key'); // No need to include the apiKey anymore api.get('http://www.example.com/get-endpoint'); api.post('http://www.example.com/post-endpoint', { name: 'Joe' });
3. 解構(gòu)
JavaScript 參數(shù)解構(gòu)是一種從對象中提取屬性的常用方法。
const obj = { name: 'Joe', food: 'cake' } const { name, food } = obj; console.log(name, food); // 'Joe' 'cake'
如果需要以其他名稱來提取屬性,可以使用以下格式來指定它們。
const obj = { name: 'Joe', food: 'cake' } const { name: myName, food: myFood } = obj; console.log(myName, myFood); // 'Joe' 'cake'
在下面的示例中,解構(gòu)被用來將 person 對象傳給 introduce 函數(shù)。換句話說,解構(gòu)可以(并且經(jīng)常)直接用于提取傳給函數(shù)的參數(shù)。如果你熟悉 React,可能已經(jīng)見過這個!
const person = { name: 'Eddie', age: 24 } function introduce({ name, age }) { console.log(`I'm ${name} and I'm ${age} years old!`); } console.log(introduce(person)); // "I'm Eddie and I'm 24 years old!"
4. 展開(spread)語法
在下面的示例中,Math.max 不能直接接受 arr 數(shù)組,因為它的參數(shù)不是數(shù)組類型,但可以以數(shù)組中的各個元素作為參數(shù)。展開運算符…可用于提取數(shù)組的各個元素。
const arr = [4, 6, -1, 3, 10, 4]; const max = Math.max(...arr); console.log(max); // 10
5. 變長參數(shù)(rest)語法
你可以用它將傳給函數(shù)的任意數(shù)量的參數(shù)放入數(shù)組中!
function myFunc(...args) { console.log(args[0] + args[1]); } myFunc(1, 2, 3, 4); // 3
6. 數(shù)組方法
JavaScript 數(shù)組方法通常可以為你提供令人難以置信的優(yōu)雅方式來執(zhí)行所需的數(shù)據(jù)轉(zhuǎn)換。作為 StackOverflow 的貢獻者,我經(jīng)常看到有關(guān)如何以這種或那種方式操縱對象數(shù)組的問題。這往往是數(shù)組方法的完美用例。
map、filter、reduce
map:返回一個數(shù)組,其中每個元素都使用指定函數(shù)進行過轉(zhuǎn)換。
const arr = [1, 2, 3, 4, 5, 6]; const mapped = arr.map(el => el + 20); console.log(mapped); // [21, 22, 23, 24, 25, 26]
filter:返回一個數(shù)組,只有當指定函數(shù)返回 true 時,相應的元素才會被包含在這個數(shù)組中。
const arr = [1, 2, 3, 4, 5, 6]; const filtered = arr.filter(el => el === 2 || el === 4); console.log(filtered); // [2, 4]
reduce:基于給定函數(shù)累加值。
const arr = [1, 2, 3, 4, 5, 6]; const reduced = arr.reduce((total, current) => total + current); console.log(reduced); // 21
find、findIndex、indexOf
find:返回與指定條件匹配的第一個實例,不會繼續(xù)查找其他匹配的實例。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const found = arr.find(el => el > 5); console.log(found); // 6
雖然 5 之后的元素都符合條件,但只返回第一個匹配的元素。
findIndex:這與 find 幾乎完全相同,但不返回第一個匹配的元素,而是返回第一個匹配元素的索引。
const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.findIndex(el => el === 'Frank'); console.log(foundIndex); // 1
indexOf:與 findIndex 幾乎完全相同,但它的參數(shù)不是一個函數(shù),而是一個簡單的值。
const arr = ['Nick', 'Frank', 'Joe', 'Frank']; const foundIndex = arr.indexOf('Frank'); console.log(foundIndex); // 1
push、pop、shift、unshift
push:這是一個相對簡單的方法,它將一個項添加到數(shù)組的末尾。它就地修改數(shù)組,函數(shù)本身會返回添加到數(shù)組中的項。
let arr = [1, 2, 3, 4]; const pushed = arr.push(5); console.log(arr); // [1, 2, 3, 4, 5] console.log(pushed); // 5
pop:從數(shù)組中刪除最后一項。同樣,它也是就地修改數(shù)組。函數(shù)本身返回從數(shù)組中刪除的項。
let arr = [1, 2, 3, 4]; const popped = arr.pop(); console.log(arr); // [1, 2, 3] console.log(popped); // 4
shift:從數(shù)組中刪除第一個項。同樣,它也是就地修改數(shù)組。函數(shù)本身返回從數(shù)組中刪除的項。
let arr = [1, 2, 3, 4]; const shifted = arr.shift(); console.log(arr); // [2, 3, 4] console.log(shifted); // 1
unshift:將一個或多個元素添加到數(shù)組的開頭。同樣,它也是就地修改數(shù)組。與其他方法不同的是,函數(shù)本身返回數(shù)組最新的長度。
let arr = [1, 2, 3, 4]; const unshifted = arr.unshift(5, 6, 7); console.log(arr); // [5, 6, 7, 1, 2, 3, 4] console.log(unshifted); // 7
splice、slice
splice:通過刪除或替換現(xiàn)有元素或者添加新元素來修改數(shù)組的內(nèi)容。這個方法也是就地修改數(shù)組。
下面的代碼示例的意思是:在數(shù)組的位置 1 上刪除 0 個元素,并插入 b。
let arr = ['a', 'c', 'd', 'e']; arr.splice(1, 0, 'b')
slice:從指定的起始位置和結(jié)束位置之前返回數(shù)組的淺拷貝。如果未指定結(jié)束位置,則返回數(shù)組的其余部分。這個方法不會修改數(shù)組,只是返回所需的子集。
let arr = ['a', 'b', 'c', 'd', 'e']; const sliced = arr.slice(2, 4); console.log(sliced); // ['c', 'd'] console.log(arr); // ['a', 'b', 'c', 'd', 'e']
sort
sort:根據(jù)提供的函數(shù)對數(shù)組進行排序。這個方法就地修改數(shù)組。如果函數(shù)返回負數(shù)或 0,則順序保持不變。如果返回正數(shù),則交換元素順序。
let arr = [1, 7, 3, -1, 5, 7, 2]; const sorter = (firstEl, secondEl) => firstEl - secondEl; arr.sort(sorter); console.log(arr); // [-1, 1, 2, 3, 5, 7, 7]
7. 生成器
看到 * 不要害怕。生成器函數(shù)指定下一次調(diào)用 next() 時會生成什么 value。既可以生成有限數(shù)量的 value(最后調(diào)用 next() 會返回 undefined),也可以使用循環(huán)生成無限數(shù)量的 value。
function* greeter() { yield 'Hi'; yield 'How are you?'; yield 'Bye'; } const greet = greeter(); console.log(greet.next().value); // 'Hi' console.log(greet.next().value); // 'How are you?' console.log(greet.next().value); // 'Bye' console.log(greet.next().value); // undefined
使用生成器生成無限個值:
function* idCreator() { let i = 0; while (true) yield i++; } const ids = idCreator(); console.log(ids.next().value); // 0 console.log(ids.next().value); // 1 console.log(ids.next().value); // 2 // etc...
8. === 與 ==
一定要知道 JavaScript 中 === 運算符和 == 運算符之間的區(qū)別!== 運算符在比較之前會進行類型轉(zhuǎn)換,而 === 運算符在比較之前不會進行類型轉(zhuǎn)換。
console.log(0 == '0'); // true console.log(0 === '0'); // false
JavaScript 新手容易犯的一個錯誤是直接比較對象。變量一般是指向內(nèi)存中對象的引用,而不是對象本身!比較對象的一種方法是將它們轉(zhuǎn)換成 JSON 字符串。但這樣做有一個缺點:無法保證對象屬性的順序!一種更安全的方法是使用專門進行深度對象比較的庫(例如 lodash 的 isEqual)。
下面的對象看起來相同,但它們實際上指向不同的引用。
const joe1 = { name: 'Joe' }; const joe2 = { name: 'Joe' }; console.log(joe1 === joe2); // false
相反,下面的結(jié)果為 true,因為使用其中一個對象為另一個對象賦值,它們都指向相同的引用(內(nèi)存中只有一個對象)。
const joe1 = { name: 'Joe' }; const joe2 = joe1; console.log(joe1 === joe2); // true
很多人都被 JavaScript 回調(diào)函數(shù)嚇倒了!它們其實很簡單,請看下面的例子。console.log 函數(shù)作為回調(diào)傳給 myFunc,并在 setTimeout 完成時執(zhí)行。
function myFunc(text, callback) { setTimeout(function() { callback(text); }, 2000); } myFunc('Hello world!', console.log); // 'Hello world!'
一旦你理解了 JavaScript 回調(diào),很快就會發(fā)現(xiàn)自己陷入了“回調(diào)地獄”中。這個時候可以使用 promise!將異步邏輯包裝在 promise 中,使用“then”來處理成功的情況,使用“catch”來處理異常。
const myPromise = new Promise(function(res, rej) { setTimeout(function(){ if (Math.random() < 0.9) { return res('Hooray!'); } return rej('Oh no!'); }, 1000); }); myPromise .then(function(data) { console.log('Success: ' + data); }) .catch(function(err) { console.log('Error: ' + err); }); // If Math.random() returns less than 0.9 the following is logged: // "Success: Hooray!" // If Math.random() returns 0.9 or greater the following is logged: // "Error: On no!"
在掌握了 promise 的用法后,你可能也會喜歡 async await,它只是一種基于 promise 的“語法糖”。在下面的示例中,我們創(chuàng)建了一個 async 函數(shù),并 await greeter promise。
const greeter = new Promise((res, rej) => { setTimeout(() => res('Hello world!'), 2000); }) async function myFunc() { const greeting = await greeter; console.log(greeting); } myFunc(); // 'Hello world!'
感謝各位的閱讀,以上就是“讓JavaScript開發(fā)更加簡單的概念有哪些”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對讓JavaScript開發(fā)更加簡單的概念有哪些這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
當前文章:讓JavaScript開發(fā)更加簡單的概念有哪些
本文路徑:http://bm7419.com/article4/igdoie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、ChatGPT、自適應網(wǎng)站、App設(shè)計、App開發(fā)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)