JavaScript内置对象

醉酒当歌 提交于 2020-03-04 09:48:13

内置对象

系统内置的构造函数(类)

1 Number

属性

  • Nnumber.MAX_VALUE

  • Number.MIN_VALUE

方法

  • toFixed([number]) 取整或者保留指定位数的小数 (四舍五入)

  • toString([number]) 转为字符串形式,可以指定进制

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number对象</title>
</head>
<body>
    <script>
        var n1 = 100;

        var n2 = new Number(100);


        console.log(n1);          //100
        console.log(n2);          //Number

        console.log(n1 == n2);    //true
        console.log(n1 === n2);   //false

        console.log(n2 + 100);   //200


        console.log(n1.constructor);  //ƒ Number() { [native code] }


        //类的属性

        console.log(Number.MAX_VALUE);  //可以表示最大的值-------1.7976931348623157e+308
        console.log(Number.MIN_VALUE); //可以表示最小值----------5e-324

        console.log(n1.toString()); //变成字符串100
        console.log(typeof n1.toString()); //变成字符串100----string

        console.log(n1.toString(2)); //二进制输出-------------1100100
        console.log(n1.toString(8)); //8进制输出--------------144
        console.log(n1.toString(16)); //16进制输出------------64
        console.log(n1.toString(3)); //3进制输出--------------10201


        //取整数
        console.log(n1.toFixed())       //100
        console.log(10.354.toFixed()) //四舍五入取整----------10
        console.log(10.67.toFixed())  //---------------------11
        console.log(10.354.toFixed(1)) //四舍五入取整---------10.4
        console.log(10.354.toFixed(8)) //四舍五入取整---------10.35400000


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

2 String

属性

  • length 字符串长度

方法

indexOf()  返回第一次出现的位置  不存在 返回-1lastIndexOf()  返回最后一次出现的位置  不存在 返回-1substr(start, lenth)  截取 开始和截取长度substring(start, end) 截取 开始和结束位置 slice(start,end)     同上split()  把字符串分割成 数组trim()   去掉两边的空格toUpperCase() 转大写toLowerCase() 转小写replace(旧, 新)  替换 只能替换一次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
</head>
<body>
    <h1>字符串</h1>
    <hr>
    <script>
        var message = 'i love you hello 你';                  


        console.log(message.length);  //字符的个数------------18
        console.log(message[3]);      //通过索引取字符串中指定的字符----o


        //方法
        console.log(message.charAt(5)); //返回指定位置的字符------e
        console.log(message.indexOf('o')); //返回指定的字符串(字符串) 第一次出现的位置--------------3
        console.log(message.indexOf('love')); //返回指定的字符串(字符串) 第一次出现的位置-----------2
        console.log(message.lastIndexOf('o')); //返回指定的字符串(字符串) 最后一次出现的位置--------15

        console.log(message.substr(3)); //截取字符串中子字符串,从索引为3的字符串开始到最后---------ove you hello 你
        console.log(message.substr(4, 5)); //截取 从第4开始截取5个字符----------------------------ve yo
        console.log(message.substring(4))  //同substr-------------------------------------------ve you hello 你
        console.log(message.substring(4,6)); //从第4个到第6个(不包含第6个)------顾头不顾尾----ve
        console.log(message.slice(4,6));//同上--------------------------------------------------ve

        //把字符串分隔成 数组
        console.log(message.split(' '));               // ["i", "love", "you", "hello", "你"]


        console.log(message.toUpperCase())             //I LOVE YOU HELLO 你
        console.log(message.toLowerCase())             //i love you hello 你

        console.log(message.replace('o', '偶'));       //i l偶ve you hello 你------只会替换从左到右数第一个字符串中的o
        console.log(message.replace(/o/g, '偶'));      //i l偶ve y偶u hell偶 你----使用正则可以替换字符串中所有的o

        console.log(message.trim());                   //i love you hello 你------去掉字符串两边的空格,同Python中strip


        console.log(message.indexOf('哈哈哈')); //返回指定的字符串(字符串) 第一次出现的位置-----,没有返回-1,利用这个特性可以判断一个字符是否属于一个字符串




    </script>

</body>
</html>
字符串

3 Boolean

false/true

4 Array

4.1 创建数组

var list = [item1, item2, item3 ...]var list = new Array()

3.2 数组操作

#添加元素list.push()  最后面list.unshift()  最前面list.splice(位置,0,新值)  指定位置​#删除元素list.pop() 删除最后  返回删除的元素list.shift() 删除第一个  返回删除的元素list.splice(位置,删除的个数)   指定位置删除指定个数​#设置修改list[index] = valuelist.splice(位置,删除个数,值1,值2...)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
    <h1>数组</h1>
    <hr>

    <script>
        //重点理解splice
        var list = [100,23,'hello', 9, [1,2,3], {name:'lili',age:10}];

        console.log(list);        //[100, 23, "hello", 9, Array(3), {…}]  显示不下可以打开有箭头查看全部内容

        // list[18] = 1000;

        //console.log(list); //稀疏数组 , 尽量避免。  数组的索引必须连续


        console.log(list.length);      //统计数组的长度:6


        //如何给数组添加元素
        //在最后面追加-----------改变的是原数组
        list.push(1314);        
        //在最前面追加
        list.unshift(520)
        //指定位置追加
        list.splice(3,0,'小丽丽','大丽丽')        //在指定的索引后面可以添加一个或多个字符,如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

        console.log(list);

        console.log('');


        //删除数组的元素
        //删除最后一个
        list.pop();
        // 删除第一个
        list.shift();
        //删除指定位置
        list.splice(4,2)       //指定删除元素的位置和删除的元素个数

        console.log(list);


        //修改数组中的元素
        list[2] = '老丽丽';             //通过数组的索引修改指定的字符
        list.splice(2, 2, '小芳','小芳她妹','小芳她姐')      //指定索引,指定修改字符的个数,可以替换为任意多个字符


        console.log(list);






    </script>
</body>
</html>
数组

3.3 属性和方法

属性length​​方法push()pop()shift()unshift()splice()sort()reverse()------------------------join()concat()  数组连接slice()indexOf()lastIndexOf()map()filter()some()every()reduce()forEach()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的方法</title>
</head>
<body>
    <script>
        var list = [1,2,31,4,5,6,10];
        console.log(list)


        list.reverse();                                 //将数组整体进行翻转------------ [10, 6, 5, 4, 31, 2, 1]
        // list.sort(function(v1, v2) {
        //     //返回正数 替换。 返回负数,不变
        //     return v1 - v2;
        // });



        console.log(list)
        str = list.join(','); //拼成字符串,将数组通过指定的分隔符拼接成字符串
        console.log(str)
        
        console.log(list.concat([1,2,3], ['a','b','c']))  //将多个数组拼接成一个数组-----[10, 6, 5, 4, 31, 2, 1, 1, 2, 3, "a", "b", "c"]
        console.log(list.slice(1,5)); //截取,类似Python中的切分,指定截取的索引起点和终点,但是顾头不顾尾------[6, 5, 4, 31]
        console.log(list.indexOf(31));    //判断指定索引在数组中的索引位置-----------------------------------4
        console.log(list.lastIndexOf(301));  //判断数组中是否存在某个值,不存在返回的是:-1




        console.log('');
        // map会将数组进行遍历,将数组中的每一个值加上100
        list=[1,2,3,4,5,6,7,8]
        var arr = list.map(function(value, index) {
            // console.log(value, index)     //会打印出数组所有的值和对应的索引
            return value + 100;
        })
        console.log(arr);                    // [101, 102, 103, 104, 105, 106, 107, 108]     


        // filter对数组进行过滤,过滤出符合条件的数组
        list=[1,2,3,4,5,6,7,8]
        var arr = list.filter(function(value, index){
            //console.log(value, index)
            //return false;
            // 过滤条件
            if (value > 6) {
                return true
            } else {
                return false
            }
        });
        console.log(arr);                 //[7, 8]


         
        // //返回布尔值
        // every判断数组中的每一个值是否符合我们设定的条件,全部符合才返回true
        list=[1,2,3,4,5,6,7,8]
        var res = list.every(function(value, index){
            return value >= 1;
        });

        console.log(res); //布尔值------true


        // //some 返回布尔值  数组成员只要至少有一个满足条件 就返回true
        list=[1,2,3,4,5,6,7,8]
        var res = list.some(function(value, index) {
            return value > 6;
        });
        console.log(res);


        // //reduce 返回值
        // //阶乘
        list=[1,2,3,4,5,6,7,8]
        var res = list.reduce(function(prev,value,index){
            return prev * value;     //将数组中的每一个值进行相乘----等同于---- console.log(1*2*3*4*5*6*7*8) ,index也可以省略不写
        });

        console.log(res)

       




    </script>
</body>
</html>
数组的方法

3.4 数组的遍历(迭代)

#for 循环和for (var i = 0; i < arr.length; i ++) {    arr[i]}​#for .. infor (var i in arr) {    arr[i]}​#推荐 数组方法 forEacharr.forEach(function(val, index){    })
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历数组</title>
</head>
<body>
    <script>
        var arr = [10,20,30,40,50,60];

        console.log(arr);


        //方式一:for循环遍历
        for (var i = 0; i < arr.length; i ++) {
            console.log(arr[i])         //遍历的结果是:换行输出数组中的每一个值
        }
        console.log('');


        //方式二:不牛逼的for in----------结果同上for循环的遍历结果
        // 强调for   in 循环的结果是数组中的索引
        for (var i in arr) {
            console.log(arr[i])     
        }
        console.log('');

        //方式三:forEach--------推荐使用,遍历取出数组中的每一个值
        arr.forEach(function(value, index){
            console.log(index+' => '+value)
        })
    </script>
</body>
</html>
数组的遍历

5 类数组对象

  • 类型不是Array,特性非常像Arrat

  • 具有length属性

  • 常见类数组对象: arguments, 元素的列表(NodeList)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类数组对象</title>
</head>
<body>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>


    <script>
        //for ... of
        var list = [1,2,3,4,5];  //纯的
        var itemList = document.querySelectorAll('.item');       //获取CSS元素,减前面知识点,获取的元素是一个数组的形式

        console.log(list);                                      // [1, 2, 3, 4, 5]
        console.log(itemList);                                  //NodeList(5) [div.item, div.item, div.item, div.item, div.item]

        console.log(list.constructor);                          //查看数组的构造函数: Array() { [native code] }
        console.log(itemList.constructor);                      //查看获取元素的构造函数: NodeList() { [native code] }


        function demo(){
            console.log(arguments.constructor)                 //查看arguments的构造函数: ƒ Object() { [native code] }
        }

        demo();


        console.log(itemList[0])                              //通过索引查看获取元素的一个元素:<div class="item">1</div>
        console.log(itemList.length);                         //获取元素数组对象的长度是:5

        // 遍历获取的元素的三种方法:
        // 方法一:for循环遍历
        for (var i = 0; i < itemList.length; i ++) {
            console.log(itemList[i])                         //通过for循环,得到获取的所有元素
        }

        console.log('');

        // 方法二:for  in循环
        for (var i in itemList) {
            console.log(i, itemList[i])                     //通过for  in循环获取所有的索引的值,以及索引对应的元素值
        }

        // 方法三:forEach
        itemList.forEach(function(value, index) {
            console.log(value)
        })
    </script>
</body>
</html>
类数组对象

6 Function

# 属性length   形参的长度​# 方法call(对象,参数,参数2...)  在调用函数(方法)的同时,改变函数内this的指向apply(对象, 数组)  在调用函数(方法)的同时,改变函数内this的指向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数对象</title>
</head>
<body>
    <script>
        window.name = 'sb';
        //demo全局变量,  全局变量属于全局对象(global)->window
        //this表示 方法所属的对象
        function demo(a,b,c) {
            console.log('啊,我被调用了');
            console.log(this);               //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
            console.log(this.name);          //sb
            console.log(a,b,c);              //1 2 3
            console.log('')
        }



        console.log(demo.constructor);          //查看函数的构造函数:ƒ Function() { [native code] }

        console.log(demo.length);//形参的个数:3


        demo(1,2,3); //调用的
        window.demo(1,2,3);
        demo.apply()            //apply其实就是调用函数,相当于demo()       


        // //apply 调用函数,改变函数内的this的指向
        demo.apply({name:'lili'}, [10,'hello',30]);        //大括号中是this指向的对象,中括号是出入的参数
        demo.call({name:'xiaofang'}, 10, 20, 40);          //大括号中是this指向的对象,后面是出入的参数,不用中括号


        // call改变this指向的应用:
        // push是数组的方法,在数组的最后追加一个值
        console.log('');
        var obj = {}; //对象
        [].push.call(obj, 300)                           //使用call可以使,没有push方法的对象obj ,也可以通过push向对象中添加属性的值  
        console.log(obj);                                //{0: 300, length: 1}


        console.log('')


        function fn() {
            //遍历所有的实参
            // this此时指向arguments对象,传入的参数是一个匿名函数,这样就可以使得没有forEach方法的arguments也可以通过forEach方法进行出入参数
            [].forEach.call(arguments, function(val, index){
                console.log(val)                          
            })
        }

        fn(1,2,3,5,6,7,'hello');








    </script>
</body>
</html>
函数对象

7 Math 数学

属性Math.PI​方法Math.abs()  绝对值Math.pow()  求几次方Math.max()  最大值Math.min()  最小值Math.ceil()   进位取整Math.floor()  舍位取整Math.round()  四舍五入Math.random()  随机数 0~1  0有可能,1不可能
取随机数0~9Math.floor(Math.random() * 10)​6~13Math.floor(Math.random() * 8) + 6
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math</title>
</head>
<body>
    <script>
        //记住即可
        //Math 对象 
        console.log(Math);                        //Math
        console.log(typeof Math);                 //object
        console.log(Math.constructor);            //ƒ Object() { [native code] }


        console.log(Math.PI); //圆周率--------------3.141592653589793


        console.log(Math.abs(-78)) //绝对值---------78
        console.log(Math.abs(89.9)) //89.9


        console.log(Math.pow(3,4)) //3的4次方-------81


        console.log(Math.ceil(12.0001)); //取整数,进位取整 往大了取-----------13
        console.log(Math.floor(12.9998)); //取整数,舍位取整  往下了取---------12
        console.log(Math.round(3.47)); //取整 四舍五入------------------------3

        console.log(Math.max(10,20,1,45,3)); //可变参数数量  取最大值----------45
        console.log(Math.min(10,20,1,45,3)); //可变参数数量  取最小值----------1


        //取随机数
        console.log(Math.random()); //0到1之间  0可能会被取到 1不可能-----------0.06254222105778706

        //取 0到10之间的随机数
        console.log( Math.floor(Math.random() * 11));

        //0到11
        console.log( Math.round(Math.random() * 11));

        //0到28
        console.log(Math.floor(Math.random() * 29));


        //7-17随机数
        //取0~10 + 7
        console.log(Math.floor(Math.random() * 11) + 7);



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

8 Date

getFullYear()  公元纪年getMonth()     月份  0~11  需要+1getDate()      日期getDay()       星期几getHours()     时getMinutes()   分getSeconds()   秒getMilliseconds()  毫秒getUTC...  标准时区的时间set...setUTC...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date日期</title>
</head>
<body>
    <script>
        // 记住即可
        //获取日期对象
        var date = new Date(); 

        date.setFullYear(1978);               //设置年
        date.setUTCHours(3);                  //设置当前小时比世界标准时间超前两个小时

        console.log(date);                   //Sun Aug 13 1978 09:38:21 GMT+0800 (中国标准时间) ------我们也可以根据需求自己拼接时间的格式    

        // 2018-08-13 12:34:23
        // 获取时间的方法
        console.log(date.getFullYear());        //获取年
        console.log(date.getMonth() + 1);        //获取月
        console.log(date.getDate());            //获取日
        console.log('星期', date.getDay());     //获取星期几,星期一是用0表示,以此类推

 
        console.log(date.getHours())           //获取时
        console.log(date.getMinutes())         //获取分
        console.log(date.getSeconds())         //获取秒
        console.log(date.getMilliseconds())    //获取毫秒


        //时间戳
        console.log(date.getTime()); //单位是毫秒-----从1970年开始算


        //0时区的时间
        console.log(date.getUTCFullYear())       //获取年
        console.log(date.getUTCDate())           //获取日
        console.log(date.getUTCHours())          //获取与标准时间的时差



    

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

9 RegExp

正则

RegExp对象test()  返回布尔值 exec()  返回数组,第一个匹配到的内容,位置。 全局匹配,所有匹配到的内容​String对象的方法search()  第一次匹配到的位置,匹配不到 -1match()  同r.exec()replace()  替换,默认只替换一个,正则全局匹配​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则</title>
</head>
<body>
    <script>
        //创建正则对象
        //var r = new RegExp(); //创建正则对象

        var r = /^\w{4,6}$/;      //匹配以字母数字或下划线的字符开头及结尾的至少4个最多6个字符


        console.log(r.test('abc')); //返回布尔值:false
        console.log(r.test('abc12')) //true


        console.log(r.exec('abc_nb')); // 返回数组 第一个元素 匹配到的内容,index指定匹配的位置:["abc_nb", index: 0, input: "abc_nb", groups: undefined]


        //字符串 方法匹配正则
        var msg = 'hello world';
        console.log(msg.search(/\w/)); //返回第一次匹配的位置(即字符对应的索引值)---------------------0
        console.log(msg.search(/o/)); //返回第一次匹配的位置----------------------------------------4
        console.log(msg.search(/哈/)); //返回第一次匹配的位置 匹配不到返回-1------------------------(-1)

        console.log(msg.match(/\w/)); //返回数组,数组中有 被匹配到的内容,["h", index: 0, input: "hello world", groups: undefined]
        console.log(msg.match(/\w/g)); //匹配出 所有满足正则的字符串,["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]


        console.log(msg.replace(/o/g, '偶'))  //匹配字符创中所有的o,并将其全部替换成偶

    </script>
</body>
</html>
正则

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!