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

文章	分类	评论
201	3	34

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>

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

什么是作用域链以及作用域链在javascript中的作用是什么？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]

Hary

哈喽，你的SSL好像过期喽

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

程序员鸡皮

站点介绍