JavaScript中字符串、數(shù)組和對象截取數(shù)據(jù)方法總結(jié)大全
數(shù)組截取數(shù)據(jù)方法
arr.slice(start, end)
start: 開始截取的索引（包含）
end: 結(jié)束截取的索引（不包含）
作用: 返回一個(gè)新數(shù)組，包含從開始到結(jié)束（不包括結(jié)束）的元素
const arr3 = [1, 2, 3, 4, 5]
const newArr = arr3.slice(1, 4)
console.log(newArr)// [2, 3, 4]arr.splice(start, deleteCount, item1, item2, ...)
start: 開始修改的索引
deleteCount: 要?jiǎng)h除的元素個(gè)數(shù)
item1, item2, ...: 要添加到數(shù)組的元素
作用: 刪除或替換數(shù)組中的元素，并返回被刪除的元素
const arr3 = [1, 2, 3, 4, 5]
const newArr = arr3.splice(1, 2)
console.log(newArr)// [2, 3]
console.log(arr3)//[1, 4, 5]array.filter(callback)
callback: 測試函數(shù)，返回 true 或 false
作用: 創(chuàng)建一個(gè)新數(shù)組，包含通過測試函數(shù)的所有元素
const arr3 = [1, 2, 3, 4, 5]
const newArr = arr3.filter(item => item > 2)
console.log(newArr)// [3, 4, 5]
console.log(arr3)//[1, 2, 3, 4, 5]對象截取數(shù)據(jù)方法
對象解構(gòu)賦值 const { prop1, prop2 } = obj
作用: 從對象中提取屬性并賦值給變量
const obj = { a: 1, b: 2, c: 3 }
const { a, b } = obj
console.log(a) // 1
console.log(b) // 2Object.keys(obj)
作用: 返回一個(gè)包含對象所有可枚舉屬性的數(shù)組
返回值: 屬性名數(shù)組
const obj = { a: 1, b: 2, c: 3 }
const keys = Object.keys(obj) // ['a', 'b', 'c']
console.log(keys) Object.values(obj)
作用: 返回一個(gè)包含對象所有可枚舉屬性值的數(shù)組
返回值: 屬性值數(shù)組
const obj = { a: 1, b: 2, c: 3 }
const values = Object.values(obj)
console.log(values) //[1,2,3]Object.entries(obj)
作用: 返回一個(gè)包含對象所有可枚舉屬性的鍵值對數(shù)組
返回值: 鍵值對數(shù)組
const obj = { a: 1, b: 2, c: 3 }
const entries = Object.entries(obj) // [['a', 1], ['b', 2], ['c', 3]]
console.log(entries) Object.assign(target, ...sources)
作用: 將一個(gè)或多個(gè)源對象的屬性復(fù)制到目標(biāo)對象
返回值: 目標(biāo)對象
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const newObj = Object.assign({}, obj1, obj2) // { a: 1, b: 2 }
console.log(newObj)字符串截取方法
str.slice(startIndex, endIndex)
startIndex: 開始截取的索引（包含）
endIndex: 結(jié)束截取的索引（不包含）。如果省略，則截取到字符串末尾
返回值: 新的字符串
作用: 提取字符串的一部分，并返回一個(gè)新的字符串
const str = "Hello, World!"
const newStr = str.slice(0, 5)// "Hello"
const newStr2 = str.slice(7) // "World!"
console.log(newStr)
console.log(newStr2)str.substring(startIndex, endIndex)
startIndex: 開始截取的索引（包含）
endIndex: 結(jié)束截取的索引（不包含）。如果省略，則截取到字符串末尾
注意:
如果 startIndex > endIndex，substring() 會自動(dòng)交換兩個(gè)參數(shù)
不支持負(fù)數(shù)索引
返回值: 新的字符串
作用: 提取字符串的一部分，并返回一個(gè)新的字符串
const str = "Hello, World!"
const newStr = str.substring(0, 5)// Hello
const newStr2 = str.substring(7) // World!
console.log(newStr)
console.log(newStr2)str.substr(startIndex, length) 已棄用
startIndex: 開始截取的索引
length: 截取的長度。如果省略，則截取到字符串末尾
注意:
substr() 是非標(biāo)準(zhǔn)方法，已棄用，建議使用 slice() 或 substring()
返回值: 新的字符串
作用: 從指定位置開始截取指定長度的字符串
const str = "Hello, World!"
const newStr = str.substr(0, 5) // "Hello"
const newStr2 = str.substr(7) // "World!"
console.log(newStr)
console.log(newStr2)str.split(separator, limit)
separator: 分隔符（可以是字符串或正則表達(dá)式）
limit: 返回?cái)?shù)組的最大長度
返回值: 拆分后的數(shù)組
作用: 將字符串按指定分隔符拆分為數(shù)組，然后可以截取部分內(nèi)容
const str = "Hello, World!"
const arr4 = str.split(" ") // ['Hello,', 'World!']
const firstWord = arr4[0] // Hello,
console.log(arr4)
console.log(firstWord)str.charAt(index)
index: 字符的索引
返回值: 指定位置的字符
作用: 返回字符串中指定位置的字符
const str = "Hello, World!"
const char = str.charAt(1)// "e"
console.log(char)str.charCodeAt(index)
index: 字符的索引
返回值: Unicode 編碼
作用: 返回字符串中指定位置的字符的 Unicode 編碼
const str = "Hello"
const code = str.charCodeAt(1) // 101
console.log(code)str.match(regexp)
regexp: 正則表達(dá)式
返回值: 匹配結(jié)果的數(shù)組，如果沒有匹配則返回 null
作用: 使用正則表達(dá)式匹配字符串，返回匹配結(jié)果
const str = "Hello, World!" const matches = str.match(/o/g) // ["o", "o"]
str.replace(searchValue, replaceValue)
searchValue: 要查找的內(nèi)容（可以是字符串或正則表達(dá)式）
replaceValue: 替換的內(nèi)容
返回值: 新的字符串
作用: 替換字符串中的部分內(nèi)容
const str = "Hello, World!"
const newStr = str.replace("World", "JavaScript") // "Hello, JavaScript!"str.trim()
返回值: 新的字符串
作用: 去除字符串兩端的空白字符
const str = " Hello, World! " const newStr = str.trim() // "Hello, World!"
str.padStart(targetLength, padString)
str.padEnd(targetLength, padString)
targetLength: 目標(biāo)長度
padString: 填充的字符（默認(rèn)為空格）
返回值: 新的字符串
作用: 在字符串的開頭或結(jié)尾填充指定字符，直到字符串達(dá)到指定長度
const str = "Hello" const paddedStart = str.padStart(10, "*") // "*****Hello" const paddedEnd = str.padEnd(10, "*") // "Hello*****"
總結(jié)
到此這篇關(guān)于JavaScript中字符串、數(shù)組和對象截取數(shù)據(jù)方法的文章就介紹到這了,更多相關(guān)js字符串、數(shù)組和對象截取方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Bootstrap開發(fā)實(shí)戰(zhàn)之第一次接觸Bootstrap
Bootstrap開發(fā)實(shí)戰(zhàn)之第一次接觸Bootstrap,想要學(xué)好一門語言，首先應(yīng)該進(jìn)行深入了解，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)同一頁面取值的方法,結(jié)合實(shí)例形式分析了微信小程序在同一頁面取值的常見情況與具體操作技巧,需要的朋友可以參考下2019-04-04
ES6實(shí)現(xiàn)的遍歷目錄函數(shù)示例
這篇文章主要介紹了ES6實(shí)現(xiàn)的遍歷目錄函數(shù),涉及ES6文件目錄的遍歷、讀取、回調(diào)函數(shù)及json相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了JS設(shè)計(jì)模式之惰性模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Web開發(fā)中,JavaScript與CSS的結(jié)合用于增強(qiáng)網(wǎng)頁的交互性和用戶體驗(yàn),本文將探索幾種高級方法來使用JavaScript操作CSS,并分別通過代碼示例進(jìn)行講解,希望對大家有所幫助2023-12-12
localResizeIMG先壓縮后使用ajax無刷新上傳（移動(dòng)端）
隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備像素越來越高，但是這么大的圖片怎么上傳呢？下面小編就給大家一起學(xué)習(xí)移動(dòng)端圖片上傳的方法之localResizeIMG先壓縮后使用ajax無刷新上傳，需要的朋友可以參考下2015-08-08
類的出現(xiàn)最終使JavaScript非常容易使用繼承法,JavaScript類比大多數(shù)人意識到的更強(qiáng)大,它是構(gòu)建真正的mixins的良好基礎(chǔ)，本文介紹JavaScript中的Mixin介紹的非常詳細(xì)，需要的小伙伴可以參考閱讀一下2023-04-04
這篇文章主要介紹了淺談 JS 對象添加 getter與 setter 的5種方法以及如何讓對象屬性不可配置或枚舉,需要的朋友可以參考下2018-06-06
javascript中獲取class的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨avascript中獲取class的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實(shí)現(xiàn)數(shù)組降維詳解
大家都知道將多維數(shù)組（尤其是二維數(shù)組）轉(zhuǎn)化為一維數(shù)組是業(yè)務(wù)開發(fā)中的常用邏輯，除了使用樸素的循環(huán)轉(zhuǎn)換以外，我們還可以利用Javascript的語言特性和數(shù)據(jù)結(jié)構(gòu)的思想實(shí)現(xiàn)更為簡潔優(yōu)雅的轉(zhuǎn)換。下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組降維吧。2017-01-01