當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

js函数语法：ASCII 码的相互转换，字符串操作，数学计算

發布時間：2023/11/27 生活经验 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 js函数语法：ASCII 码的相互转换，字符串操作，数学计算小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

ASCII 碼的相互轉換

for (let i = 'a'.charCodeAt(); i <= 'z'.charCodeAt(); i++) {a.push(String.fromCharCode(i))
}

字符串操作

filter： filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
filter 為數組中的每個元素調用一次 callback 函數，并利用所有使得 callback 返回 true 或等價于 true 的值的元素創建一個新數組。callback 只會在已經賦值的索引上被調用，對于那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過 callback 測試的元素會被跳過，不會被包含在新數組中。
round: 返回四舍五入后的整數，需要注意，js 的 round 有點不同，它并不總是舍入到遠離 0 的方向，特別是負數的小數部分恰好等于 0.5 的情況下。

Math.round(-3.5)  // -3
Math.round(-3.51) // -4

Math.trunc(3.1) // 3返回一個數的整數部分，直接去除小數點之后的部分，傳入的參數會被隱式轉換為數字類型
遍歷數組

let arr = [1, 2, 3, 4, 5]
for (let item of arr) {console.log(item) // item為正在處理的當前元素
}
arr.forEach((item, index) => {console.log(item, index) // item為正在處理的當前元素，index為索引值
})

需要注意的是，forEach 與 for..of 不同，除了拋出異常之外，沒有辦法中止或者跳出 forEach 循環。

map: 返回一個由回調函數的返回值組成的新數組。

let arr = [1, 2, 3]
let tpl = arr.map((item) => `<span>${item}</span>`)
console.log(tpl)
// [ '<span>1</span>', '<span>2</span>','<span>3</span>' ]

reduce: 從左到右為每個數組元素執行一次回調函數，并把上次回調函數的返回值放在一個暫存器中傳給下次的回調函數，并返回最后一次回調函數的返回值。

let arr = [1, 2, 3]
let sum = arr.reduce((previous, current, index) => {console.log(previous, current, index)return previous + current
})
console.log(sum) // 6

find: 找到第一個滿足測試函數的元素并返回那個元素的值，如果找不到，則返回 undefined。

let arr = [1, 2, 3, 4, 5]
let found = arr.find((item) => item > 3)
console.log(found) // 4

findIndex: 找到第一個滿足測試函數的元素并返回那個元素的索引，如果找不到，則返回 -1。

let arr = [1, 2, 3, 4, 5]
let index = arr.findIndex((item) => item > 3)
console.log(index) // 3

includes: 判斷當前數組是否包含某指定的值，如果是返回 true，否則返回 false。

let arr = [1, 2, 3, 4, 5]
console.log(arr.includes(3)) // true
console.log(arr.includes('2')) // false

indexOf: 返回數組中第一個與指定值相等的元素的索引，如果找不到這樣的元素，則返回 -1。

let arr = [1, 2, 3, 4, 5]
let index = arr.indexOf(4)
console.log(index) // 3

join: 連接所有數組元素組成一個字符串。

let arr = [1, 2, 3, 4, 5]
console.log(arr.join('')) // '12345'
console.log(arr.join('-')) // '1-2-3-4-5'

concat: 用于合并兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr3 = arr1.concat(arr2)
console.log(arr3) // [ 1, 2, 3, 4, 5 ]

slice: 抽取當前數組中的一段元素組合成一個新數組，這是一個原數組的淺拷貝，原始數組不會被改變。

let arr = [1, 2, 3, 4, 5]
console.log(arr.slice(2)) // [ 3, 4, 5 ]
console.log(arr.slice(1, 3)) // [ 2, 3 ]

splice: 在任意的位置給數組添加或刪除任意個元素。這個很容易和 slice 搞混，此方法會改變原數組。
插入元素：

let arr = [1, 2, 3, 4, 5]
arr.splice(2, 0, 6)
console.log(arr) // [ 1, 2, 6, 3, 4, 5 ]

刪除元素：

let arr = [1, 2, 3, 4, 5]
let item = arr.splice(1, 2)
console.log(item) // [ 2, 3 ]console.log(arr)  // [ 1, 4, 5 ]

刪除元素的同時插入兩個元素：

let arr = [1, 2, 3, 4, 5]
let item = arr.splice(1, 2, 6, 7)
console.log(item) // [ 2, 3 ]
console.log(arr) // [ 1, 6, 7, 4, 5 ]

reverse: 顛倒數組中元素的排列順序，即原先的第一個變為最后一個，原先的最后一個變為第一個，該方法會改變原數組。

let arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr) // [ 5, 4, 3, 2, 1 ]，原數組被改變

push: 在數組的末尾增加一個或多個元素，并返回數組的新長度。

let arr = [1, 2, 3, 4, 5]
console.log(arr.push(6)) // 6
console.log(arr.push(7, 8)) // 8
console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

pop: 刪除數組的最后一個元素，并返回這個元素。

let arr = [1, 2, 3, 4, 5]
let item = arr.pop()
console.log(item) // 5
console.log(arr) // [ 1, 2, 3, 4 ]

unshift: 在數組的開頭增加一個或多個元素，并返回數組的新長度，與 push 對應

let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(6)) // 6
console.log(arr.unshift(7, 8)) // 8
console.log(arr) // [ 7, 8, 6, 1, 2, 3, 4, 5 ]

shift: 刪除數組的第一個元素，并返回這個元素，與 pop 對應

let arr = [1, 2, 3, 4, 5]
console.log(arr.shift()) // 1
console.log(arr) // [ 2, 3, 4, 5 ]

push、pop、unshift、shift 這幾個方法組合起來，可以用來實現棧、隊列的功能

sort: 方法用用于對數組的元素進行排序，并返回數組。默認排序順序是在將元素轉換為字符串，然后比較它們的 UTF-16 代碼單元值序列時構建的

let arr = ['b', 'd', 'a', 'c']
arr.sort()
console.log(arr)

sort 實現升序降序排列

let arr = [3, 5, 1, 4, 2]
arr.sort((a, b) => {if (a < b) return -1if (a > b) return 1return 0
})
console.log(arr) // [ 1, 2, 3, 4, 5 ]，升序
arr.sort((a, b) => {if (a < b) return 1if (a > b) return -1return 0
})
console.log(arr) // [ 5, 4, 3, 2, 1 ]，降序

substring 該方法返回一個字符串在開始索引到結束索引之間的一個子集，或者從開始索引到字符串末尾的一個子集。

let str = '0123456789'
console.log(str.substring(0, 3)) // '012'
console.log(str.substring(3, 6)) // '345'
console.log(str.substring(0, -3)) // 相當于 str.substring(0, 0)，輸出為空字符串

slice slice 的作用和 substring 非常類似，不同的是，slice 的參數可以為負數，表示倒數第幾個字符

let str = '0123456789'
console.log(str.slice(0, 3)) // '012'
console.log(str.slice(3, 6)) // '345'
console.log(str.slice(0, -3)) // '0123456'，表示從第0各字符提取到倒數第三個字符
console.log(str.slice(-3, -1)) // '78'

includes 方法用于判斷一個字符串是否包含在另一個字符串中，根據情況返回 true 或 false。

let str = '0123456789'
console.log(str.includes('123')) // true
console.log(str.includes('123', 4)) // false

startsWith startsWith 方法用來判斷當前字符串是否以另外一個給定的子字符串開頭，并根據判斷結果返回 true 或 false。

let str = '0123456789'
console.log(str.startsWith('0123')) // true
console.log(str.startsWith('1234')) // false
console.log(str.startsWith('1234', 1)) // true

endsWith endsWith 與 startsWith 作用類似，用來判斷當前字符串是否以另外一個給定的子字符串結尾，endsWith 的第二個參數是可選的 str 長度.
```
let str = '0123456789'
console.log(str.endsWith('789')) // true
console.log(str.endsWith('456', 7)) // true，相當于判斷 '0123456'.endsWith('456)
```
repeat 該方法返回一個新字符串，表示將原字符串重復 n 次.
```
'abc'.repeat(2) // 'abcabc'
```
padStart、padEnd 這兩個方法提供了字符串補全長度的功能，如果某個字符串不夠指定的長度，會在頭部或者尾部補全，padStart 用于頭部補全，padEnd 用于尾部補全，這個在格式化字符串的時候非常有用.
```
'5'.padStart(5, '0') // '00005'
'123'.padEnd(5) // '123  '，默認使用空格補全
'12345'.padStart(4) // '12345'，超出長度，不會變化
```
trim、trimStart、trimEnd 這三個方法的作用類似，trim 用來消除字符串首尾的空格，trimStart 用來消除字符串頭部的空格，trimEnd 用來消除字符串尾部的空格，他們返回的都是新字符串，不會改變原值.
```
let str = '  abc  '
str.trim() // 'abc'
str.trimStart() // 'abc  '
str.trimEnd() // '  abc'
```
replaceAll 以前 js 的字符串替換方法 replace() 只會替換第一個匹配，如果想要替換所有的匹配，需要寫正則表達式，例如：
```
'aabbcc'.replace('b', '_') // 'aa_bcc'
'aabbcc'.replace(/b/g, '_') // 'aa__cc'
```
寫正則增加了復雜度，現在新增的 replaceAll() 方法，可以一次性替換所有匹配
```
'aabbcc'.replaceAll('b', '_') // 'aa__cc'
```
split 該方法使用指定的分割字符將一個字符串分割成子字符串數組，以一個指定的分割字符串來決定每個拆分的位置
```
console.log('Hello JavaScript'.split(' ')) // [ 'Hello', 'JavaScript' ]
console.log('Hello'.split('')) // [ 'H', 'e', 'l', 'l', 'o' ]
```

數學計算

Math 是一個內置對象，它擁有一些數學常數和數學函數方法，這里我們介紹幾個常用的 API。
PI: 圓周率常數

console.log(Math.PI) // 3.141592653589793

floor: 返回小于一個數的最大整數

console.log(Math.floor(3.1)) // 3
console.log(Math.floor(3)) // 3

ceil: 返回大于一個數的最小整數

console.log(Math.ceil(3)) // 3
console.log(Math.ceil(3.1)) // 4

round: 返回四舍五入后的整數，需要注意，js 的 round 有點不同，它并不總是舍入到遠離 0 的方向，特別是負數的小數部分恰好等于 0.5 的情況下。

Math.round(3.49) // 3
Math.round(3.5) // 4
Math.round(-3.5) // -3
Math.round(-3.51) // -4

trunc: 返回一個數的整數部分，直接去除小數點之后的部分，傳入的參數會被隱式轉換為數字類型

Math.trunc(3.1) // 3
Math.trunc(0.5) // 0
Math.trunc('-1.2') // -1

random: 該函數返回一個浮點數，偽隨機數的范圍從 0 到 1，也就是說大于等于 0，小于 1，我們可以以此為種子，擴展到自己想要生成的隨機數的范圍，比如下面的例子，可以讓我們生成指定范圍的隨機整數。

function random(min, max) {return Math.floor(Math.random() * (max - min) + min)
}

總結

以上是生活随笔為你收集整理的js函数语法：ASCII 码的相互转换，字符串操作，数学计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。