一、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()可以讓性能大幅提升。