Java全栈学习：JavaScript---标识符,变量，函数，数据类型

其他 2021-04-03 17:44:17 阅读次数: 0

文章目录

一.标识符

标识符的命名规范与java的命名规范一样。

二.变量

相比于java（java是一种强类型语言），JavaScript是一种弱类型语言。java的变量类型在编译后就不会发生改变，比如 int a ；以后a 的类型不再发生改变。JavaScript 在没有编译阶段，一个变量可以随意赋值，赋任何类型的值都可以。

语法：
声明：var 变量
赋值：变量 = 值

当一个变量在没有赋值的时候，变量会有一个初始的默认值 undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        var s1;
        alert(s1);
    </script>
</body>
</html>

在这里插入图片描述

注意，变量在没有声明的时候不能直接访问。
错误如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        alert(s1);
    </script>
</body>
</html>

我们在控制台能看到如下的错误

在这里插入图片描述

三.函数

第一种方式：

扫描二维码关注公众号，回复： 13121685 查看本文章 
function 函数名（参数列表）{
	函数体
}

第二种方式：

函数名 = function(参数列表){
	函数体
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        function sayHello(username){
     
     
            alert(username + "sayHello");
        }
        sayWorld = function(username){
     
     
            alert(username + "asyWorld");
        }
        sayHello("张三");
        sayWorld("李四");
    </script>
    <input type = "button" onclick = "sayHello('张三')"/>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
其中，最后一个要点击按钮才可以实现。

四.函数（二）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        function aSunB(a, b){
     
     
            return a + b;
        }
        var ab = aSunB(12, 34);
        alert(ab);
        var cde = aSunB(1, 2, 4);
        alert(cde);
        var f = aSunB(9);
        alert(f);
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们可以看出，js在调用函数的时候，参数的类型没有限制，参数的个数也没有限制。

再来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
       function aSum(a){
     
     
           alert("有参数");
       }
       function aSum(){
     
     
           alert("无参数");
       }
       aSum(3);
    </script>
</body>
</html>

在这里插入图片描述
从结果中，我们得出一个结论，js中的同名函数，后面一个会覆盖前一个。

五.全局变量和局部变量

全局变量：全局变量是在函数体外声明的变量，声明周期是，在浏览器打开的时候声明，在浏览器关闭的时候销毁，因为一直在浏览器的内存中，所以会占用较大的内存，建议少用。

局部变量：在函数体内声明的变量，包括函数的形参，函数开始的时候变量声明开辟内存空间，函数结束之后销毁。

注意：当一个变量的声明没有用var关键字声明的时候，该变量都是局部变量。

六.js的数据类型

js虽然在声明变量的时候不用指定数据类型，但是在给变量赋值的时候，每一个数据还是有数据类型的。
基本数据类型：Undefined,Number,String,Boolean,Null
引用数据类型：Object以及Object的子集
在ES6(ECMAScript)规范以后，又有一种新的数据类型Symble。

数据类型的判断： typeof 变量
判断结果为：“undefined”,“number”,“string”,“boolean”,“object”,“function”。(注意是小写字符串)

判断两种数据类型是否相等，用 == 号。

Undefined

Undefined类型只有一个值,就是undefined。当一个变量没有手动赋值的时候，这个变量默认的值为undefined。
一个实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        var x;
        y = undefined;
        alert(x == y);//true

        z = "undefine";
        alert(x == z);//false

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

Number

Number类型的值：整数（1, 2，3，…），小数(1.1, 2.33, 4.55,…)，正数(1, 2, 3…)，负数(-1, -2, -3…)，不是数字(NaN)，无穷大(Infinity)。

提供如下的测试程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        var s1 = 1;
        var s2 = 1.2;
        var s3 = 3;
        var s4 = -4;
        var s5 = NaN;
        var s6 = Infinity;
        alert(typeof s1);
        alert(typeof s2);
        alert(typeof s3);
        alert(typeof s4);
        alert(typeof s5);
        alert(typeof s6);
    </script>
</body>
</html>

对于NaN：Not a Number,表示不是一个数字，但是Number类型的，那么什么时候是NaN呢？
表示运算的结果本来是一个数字，但结果却不是一个数字。

测试程序如下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        var s1 = 12;
        var s2 = "Hello";
        alert(s1 / s2);//运算符/的结果本应该是数字
    </script>
</body>
</html>

补充：
函数 isNaN（数据）：结果为true表示不是一个数字，结果为false表示是一个数字。
函数 parseInt (数据）：可以将字符串自动转换成数字，并且结果为整数。
函数 parseFloat (数据）：可以将字符串自动转换成数字。
函数Math.ceil(数据)：向上取整。

Boolean

布尔类型的值只有两个:true 和 false
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        var s = "";
        if(s){
     
        //它会自动转换成if(Boolean(s)){...}
            alert("welcome" + s)
        }
        else{
     
     
            alert("用户名不能为空")
        }
    </script>
</body>
</html>

各种数据的测试程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        alert(Boolean(1));//true
        alert(Boolean(0));//false
        alert(Boolean(""));//false
        alert(Boolean("abc"));//true
        alert(Boolean(null));//false
        alert(Boolean(NaN));//false
        alert(Boolean(undefined));//false
        alert(Boolean(Infinity));//true
    </script>
</body>
</html>

String

创建字符对象：
方式一：var s = "abc";
方式二：var s2 = new String("abc");
注意：String 是一个内置的类，它的父类是Object。

测试程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
    	//小String，属于String类型
        var s1 = "Hello World";
        alert(typeof s1);//string
        //大String，属于Object类型
        var s2 = new String("Hello World");
        alert(typeof s2);//object
    </script>
</body>
</html>

属性：

constructer 
length  
prototype

方法：

indefOf()//获得指定字符串在当前串出现的第一个索引
lastIndefOf()//获得指定字符串在当前串出现的最后一个索引
replace()//替换
substr()//截取子字符串
substring()//截取子字符串
toLowerCase()//转换大写
toUpperCase()//传换小写
split()//拆分字符串

substr(startIndex, length)//截取子字符串

substring(startIndex, lastIndex)//截取子字符串

Object

Object类型是所有类型的超类，自定义的任何类型，默认继承Object。

属性：

prototype	//给类动态的扩展属性和函数
constructer

方法：

toLocaleString();
toString();
valueOf();

在Js当中自定义的类默认继承Object，会继承Object类中所有的属性和方法。

定义类的语法：

第一种方式：
function 类名（形参）{

}
第二种方式：
类名 = function（形参）{

}

创建对象：
new 构造方法名（实参）{

}
//构造方法名和类名相同。

在Js当中类的定义，同时又是一个构造函数的定义，类的定义和构造函数的定义在js当中是放在一起完成的。

对象的两种访问方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        function User(sId, sName, sAge){
     
     
            this.sId = sId;
            this.sName = sName;
            this.sAge = sAge;
            this.getSid = function(){
     
     
                return sId;
            }
        }
        var s = new User(1111, "张三", 21)
        alert(s.sId + s.sName + s.sAge);         //第一种访问方式
        alert(s["sId"] + s["sName"] + s["sAge"]);//第二种访问方式
        alert(s.getSid());//访问函数
    </script>
</body>
</html>

可以通过prototype这个属性来动态地扩展属性和函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type = "text/javascript">
        function User(sId, sName, sAge){
     
     
            this.sId = sId;
            this.sName = sName;
            this.sAge = sAge;
            this.getSid = function(){
     
     
                return sId;
            }
        }
        var s = new User(1111, "张三", 21)
        alert(s.sId + s.sName + s.sAge);
        alert(s["sId"] + s["sName"] + s["sAge"]);
        alert(s.getSid());
        User.prototype.getSAge = function(){
     
     
            return this.sAge;
        }
        alert("1" + s.getSAge());
    </script>
</body>
</html>

七. == 和 ===

==：等同运算符，只判断值是否相等

===：全等运算符，不仅值相等，而且类型也相等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        alert(typeof null);//object
        alert(typeof undefined);//undefined
        alert(typeof NaN);//number

        alert(null == undefined);//true
        alert(null == NaN);//false
        alert(undefined == NaN );//false
        
        alert(null === undefined);//false
        alert(null === NaN);//false
        alert(undefined === NaN );//false
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_45965358/article/details/113999137
今日推荐
周排行
unity 内存管理**标记 实时更新
微信返回时页面很卡或者页面跳转有问题
正则介绍以及grep
(转)editText圆角边框
模块化物料清单
js去掉数组中重复的元素
小程序Promise不支持finally解决方案
输入一颗二叉树的根节点，求二叉树的深度
POJ 2800:垂直直方图
Firefox 71 发布，具有画中画支持及更多功能
每日归档
更多
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022