js學習筆記

hy_發表於2019-05-09
JS筆記

const a = 1 && 'x'; // x
const b = 0 && 'x'; // 0
const c = false && 'x'; // false
const d = null && 'x'; // null
const e = undefined && 'x'; // undefined複製程式碼

總結：&&左側的值轉換為布林值為true則返回右側，不論右側為什麼

const a = 1 || 'x'; // 1
const b = 0 || 'x'; // x
const c = false || 'x'; // x
const d = null || 'x'; // x
const e = undefined || 'x'; // x 複製程式碼

總結：||左側的值轉換為布林值為true，則返回左側的值，否則返回右邊的值

js背景

  • Netscape公司發明了JavaScript語言，並將這種語言提交給標準化組織ECMA，ECMA將這種語言的語法標準制定了出來， 並把這套標準稱為ECMAScript，ES6是ECMAScript的一個版本。
  •  JavaScript用在瀏覽器，也可以執行在伺服器上（需要Node.js這個伺服器執行環境）。
  •  Babel是一個將ES6程式碼轉換為ES5程式碼的轉碼器。 
  • ESLint是按照規則檢查js程式碼，避免錯誤和統一程式碼風格的工具。

非同步

  • 單個js指令碼執行只在一個執行緒上（主執行緒）執行，其他執行緒後臺配合主執行緒
  • 單執行緒模式實現簡單，但每個任務需要等待前一個任務的執行完成才能接著執行。如果上一個程式沒有完成則會拖延整個程式的執行。如瀏覽器無響應（假死），常是死迴圈。 
  • 慢的是讀寫外部資料，等待ajax請求返回結果。 任務排隊往往不是計算量大，cpu忙不過來，而是IO操作（輸入輸出）很慢（ajax操作從網路讀取資料），如果等ajax返回結果出來，再接著執行，就會很慢
  • 所以js指令碼中cpu可以掛起等待中的任務，先執行後面的任務，等IO操作返回了結果（應該是其他執行緒去操作），再把掛起的任務（處理返回結果）繼續執行下去。 這就是js內部採用的事件迴圈（event loop） 
  • 一個Ajax請求服務端的資料操作，如果被當作同步任務，則主執行緒等著ajax操作返回結果，再往下執行；如果這個Ajax操作被當作非同步任務則主執行緒發出Ajax請求後，就直接往下執行，當Ajax操作有了結果，主執行緒再執行對應的回撥函式。

陣列遍歷的方法

  1. forEach遍歷陣列，修改原陣列，沒有返回值（return undefined）
  2.  map遍歷陣列，返回新的陣列，新陣列的元素為遍歷過程中返回的值
  3.  filter遍歷陣列，過濾出需要的元素，返回新的陣列，新陣列中包含符合篩選條件的原來的元素 some遍歷陣列，只要有一個元素符合條件則返回true，否則返回false，匹配到即跳出，不會全部遍歷 
  4. find同some，只不過找到了返回該元素 findIndex同find，返回第一個符合條件的索引 
  5. every遍歷陣列，遍歷全部，檢視有沒有不符合條件的，有則返回false，如果都符合條件則返回true 
  6.  reduce遍歷陣列

常用的字串方法

trim() 去除字串首尾的空格，字串的方法應該都是返回新串，因為字串是無法改變的資料型別

正則去除字串首尾和中間的空格

根據物件的屬性值來獲取陣列中該物件的索引

arr.forEach((item, index) => {
    for (let i in item) {
        if (item[i] === 'hy') {
            console.log(index)
        }
    }
})複製程式碼

split('')，將字串根據子串擷取成子串陣列

let str = 'abc:123'
let subStr = str.split(':') // ['abc', '123']複製程式碼

Number型別：
NaN // NaN表示Not a Number，當無法計算結果時用NaN表示
NaN === NaN; // false
isNaN(NaN); // true
null表示空值，定義了變數並初始化賦了null值
undefined表示定義了變數並沒有初始化

字串方法，無法改變字串，返回新串：
s.toUpperCase()
s.toLowerCase()
s.indexOf('str') // 10 or -1
s.substring(0, 4)
s.substring(1) // 1 to end

陣列方法：
arr.length
arr[1]
arr[1] = '1'
arr.indexOf('30') // return index
arr.slice(0, 3) // 擷取子陣列
arr.slice(0) // 0 to end
arr.push(1)
arr.push(1, 2)
arr.pop()
arr.unshift(1,2) // add element to array
arr.shift()

arr.sort()
arr.reverse() // 反轉元素位置

new一個promise例項物件p，物件中封裝了一次非同步操作，當呼叫p.then()時程式監聽這次非同步操作，並在操作完成之後觸發promise的下一步動作，
可以在promise的下一步動作then中處理成功的情況，或者promise的下一步動作catch中處理失敗的情況，這裡的成功或失敗是程式設計師自定義的
業務成功或失敗，在非同步操作中繫結的業務

generator生成器像是打斷點，程式執行到yield卡住等待上一步操作結果，再次觸發執行下一步

const arr1 = [10, 20, 30];
console.log(arr1.includes(10));

for (let key of arr1.keys()) {
	console.log(key);
}
for (let val of arr1.values()) {
	console.log(val);
}
for (let entry of arr1.entries()) {
	console.log(entry);
}
for (let [key, val] of arr1.entries()) {
	console.log(key + ': ' + val);
}

console.log(2**4); // 冪運算子

console.log('liqi'.startsWith('o')); // false
console.log('ritchieli'.endsWith('eli')); // true 

console.log('520'.padStart(10, '0')); // 填充字元
console.log('500'.padEnd(5, '0'))複製程式碼

引數解構：

const set = ({ count }) => {
  console.log(count)
}複製程式碼

引數解構就是一個函式是接收一個物件作為實參呼叫，將引數解構獲取到物件中的屬性，語法糖

刪除物件屬性

delete xiaoming.name複製程式碼

判斷物件是否含有某個屬性

xiaoming.hasOwnProperty('name')複製程式碼

null undefined 0 NaN '' 都是false

typeof

typeof 123 // 'number'

typeof只有判斷基本型別的變數時才有價值

typeof能判斷出number, string, boolean, function, undefined

判斷陣列用 Array.isArray(arr)

判斷null

typeof null
typeof []
typeof {} 
// 都屬於 'object'複製程式碼

用 String()轉換任意型別到字串


相關文章