前端基础：JavaScript对象

JavaScript对象

在JavaScript中除了null和undefined以外，其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，数字型、布尔型、字符串、日期、数字和正则表达式、数组和函数都是对象，在JavaScript程序中大多数功能都是基于对象实现的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- type可以不写,默认"text/javascript",如果写错浏览器将无法解析 -->
    <script type="text/javascript">
        // 利用数字对象获取可表示最大数
        var number = Number.MAX_VALUE;
        // 创建字符串对象
        var character_string = "hello JavaScript";
        // 创建日期对象
        var date = new Date();
        // 创建数组对象
        var array = new Array("Saab","Volvo","BMW");
    </script>
</body>
</html>

JavaScript Number对象

JavaScript只有一种数字类型，可以使用也可以不使用小数点来书写数字。

JavaScript数字

JavaScript数字可以使用也可以不使用小数点来书写：

var pi = 3.14;        // 使用小数点
var num = 34;        // 不使用小数点

极大或极小的数字可以通过科学(指数)计数法来写：

var x = 123e5;            // 12300000
var y = 123-e5;            // 0.00123

所有JavaScript数字均为64位

JavaScript不是类型语言，与许多其他编程语言不同，JavaScript不定义不同类型的数字，比如：整数、短、长、浮点数等。在JavaScript中，数字不分整数类型和浮点类型，所有的数字都是浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324；

精度

整数(不使用小数点或指数计数法)最多为15位，小数的最大位数是17，但是浮点数运算并不是100%准确：

var x = 999999999999999;   // x 为 999999999999999
var y = 9999999999999999;  // y 为 10000000000000000
var x = 0.2+0.1; // 输出结果为 0.30000000000000004

八进制和十六进制

如果前缀为0，则JavaScript会把数值常量解释为八进制，如果前缀为"0x"，则解释为十六进制：

var y = 0377;
var z = 0xFF;

绝不要再数字前面写零，除非需要进行八进制转换。

默认情况下，JavaScript数字为十进制显示，但是我们可以使用toString()方法输出16进制、8进制和2进制：

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大(Infinity)

当数字运算结果超过了JavaScript所能标识的数字上限(溢出)，结果为一个特殊的无穷大(infinity)值，在JavaScript中以infinity表示。同样地，当负数的值超过了JavaScript所能标识的负数范围，结果为负无穷大，在JavaScript中以-infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它的加、减、乘和除运算结果还是无穷大(当然还保留它的正负号)。

myNumber=2;
while (myNumber!=Infinity)
{
    myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}

除以0也产生了无限：

var x = 2/0;
var y = -2/0;

NaN - 非数字值

NaN属性代表非数字值的特数值。该属性用于指示某个值不是数字，可以把Number对象设置为该值，来指示其不是数字值。我们可以使用isNaN()全局函数来判断一个值是否是NaN值：

var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false

除以0是无穷大，无穷大是一个数字：

var x = 1000 / 0;
isNaN(x); // 返回 false

数字可以是数字或对象

数字可以私有数据进行初始化，就像x = 123；JavaScript数字对象初始化数据，var y = new Number(123)；

var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object
(x === y) // 为 false，因为 x 是一个数字，y 是一个对象

数字属性和方法

  • 数字属性：

    MAX_VALUE

    MIN_VALUE

    NEGATIVE_INFINITY

    POSITIVE_INFINITY

    NaN

    prototype

    constructor

  • 数字方法

    toExponential()

    toFixed()

    toPrecision()

    toString()

    valueOf()

JavaScript String字符串对象

1.字符串的创建

  • 变量 = "字符串"；
  • 字符串对象名 = new String("字符串")；

//        字符串对象的创建有两种方式
//        方式一
          var s = ‘sffghgfd‘;

//        方式二
          var s1 = new String(‘  hel lo ‘);
          console.log(s,s1);
          console.log(typeof(s)); //object类型
          console.log(typeof (s1)); //string类型

2.字符串对象的属性和方法

-------属性
x.length         －－－－获取字符串的长度

------方法
 x.toLowerCase()        －－－－转为小写
 x.toUpperCase()        －－－－转为大写
 x.trim()               －－－－去除字符串两边空格       

－－－－字符串查询方法

x.charAt(index)         －－－－str1.charAt(index);－－－－获取指定位置字符，其中index为要获取的字符索引

x.indexOf(index)－－－－查询字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的数组，如果没有匹配则返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 结果为"world"
                        alert(str3);     // 结果为15

－－－－子字符串处理方法

x.substr(start, length) －－－－start表示开始位置，length表示截取长度
x.substring(start, end) －－－－end是结束位置

x.slice(start, end)     －－－－切片操作字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //结果为"cd"

                            alert(str3); //结果为"efgh"

                            alert(str4); //结果为"cdefg"

                            alert(str5); //结果为"fg"

x.replace(findstr,tostr) －－－－    字符串替换

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日";
                                var strArray=str1.split(",");
                                alert(strArray[1]);//结果为"二"

x.concat(addstr)         －－－－    拼接字符串
<script>
        // 字符串创建方式1：
        var str_one = "hello world";
        // 字符串创建方式2：
        var str_two = new String("   hello world   ");
        console.log(str_one, str_two);
        console.log(typeof(str_one));       // string类型
        console.log(typeof(str_two));       // object类型

        // 字符串对象的属性和方法
        console.log(str_one.length);        // 字符串只有一个属性，获取字符串的长度

        console.log(str_one.toUpperCase());     // 变大写
        console.log(str_one.toLocaleLowerCase());       // 变小写
        console.log(str_two.trim());        // 去除字符串两边的空格(和python中的strip方法一样，不会去除中间的空格)
        console.log(str_one.charAt(3));     // 获取指定索引位置的字符
        console.log(str_one.indexOf(‘l‘)); //如果有重复的，获取第一个字符的索引,如果没有你要找的字符在字符串中没有就返回-1
        console.log(str_one.lastIndexOf(‘l‘)); //如果有重复的，获取最后一个字符的索引
        var str=‘welcome to the world of JS!‘;
        var str1 = str.match(‘world‘);  //match返回匹配字符串的数组，如果没有匹配则返回null
        var str2 = str.search(‘world‘);//search返回匹配字符串从首字符位置开始的索引，如果没有返回-1
        console.log(str1);//打印
        alert(str1);//弹出
        console.log(str2);
        alert(str2);

        // 子字符串处理方法
        var aaa=‘welcome to the world of JS!‘;
        console.log(aaa.substr(2,4)); //表示从第二个位置开始截取四个
        console.log(aaa.substring(2,4)); //索引从第二个开始到第四个，注意顾头不顾尾
        //切片操作（和python中的一样，都是顾头不顾尾的）
        console.log(aaa.slice(3,6));//从第三个到第六个
        console.log(aaa.slice(4)); //从第四个开始取后面的
        console.log(aaa.slice(2,-1)); //从第二个到最后一个
        console.log(aaa.slice(-3,-1));

        // 符串替换
        console.log(aaa.replace(‘w‘,‘c‘)); //字符串替换，只能换一个
        //而在python中全部都能替换
        console.log(aaa.split(‘ ‘)); //吧字符串按照空格分割
        alert(aaa.split(‘ ‘)); //吧字符串按照空格分割
        var strArray = aaa.split(‘ ‘);
        alert(strArray[2])
    </script>

当遇到将字符串转成数组无效时，就会得到NaN数据

var test = "hello";
test =+ test;        // 因为Number(test)时结果为NaN，所以，该语句结果为NaN
// 当字符串不是数字、不是空字符串时，对其进行Number或者=+操作时，其结果为NaN

JavaScript Date日期对象

1.创建日期对象

创建date对象
//        方式一：
        var now = new Date();
        console.log(now.toLocaleString());             //2018/5/25 下午2:02:16
        console.log(now.toLocaleDateString());     //2018/5/25
//        方式二
        var now2 = new Date(‘2004/2/3 11:12‘);
        console.log(now2.toLocaleString());          //2004/2/3 上午11:12:00
        var now3 = new Date(‘08/02/20 11:12‘);     //2020/8/2 上午11:12:00
        console.log(now3.toLocaleString());

        //方法3：参数为毫秒数
        var nowd3=new Date(5000);
        alert(nowd3.toLocaleString( ));
        alert(nowd3.toUTCString());         //Thu, 01 Jan 1970 00:00:05 GMT

2.Date对象方法

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

实例

  • 打印输出格式：2018-05-25 14:12:星期五
<script>
        function foo() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDate();
            var hour = date.getHours();
            var min = date.getMinutes();
            var week = date.getDay();
            console.log(week);
            var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            console.log(weeks[week]);
            console.log(weeks[3]);
            console.log(year+"-"+ChangeMonth(month+1)+"-"+day+" "+hour+":"+min+":"+weeks[week]);
        }

        function ChangeMonth(num) {
            if (num<10){
                return "0"+num;
            }else {
                return num;
            }
        }

        foo();
        console.log(foo());     // 没有返回值，返回undefined
        // 三元运算符
        console.log(2>1?2:1);
    </script>
  • 设置日期时间和日期时间转换：
//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)

var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒

// 日期和时间的转换
getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

JavaScript Array 数组对象

1.创建数组

创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

创建方式3:
var arrname = new Array(长度);
            //  初始化数组对象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";

2.数组的属性和方法

<script>
        // 数组对象的属性和方法
        var array = [1, 2, "hello", true, "123"];
        var tmp_array = array.join("-");        // 将数组元素拼接成字符串，内嵌到数组
        alert(tmp_array);
        var arr = array.concat(4, 8);
        alert(arr.toString());      // 输出："11,55,hello,true,656,3,4"

        // 数组排序：sort，reverse(倒序数组元素)
        var li = [1122,33,44,20,‘aaa‘,2];
        console.log(li, typeof(li));  //Array [ 1122, 33, 44, 55 ] object
        console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string
        alert(li.reverse());  //2,‘aaa‘,55,44,33,1122
        console.log(li.sort().toString());      // 输出："1122,2,20,33,44,aaa"，按照ascii码值排序
        // 如果想按照数字比较：用函数

        // 方式一
        function custom_sort(a, b) {
            if (a>b){
                return 1;
            }
            else if (a<b){
                return -1;
            }
            else{
                return 0;
            }
        }
        li.sort(custom_sort);
        console.log(li.toString());     // 2,20,33,44,1122,aaa

        // 方式二
        function Intsort(a,b) {
            return a-b;
        }
        li.sort(Intsort);
        console.log(li.toString());

        // 数字切片：x.slice(start,end)
        var arr1=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘];
        var arr2=arr1.slice(2,4);
        var arr3=arr1.slice(4);
        var arr4=arr1.slice(2,-1);
        alert(arr2.toString());     //结果为："c,d"
        alert(arr3.toString());     //结果为："e,f,g,h"
        alert(arr4.toString());     //结果为："c,d,e,f,g"

        // 删除子数组
        var a = [1,2,3,4,5,6,7,8];
        a.splice(1,2);
        console.log(a) ;        //Array [ 1, 4, 5, 6, 7, 8 ]

        // 数组push和pop：push将值添加到数组尾部；pop将数组最后一个元素删除；
        var b=[1,2,3];
        b.push(‘a0‘,‘4‘);
        console.log(b);        //Array [ 1, 2, 3, "a0", "4" ]
        b.pop();
        console.log(b);        //Array [ 1, 2, 3, "a0" ]

        // 数组shift和unshift：shift将数组的第一个元素删除；unshift将值插入到数组的开始；
        b.shift();
        console.log(b);         //Array [ 555, 666, 1, 2, 3, "a0" ]
        b.unshift(888,555,666);
        console.log(b);         //Array [ 888, 555, 666, 1, 2, 3, "a0" ]

        // js中的数组特性
        // js中的数组特性1：js中的数组可以装任意类型,没有任何限制.
        // js中的数组特性2： js中的数组,长度是随着下标变化的.用到多长就有多长.
    </script>

JavaScript Boolean 布尔类型

布尔类型仅包含真假，与Python不同的是其首字母小写。

  • == 比较相等
  • != 不等于
  • === 比较值和类型相等
  • !== 不相等
  • || 或
  • && 且

JavaScript Math 算数对象

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

JavaScript Function 函数对象

1.函数基本

// 普通函数
    function func(arg){
        return true;
    }

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 自执行函数
    (function(arg){
        console.log(arg);
    })(‘123‘)

注意：对于JavaScript中函数参数，实际参数个数可能小于形式参数个数，函数内的特数值arguments中封装了所有实际参数。

<script>
        //函数内置对象arguments，相当于Python中的动态参数
        function add(a, b) {
            console.log(a+b);       // 3
            console.log(arguments.length);      // 2
            console.log(arguments);     // [1, 2]
        }
        add(1, 2);

        // arguments用处1
        function ncadd() {
            var sum = 0;
            for (var i =0;i<arguments.length;i++){
               console.log(i);          //打印的是索引
               console.log(arguments);      //Arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 项… }
               console.log(arguments[i]);       //1,2,3,4,5
               sum +=arguments[i];
            }
            return sum;
        }
        resu = ncadd(1,2,3,4,5,6);
        console.log(resu);

        // arguments用处2
        function f(a,b,c){
            if (arguments.length != 3){
                throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
            }
            else {
                alert("success!")
            }
        }
        f(1,2,3,4,5)
    </script>

2.作用域

JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外层层查找，如果在最外层都没找到，则会抛出异常。切记：所有的作用域在创建函数且未执行的时候就已经存在了。

<script>
        function func() {
            var arg = 123;
            function inner() {
                console.log(arg);
            }
            return inner;
        }

        ret = func();
        ret();
    </script>

原文地址：https://www.cnblogs.com/love9527/p/9089196.html

时间： 2024-10-10 12:48:55

前端基础：JavaScript对象的相关文章

前端基础——JavaScript

一.脚本程序和 javascrip    Javascript脚 本是嵌套在HTML网页中的程序语言,浏览器带有脚本程序的解释器(脚本引擎).脚本也可以有多种,比如还有vbscript, JScript等,完全在浏览器上运行,与www服务器没有任何关系.WWWW 服务器不会把文档中的脚本语言解释执行,而会原封不动的传给浏览器,它的前身是livescipt,是一种基于对象和事件驱动,并具有安全性能的脚本语言.它不用编译,而是由浏览器直接解释执行. javascript脚本的位置 1) <scrip

前端基础-JavaScript的基本概述和语法

1.JavaScript概述 2.JavaScript引入方式 3.JavaScript语言规范 4.JavaScript语言基础 5.JavaScript数据类型 6.JavaScript运算符 7.JavaScript流程控制 8.JavaScript函数 9.JavaScript词法分析 10.JavaScript内置对象和方法 一.JavaScript概述 1.ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将

前端基础 - Defer对象

参考:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript&qu

前端之JavaScript基础

前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C-minus-minus(C-)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本

JavaScript基础--DOM对象加强篇（十四）

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

Ext JS学习第十天 Ext基础之 扩展原生的javascript对象（二）

此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Ext.Ar

Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位置找到这几个扩展的js源码: •extjs-4.1.1\src\core\src\lang\ •ExtJS扩展原生Javascript –Ext.Object –Ext.Number –Ext.String –Ext.Array –Ext.Function –Ext.Date –Ext.Error

JavaScript 基础(三) 对象 条件判断

JavaScript的对象是一种无序的集合数据类型,它是由若干键对组成. var guagua = { name:'瓜瓜', birth:1988, school:'No.1 Middle School', height:1.70, weight:65, score:null }; JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开.注意,最后一个键值对不需要在末尾加,, 如果加了,有的浏览器(如低版本的IE)将报错. 上述对象申明了一个name属性,值