------javascript------N

最新推荐文章于 2024-07-13 16:26:30 发布

原创最新推荐文章于 2024-07-13 16:26:30 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

40 篇文章

订阅专栏

本文深入讲解JavaScript的基础知识，包括数据类型、类型检测、特殊值处理、函数声明与调用、对象创建与使用等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示用户开始浏览器的启用Javascript功能

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>javascript测试</title>
    <script src="~/Scripts/jquery-1.11.2.js"></script>
</head>
<body>
    <!--由于一些人的浏览器禁用了javascript,所有在这种情况下我们需要提醒用户开启浏览器对javascript的支持。-->
    <noscript>
        本站必须启用javascript <!--当浏览器禁用了javascript后，网站会提示“本站必须启用javascript”否则不提示-->
    </noscript>
</body>
</html>

javascript数据类型

javascript有5种简单的数据类型 1.Undefined 类型 2.Null 类型 3.Boolean 类型 4.Number 类型 5.String 类型，和一种复杂数据类型 Object 类型

typeof操作符与数据类型

typeof操作符是用来检测变量的数据类型。对于值或变量使用typeof操作符会返回如下字符串

var box=''; 字符串变量，如果一开始不知道初始化成什么字符串，就用''来进行初始化

var box=0; 数值初始化，一般用0；

var box=null; 对象初始化一般用null

alert(undefined==null) 由于undefined和null两个值的比较是相等的。所以，未初始化的变量和赋值为null的变量会相等。这时可以采用typeof变量的类型进行比较。这里打印出true

alert(undefined===null) 不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===表示两个变量如果类型不同，即便值相等，其结果也是不等。所以这里打印出false

<script type="text/javascript">
    //undefined表示类型或值未定义

    var box;
    alert(box);  //打印出：undefined  ：即值未定义
    alert(typeof (box)); //打印出：undefined  //因为box是用var来声明的，而box又没有赋初始值，所有它的类型也是未定义的，所有这里打印出：undefined

    var pox = null;  //null表示空对象，即：这个对象还没有来得及创建，但是先声明了一个对象的变量在那里，默认初始化为null
    alert(pox);//打印出：null
    alert(typeof (pox)); //打印出;object  //因为pox已经付初始值null了。而null的类型是Null类型，这个Null类型是继承自Object的，所以这里打印出object

    var mox = {}; //{}表示空的对象，即：表示这个对象创建了，但是里面没有东西。
    alert(mox); //打印出：[object object] 
    alert(typeof (mox));//打印出：object

    var dox = true;
    alert(dox); //打印出：true
    alert(typeof (dox)); //打印出：boolean

    var fun = function abc() { return "100" };
    alert(typeof (fun)); //打印出：function 。因为fun是一个函数。所有这里打印出function
</script>

instanceof 运算符

虽然typeof 运算符在检查基本数据类型的时候非常好用，但检测引用类型的时候，它就
不是那么好用了。通常，我们并不想知道它是不是对象，而是想知道它到底是什么类型的对
象。因为数组也是object，null 也是Object 等等。
这时我们应该采用instanceof 运算符来查看。
var box = [1,2,3];
alert(box instanceof Array); //是否是数组
var box2 = {};
alert(box2 instanceof Object); //是否是对象
var box3 = /g/;
alert(box3 instanceof RegExp); //是否是正则表达式
var box4 = new String('Lee');
alert(box4 instanceof String); //是否是字符串对象
PS：当使用instanceof 检查基本类型的值时，它会返回false。

Javascript中的NaN

NaN，即非数值(Not a Number)，它是一个特殊的值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。比如，在其他语言中，任何数值除以0 都会导致错误而终止程序执行。但在ECMAScript 中，会返回出特殊的值Nan，因此不会影响程序执行。

例如：var box=0/0 alert(box) 打印出：NaN (本来0除以0我们是想得到一个数值的。但是因为0是不能作为被除数的，在别的程序里一般是报错的，但是在javascript中则不会报错，而是返回一个NaN，这样就不会抛出异常，影响程序的正常运行了)

再例如：alert(parseInt(null)); 这里打印出NaN 因为parseInt()函数是将一个字符串转换成一个数值。因为null不能转换成数值，所以这里打印出NaN

但是除了0之外，其他的任何正数除以0返回的都是Infinity（正无穷大）：例如 var box=12/0 alert(box) 打印出：Infinity

但是 var box=12/0*0 alert(box) 这有却又会打印出：NaN

我们可以通过Number.NaN 得到NaN 值，任何与NaN 进行运算的结果均为NaN，NaN 与自身不相等(NaN 不与任何值相等)。
alert(Number.NaN); //NaN
alert(NaN+1); //NaN
alert(NaN == NaN) //false

ECMAScript 提供了isNaN()函数，用来判断这个值到底是不是NaN。isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值。

例如：

alert(isNaN(NaN));    //true
alert(isNaN(25));       //false，25 是一个数值
alert(isNaN('25'));     //false，'25'是一个字符串数值，可以转成数值
alert(isNaN('Lee'));   //true，'Lee'不能转换为数值
alert(isNaN(true));     //false true 可以转成成1

parsetInt() 函数是用于将字符串转换成数值。

alert(parsetInt('456Lee')); //打印出：456，如果字符串以数字开头则会返回数字开头的连续整数部分，后面的字母及数字都会忽略掉
alert(parsetInt('Lee456Lee')); //打印出：NaN，如果第一个不是数值，就返回NaN
alert(parseInt('12Lee56Lee')); //打印出：12，如果字符串以数字开头则会返回数字开头的连续整数部分，后面的字母及数字都会忽略掉
alert(parseInt('56.12')); //打印出：56，小数点不是数值，小数点及后面的数值都会被忽略掉
alert(parseInt('')); //打印出：NaN，空返回NaN

自增符++

<script type="text/javascript">
    var box = 100
    var age = box++;   //++在box后面，就表示先赋值，后自增。即：先将100赋值给age，然后box自增
    alert(age); //打印出：100
    alert(box); //打印出：101

    var pox=100
    var age2 = ++pox; //++在pox前面，就表示先自增，后赋值。即：pox先自增后，然后将自增后的值赋值给age2
    alert(age2);  //打印出：101
    alert(pox);   //打印出：101
</script>

arguments(阿狗们特)

在JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。arguments非常类似Array，但实际上又不是一个Array实例。可以通过如下代码得以证实（当然，实际上，在函数funcArg中，调用arguments是不必要写成funcArg.arguments，直接写arguments即可）

<script type="text/javascript">
    function funSum() { //虽然这个函数我们没有定义参数，但是使用的时候，我们依然可以给它传递一个或多个参数。
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) { //这个arguments对象，其实就是保存了 调用这个funSun函数的时候用户传递的可变参数。例如：用户传递了两个参数 1和2 那么就用arguments[0]和arguments[1]来接收
            sum = sum + arguments[i];
        }
        return sum;
    }

    function StrJoin() {
        var str = '';
        for (var i = 0; i < arguments.length; i++) {
            str = str +' | '+ arguments[i];
        }
        return str;
    }

    //求和
    var getSum = funSum(1, 2, 3);
    alert(getSum); // 输出：6

    //连接字符串
    var getStr = StrJoin("中国", '美国', '德国');
    alert(getStr); //输出：| 中国 | 美国 | 德国

</script>

arguments对象中有一个非常有用的属性：callee。arguments.callee返回此arguments对象所在的当前函数引用。在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

<script type="text/javascript">
    //实现一个阶乘的算法 5*4*3*2*1
    function sum(num) {
        if (num <= 1) {
            return 1;
        }
        else {
            return num * sum(num - 1); //此时这个sum会一直自调用（递归），知道num<=1
        }
    }
    var result = sum(5); alert(result); //输出：120

    //以上写法是没有问题的。 现在新的需求来了，我现在要将这个sum函数改个名字，改成abc 。改个函数的名字很容易。
    //虽然此时的sum函数中只有一个sum(sum-1)的自调用，我们改起来很容易，但是如果这个sum函数内部有很多很多个这样
    //的sum函数自调用，那么我们在将这个sum函数的名字修改成abc的时候，就需要同时将它里面所有的sum(num-1)自调用的
    //名字修改成abc(num - 1)。所以说，将一个sum修改成abc，很简单，但会将很多个sum修改成abc就比较麻烦了。

    //对于阶乘函数一般要用到递归算法，所以函数内部一定会调用自身；如果函数名不改变
    //是没有问题的，但一旦改变函数名，内部的自身调用需要逐一修改。为了解决这个问题，我
    //们可以使用arguments.callee 来代替。
    function sum1(num) {
        if (num <= 1) {
            return 1;
        }
        else {
            return num * arguments.callee(num - 1); //这里就用arguments.callee(num - 1)替代了sum1(num - 1)
        }
    }
    var result1 = sum1(5); alert(result1);

</script>

Object对象

对象的声明

有以下三种形式

第一种： var obj = new Object();
第二种： var obj = Object();
第三种： var obj = {};

第三种的封装写法 var obj = {name: "张三",age:28}

<script type="text/javascript">
    //对象包含哪些元素： 1.属性(字段)  2.方法（函数）
    
    var box = new Object(); //创建一个对象。 也可以简写成 var box= Object(); 
    box.name = '张三'; //动态创建一个属性
    box.age = 27;  // 动态创建一个属性



    //或者用自变量的方式创建一个对象：例如：
    var pox = {};
    pox.name = "张三";
    pox.age = 27;
    pox.run = function () { return "123" };
    pox.obj = SetObj;
    alert(pox.run()); //打印出：123
    alert(pox.obj()); //打印出：456


    //也可以用字面两对象封装数据
    var mox = {
        name: '张三', //创建一个属性
        age: 27,
        Email: function () {
            return '123@163.com';
        },
    };
    alert(mox.name); //打印出：张三
    alert(mox.Email()); //输出：123@163.com
    //用字面两对象封装了数据除了上面的那种方式来取，还可以采用数组的方式来取属性或方法
    alert(mox['name']); //打印出：张三 
    


    function SetObj(){
        return"456";
    }

</script>

JavaScript的编码和解码

PS: 因为encodeURIComponent()编码比encodeURI()编码来的更加彻底，一般来说encodeURIComponent()使用频率要高一些。

<script type="text/javascript">
    var box = '//Lee中国';

    var a = encodeURI(box); alert(a); //打印出：Lee%E4%B8%AD%E5%9B%BD   注意//Lee是没有编码的，只对中文的‘中国’进行了编码

    var b = encodeURIComponent(box); alert(b); //打印出：%2F%2FLee%E4%B8%AD%E5%9B%BD   注意：encodeURIComponent对双斜杠//也是进行了编码 （常用）

    alert(decodeURI(a)); //打印出：//Lee中国

    alert(decodeURIComponent(b)); //打印出：//Lee中国
    
</script>

Function函数

函数的3种声明方式

<script type="text/javascript">
    //函数的声明方式：第一种：普通函数的声明方式

    function box(a, b) {  
        return a + b;
    }
    alert(box(1, 2)); //打印出：3

    //函数的声明方式：第二种：使用变量初始化的函数
    var pox = function (a, b) { 
        return a + b;
    }
    alert(pox(5, 6));//打印出：11
    
    //函数的声明方式：第三种：使用nwe的构造函数来声明 （不推荐使用）

    var mox = new Function('a', 'b', 'return a+b');

    alert(mox('a4', 4)); //打印出 a44
    alert(mox('4', 5)); //打印出：9  （其实它在里面用eval()做了类型转换）

</script>

将一个函数的返回值作为另外一个函数是参数传递，与将一个函数本身作为另外一个函数的参数传递的区别

<script type="text/javascript">
    function sum(num) {
        return num + 10;
    }


    function box(sum, num) {
        return sum + num;
    };
    var result = box(sum(10), 10); //此时这个sum(10) 就是sum这个函数的返回值。所以这里的sum(10)我们将它理解成一个数字，而不是一个函数
    alert(result); //打印出：30


    function pox(sum, num) {
        return sum(num) + num;
    }
    var result2 = pox(sum, 10); //此时这个sum是一个函数，是将一个函数当做参数传递到另外一个函数中
    alert(result2); //打印出：30
</script>

Window对象与this

window是一个对象，而且是Javascript中最大的对象，是最外围的对象（window表示全局）
函数内部另一个特殊对象是this，。PS：当在全局作用域中调用函数时，this 对象引用的就是window。

<script type="text/javascript">

    //window是一个对象，而且是Javascript中最大的对象，是最外围的对象  （window表示全局）
    //函数内部另一个特殊对象是this，。PS：当在全局作用域中调用函数时，this 对象引用的就是window。

    alert(window);  //打印出：[object Window]
    alert(this);    //打印出：[object Window]  说明，此时的this就是window对象。


    //注意：window是一个全局对象，在window下，所有的变量都是它的属性。

    var color = "红色的"; //这里的这个color就是一个全局变量。而这个变量又是window对象的一个属性
    alert(window.color);  //打印出：红色的    这就说明这个color的确是window对象的一个属性
    alert(this.color);    //打印出：红色的   

    window.color = "蓝色的"; //相当于 var color='红色的';


    var box = {
        color: "黄色的",  //这里的这个color是box对象下的属性，也就是局部变量。
        sayColor: function () {
            alert(this.color);  //此时这个this是在box这个对象下面，所有此时这个this表示box对象本身而不是最外面的window对象
        }
    }
    box.sayColor(); //打印出：黄色的

</script>

例子2

<script type="text/javascript">
    window.color = "红色的";

    function sayColor() {
        alert(this.color);
    }

    sayColor(); //打印出：红色的  因为这个this是在window下，所以this表示的是window对象

    var box = {
        color: "蓝色的"
    };
    box.MyColor = sayColor; //此时sayColor函数中的this是box这个对象
    box.MyColor();   //打印出：蓝色的
</script>

函数的属性和方法

ECMAScript中函数是对象，因此函数也有属性和方法，每个函数都包含两个属性length和prototype 其中，length属性表示函数希望接收的命名参数的个数

<script type="text/javascript">
    function Add(name, age) {

    }

    alert(Add.length); //打印出：2    表示：Add这个函数有2个参数

</script>