JavaScript中的数据和变量

最新推荐文章于 2022-11-28 10:31:34 发布

XUPT-前端在逃工程师

最新推荐文章于 2022-11-28 10:31:34 发布

阅读量148

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Dimuzero/article/details/109982686

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

JS中的数据和变量

JS是一种专门为与网页交互而设计的脚本语言

JavaScript作用：前端html页面的交互，可以实现效果（动画，操作效果）数据展示，数据验证，访问数据（小游戏开发 api接口访问实现（天气预报地图api ））等等

JS的组成部分：

1.核心（ECMAScript）提供核心语言功能
2.文档对象模型（DOM）提供访问和操作网页内容的方法和接口
3.浏览器对象模型（BOM）提供与阅览器交互的方法和接口

1. 如何在html中使用JS

1.1 嵌套在html中

a. 嵌入到head中

<html>
    <head>
        <title>Demo</title>
        <script>
        
        /*js代码段*/
        
        </script>
    </head>
    <body>
         
    </body>
</html>

b. 嵌入到body中

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <script>
            
            /*js代码段*/
            
        </script>
    </body>
</html>

1.2 引入外部文件

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        
        /*src是引用JS文件的路径*/
        
        <script src="js.js" type="text/javascript" async="async"></script>
    </head>
    <body>
    
    </body>
</html>

1.3 noscript的出现

会在页面不支持或者已经禁用脚本的情况下告诉用户页面未能达到预期效果的原因。

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script src="demo6.js" type="text/javascript" async="async"></script>
    </head>
    <body>
        <noscript>
            <p>需要开启脚本支持</p> // 其他的提示性语言
        </noscript>
    </body>
</html>

2. JS中的数据类型

在这里插入图片描述

3.如何声明变量

3.1 变量与常量

Javascipt中声明变量的关键字是var

变量	可变的量，可写可读
常量	不可变的量，只读

3.2 变量的命名（不区别数据类型，但是严格区分大小写关键字）

变量的命名：
驼峰命名： UserName
帕斯卡命名： userName
带符号 _ user_name

3.3 变量的作用域

局部变量	作用于当前的代码块区域，定义的局部变量不会出现在window
全局变量	整个作用域，定义的全局变量默认属域window

var name = "张三";  //全局变量
        function method() {
            var sex = "男"; //局部变量
            console.log(name, sex);
        }
        console.log(window);

当我们执行上面这段代码会在console控制器中出现如下结果。
在这里插入图片描述

而window中只能查找到**name = "张三"这个全局变量，而sex = “男”**作为局部变量无法查找到
在这里插入图片描述
我们加入method2，通过执行method2函数来加深理解。

var name = "张三";  //全局变量
        function method() {
            var sex = "男"; //局部变量
            console.log(name, sex);
        }
        console.log(window);
        method();
        function method2() {
            console.log(name, sex);
        }
        method2();

sex = “男” 作为局部变量只会在method函数中起作用，如果在method2函数中调用会报错（sex没有定义）
在这里插入图片描述

3.4 如何检测数据类型

typeOf	检测数据类型
instanceof	判断数据类型（值类型无法判断，只能判断引用类型）

3.4.1 typeOf

	var a = 1; //number
    var b = "abc"; //string
    var c = true; //boolean
    var d = null;  //object
    var e = {};   //object
    var f = undefined; //undefined
    var g = function () {
    }; //function
    var h = []; //object

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);
    console.log(typeof f);
    console.log(typeof g);
    console.log(typeof h);

在console控制器中输出如下：
在这里插入图片描述

3.4.2 instanceof

	var a = 1; //number
    var b = "abc"; //string
    var c = true; //boolean
    var d = null;  //object
    var e = {};   //object
    var f = undefined; //undefined
    var g = function () {
    }; //function
    var h = []; //object
	console.log(g instanceof Function);
	console.log(h instanceof Array);

在console控制器中输出如下：
在这里插入图片描述

3.5 变量的声明提前

里层变量可以使用外层变量，但是外层变量无法使用里层变量
（打个比方：你可以问你的爷爷爸爸要钱，但是你爷爷爸爸不能问你要钱）

x = 1;
        console.log(x);
        var y = function () {
            console.log(x);
            var x = 2;
            console.log(x);
        }
        y();

在这里插入图片描述
上述代码可以写成如下代码

x = 1;
        console.log(x);
        var y = function () {
        	var x;
            console.log(x);
            x = 2;
            console.log(x);
        }
        y();

js编译器在执行这个y函数的时候，会把把它y函数里面的声明变量提前到最前面进行声明，此时x作为y函数局部变量并未定义，所以 x=undefined 。

如果我们把 var x = 2； 删除。

x = 1;
        console.log(x);
        var y = function () {
            console.log(x);
            console.log(x);
        }
        y();

变量x在内部它没有进行var声明，它会一直沿着作用域向上找，此时的x 就为全局变量。
在这里插入图片描述

再来看下面这个例题：

下面的代码输出 a=10

var a = 1;
        function b() {
            a = 10;
            return;
        }
        b();
        console.log(a);

下面的代码输出 a=1

var a = 1;
        function b() {
            a = 10;
            return;
            function a() { }
        }
        b();
        console.log(a);

function a() { }相当于 var a = function(){}。

var a = 1;
        function b() {
            var a;
            a = 10;
            return;
            var a = function () { };
        }
        b();
        console.log(a);

var a;是在function b()中的局部变量；而全局变量var a = 1；不受影响所以输出的是1。

XUPT-前端在逃工程师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
JavaScript中的数据和变量

JS中的数据和变量JS是一种专门为与网页交互而设计的脚本语言JS的组成部分：1.核心（ECMAScript）提供核心语言功能2.文档对象模型（DOM）提供访问和操作网页内容的方法和接口3.浏览器对象模型（BOM）提供与阅览器交互的方法和接口1. 如何在html中使用JS1.1 嵌套在html中a. 嵌入到head中<html> <head> <title>Demo</title> <script
复制链接

扫一扫