js常用方法總結(jié)(個人筆記)

一、Array數(shù)組方法

本質(zhì)上尖坤,數(shù)組屬于一種特殊的對象。typeof運算符會返回數(shù)組的類型是object闲擦。
由于數(shù)組成員的鍵名是固定的(默認總是0慢味、1、2...)墅冷,因此數(shù)組不用為每個元素指定鍵名纯路,而對象的每個成員都必須指定鍵名。JavaScript 語言規(guī)定寞忿,對象的鍵名一律為字符串驰唬,所以,數(shù)組的鍵名其實也是字符串腔彰。之所以可以用數(shù)值讀取叫编,是因為非字符串的鍵名會被轉(zhuǎn)為字符串。

var arr = new Array()

length屬性

數(shù)組的數(shù)字鍵不需要連續(xù)霹抛,length屬性的值總是比最大的那個整數(shù)鍵大1宵溅。

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

length屬性是可寫的。如果人為設(shè)置一個小于當(dāng)前成員個數(shù)的值上炎,該數(shù)組的成員會自動減少到length設(shè)置的值。清空數(shù)組的一個有效方法,就是將length屬性設(shè)為0藕施。

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

arr.length = 0;
arr // []

arr.filter(function)

返回的是數(shù)組中所有符合條件的元素,組成的一個新的數(shù)組寇损;

例子:var arr=[{name:"jack",id:1},{name:"ken",id:2}];

arr.filter(item=>item.id==1)  //[{name:"jack",id:1}]

arr.find(function)

返回的是數(shù)組中第一個符合條件的//元素裳食;

例子:var arr=[{name:"jack",id:1},{name:"ken",id:2},{name:"jack",id:3}]矛市;

arr.find(item=>item.name==="jack")  //{name:"jack",id:1}

arr.push()

把值追加到數(shù)組中,加到最后了---返回值也是追加數(shù)據(jù)之后的數(shù)組長度

arr.pop()

刪除數(shù)組中最后一個元素,返回值就是刪除的這個值

arr.shift()

刪除數(shù)組中第一個元素,返回值就是刪除的這個值

arr.unshift()

向數(shù)組的第一個元素前面插入一個新的元素,----返回值是插入后的長度

arr.forEach(function)

遍歷數(shù)組用---相當(dāng)于for循環(huán),返回的是undefined,適用于不改變數(shù)據(jù)的情況,而只是想用數(shù)據(jù)做一些事情 – 比如存入數(shù)據(jù)庫或則打印出來诲祸。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

arr.map(function)

數(shù)組中的每個元素都要執(zhí)行這個函數(shù),把執(zhí)行后的結(jié)果重新的全部的放在一個新的數(shù)組中浊吏。
map()適用于你要改變數(shù)據(jù)值的時候。不僅僅在于它更快救氯,而且返回一個新的數(shù)組找田。這樣的優(yōu)點在于你可以使用復(fù)合(composition)(map(), filter(), reduce()等組合使用)來玩出更多的花樣。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(value => value * value).filter(value => value > 10);
// arr2 = [16, 25]

arr.indexOf(元素值)

返回的是索引,沒有則是返回-1

例子:比如我們設(shè)置白名單路由的時候着憨,在白名單數(shù)組中的路由不需要判斷是否有權(quán)限
const whiteList = ['user/login','user/indexPage'];
if(whiteList.indexOf(pathname)>-1) {
// 不需要判斷權(quán)限訪問
}

arr.join("拼接符")

返回的是一個字符串

arr.concat()

concat() 方法用于連接兩個或多個數(shù)組墩衙。該方法不會改變現(xiàn)有的數(shù)組,而僅僅會返回被連接數(shù)組的一個副本甲抖。

var a = [1,2,3];
console.log(a.concat(4,5)); // [1,2,3,4,5]

var arr = ["George","John","Thomas"]
var arr2 = ["James","Adrew"]
var arr3 = ["William"]
console.log(arr.concat(arr2,arr3)) // [George,John,Thomas,James,Adrew,William]

arr.reverse()

反轉(zhuǎn)數(shù)組

arr.sort()

排序的,從小到大排序

arr.slice(開始的索引,結(jié)束的索引)

把截取的數(shù)組的值放在一個新的數(shù)組中,但是不包含結(jié)束的索引對應(yīng)的元素值漆改。

arr.splice(開始的位置,要刪除的個數(shù),替換的元素的值)

一般是用于刪除數(shù)組中的元素,或者是替換元素,或者是插入元素。

arr.some(function)和arr.every(function)

some方法,只要其中一個為true 就會返回true的准谚,相反挫剑,every()方法必須所有都返回true才會返回true,哪怕有一個false柱衔,就會返回false樊破;
every()和 some()目的:確定數(shù)組的所有成員是否滿足指定的條件

 //some()
     let b=numbers.some((item,index)=>{
          if(item%3===0){
            return true;
         }else{
             return false;
         }
     })
//every()
      let numbers = [2, 4, 10, 4, 8];
      let a = numbers.every((item,index)=>{
          if(item%2===0){
              return true;
          }else{
              return false;
          }
      });
     console.log(a)

arr.includes(searchElement, fromIndex)

includes() 方法用來判斷一個數(shù)組是否包含一個指定的值,如果是返回 true秀存,否則false捶码。

[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

arr.reduce()

reduce() 方法接收一個函數(shù)作為累加器,數(shù)組中的每個值(從左到右)開始縮減或链,最終計算為一個值惫恼。

arr.reduce(function(prev,cur,index,arr){
...
}, init);
arr 表示原數(shù)組;(可選)
prev 表示上一次調(diào)用回調(diào)時的返回值澳盐,或者初始值 init;(必需)
cur 表示當(dāng)前正在處理的數(shù)組元素祈纯;(必需)
index 表示當(dāng)前正在處理的數(shù)組元素的索引,若提供 init 值叼耙,則索引為0腕窥,否則索引為1;(可選)
init 表示初始值筛婉。(可選)

用法:

var arr = [3,9,4,3,6,0,9];

1. 求數(shù)組項之和

var sum = arr.reduce(function (prev, cur) {
    return prev + cur;
},0);

由于傳入了初始值0簇爆,所以開始時prev的值為0癞松,cur的值為數(shù)組第一項3,相加之后返回值為3作為下一輪回調(diào)的prev值入蛆,然后再繼續(xù)與下一個數(shù)組項相加响蓉,以此類推,直至完成所有數(shù)組項的和并返回哨毁。
2. 求數(shù)組項最大值

var max = arr.reduce(function (prev, cur) {
    return Math.max(prev,cur);
});

由于未傳入初始值枫甲,所以開始時prev的值為數(shù)組第一項3,cur的值為數(shù)組第二項9扼褪,取兩值最大值后繼續(xù)進入下一輪回調(diào)想幻。
3. 數(shù)組去重

var newArr = arr.reduce(function (prev, cur) {
    //短路運算,找假话浇,作用相當(dāng)于if(prev.indexOf(cur) === -1){prev.push(cur)}
    //補充:if只有一個語句時脏毯,可簡寫成:if prev.indexOf(cur === -1) prev.push(cur)
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);

arr.fill(value, start, end)

fill() 方法用于將一個固定值來填充替換數(shù)組的某些元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);  // ["Banana", "Orange", "Runoob", "Runoob"],end為開區(qū)間

arr.flat()

flat()用于將嵌套的多維數(shù)組“拉平”凳枝,變成一維數(shù)組抄沮。

flat()默認只會“拉平”一層,如果想要“拉平”多層的嵌套數(shù)組岖瑰,可以將flat()方法的參數(shù)寫成一個整數(shù)叛买,表示想要拉平的層數(shù),默認為1蹋订。如果不管有多少層嵌套率挣,都要轉(zhuǎn)成一維數(shù)組,可以用Infinity關(guān)鍵字作為參數(shù)露戒。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, [2, [3, [4, 5]]]].flat(Infinity)
// [1, 2, 3, 4, 5]

Array和 Array.prototype

Array 對象是用于構(gòu)造數(shù)組的全局對象椒功,數(shù)組是類似于列表的高階對象
Array.prototype 屬性表示 Array 構(gòu)造函數(shù)的原型,并允許您向所有Array對象添加新的屬性和方法智什。

Array.prototype 的用法

1.給 Array 對象添加新的方法

//給數(shù)組添加一個自定義方法duplicator 
 Array.prototype.duplicator = function() {
 let s = this.concat(this) 
   return s
 }
 let t = [1,2,3,4,5].duplicator()
 console.log(t) // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

2.把數(shù)組方法嫁接到“類似數(shù)組的對象”
典型的“類似數(shù)組的對象”是函數(shù)的arguments對象动漾,以及大多數(shù) DOM 元素集,還有字符串荠锭。

//把數(shù)組的forEach方法嫁接到字符串上使用
Array.prototype.forEach.call('abc', function (chr) {
  console.log(chr);
});
// a
// b
// c

注:數(shù)組的slice方法可以將“類似數(shù)組的對象”變成真正的數(shù)組旱眯。

var arr = Array.prototype.slice.call(arrayLike);

var Obj = function (p) {
this.p = p;
};
var o = new Obj('Hello World!');
o.p
Obj.p

二、String字符串的方法

萬物皆對象证九,字符串和數(shù)組都是對象删豺,字符串可以看作是字符組成的數(shù)組,數(shù)組是特殊形式的對象愧怜。

str.length

字符串的長度呀页;

str.charAt(索引)

返回的是指定索引位置的字符串;

str.concat(字符串2,字符串3...)

返回的是拼接后的字符串拥坛;

str.indexOf(要找的字符串蓬蝶,開始查找的位置)

返回的是這個字符串第一個所在位置的索引值尘分,沒有則返回-1;

str.replace(原來的字符串丸氛,新的字符戶串)

返回的是替換之后的字符串音诫;

str.slice(開始的索引,結(jié)束的索引)

截取字符串雪位,類似于數(shù)組方法,截取不到結(jié)束位置的字符串梨撞;

str.split("以什么為切割點"雹洗,返回的個數(shù)(默認返回所有))

   例子: var str = "a=1&b=2";

   str.split("&");  //["a=1","b=2"]

   str.split("&",1)  //["a=1"]

str.substr(開始的位置,個數(shù))

也是用于截取字符串卧波;

str.substring(開始的索引,結(jié)束的索引)

返回截取后的字符串,不包含結(jié)束的索引的字符串,與slice一樣时肿;

str.toLowerCase()

轉(zhuǎn)小寫;

str.toUpperCase()

轉(zhuǎn)大寫;

str.trim()

干掉字符串兩端的空格。

str.startsWith()

檢測字符串是否以某個字符開頭

str.endsWith()

檢測字符串是否以某個字符結(jié)尾

三港粱、Object對象方法

Object.keys()

該方法返回一個數(shù)組螃成,遍歷對象所有的可枚舉屬性,類似于for in查坪。

1.傳入對象寸宏,返回屬性名

var obj = {"a":"124","b":"345"}

console.log(Object.keys(obj))   //["a","b"]

2.傳入字符串,返回索引

var str = 'ab123';

console.log(Object.keys(str))  //["0","1","2","3","4"]

3.傳入數(shù)組偿曙,返回索引

var arr = ["a","b","c"];

console.log(Object.keys(arr));  //["0","1","2"]

Object.values()

返回一個給定對象自己的所有可枚舉屬性值的數(shù)組氮凝。

var obj1 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(obj1)); // ['b', 'c', 'a']
 
var obj2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj2)); // ['a', 'b', 'c']

Object.assign()

語法: Object.assign(target, ...sources);sources對象可以有多個;用于將所有可枚舉屬性的值從一個或多個源對象合并到目標對象望忆,如源對象中有與目標對象重復(fù)的值罩阵,則會覆蓋目標對象的值。它將返回目標對象启摄。

const object1 = {
  a: 1,
  b: 2,
  c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object2); // { c:3, d:5稿壁,a:1, b:2 }

Object.getOwnPropertyNames()

// Object所有的屬性方法
Object.getOwnPropertyNames(Object)
(24) ["length", "name", "prototype", "assign",
 "getOwnPropertyDescriptor", "getOwnPropertyDescriptors",
 "getOwnPropertyNames", "getOwnPropertySymbols", "is", 
"preventExtensions","seal", "create", "defineProperties", 
"defineProperty", "freeze", "getPrototypeOf", "setPrototypeOf", 
"isExtensible", "isFrozen", "isSealed", "keys", "entries", 
"fromEntries", "values"]
//Array所有的屬性方法
Object.getOwnPropertyNames(Array.prototype)
(33) ["length", "constructor", "concat", "copyWithin", "fill",
 "find", "findIndex", "lastIndexOf", "pop", "push", "reverse", 
"shift", "unshift", "slice", "sort", "splice", "includes",
 "indexOf", "join", "keys", "entries", "values", "forEach", 
"filter", "flat", "flatMap", "map", "every", "some", "reduce",
 "reduceRight", "toLocaleString", "toString"]

Object.freeze()

Object.freeze()方法可以凍結(jié)一個對象。一個被凍結(jié)的對象再也不能被修改歉备;
凍結(jié)了一個對象則不能向這個對象添加新的屬性傅是,不能刪除已有屬性,不能修改該對象已有屬性的可枚舉性威创、可配置性落午、可寫性,以及不能修改已有屬性的值肚豺。
此外溃斋,凍結(jié)一個對象后該對象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對象吸申。

const obj = {
 property: 42
};
const obj2 = Object.freeze(obj);
obj.property = 33;// Throws an error in strict mode 會拋出異常
console.log(obj.property);// expected output: 42   值沒有被改變

如果你有一個巨大的數(shù)組或Object梗劫,并且確信數(shù)據(jù)不會修改享甸,使用Object.freeze()可以讓性能大幅提升。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末梳侨,一起剝皮案震驚了整個濱河市蛉威,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌走哺,老刑警劉巖蚯嫌,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異丙躏,居然都是意外死亡择示,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門晒旅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來栅盲,“玉大人,你說我怎么就攤上這事废恋√革” “怎么了?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵鱼鼓,是天一觀的道長拟烫。 經(jīng)常有香客問我,道長蚓哩,這世上最難降的妖魔是什么构灸? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮岸梨,結(jié)果婚禮上喜颁,老公的妹妹穿的比我還像新娘。我一直安慰自己曹阔,他們只是感情好半开,可當(dāng)我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赃份,像睡著了一般寂拆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抓韩,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天纠永,我揣著相機與錄音,去河邊找鬼谒拴。 笑死尝江,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的英上。 我是一名探鬼主播炭序,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼啤覆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了惭聂?” 一聲冷哼從身側(cè)響起窗声,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎辜纲,沒想到半個月后笨觅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡耕腾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年屋摇,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片幽邓。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖火脉,靈堂內(nèi)的尸體忽然破棺而出牵舵,到底是詐尸還是另有隱情,我是刑警寧澤倦挂,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布畸颅,位于F島的核電站,受9級特大地震影響方援,放射性物質(zhì)發(fā)生泄漏没炒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一犯戏、第九天 我趴在偏房一處隱蔽的房頂上張望送火。 院中可真熱鬧,春花似錦先匪、人聲如沸种吸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坚俗。三九已至,卻和暖如春岸裙,著一層夾襖步出監(jiān)牢的瞬間猖败,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工降允, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留恩闻,地道東北人。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓拟糕,卻偏偏與公主長得像判呕,于是被迫代替她去往敵國和親倦踢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容