请输入关键字进行搜索...

程序员鸡皮

文章 分类 评论
61 3 9
联系我
the theme is by @冷文学习者

站点介绍

一名PHP全栈程序员的日常......

重学Javascript基础（二）变量和常见数据结构

abzzp 2024-09-21 355 0条评论 前端 JavaScript

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......

发布于2024-07-04

JavaScript变量的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 定义一个变量
        // 第一步：变量的声明（高级js引擎接下来我要定义一个变量）
        // var关键字
        // 第二步：变量的赋值（使用=赋值即可）
        // var currentTime = "18:00"

        // 其他的写法一：
        // var currentTime;
        // currentTime = "16:02";
        // currentTime = "17:00";

        // 其他的写法二：同时声明多个变量（不推荐，阅读性比较差）
        // var name,age,height
        // name = "why"
        // age = 18
        // height = 1.88
        var name = "why",age = 18,height = 1.88

        // 补充：
        // 1.当我们打印变量时，实际上是在打印变量中保存的值
        // 2.console.log(参数1，参数2，参数3.........)
        console.log(name,age,height);
        
    </script>
</body>
</html>

JavaScript变量的命名规则

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <script>
    // 规则: 必须遵守
    
    // 规范: 建议遵守
    // 1.多个单词, 建议使用驼峰标识(小驼峰)
    // 小驼峰(currentTime)/大驼峰(CurrentTime)
    // 2.推荐=的左右两边加上空格
    var currentTime = "16:18"
    var currentPrice = "¥100"

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

Javascript变量的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 练习一：定义变量保存个人信息
        var name = "why"
        var age = 18
        var height = 1.88
        var weight = 160
        var address = "广州市"

        // 修改变量的值（重新赋值）
        age = 19
        height = 1.90
        weight = 165
        address = "深圳市"

        // 练习二：将一个变量的值，赋值给另外一个变量
        var nickname = "coderwhy"
        var admin = nickname
        console.log(nickname,admin) // coderwhy coderwhy

        // 练习三：定义两个变量保存两个数字，对两个变量中的数字进行交换
        var num1 = 10
        var num2 = 20
        // 方法一：借助第三个变量
        console.log("交换前，num1，num2：",num1,num2);
        var temp = num1 
        num1 = num2
        num2 = temp
        console.log("交换后，num1，num2：",num1,num2)

        // 方法二：不借助于第三个变量完成交换（了解，笔试面试题）
        console.log("交换前，num1，num2：",num1,num2)
        num1 = num1 + num2
        num2 = num1 - num2
        num1 = num1 - num2
        console.log("交换后，num1，num2：",num1,num2)

        // 方法三：接受用户输入一个值，并使用一个变量来保存
        var inputInfo = prompt("请输入一个值吧！");
        console.log(inputInfo);
    </script>
</body>
</html>

JavaScript的变量的注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 注意事项：如果一个变量未声明就直接使用，那么会直接报错
        // var currentAge = age 
        // var name = "why"
        // console.log(message) 

        // 注意事项二：如果一个变量有声明，但是没有赋值操作
        var info 
        console.log(info)

        // 注意事项三：在JavaScript 中也可以不使用var在全局声明一个变量（不推荐）
        // 如果不使用var来声明一个变量，也是可以声明成功的，并且这个变量会被加入到window对象
        address = "广州市"
        console.log(address)
    </script>
</body>
</html>

JavaScript的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 一串文本组成，称之为是一个字符串
        var description = "了解真相，你才能获得真正的自由！"
        description = 123
        console.log(description)

        // 其他语言中声明一个变量如何指定类型
        // java
        // String description = "了解真相，你才能获得真正的自由！"
        // description = 123
        // swift:自动类型推导
        // var description = "了解真相，你才能获得真正的自由！"
        // description = 123
    </script>
</body>
</html>

typeof操作符的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.typeof基本演练
        var info = "why"
        // info = 18
        // info = {}
        console.log(typeof info)

        // 2.typeof的其他类型
        var age
        console.log(typeof age)

        // 3.null的操作
        var address = null
        console.log(typeof address)

        // 4.()的作用
        // ()表示的是调用函数
        // alert()

        // ()将某个表达式当作一个整体
        var result = (2+3) * 4

        console.log(typeof(info))
    </script>
</body>
</html>

数据类型-Number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 1.Number类型的基本使用
        var age = 18;
        var height = 1.88;

        // 2.特殊的数值
        // Infinity
        var num1 = Infinity
        var num2 = 1 / 0;
        console.log(num1,num2);

        // NaN:not a number(不是一个数字)
        var result = 3 * "abc"
        console.log(result)
        console.log(isNaN(result))

        // 3.进制表示
        var num3 = 100 // 十进制
        // 了解
        var num4 = 0x100 // 十六进制
        var num5 = 0o100 // 八进制
        var num6 = 0b100 // 二进制
        console.log(num4,num5,num6)

        // 5.数字可以表示的范围
        var max = Number.MAX_VALUE
        var min = Number.MIN_VALUE
        console.log(max,min)
        
    </script>
</body>
</html>

数据类型-String类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 1.String基本使用
        var name = "coderwhy"
        var address = "广州市"
        var intro = "认真是一种可怕的力量！"

        // 2.别的引号的使用
        // 单引号
        var message1 = 'Hello World'
        // 双引号
        var message2 = "Hello World"
        // 反引号(ES6新增语法)
        // ${变量/表达式}
        var message3 = `Hello World,${name},${2+3}`

        // 3.转义字符：字符串本身中包含引号
        var message4 = 'my name is "coderwhy"'
        console.log(message4)

        var message5 = 'my name \\ \'\' is "coderwhy"'
        console.log(message5)

        // 4.<字符串> 本身的方法和属性
        var message = "Hello World"
        console.log(message.length)

        // 字符串操作
        var nickname = "coderwhy"
        var info = "my name is"
        var infoStr = `my name is ${nickname}` // 推荐（babel）
        var infoStr2 = info + nickname
        console.log(infoStr,infoStr2)

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

数据类型-Boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 1.Boolean基本使用
        var isLogin = false
        var isAdmin = true
    </script>
</body>
</html>

数据类型-Undefind类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script> 
        var message
        var info = undefined // 不推荐
        console.log(message,info)
    </script>
</body>
</html>

数据类型-Object和Null类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 1.Object类型的基本使用
        // var name = "why"
        // var age = 18
        // var height = 1.88

        var person = {
            name:"why",
            age:18,
            height:1.88
        }
        console.log(person)

        // 2.对象类型中某一个属性
        console.log(person.name)

        // 3.Null类型
        // 3.1 其他类型的初始化
        var age = 0
        var num = 0
        var message = "" // 空字符串
        var isAdmin = false

        // Null存在的意义就是对 对象进行初始化的，并且在转成Boolean类型时，会转成false
        var book = null
        console.log(typeof book) // object

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

数据类型转换-概念理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 什么是数据类型的转换
        // var numStr = "1234"
        // var result = numStr
        // console.log(typeof result)

        var isAdmin = true
        var result2 = 10 + isAdmin // isAdmin -> 1
        console.log(result2)
        
    </script>
</body>
</html>

数据类型转换-String类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        var num1 = 123
        var age = 18
        var isAdmin = true

        // 1.转换方式一：隐式转换（用的非常多）
        var num1Str = num1 + ""
        var ageStr = age + ""
        var isAdminStr = isAdmin + ""
        console.log(typeof num1Str,typeof ageStr,typeof isAdminStr)

        // 2.转换方式一：显示转换
        var num1Str2 = String(num1)
        console.log(typeof num1Str2)
        
    </script>
</body>
</html>

数据类型转换-Number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script> 
        // 方式一：隐式转换（用的很少）
        var num1 = "8"
        var num2 = "4"
        var result1 = num1 + num2 // 84
        console.log(typeof result1)

        var result2 = num1 * num2
        console.log(result1)
    </script>
</body>
</html>

数据类型转换-Boolean类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 方式一：隐式转换
        // 分支语句
        var isAdmin = true
        var num1 = 123

        // 方式二：显式转换
        console.log(Boolean(num1),Boolean(undefined))

        // 转换有如下的规则：
        // 直观上为空的值，转成Boolean类型都是false
        // 直观上为空的值：0/""/undefined/null/NaN -> false

        // 注意事项
        console.log(Boolean("")) // false
        console.log(Boolean("0")) // true

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

感谢大家观看，我们下次见

版权所属: abzzp
本文链接: https://xvzhu.cn/archives/45.html
协议授权: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》
下一篇 上一篇

评论(0)

最新评论

  • abzzp

    十天看一部剧，还可以吧[[呲牙]]

  • ab

    @梦不见的梦 行，谢谢提醒,我优化一下

  • 梦不见的梦

    网站的速度有待提升，每次打开都要转半天还进不来呢

  • abzzp

    @React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？[[微笑]]

  • abzzp

    @Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品[[发呆]]

  • Teacher Du

    我们大学那会，献血还给学分~

  • 夜

    @ab 我想去学网安，比如网警，但分也贼高😕

  • ab

    @夜 加油，你一样也可以成为程序员的，需要学习资料可以V我

  • 夜

    佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞 我也想去献血，过两年就成年了可以去献血了

日历

2025年01月

日一二三四五六
   1234
567891011
12131415161718
19202122232425
262728293031 

标签云

vue JavaScript React Golang 观后感 ES6 SEO 读后感

友情链接

云烟博客 白雾茫茫丶 boys博客 时光日志

文章目录

推荐关键字： vue JavaScript React Golang 观后感 ES6 SEO 读后感

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客，欢迎添加微信BmzhbjzhB咨询交流......
点击小铃铛关闭
配色方案
高贵黑
默认配色
墨蓝色
优雅白