JavaScript 常用內置對象詳解

JavaScript 內置對象常用方法總結

常用內置對象都有哪些？

• Array
• Boolean
• Number
• String
• Data
• Math
• RegExp

Array

有幾個需要注意的方法，我會詳細說明

Array 常用方法總結（表格）

常用方法	作用	返回值	是否改變原數組
追加和刪除
arr.push()	尾部追加	追加後的數組長度	改變
arr.pop()	尾部刪除	刪除的元素	改變
arr.shift()	頭部刪除	刪除的元素	改變
arr.unshift()	頭部追加	追加後的數組長度	改變
拼接及切割
arr.join()	數組內元素拼接	String	不
arr1.concat(arr2)	數組之間拼接	拼接後的新數組	不
arr.slice()	切割	切割的數組（左開右閉）	不
arr.splice()	切割	切割的數組（左閉右閉）	改變
排序
arr.sort()	排序	排序後的數組	改變
arr.sort((x,y) => x-y)	從小到大排序	排序後的數組	改變
arr.sort((x,y) => y-x)	從大到小排序	排序後的數組	改變
其他
arr.reverse()	翻轉	翻轉後的數組	改變
arr.flat(層數|Infinity)	拍平數組	拍平後的數組	不
arr.forEach((each, index, array)=>{})	遍歷	-	-

fliter

它是過濾器，注意要返回一個布爾值

var arr = [1,2,3,4,5];
var result = arr.filter(( item, index, array) => {
    return item < 3
})
console.log(result);        // (2) [1, 2]

總結一下，這個可以根據篩選條件來提取你想要的數據，再舉一個栗子。

<script>
    /*filter 過濾
    return 爲 true 會保留
    爲 false 會過濾掉*/

    var grade = [
        {name:"zhangsan1",grade:60},
        {name:"zhangsan2",grade:50},
        {name:"zhangsan3",grade:40},
        {name:"zhangsan4",grade:70},
        {name:"zhangsan5",grade:80},
    ];
    /*過濾器*/
    var arr1 = grade.filter(function (value, index, array) {
        return value.grade >= 60;
        /*return value.name == 'zhangsan1';*/
    });
    console.log(arr1);
</script>

reduce

首先，這些參數我也不可能一直記住，那怎麼辦呢？
授人以漁，測試唄，但我知道他是個累加器，有初始值，也需要有返回值。

var arr = [1,2,3,4,5];
var result = arr.reduce(( a, b , c, d, e) => {
    console.log("a:", a);
    // console.log("b:", b);		// 1
    // console.log("c:", c);		// 0
    // console.log("d:", d);		// (5) [1, 2, 3, 4, 5]
    // console.log("e:", e);		// undefined
},0)

我們起初可以一個一個打印，來測試。
可以發現，b這個值是每一項，c是下標，d打印的是所有數組，到e就是undefined了，沒了，說明它只有四個參數。
那 a 剛開始是0，之後都是undefined了，這是爲什麼呢？
別忘了他是累加器啊，我們試試這樣：

var arr = [1,2,3,4,5];
var result = arr.reduce((a, b) => {
    console.log("a:", a);
    return a + b
},0)
console.log(result);    // 15

由此我們可以猜測，a值是保存每次累加之後的結果。
細心的人會發現，reduce第二個參數怎麼是個0呢，別急，我們來修改一下它

var result = arr.reduce((a, b) => {
    console.log("a:", a);
    return a + b
},10)
console.log('result:', result);    // 25

說明這第二個參數是初始值
如果不寫這個值的話，那麼默認初始值是數組的第一個數。

var result = arr.reduce((a, b) => {
    console.log("a:", a);
    return a + b
})
console.log('result:', result);    // 15

由此瞭解reduce累加器的簡單工作原理，好好命名給參數就清晰了~，它也可以累加對象中的參數，靈活運用。

var arr = [1,2,3,4,5];
var initValue = 0;

var result = arr.reduce((prev, next, index, array) => {
    return prev + next;
}, initValue)
console.log('result:', result);    // 15

統計數據中重複的元素的個數

<script>
    var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15];
    var sum = arr.reduce(function(prev,next) {
        /*如果next在prev中*/
        /*console.log(prev);*/
        if(next in prev){
            prev[next]++;
        }else{
            /*這麼做就是向prev中追加新的統計元素*/
            prev[next] = 1;
        }
        return prev;
        /*這裏要有個花括號，初始化prev*/
    },{});
    console.log(sum);

    /*這裏面會有key 值的排序，並不是reduce處理的，而是對象拍的序
    * key值如果是數字的話，obj會自己排序*/
</script>

加和

var grade = [
    {name:"zhangsan1",grade:60},
    {name:"zhangsan2",grade:70},
    {name:"zhangsan3",grade:80},
    {name:"zhangsan4",grade:90},
];
var sum = grade.reduce(function (previousValue, currentValue) {
    /*注意這裏賦值給prev*/
    return previousValue + currentValue.grade;
},0);
console.log(sum);

去重

測試去重的時候，漏敲了幾行代碼，導致老是提示錯誤，嘗試打印 arr1 和 arr2 中發現途中 arr2 會變成 undefined，我猜測這個 reduce 一定是有某種機制在裏面的，問老師先。

<script>
    var arr1 = [1,2,3,1,23,1,2,3,1,2,3];
    var arr2 = arr1.reduce(function (previousValue, currentValue) {
        /*indexOf可以是數組，字符串*/
        if(previousValue.indexOf(currentValue) == -1){
            return previousValue.concat(currentValue);
        }else{
            /*必須要有這個返回值，不然你的arr2會變成undefined*/
            return previousValue;
        }
    },[]);
    console.log(arr2);
</script>

測試如下

我們也可以通過算法去重

// 數組去重
// 1. 先排序
// 2. 在一遍過濾
var arr = [1,2,3,1,1,178,1,1,1,2,2,3,15,0];
arr.sort((x, y) => x - y);
var result = [];
// console.log(arr);
for (let i = 0, len = arr.length - 1; i <= len; i++) {
    if(arr[i] !== arr[i+1]){
        result.push(arr[i])
    }
}
console.log(result);         //(6) [0, 1, 2, 3, 15, 178]

splice 與 slice

• splice 分割的數組是左閉右閉的，會改變原數組的
• slice 分割的數組是左閉右開的，也就是不包含第二個下標的參數，而且不會改變原數組

let arr = ['一','二','三','四'];
console.log(arr.splice(2,3));	// (2) ["三", "四"]
console.log(arr);	// (2) ["一", "二"]

let arr = ['一','二','三','四'];
console.log(arr.slice(2,3));    // ["三"]
console.log(arr);       // (4) ["一", "二", "三", "四"]

• 如果只寫一個參數的話

let arr = ['一','二','三','四'];
console.log(arr.splice(2));     // (2) ["三", "四"]
console.log(arr);       //  (2) ["一", "二"]

let arr = ['一','二','三','四'];
console.log(arr.slice(2));     // (2) ["三", "四"]
console.log(arr);       //  (4) ["一", "二", "三", "四"]

flat

• arr.flat()這個方法可以拍平多維數組，其中參數n代表拍平n維，而且不會修改原數組。

let arr = [1,2,3,[4,5,[6,7,8,[9,10,11,[12,13,14]]]]];
console.log(arr.flat(1));       // (6) [1, 2, 3, 4, 5, Array(4)]
console.log(arr.flat(2));       // (9) [1, 2, 3, 4, 5, 6, 7, 8, Array(4)]
console.log(arr.flat(3));       // (12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, Array(3)]
console.log(arr.flat(Infinity));    // (14) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(arr);               // (4) [1, 2, 3, Array(3)]

• 也可以把殘缺的數組醫治好。

let arr = ['一',,,,,,1,,,,,23,,,,];
console.log(arr.flat());     // (3) ["一", 1, 23]
console.log(arr);       // (15) ["一", empty × 5, 1, empty × 4, 23, empty × 3]

String

String 常用方法總結（表格）

常用方法	作用	返回值	其他說明
分割
str.split()	字符串分割成數組	數組	-
str.substring(startPos,endPos|)	字符串截取	字符串	第二個參數規定截取結束的位置，默認是字符串尾部。
查找
str.charAt()	根據下標找元素，如果越界的話返回空字符串	尋找的元素
str.indexOf()	根據元素，找下表，如果查找不到返回 -1	下標	第一個’要查找的元素’,起始位置
str.search('b')	根據元素找下表	下標	-
str.match(/\d+/g)	參數可以是字符串或者正則表達式	數組
str.startsWith('ab')	從字符串開頭尋找	布爾值	注意：不是包含關係，一定是要在頭部開始的，ends同理
str.endsWith()	從字符串尾部尋找	布爾值	-
str.includes('ab')	str中是否包含'ab'	布爾值
去空格
str.trim()	去掉字符串前後的空格	新字符串	str.replace(/^\s*|\s*$/g,'')
str.trimStart()	去前空格	新字符串	str.replace(/^\s*/g, '')
str.trimEnd()	去尾空格	新字符串	str.replace(/\s*$/g, '')
str.replace(/\s/g, '')	去除所有空格	新字符串
轉換
str.toLowerCase()	轉小寫	小寫字符串
str.toUpperCase()	轉大寫	大寫字符串
補全
str.padStart(8,"xy")	把str字符串，從頭開始，用xy補足長度尾8。	返回補足後的新字符串
str.padEnd(8,"xy")	把str字符串，從尾開始，用xy補足長度尾8。	返回補足後的新字符串
其他
str.repeat(4)	重複	重複後的新字符串	不會改變原字符串

Date

首先定義 var date = new Date();
調用的方法如下

• date.getFullYear(); 年份
• date.getMonth(); 月份
• date.getDate(); 日
• date.getHours(); 時
• getMinutes(); 分
• getSeconds(); 秒

RegExp