當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

js中text方法是啥意识_一盏茶的时间，快速捕获JS中常用的方法（细心整理，持续更新ing）...

發布時間：2025/3/20 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 js中text方法是啥意识_一盏茶的时间，快速捕获JS中常用的方法（细心整理，持续更新ing）... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

不知不覺上班一周遼～趁著大好周末，小編掙扎著從床上爬起來，決定對前端日常編程中常用到的一些方法做一個系統的整合。

有些人或許會覺得忘了百度就完事兒，no no no！這事兒小編真的親踐過好多次，百度一次記住了還好，記不住下次碰著了還得找度娘簡直是拉低工作效率。

本次整理希望可以幫助到需要的童鞋，閑暇無聊多瞅幾眼保證能記住(記不住歡迎下方戳小編，小編一定給各位大佬寄“拖鞋”)。因為js這類的方法(技巧)總有新玩法，本篇文檔會持續更新，建議收藏。

Array

new Set()

用來對數組進行去重。

const arr = [3,4,4,5,4,6,5,7];console.log(new Set(arr)); // {3,4,5,6,7}const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]

sort()

對數組元素進行排序(改變原數組)。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.sort()) // [3, 4, 4, 4, 5, 5, 6, 7]

reverse()

反轉數組中的元素(改變原數組)。

const arr = [3,4,4,5,4,6,5,7];conosle.log(arr.reverse()); // [7, 6, 5, 5, 4, 4, 4, 3]

delete

刪除一個數組成員，會形成空位，并不會影響length屬性(改變原數組),同樣適用于對象。

//數組const arr = [3,4,4,5,4,6,5,7];delete arr[1];conosle.log(arr); // [3, empty, 4, 5, 4, 6, 5, 7]//對象const obj = {name: 'pboebe',age: '23',sex: '女'};delete obj.sex;console.log(obj); // {name: "pboebe", age: "23"}

shift()

把數組的第一個元素從其中刪除，并返回第一個元素的值(改變原數組)。

const arr = [3,4,4,5,4,6,5,7];const a = arr.shift(); // 3console.log(arr); // [empty, 4, 5, 4, 6, 5, 7]

unshift()

向數組的起始處添加一個或多個元素,并返回新的長度(改變原數組)。

const arr = [3,4,4,5,4,6,5,7];const a = arr.unshift(8);console.log(a); // 9(a為返回的數組的新長度)console.log(arr); // [8, 3, 4, 4, 5, 4, 6, 5, 7]

push()

在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度(改變原數組)。

const arr = [3,4,4,5,4,6,5,7];const a = arr.push(8,9);console.log(a); // 10(a為返回的數組的新長度)console.log(arr); // [3, 4, 4, 5, 4, 6, 5, 7, 8, 9]

valueOf()

返回數組本身。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.valueOf()); // [3,4,4,5,4,6,5,7]

toString()

可把值轉換成字符串。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.toString()); // 3,4,4,5,4,6,5,7

concat()

在原始數據尾部添加另外數據組成新數據(字符串適用)。

//數組const a = [1,2,3];const b = [4,5];const c = a.concat(b); // [1, 2, 3, 4, 5]//字符串const x = 'abc';const y = 'def';const z = x.concat(y); // abcdef

join()

以參數作為分隔符，將所有參數組成一個字符串返回(一般默認逗號隔開)。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.join('-')); // 3-4-4-5-4-6-5-7

slice(start, end)

用于提取原來數組的一部分，會返回一個提取的新數組，原數組不變(字符串適用,不包括end)。

//數組const arr = [3,4,4,5,4,6,5,7];const a = arr.slice(2, 5); // [4, 5, 4]//字符串const x = 'abcdefgh';const y = x.slice(3, 6); // def

splice()

用于刪除原數組的一部分，并且可以在刪除的位置添加新的數組成員，返回值是被刪除的數組元素。(改變原數組)

splice(t, v, s)t:被刪除元素的起始位置；v：被刪除元素個數；s:s以及后面的元素為被插入的新元素。

const arr = [3,4,4,5,4,6,5,7];const a = arr.splice(3, 2, 12); // [5, 4]console.log(arr);?//?[3,?4,?4,?12,?6,?5,?7]

map()

依次遍歷數組成員，根據遍歷結果返回一個新數組。(map方法同樣適用于字符串，但是不能直接調用，需要通過函數的call方法，間接使用，或者先將字符串川轉為數組，再使用)(不會改變原始數組)。

const arr = [3,4,4,5,4,6,5,7];const a = arr.map(item => item*2;) // [6, 8, 8, 10, 8, 12, 10, 14]

forEach()

跟map方法類似，遍歷數組，區別是無返回值。

const arr = [3,4,4,5,4,6,5,7];arr.forEach(function(value,index,arr){console.log(value)}))//34454657

for in()

跟map方法類似，遍歷對象或者數組。

但值得注意的是for in循環返回的值都是數據結構的鍵值名。遍歷對象返回的對象的key值,遍歷數組返回的數組的下標(key)。

// 對象const obj = {a: 123, b: 12, c: 2 };for (let a in obj) {console.log(a)}// a b c//數組const arr = [3,4,4,5];for(let a in arr) {console.log(a)}// 0123

filter()

一個過濾方法，參數是一個函數，所有的數組成員依次執行該函數，返回結果為true的成員組成一個新數組返回。(不會改變原始數組)。

const arr = [3,4,4,5,4,6,5,7];const a = arr.filter(item => item % 3 > 1);console.log(a); // [5, 5]

some()& every()

這兩個方法類似于“斷言”(assert)，用來判斷數組成員是否符合某種條件。

const arr = [3,4,4,5,4,6,5,7];console.log( arr.some( function( item, index, array ){console.log( 'item=' + item + ',index='+index+',array='+array );return item > 3;}));// item=3,index=0,array=3,4,4,5,4,6,5,7// item=4,index=1,array=3,4,4,5,4,6,5,7// trueconsole.log( arr.every( function( item, index, array ){console.log( 'item=' + item + ',index='+index+',array='+array );return item > 3;}));// item=3,index=0,array=3,4,4,5,4,6,5,7//false

some方法是只要有一個數組成員的返回值為true，則返回true，否則false；

every方法是需要每一個返回值為true，才能返回true，否則為false;

reduce()

依次處理數組的每個成員，最終累計成一個值。

格式：

reduce(a, b, x, y)

a:必填，累計變量；b：必填，當前變量；x: 可選，當前位置；y:可選，原數組。

//簡單用法const arr = [3,4,4,5,4,6,5,7];const a = arr.reduce((pre, cur) => {return pre+cur})// 逗號寫法const a = arr.reduce((pre, cur) => (sum= pre+cur, sum))console.log(a) // 38//高級用法(舉個數組去重和數組扁平化栗子)const b = arr.reduce((pre, cur) => {if(!pre.includes(cur)) {return pre.concat(cur) } else {return pre }}, [])// [3, 4, 5, 6, 7]const arrs = [[2,3,2], [3,4,5]]const c = arr.reduce((pre, cur) => {return pre.concat(cur)}, [])// [2, 3, 2, 3, 4, 5]

reduce的用法還有很多，剋各種嘗試。

reduceRight()

與reduce方法使用方式相同，區別在于reduceRight方法從右到左執行(例子略過)。

indexOf()

返回給定元素在數組中的第一次出現的位置，如果沒有則返回-1(同樣適用于字符串)。

//數組const arr = [3,4,4,5,4,6,5,7];console.log(arr.indexOf(4)) // 1console.log(arr.indexOf('4')) // -1//字符串conststring = 'asdfghj';console.log(string.indexOf('a')) // 0

lastIndexOf()

返回給定元素在數組中最后一次出現的位置，沒有返回-1(同樣適用于字符串)。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.lastIndexOf(4))// 4(從左到右數最后出現的位置，字符串同理)

groupBy()

把集合的元素按照key歸類，key由傳入的參數返回。

shuffle()

用洗牌算法隨機打亂一個集合。

const arr = [1,2,3,4,5,6,7,8,9,10];const shuffle = ([...arr]) => { let m = arr.length; while (m) { const i = Math.floor(Math.random() * m--); [arr[m], arr[i]] = [arr[i], arr[m]]; } return arr;};console.log(shuffle(arr))// [10, 9, 7, 5, 6, 4, 1, 2, 8, 3]

flatten()

簡寫為flat()，接收一個數組，無論這個數組里嵌套了多少個數組，flatten最后都會把其變成一個一維數組(扁平化)。

const arr = [[1,2,3],[4,5,[6,7]]];const a = arr.flatten(3);console.log(a);?//?[1,?2,?3,?4,?5,?6,?7]

Array.isArray()

用來判斷是不是數據是不是一個數組，返回值為true或false。

const arr = [3,4,4,5,4,6,5,7];console.log(Array.isArray(arr)) // true

copyWithin()

從數組的指定位置拷貝元素到數組的另一個指定位置中。

格式：array.copyWithin(target, start, end)const arr = [3,4,4,5,4,6,5,7];console.log(arr.copyWithin(4,2)) // [3, 4, 4, 5, 4, 5, 4, 6]

find()

返回符合傳入測試(函數)條件的數組元素。

const arr = [3,4,4,5,4,6,5,7];const a = test.find(item => item > 3);console.log(a); //4(find() 方法返回通過測試(函數內判斷)的數組的第一個元素的值。)const b = test.find(item => item == 0);console.log(b); //undefined(如果沒有符合條件的元素返回 undefined)

String

charAt()

用于返回指定位置的字符。

const str = 'hello guys';console.log(str.charAt(3)) // l

charCodeAt()

用于返回指定位置的字符的Unicode編碼。

const str = 'hello guys';console.log(str.charCodeAt(3)) // 111

match()

用于在字符串內檢索指定的值或找到一個或多個正則表達式的匹配，返回的是值而不是值的位置。

const str = 'hello guys';console.log(str.match('guys')) // ["guys"]// 使用正則匹配字符串const strs = '1.hello guys, 2.are you ok?';console.log(strs.match(/\d+/g)) // ["1", "2"]

replace()

替換匹配的字符串。

const str = 'hello guys';console.log(str.replace('guys', 'man')) // hello man

search()

用于檢索與字符串匹配的子串，返回的是地址,與indexOf()的區別是?search?是強制正則的，而?indexOf只是按字符串匹配的。

const str = 'hello guys';console.log(str.search('guys')) // 6console.log(str.indexOf('guys')) // 6// 區別conststring = 'abcdefg.1234';console.log(string.search(/\./)) // 7(轉譯之后可以匹配到 . 的位置)console.log(string.indexOf(/\./)) // -1 (相當于匹配/\./，找不到則返回-1,只能匹配字符串)

split()

將字符串切割成數組。

const str = 'hello guys';console.log(str.split('')) // ["h", "e", "l", "l", "o", " ", "g", "u", "y", "s"]console.log(str.split('', 3)) // ["h", "e", "l"]

toLocaleLowerCase()& toLowerCase()

將字符串轉換成小寫。

const str = 'hello guys';console.log(str.toLocaleLowerCase()) // hello guysconsole.log(str.toLowerCase()) // hello guys

toLocaleUpperCase() & toUpperCase()

將字符串轉換成大寫。

const str = 'hello guys';console.log(str.toLocaleUpperCase()) // HELLO GUYSconsole.log(str.toUpperCase()) // HELLO GUYS

substr()

用于從起始索引號提取字符串中指定數目的字符。

const str = 'hello guys';console.log(str.substr(2)) // llo guysconsole.log(str.substr(2, 7)) // llo guy

substring()

用于提取字符串中兩個指定索引號之間的字符。(與?slice()?和?substr()?方法不同的是，substring()?不接受負的參數。)

const str = 'hello guys';console.log(str.substring(2)) // llo guysconsole.log(str.substring(2, 7)) // llo g

.trim()

去掉字符串兩端的空格。

const str = ' hello guys ';console.log(str.trim()) // hello guys(不會改變原數組)

常用的Json.xxx方法

JSON.parse()

用于把字符串轉化為對象。

const str = '{"name": "phoebe", "age": 20}';const obj = JSON.parse(str) // {name: "phoebe", age: 20}(object類型)

JSON.stringify()

用于把對象轉化為字符串。

const obj = {"name": "Tins", "age": 22};const str = JSON.stringify(obj) // {"name":"Tins","age":22}(string類型)

Object 實例對象的方法主要有以下六個

Object.Prototype.valueOf()

返回當前對象對應的值。(Object.valueOf()相當于Object.Prototype.ValueOf()

我們創建一個取代valueOf()方法的函數，但是需要注意的是方法必須不能傳入參數。假設我們有個對象叫ObjectrType而我想為它創建一個valueOf()方法。下面的代碼為valueOf()方法賦予了一個自定義函數:

ObjectrType.prototype.valueOf = function() { return customValue; };

有了這樣的一個方法，下一次每當ObjectrType要被轉換為原始類型值時，JavaScript在此之前會自動調用自定義的valueOf()方法。valueOf()方法一般都會被JavaScript自動調用，但我們也可以像下面代碼那樣自己調用：

ObjectrType.valueOf()

valueOf同樣適用于string，number，?symbol，boolean，date。

Object.Prototype.toString()

返回當前對象對應的字符串形式。

functionDog(name) {this.name = name;}const dog1 = new Dog('Gabby');Dog.prototype.toString = functiondogToString() {return'' + this.name;}console.log(dog1.toString()); // Gabby

Object.Prototype.toLocaleString()

返回當前對象對應的模塊字符串。

語法：obj.toLocaleString();

let foo = {};foo.toLocaleString(); // "[object Object]"

Object.Prototype.isPrototypeOf()

判斷當前對象是否為另一個對象的原型。語法：

Object.prototype.isPrototypeOf(targetObj)const arr = [];Array.prototype.isPrototypeOf(arr); // true// 修改obj的原型Object.setPrototypeOf(arr, String.prototype);Array.prototype.isPrototypeOf(arr); // falseString.prototype.isPrototypeOf(arr); // true

Object.Prototype.hasOwnProperty()

判斷某個屬性是否為當前對象自身的屬性，還是繼承自原型對象的屬性,并返回一個布爾值。

語法：Object.prototype.hasOwnProperty(prop)

let obj = {};// 定義一個object實例obj.prop1 = 'value1'; // prop1是一個自有屬性obj.constructor.prototype.prop2 = 'value2'; // prop2是一個原型鏈屬性// 無論自有屬性還是原型鏈屬性，我們都可以訪問到console.info(obj.prop1); // value1console.info(obj.prop2); // value2// 使用`hasOwnProperty()`方法判斷屬性是否為自有屬性obj.hasOwnProperty('prop1'); // trueobj.hasOwnProperty('prop2'); // false

Object.Prototype.PropertyIsEnumerable()

判斷某個屬性是否可枚舉。

語法：Object.prototype.propertyIsEnumerable(prop)

Javascript的三種判斷一個值的類型的辦法

typeOf()

typeof可用來檢測數據類型: 需要注意的是typeof無法區分null、Array和通常意義上的object。

typeof 123 //numbertypeof '123' //stringtypeof true // booleantypeof false //booleantypeof undefined // undefinedtypeof Math.abs // functiontypeof function () {} // function// 當遇上`null`、`Array`和通常意義上的`object`,都會返回 objecttypeof null // objecttypeof [] // object(所以判斷數組時可以使用Array.isArray(arr))typeof {} // object// 當數據使用了new關鍵字和包裝對象以后，數據都會變成Object類型，不加new關鍵字時會被當作普通的函數處理。typeof new Number(123); //'object'typeof Number(123); // 'number'typeof new Boolean(true); //'object'typeof Boolean(true); // 'boolean'typeof new String(123); // 'object'typeof String(123); // 'string'

instanceOf()

instanceOf()運算符用于檢測構造函數的?prototype?屬性是否出現在某個實例對象的原型鏈

function Car(make, model, year) { this.make = make; this.model = model; this.year = year;}const auto = new Car('Honda', 'Accord', 1998);console.log(auto instanceof Car); // trueconsole.log(auto instanceof Object); // true

Object.Prototype.toString()(推薦)

可以精準的判斷對象類型。

對于array、null、object來說，其關系錯綜復雜，使用?typeof都會統一返回?object?字符串,要想區別對象、數組、函數單純使用typeof是不行的,想要準確的判斷對象類型，推薦使用Object.Prototype.toString(),它可以判斷某個對象值屬于哪種內置類型。

const arrs = [1,2,3];console.log(typeof arrs) // objectconsole.log(Object.Prototype.toString.call(arrs)) // [object Array]

call，apply以及bind的用法，區別及相似住處

用法

call

直接調用該執行函數，在執行的時候，將函數內部的作用域綁定到指定的作用域。(call()方法接受若干個參數的列表)

const arr = [2,5,4,7,6]const a = Function.prototype.apply.call(Math.max, null,arr)console.log(a) // 7

apply

直接調用該執行函數，在執行的時候，將函數內部的作用域綁定到指定的作用域。

call()是apply()的一顆語法糖，作用和apply()一樣，同樣可實現繼承，唯一的區別就在于call()接收的是參數列表，而apply()則接收參數數組。

bind

創建一個新的函數的引用，并綁定到一個作用域特定作用域上，同時支持傳參。

bind則和call的用法差不多，唯一區別是，call和apply會立刻調用函數，bind只是綁定this

格式為：bind(作用域參數，參數1，參數2)

const fruits = { "name": "apple", getOtherFriut: function() { return this.name; }}const color = { "name": " is red"}const fruitColor = fruits.getOtherFriut.bind(this, color)console.log(fruitColor()) //is redconst arr = [2,5,4,7,6]const a = Function.prototype.call.apply(Math.max, arr)console.log(a) // 7//如果apply的第二個參數是個null，會返回-Infinityconst b = Function.prototype.call.apply(Math.max, null, arr)console.log(b) // -Infinity

相似之處

都是用來改變函數的this對象；
第一個參數都是this要指向的對象；
都可利用后繼參數傳參；

區別

都可以用來代替另一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變為由?thisObj?指定的新對象。
bind()是返回一個新函數，供以后調用，而apply()和call()是立即調用。
call()和apply()唯一區別是參數不一樣，call()是apply()的語法糖；

選擇使用

如果不需要關心具體有多少參數被傳入函數，選用apply()；
如果確定函數可接收多少個參數，并且想一目了然表達形參和實參的對應關系，用call()；
如果想要將來再調用方法，不需立即得到函數返回結果，則使用bind();

Date對象的用法

首先需要定義一個變量：

const date = new Date();

接下來就可以直接使用常見的Date對象方法。

Date(): 返回當日的日期和時間；
getDate(): 從Date對象返回一個月中的某一天(1～31)console.log(date.getDate())；
getDay():從Date對象返回一周中的某一天(0～6)；
getMonth(): 從Date對象返回月份(0～11)；
getFullYear(): 從Date對象以四位數字返回年份；
getYear()：可以使用getFullYear()代替；
getHours(): 返回Date()對象的小時(0～23);
getMinutes(): 返回Date()對象的分鐘(0～59);
getSeconds(): 返回Date()對象的分鐘(0～59);
getMillseconds(): 返回Date()對象的毫秒(0～999);
getTime(): 返回1970年1月1日至今的時間；
getTimezoneOffset(): 返回本地時間與格林威治標準時間(GMT)的分鐘差；
getUTCDate(): 根據世界時從Date對象返回月中的一天(1～31)；
getUTCDay(): 根據世界時從Date對象返回周中的一天(1～6)；
getUTCMonth(): 根據世界時從Date對象返回月份(0～11)；
getUTCFullYear(): 根據世界時從Date對象返回四位數的年份；
getUTCHours(): 根據世界時從Date對象返回對象的小時(0～23)；
getUTCMinutes(): 根據世界時從Date對象返回對象的分鐘(0～59)；
getUTCSeconds(): 根據世界時從Date對象返回對象的秒鐘(0～59)；
getUTCMillseconds(): 根據世界時從Date對象返回對象的毫秒(0～999)；
parse(): 返回1970年1月1日午夜到指定日期(字符串)的毫秒數；
setDate(): 設置Date對象中月的某一天(1～31)；
setMonth(): 設置Date對象中月份(0～11)；
setFullYear(): 設置Date對象中的年份(四位數字)；

Math.xx開頭的方法

Math.ceil(): ?對數進行上舍入(天花板函數) 大于等于 x，并且與它最接近的整數。
Math.floor(): 對數進行下舍入(地板函數)。
Math.max(x,y):返回x,y中的最大值。
Math.min(x,y):返回x,y中的最小值。
Math.pow(x,y): 返回x的y次方。
Math.random() : 返回0-1之間的隨機數。
Math.round(x): 四舍五入。
Math.abs(x):返回數的絕對值。
Math.acos(x):返回數的反余弦值。
Math.asin(x): 返回數的反正弦值。
Math.atan(x):返回數的反正切值。
Math.atan2(y,x):返回由x軸到點(x，y)的角度(以弧度為單位)。
Math.cos(x): 返回數的余弦值。
Math.exp(e): 返回e的指數。
Math.log(x):返回數的自然對數(以e為底數)。
Math.sin(x):返回數的正弦值。
Math.sqrt(x):返回數的平方根。
Math.tan(x): 返回角的正切值。
Math.toSource():返回該對象的源代碼。
Math.valueOf(): 返回Math對象的原始值。

一更?：簡單的數組去重

看到評論有小哥(or小姐姐)說了簡單的數組去重的方式，之前整理的時候只是簡單的拓寬了以下，現在對與數組去重的幾種方式在這里做一下歸納：

最便捷的方法：[...new Set(arr)]

const arr = [4,5,3,4,6,5,8,6];console.log(Array.from(new Set(arr))) // [4, 5, 3, 6, 8]console.log([...new Set(arr)]) // [4, 5, 3, 6, 8]

recude+include去重

const arr = [4,5,3,4,6,5,8,6];const a = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);console.log(a) // [4, 5, 3, 6, 8]

利用filter去重

const arr = [4,5,3,4,6,5,8,6];const b = arr.filter((item, index, arr) => arr.indexOf(item, 0) === index;) // [4, 5, 3, 6, 8]

利用hasOwnProperty去重

const arr = [4,5,3,4,6,5,8,6];function duplicate (arr) { var obj = {}; return arr.filter(function(item, index, arr){ return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) })}console.log(duplicate(arr)) // 4, 5, 3, 6, 8]

比較簡單而且穩妥的就這幾種，其他的去重方式，可以考慮使用“遞歸”以及map數據結構去重呀。

可能有童鞋覺得還可以使用includes,sort,indexOf等方式去重，其實也是可以的，但是要注意這幾種方式對于復雜的一維數組去重，可能會有些bug，還需要自己去處理。

所以，可以掌握好上面幾種簡單的去重方式，必要的時候會節省很多時間。

整理至此，請用心記！！！！(記不住的歡迎下方?戳小編，小編給您寄“拖鞋”)?

結語

到這里基本梳理完了，越是細小的只是點越是要熟練掌握(按下ctl+f查找會有驚喜哦(Mac是command+f)，可以快速搜索)。以后不出意外會小編會兩周一更，本篇梳理，會持續更新ing。

(暗戳戳附上閨蜜男神圖希望不被看到嘿嘿)

源自：https://juejin.im/post/5e6208396fb9a07cb24aaa9d

聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

感謝 · 轉發歡迎大家留言

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的js中text方法是啥意识_一盏茶的时间，快速捕获JS中常用的方法（细心整理，持续更新ing）...的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：综合实例_管线综合支吊架施工实例赏析，工
下一篇： matlab计算海洋浮力频率_水下机器人