js內置物件的常用屬性和方法（Array | String | Date

js內置物件：Array String Math Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 1、建構式方法創建陣列
        var arr=new Array();
        console.log(arr);//[]

        var arr2=new Array(3);//指定陣列個數
        console.log(arr2);//(3) [empty × 3]

        var arr3=new Array(1,2,3);//指定陣列元素
        console.log(arr3);//(3) [1, 2, 3]

        // 2、字面量表示法創建陣列
        var arr4=[1,2,3,4];
        console.log(arr4);//(4) [1, 2, 3, 4]

        
    </script>
</body>
</html>

讀取和設定陣列元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr4=[1,2,3,4];
        console.log(arr4[0]);//1
        arr4[0]=0;
        console.log(arr4);//(4) [0, 2, 3, 4]


    </script>
</body>
</html>

陣列長度=陣列最大索引值+1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr4=[1,2,3,4];
        console.log(arr4.length);//4  獲取陣列長度
        arr4.length=3;
        console.log(arr4);//(3) [1, 2, 3]
        arr4[9]=9;
        console.log(arr4);//(10) [1, 2, 3, empty × 6, 9]
        console.log(arr4.length);//10 陣列長度永遠=最大索引值+1
        // 遍歷陣列
        var len=arr4.length;
        for(var i=0;i<len;i++){
            console.log(arr4[i]);
        }


    </script>
</body>
</html>

陣列的堆疊方法：

push() 從陣列最后添加元素，回傳陣列的新長度

unshift() 從陣列的開頭添加元素，回傳陣列的新長度

pop() 洗掉陣列的最后一個元素，回傳被洗掉的那個元素

shift() 洗掉陣列的第一個元素，回傳被洗掉的那個元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr=[1,2,3,4];
        var len=arr.push(5,6);
        console.log(len);//6
        console.log(arr);//(6) [1, 2, 3, 4, 5, 6]

        var arr1=[1,2,3,4];
        var len1=arr1.unshift(-1,0);
        console.log(len1);//6
        console.log(arr1);//(6) [-1, 0, 1, 2, 3, 4]

        var arr2=[1,2,3,4];
        var n2=arr2.pop();
        console.log(n2);//4
        console.log(arr2);//(3) [1, 2, 3]

        var arr3=[1,2,3,4];
        var n3=arr3.shift();
        console.log(n3);//1
        console.log(arr3);//(3) [2, 3, 4]
    </script>
</body>
</html>

陣列方法：

join() 陣列轉字串

默認分隔符是逗號，可以自定義

reverse() 翻轉陣列中的元素順序

sort() 陣列排序，默認隱式轉換為字串，然后進行排序

可以自定義引數，用來進行數值的排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr=[1,2,3,4];
        var str=arr.join();
        console.log(str);// 字串 1,2,3,4

        var arr2=[1,2,3,4];
        var str2=arr2.join('');
        console.log(str2);// 字串 1234

        var arr3=[1,2,3,4];
        var str3=arr3.join('-');
        console.log(str3);// 字串 1-2-3-4

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

        var arr5=[1,24,3,42];
        var arr5=arr5.sort();
        console.log(arr5);// (4) [1, 24, 3, 42]

        var arr6=[1,24,3,42];
        var arr6=arr6.sort(function(a,b){return a-b;});
        console.log(arr6);// (4) [1, 3, 24, 42]

        var arr7=[1,24,3,42];
        var arr7=arr7.sort(function(a,b){return b-a;});
        console.log(arr7);// (4) [42, 24, 3, 1]

    </script>
</body>
</html>

concat() 陣列合并

slice(start, end) 陣列截取，包含start不包含end

slice(start) 默認從start位置截取到最后

如果start或者end為負數，則等價于該負數+陣列長度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr1=[1,2,3];
        var arr2=[4,5,6];
        var newArr=arr1.concat(arr2);
        console.log(newArr);//(6) [1, 2, 3, 4, 5, 6]

        var arr=[0,1,2,3,4,5];
        var slice1=arr.slice(2);
        console.log(slice1);//(4) [2, 3, 4, 5]
        var slice2=arr.slice(2,5);
        console.log(slice2);//(3) [2, 3, 4]
        var slice3=arr.slice(-5);
        console.log(slice3);//(5) [1, 2, 3, 4, 5]
        var slice4=arr.slice(-5,5);
        console.log(slice4);//等價于(1,5)  (4) [1, 2, 3, 4]

    </script>
</body>
</html>

陣列的拷貝，方法越多越好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //陣列拷貝，方法越多越好
        var a=[1,2,3,4];
        var b;
        
        b=a;
        console.log(b);

        b=a.concat([]);
        console.log(b);

        b=a.slice(0);
        console.log(b);

        b=[];
        for(var i=0;i<a.length;i++){
            b.push(a[i]);
        }
        console.log(b);


    </script>
</body>
</html>

splice(index, count, item...)

splice(index, count) 從Index位置開始，洗掉count個資料

splice(index, 0, item...) 從index位置開始，添加item...

splice(index, count, item...) 從Index位置開始，洗掉count個資料，并插入item...

回傳值始終是被洗掉的資料

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr=['a', 'b', 'c', 'd', 'e', 'f', 'g'];        
        var newArr=arr.splice(2, 2);
        console.log(newArr);//(2) ["c", "d"]
        console.log(arr);//(5) ["a", "b", "e", "f", "g"]

        var arr2=['a', 'b', 'c', 'd', 'e', 'f', 'g'];        
        var newArr2=arr2.splice(2);
        console.log(newArr2);//(5) ["c", "d", "e", "f", "g"]
        console.log(arr2);//(2) ["a", "b"]

        var arr3=['a', 'b', 'c', 'd', 'e', 'f', 'g'];        
        var newArr3=arr3.splice(2, 0, 'm', 'n');
        console.log(newArr3);//[]
        console.log(arr3);//["a", "b", "m", "n", "c", "d", "e", "f", "g"]

        var arr4=['a', 'b', 'c', 'd', 'e', 'f', 'g'];        
        var newArr4=arr4.splice(2, 2, 'm', 'n');
        console.log(newArr4);//(2) ["c", "d"]
        console.log(arr4);//(7) ["a", "b", "m", "n", "e", "f", "g"]
    </script>
</body>
</html>

indexOf(value, start) 檢測資料在陣列中第一次出現的位置

如果有start值，則檢測位置從start處開始

lastIndexOf(value) 檢測資料在陣列中最后一次出現的位置

不存在則為-1

兼容性：IE9+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var arr=['a', 'b', 'c', 'd', 'a', 'b', 'c'];        
        var pos=arr.indexOf('c');
        console.log(pos);//2
        var pos=arr.lastIndexOf('c');
        console.log(pos);//6
        var pos=arr.indexOf('m');
        console.log(pos);//-1

        // 自己封裝兼容IE9以下版本的indexOf
        function ArrIndexOf(arr, value){
            for(var i=0;i<arr.length;i++){
                if(arr[i]===value){
                    return i;
                }
            }
            return -1;
        }
        var pos=ArrIndexOf(arr, 'c');
        console.log(pos);//2
    </script>
</body>
</html>

str.charAt(index) 回傳str字串中index位置的字符

str.charCodeAt(index) 回傳str字串中index位置的字符的字符編碼

str[index] 兼容性IE7+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var str='hello cyy~';
        console.log(str[3]);//l
        console.log(str.charAt(3));//l
        console.log(str.charCodeAt(3));//108
    </script>
</body>
</html>

str.indexOf(value)

str.lastIndexOf(value)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var str='hello cyy~';
        console.log(str.indexOf('l'));//2
        console.log(str.indexOf('llo'));//2
        console.log(str.lastIndexOf('l'));//3
    </script>
</body>
</html>

字串截取

str.slice(start, end)

沒有end則默認截取到最后

包含左邊不包含右邊

如果為負數，則轉換為長度+該負數

str.substring(start, end)

與slice基本一致

如果有負數，則自動轉換為0

如果前面的數字小于后面的數字，會默認將順序對換

str.substr(start, len)

截取len為0或者負數時，回傳為空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var str='hello cyy~';
        console.log(str.slice(2,5));//llo
        console.log(str.slice(2));//llo cyy~
        console.log(str.slice(-7,5));//lo

        console.log(str.substring(2,5));//llo
        console.log(str.substring(2));//llo cyy~
        console.log(str.substring(-7,5));//hello
        console.log(str.substring(5,2));//llo

        console.log(str.substr(2,5));//llo c
        console.log(str.substr(2));//llo cyy~
        console.log(str.substr(-7,5));//lo cy
    </script>
</body>
</html>

獲取擴展名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var file="cyy.com.jpg";
        function getExtension(filename){
            var pos=filename.lastIndexOf(".");
            return filename.substr(pos);
        }
        console.log(getExtension(file));//.jpg
    </script>
</body>
</html>

str.split(" ") 字串轉陣列

str.replace("", "") 字串替換

replace() 不會改變原字串

并且replace()只替換第一個，不是全域替換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var str="cyy.com.jpg";
        var arr=str.split(".");
        console.log(arr);//(3) ["cyy", "com", "jpg"]
        var arr2=str.split("");
        console.log(arr2);//(11) ["c", "y", "y", ".", "c", "o", "m", ".", "j", "p", "g"]

        var newStr=str.replace(".","-");
        console.log(str);//cyy.com.jpg
        console.log(newStr);//cyy-com.jpg
    </script>
</body>
</html>

str.toUpperCase() 字串轉大寫

str.toLowerCase() 字串轉小寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var str="cyy";
        console.log(str.toUpperCase());//CYY
        var str2="CYY";
        console.log(str2.toLowerCase());//cyy
    </script>
</body>
</html>

連字符轉駝峰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // 方法一
        function toCamel(str){
            var arr=str.split("-");
            var len=arr.length;
            for(var i=1;i<len;i++){
                var word=arr[i];
                word=word.charAt(0).toUpperCase()+word.substr(1);
                arr[i]=word;
            }
            return arr.join("");
        }
        console.log(toCamel("border-left-color"));//borderLeftColor
        console.log(toCamel("margin-top"));//marginTop

        // 方法二
        function toCamel2(str){
            var arr=str.split("-");
            var len=arr.length;
            var newStr=arr[0];
            for(var i=1;i<len;i++){
                var word=arr[i];
                word=word.charAt(0).toUpperCase()+word.substr(1);
                newStr+=word;
            }
            return newStr;
        }
        console.log(toCamel2("border-left-color"));//borderLeftColor
        console.log(toCamel2("margin-top"));//marginTop
    </script>
</body>
</html>

Math物件

Math.min() 最小值，如果出現非數字，則回傳NaN

Math.max() 最大值，如果出現非數字，則回傳NaN

Math.floor() 舍去

Math.ceil() 進一

Math.round() 四舍五入

Math.abs() 絕對值

Math.random() 亂數

Math.random（）方法，回傳的是一個大于等于0并且小于1的亂數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //Math.random()生成一個0-1之間的亂數（如0.1~0.9)，包含0不包含1
        //指定生成2-5之間的隨機整數
        //可能是2,3,4,5
        //生成隨機整數的個數=5-2+1=4
        //最小值=0.1*個數+2=2.4
        //最大值=9.9*個數+2=5.6
        
        //獲取n-m之間的隨機整數
        function getRandom(n,m){
            var len=m-n+1;
            var num=Math.floor(Math.random()*len+n);
            return num;
        }
        console.log(getRandom(2,5));
    </script>
</body>
</html>

new Date() 創建時間物件

getFullYear() 年份

getMonth() 月份 0-11

getDate() 日

getDay() 星期 0-6

getHours() 小時

getMinutes() 分鐘

getSeconds() 秒

getTime() 時間戳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var time=new Date();
        var weekArr=['日','一','二','三','四','五','六'];
        console.log(time);//Tue Feb 04 2020 22:04:42 GMT+0800 (中國標準時間)
        var year=new Date().getFullYear();//2020
        var month=new Date().getMonth()+1;//2
        var date=new Date().getDate();//4
        var week=new Date().getDay();//2
        var minute=new Date().getMinutes();//6
        var hour=new Date().getHours();//22
        var second=new Date().getSeconds();//5
        console.log(new Date().getTime());//1580825165053
        document.write('現在是'+year+'年'+month+'月'+date+'日'+hour+'時'+minute+'分'+second+'秒'+' 星期'+weekArr[week]);
    </script>
</body>
</html>

設定時間的方法

setFullYear()

setMonth() 如果月份大于12，月份=月份-12，此時年份會+1

setDate()

setHours()

setMinutes()

setSeconds()

setTime()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var time=new Date();
        time.setFullYear(2021);
        console.log(time);//Thu Feb 04 2021 22:17:19 GMT+0800 (中國標準時間)

        // 計算50天后是星期幾
        // 方法一
        var today=new Date();
        today.setDate(today.getDate()+50);
        console.log(today.getDay());//3

        //方法二
        var today2=new Date();
        var newToday2=new Date(today2.getFullYear(),today2.getMonth(),today2.getDate()+50);
        console.log(newToday2.getDay());//3
    </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/151122.html

標籤：JavaScript

上一篇：js函式的使用+封裝+代碼復用

下一篇：nodemon的使用

js內置物件的常用屬性和方法（Array | String | Date | Math）