String型別、Number型別、Object型別、Array型別的基本方法總結

阿新 • • 發佈：2019-01-11

一、String型別

String型別可以使用String建構函式來建立：

var stringVal = new String("Hello welcome");

1.字元方法

charAt()和charCodeAt()方法用於訪問字串中的特定字元，接收一個引數（基於0的字元位置），需要注意的是他們返回的值。

var stringVal = "Welcome to here"; 
//輸出"W",以單字元字串形式返回
console.log(stringVal.charAt(0)); 

//輸出"101"，返回小寫字母"e"的字元編碼
console.log(stringVal.charCodeAt 
(1));  

//輸出"e"，ES5中另一個訪問個別字符的方法，方括號加數字索引，IE7會返回undefined
console.log(stringVal[1]);

2.字串操作方法

concat()拼接字串並返回拼接得到的新字串，實際情況大多使用”+”號拼接;
slice()、substr()、substring() ，這三個方法都返回一個被操作後的新字串，接受一或兩個引數，第一個引數指定開始位置，第二個引數可選，指定結束位置，如果第二個引數沒有則預設為到字串的末尾。

注意：slice()和substring()的第二個引數指定的是最後一個字元的位置(結果不包含這個位置的字元)，substr()

的第二個引數指定的是返回的字元個數。如果引數是負值，slice()會把傳入的值與字串長度相加；substr()會把第一個負引數加上字串長度，第二個引數轉換為0；substring()會把兩個負引數都轉換為0.

var stringVal = "Hi! ";

var greeting = stringVal.concat("welcome","!");
console.log(greeting); //"Hi! welcome!"

var stringValue = "Hello world";
console.log(stringValue.slice(2)); //"llo world" 

console.log(stringValue.substring(2)); //"llo world"
console.log(stringValue.substr(2)); //"llo world"

console.log(stringValue.slice(2,7)); //"llo w"
console.log(stringValue.substring(2,7)); //"llo w"
console.log(stringValue.substr(2,7)); //"llo wor"

var stringValue = "Hello world";
console.log(stringValue.slice(-2)); //"ld"
console.log(stringValue.substring(-2)); //"Hello world"
console.log(stringValue.substr(-2)); //"ld"

console.log(stringValue.slice(2,-4)); //"llo w",變成了slice(2,7)
console.log(stringValue.substring(2,-4)); //"He",變成了substring(2,0)，相當於substring(0,2)
console.log(stringValue.substr(2,-4)); //""（空字串）,變成了substr(2,0)

3.字串位置方法

兩個從字串中查詢子字串的方法：indexOf()、lastIndexOf()，它們返回字串的位置，沒有找到返回-1，區別：indexOf()從字串開始向後搜尋，lastIndexOf()從字串末尾向前搜尋。接收第二個引數，表示從字串的哪個位置開始搜尋，indexOf()從指定位置向後搜尋，lastIndexOf()從指定位置向前搜尋。

var stringVal = "Hello world";
console.log(stringVal.indexOf("e"));  //輸出1
console.log(stringVal.lastIndexOf("e"));  //輸出1

console.log(stringVal.indexOf("o"));  //輸出4
console.log(stringVal.lastIndexOf("o"));  //輸出7

console.log(stringVal.indexOf("o",6));  //輸出7
console.log(stringVal.lastIndexOf("o",6));  //輸出4

4.trim()方法

trim()方法會建立一個字串的副本，刪除前置及字尾的所有空格，返回結果。例如：

var stringVal = "  Hello world    ";
var trimString = stringVal.trim();
console.log(trimString);  //輸出"Hello world"

5.字串大小寫轉換方法

涉及字串大小轉換的方法有四個：toLowerCase()、toLocalLowerCase()、toUpperCase()、toLocalUpperCase()其中toLocalLowerCase()和toLocalUpperCase()是針對特定地區的實現，少數語言會對Unicode大小寫轉換應用特定的規則。

var stringVal = "hello world";
console.log(stringVal.toLocalUpperCase()); //輸出"HELLO WORLD"
console.log(stringVal.toUpperCase());  //輸出"HELLO WORLD"
console.log(stringVal.toLocalLowerCase());  //輸出"hello world"
console.log(stringVal.toLowerCase());  //輸出"hello world"

6.字串模式匹配方法

String型別用於字串模式匹配的方法：match()、search()、split()。
match()方法接收一個引數，是一個正則表示式或是一個RegExp物件。

var text = "cat,bat,sat,fat";
var pattern = /.at/;
//和pattern.exec(text)相同
var matches = text.match(pattern);
console.log(matches.index, pattern .lastIndex); //輸出"0 0"
console.log(matches[0]); //輸出"cat"

search()方法返回字串中第一個匹配項的索引，若沒有找到匹配項，則返回-1。

var text = "cat,bat,sat,fat";
var posit = text.search(/at/);
console.log(posit); //1

var posit2 = text.search(/dat/);
console.log(posit2); //-1

var posit3 = text.search(/fat/);
console.log(posit3); //12

replace()方法用於替換子字串，方法接收兩個引數，第一個引數可以是一個RegExp物件或一個字串，第二個引數可以是一個字串或者一個函式，如果第一個引數是字串，僅替換第一個字串：

var text = "cat,bat,sat,fat";
var result = text.replace("a","ha");
console.log(result); /"/chat,bat,sat,fat"

var result2 = text.replace(/a/g,"waha");
console.log(result2); //"cwahat,bwahat,swahat,fwahat"

split()方法可以以特定分隔符或一個RegExp物件將字串分割成多個子字串，結果以陣列形式展現。第二個引數可選，用來指定要返回陣列的大小。

var colors = "red,blue,yellow,green,black";
var newColors = colors.split(",");
var newColors2 = colors.split(",",3);
var newColors3 = colors.split(/[^\,]+/);
console.log(newColors); //["red", "blue", "yellow","green","black"]
console.log(newColors2); //["red", "blue", "yellow"]
console.log(newColors3); //["", ",", ",", ",", ",", ""]

7.localeCompare()方法

localeCompare()方法比較兩個字串，返回的值有幾種情況：
-字串在字母表裡應排在字串引數之前的返回一個負數；
-字串在字母表裡應排在字串引數之後的返回一個正數；
-字串等於字串引數的返回0.

var stringVal = "sunshine";
console.log(stringVal.localeCompare("purple")); //1
console.log(stringVal.localeCompare("sunshine")); //0
console.log(stringVal.localeCompare("universe"));  //-1

8.fromCharCode()方法

fromCharCode()方法接收一或多個字元編碼，然後轉為一個字串：

console.log(String.fromCharCode(104,101,108,109,111)); //"helmo"

二、Number型別

Number型別提供了一些把數值格式化為字串的方法toFixed()、toExponential()、toPrecision()，另外Number物件方法parseFloat()、parseInt()、isFinite()、isInteger()、isNaN()、isSafeInteger()。
isFinite()方法確定一個數值是不是有窮的（是不是位於最大值和最小值之間）

var result = Number.MAX_VALUE+Number.MAX_VALUE;
console.log(isFinite(result)); //false

var result = Number.MIN_VALUE+Number.MAX_VALUE;
console.log(isFinite(result)); //true

isNaN()方法確定引數是否”不是數值”

console.log(isNaN(NaN)); //true
console.log(isNaN(20)); //false(20是數值)
console.log(isNaN("20")); //false("20"可以被轉換成數值)
console.log(isNaN("color")); //true("color"不能轉換成數值)
console.log(isNaN(true)); //false(ture可以被轉換成數值)

Number()遵循一定規則把各種資料型別轉換為數值：

var num1 = Number("Hello world");  //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(false); //0

parseInt()遵循相應規則把字串轉換為數值，它會忽略字串前面的空格，直到找到第一個非空字元,第二個引數指定要解析成什麼進位制格式：

var num1 = parseInt("3421hello");  //3421
var num2 = parseInt(""); //NaN
var num3 = parseInt("0xA"); //10(十六進位制)
var num4 = parseInt(23.5); //23
var num5 = parseInt("070"); //56(八進位制)
var num6 = parseInt("60"); //60（十進位制）

var num1 = parseInt("16",2);  //1
var num2 = parseInt("16",8); //14
var num3 = parseInt("16",10); //16
var num4 = parseInt("16",16); //22
console.log(num1,num2,num3,num4);

parseFloat()遵循相應規則把字串轉換為數值，第一個小數點有效，第二個無效，它後面的字串將被忽略，它始終都會忽略前導零：

var num1 = parseFloat("3421hello");  //3421
var num2 = parseFloat(""); //NaN
var num3 = parseFloat("0xA"); //0
var num4 = parseFloat(23.5); //23.5
var num5 = parseFloat("23.45.76"); //23.45
var num6 = parseFloat("3.125e7"); //31250000
console.log(num1,num2,num3,num4,num5,num6);

三、Object型別

hasOwnProperty(propertyName)：用於檢查給定的屬性在當前例項中（不是在例項的原型中）是否存在。

var arr = [];    
console.log(arr.hasOwnProperty("length"));//true
console.log(arr.hasOwnProperty("hasOwnProperty"));//false

isPrototypeOf(object):用於檢查傳入的物件是否是當前物件的原型。

function Person() {}
var obj = new Person();
console.log(Object.prototype.isPrototypeOf(obj)); //true

propertyIsEnumerable(prototypeName)：用於檢查給定屬性是否可以使用for-in語句列舉。

var obj = {
    name: "Nicher",
    age: 23
} 
for (var i in obj) {
    console.log(i); //name age
}

toLocalString()：返回物件的字串表示，與執行環境的地區對應。

var obj = {};
console.log(obj.toLocaleString());//[object Object] 
var date = new Date();
console.log(date.toLocaleString());//2018/3/20 下午3:51:50

toString()：返回物件的字串表示。

var obj = {};
console.log(obj.toString());//[object Object]
var date = new Date();
console.log(date.toString());//Tue Mar 20 2018 16:02:31 GMT+0800 (中國標準時間)

valueOf()：返回物件的字串、數值、布林值表示。

var obj = {
  name: "Lily",
  age: 24
};
console.log(obj.valueOf());//{name: "Lily", age: 24}

var arr = [1,2,3];
console.log(arr.valueOf());//[1, 2, 3]

var date = new Date();
console.log(date.valueOf());//1521533050919

四、Array型別

1.檢測陣列

Array.isArray()方法確定某個值到底是不是陣列。

var arr1 = [1,2,3];
var arr2 = "Hello";
if (Array.isArray(arr1)) {
    //對陣列執行的操作
    var newArr = arr1.join("-");
    console.log(newArr); //1-2-3
}

if (Array.isArray(arr2)) {
    //對陣列執行的操作
    console.log(arr2);
} else {
    console.log("Not a array"); //Not a array
}

2.轉換方法

所有物件都具有toLocalString()、toString()、valueOf()方法，valueOf()仍返回陣列本身，toString()方法返回字串，由陣列中每個值的字串形式以逗號分隔拼接而成。可以使用join()方法使用不同的分隔符來構建這個字串。

var colors = ["black","white","blue"];
console.log(colors); //["black", "white", "blue"]
console.log(colors.toString());  //black,white,blue
console.log(colors.valueOf());  //["black", "white", "blue"]

console.log(colors.join("-")); //black-white-blue

3.棧方法

push()方法和pop()方法，push()方法可以接收任意數量的引數，新增到陣列末尾，返回修改後陣列的長度，pop()方法從陣列末尾移除最後一項，返回移除的項。

var colors = [];
var pushed = colors.push("black","white");
console.log(pushed); //2

pushed = colors.push("yellow");
console.log(pushed); //3

pushed = colors.pop();
console.log(pushed); //"yellow"
console.log(pushed.length); //2

4.佇列方法

使用shif()和unshif()方法可以像使用佇列一樣使用陣列。shif()方法能夠移除陣列中的第一個項並返回該項，同時陣列長度減1，unshift()方法在陣列前端新增任意個項，並返回新陣列的長度。

var colors = ["red","green"];
var result = colors.shift();
console.log(result); //"red"

var result2 = colors.unshift("black","white");
console.log(result2);  //3

5.重排序方法

陣列中用來排序的方法reverse()和sort()。

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

var arr2 = [1,5,10,15];
arr2.sort();
console.log(arr2);  //[1, 10, 15, 5]

6.操作方法

concat()方法基於當前陣列所有項建立一個新陣列副本，返回新構建的陣列。

var colors = ["red","blue","pink"];
var colors2 = colors.concat("brown",["black","white"]);
console.log(colors); // ["red", "blue", "pink"]
console.log(colors2); //["red", "blue", "pink", "brown", "black", "white"]

slice()它能夠基於當前陣列中的一個或多個項建立一個新陣列，接收一或兩個引數，即要返回項的始末位置（不包含結束位置的項），第二個引數可選，沒有預設到最後一項。如果slice()方法中有一個負數，則用陣列長度加上這個負數，如果起始位置大於結束位置，則返回空陣列。

var colors = ["red","blue","pink","yellow","orange","skyblue"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
var colors4 = colors.slice(-2,-3);
var colors5 = colors.slice(-2,-1);

console.log(colors2);  //["blue", "pink", "yellow", "orange", "skyblue"]
console.log(colors3);  //["blue", "pink", "yellow"]
console.log(colors4); //[]
console.log(colors5); //["orange"]

splice()方法，主要用途是向陣列中部插入項，可以刪除，插入，替換
-刪除：可以刪除任意數量的項，指定兩個引數，要刪除的第一項的位置和要刪除的項數。
-插入：向指定位置插入任意數量的項，提供三個引數：起始位置、要刪除的項數（0）以及要插入的項。
-替換：向指定位置插入任意數量的項，同時刪除任意數量的項，指定三個引數：起始位置、要刪除的項數、要插入的項。

var colors = ["pink","blue","white"];
var removeColors = colors.splice(0,1); //刪除第一項
console.log(colors); //["blue", "white"]
console.log(removeColors); //["pink"]

removeColors = colors.splice(1,0,"red","green"); //從位置1開始插入兩項
console.log(colors); //["blue", "red", "green", "white"]
console.log(removeColors); //[]

removeColors = colors.splice(1,1,"black","orange");
console.log(colors);  //["blue", "black", "orange", "green", "white"]
console.log(removeColors);  //["red"]

7.位置方法

ES5為陣列例項添加了兩個位置方法indexOf()、lastIndexOf(),它們都接受兩個引數：要查詢的項和查詢起點位置索引。indexOf()從陣列的開頭開始，lastIndexOf()從陣列的末尾向前查詢。在沒找到的情況下返回-1.

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));  //3
console.log(numbers.lastIndexOf(4));  //5
console.log(numbers.indexOf(4,4));  //
console.log(numbers.lastIndexOf(4,4));  //

var person = {name: "Lily"};
var person2 = [{name: "Ken"}];
var morePeople = [person];

console.log(person2.indexOf(person));  //-1
console.log(morePeople.indexOf(person));  //0

8.迭代方法

陣列的5個迭代方法都接收兩個引數，要在每一項上執行的函式和執行該函式的作用於物件(可選)。傳入的函式接收三個引數：陣列項的值、該項在陣列中的位置和陣列物件本身。
- every()：對陣列每一項執行給定函式，如果都返回true，則返回true。
- filter：對陣列每一項執行給定函式，返回該函式會返回true的項組成的陣列。
- foreEach()：對陣列的每一項執行給定函式，該方法無返回值。
- map()：對陣列每一項執行給定函式，返回每次函式呼叫的結果組成的陣列。
- some()：對陣列每一項執行給定函式，如果函式任意一項返回true，則返回true。

var arr = [1,2,3,4,5,4,3,2,1];
var everyResult = arr.every((item,index,array) => item>2);
console.log(everyResult);  //false

var someResult = arr.some((item,index,array) => item>2);
console.log(someResult );  //true

var filterResult = arr.filter((item,index,array) => item>2);
console.log(filterResult);  //[3,4,5,4,3]

var mapResult = arr.map((item,index,array) => item*2);
console.log(mapResult);  //[2, 4, 6, 8, 10, 8, 6, 4, 2]

arr.forEach((item,index,array) => {
    console.log(index+':'+item);
})

9.歸併方法

兩個歸併陣列的方法：reduce()和reduceRight()，這兩個方法均迭代陣列的所有項，方向相反。接收兩個引數：在每一項上呼叫的函式和作為歸併基礎的初始值（可選）。傳入的函式接收4個引數：前一個值，當前值，項的索引和陣列物件。這個函式返回的任何值均自動作為第一個引數傳給下一項。

var arr = [1,2,3,4,5];
var sum = arr.reduce((prev,cur,index,array) => prev+cur);
console.log(sum);  //15

var arr = [1,2,3,4,5];
var sum = arr.reduceRight((prev,cur,index,array) => prev+cur);
console.log(sum);  //15