JS-数据类型与流程控制

JavaScript入门

JavaScript是解释性的弱类型编程语言

解释性: 逐行解释, 逐行执行
弱类型: 不区分变量的数据类型

JS的组成

一般认为浏览器中JavaScript由三部分组成

ECMAScript: 基础语法
由ECMA（原欧洲计算机制造商协会）进行标准化的一门编程语言, 主要规定了像变量, 数据类型, 流程控制, 函数等基础语法
DOM: 文档对象模型
由W3C组织制定的标准, 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色、事件等）
BOM: 浏览器对象模型
由各个浏览器厂商根据DOM在各自浏览器上的实现, 不同的浏览器会略有差异, 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

JS的书写位置

跟CSS一样, JS也有3种书写方式

外部: 将JS文件单独保存, 再通过<script src="xxx.js">引入
<script src="my.js"></script>
内嵌: 在HTML文件中, 将JS代码写在<script>标签中
行内: 现在几乎不用

变量

var a = 10

规则:

标识符: 由字母(A-Z, a-z)、数字(0-9)、下划线()、美元符号( $ )组成，如：usrAge, num01, name
变量名严格区分大小写, 如 app和App是两个不同的变量
不能以数字开头
不能是关键字或者保留字

推荐使用驼峰法 (首字母小写，后面单词的首字母需要大写)

如: myFirstName

<!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 age = 18
      console.log(age)
      age = 81
      console.log(age)

      // 使用let声明变量
      // 1. 不能重复声明
      // 2. 声明前不能引用
      // 3. 可以修改变量值
      // 4. 全局声明不会成为全局对象的属性
      let uname = 'xiaoming'
      uname = 'xiaomei'

      // 使用const声明常量
      // 1. 不能重复声明
      // 2. 不能直接修改常量值
      const str = 'hello'
      str = 'world'
    </script>
  </body>
</html>

作用域对比:

// 函数作用域 var
function example() {
  console.log(a); // undefined（变量提升，但未初始化）
  var a = 1;
  if (true) {
    var b = 2;
  }
  console.log(b); // 2（可以在函数内的任何地方访问）
}

// 块作用域 let c
function example() {
  if (true) {
    const a = 1;
  }
  // console.log(a); // ReferenceError: a is not defined（const a在块作用域内，外部无法访问）
  
  for (let i = 0; i < 3; i++) {
    // 使用i
  }
  // console.log(i); // ReferenceError: i is not defined（let i在for循环的块作用域内，外部无法访问）
}

数据类型

简单数据类型(值类型)

简单数据类型	说明	默认值
Number	数字型, 包含整型和小数型, 如21, 0.2333	0
String	字符型, 如'张三', 字符串带引号	''(空字符)
Boolean	布尔型, 如true, false; 等价于1和0	false
Undefined	未定义, 通过var声明但是未赋值就是undefined	undefined
Null	空	null

数字型

var num = 10 // num 数字型
var PI = 3.14 // PI 数字型
var num3 = 0xFF // 16进制数

console.log(Number.MAX_VALUE) // 数字型的最大值
console.log(Number.MIN_VALUE) // 数字型的最小值
console.log(Number.MAX_VALUE * 2) // Infinity 无穷大
console.log(-Number.MAX_VALUE * 2) // -Infinity 无穷大

console.log('小小胖' - 100) // NaN 非数

字符型

单引号, 双引号都可以, 推荐使用单引号, HTML中一般使用双引号

var str = '我是一个"程序员"'
console.log(str)
var str1 = "我是一个'程序员'"
console.log(str1)
var str = '10' + '20'
console.log(str) // 1020
console.log(typeof str) // string
// 这里的typeof是一个关键字. 当作运算符使用, 整体表达式有返回值
// typeof()是当作函数使用

// 模板字符串
let abc = 'Hello'
str = `${abc} world` // Hello world

转义符	解释说明
`\n`	换行符，n 是 newline 的意思
`\\`	斜杠 \
`\'`	' 单引号
`\"`	” 双引号
`\t`	tab 缩进
`\b`	空格，b 是 blank 的意思

布尔型

true 表示真
false 表示假

引用数据类型

Object: 对象

数据类型转换

显式转换

最常见的是字符型转数值型

var num1 = prompt('请您输入第一个值：')
var num2 = prompt('请您输入第二个值：')
var result = parseInt(num1) + parseInt(num2)
alert('您的结果是:' + result)

隐式转换

+的隐式转换

// 只要+号的一边是字符, 最终的结果就是字符
console.log('123' + '456') // '123456'
console.log('123' + 456) // '123456'
console.log('123' + true) // '123true'

// 特殊
undefined + 1 // NaN

==的隐式转换

字符型转换成数字型
布尔型转换成数字型

'1' == 1 // true
true == 1 // true
'0' == false // true

// 特殊的
NaN != NaN // true
undefined == null // true

关于Boolean类型的转换

空字符串(''), NaN, 0, null, undefined => false

其余的全部 => true

<!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. +: 只要有一个数据是字符型, 那么其他的操作数据都会被隐式转换为字符
      console.log('123' + true) // 123true
      // 2. *1 -0: 将数字类型的字符串, 转换为纯数字
      console.log('100' * 1, '200' - 0)
      // 3. 比较 ==
      //  字符型 => 数字
      //  布尔型 => 数字
      console.log('1' == true) // true
      // 4. 转布尔型
      console.log(!!111) // 111 => true
      console.log(!!0) // 0 => false
    </script>
  </body>
</html>

运算符

算数运算符
0.1 + 0.2 == 0.30000000000000004
自增自减运算符
++x; x++
比较运算符

运算符	说明	案例	返回值
<	小于	1 < 2	true
>	大于	1 > 2	false
<=	小于等于	1 <= 2	true
`>=`	大于等于	1 >= 2	false
==	等于(会隐式转换)	'1' == true	true
!=(!==)	不等于	NaN != NaN	true
===	全等, 判断类型和值	'1' === true	false

逻辑运算符

(短路运算: 当有多个表达式做逻辑运算时, 第一个表达式值可以确定结果时,就不再继续运算后边的表达式的值)

运算符	说明	案例	返回值
&&	逻辑与 and	2>1 && 2 >3	false
\|\|	逻辑或 or	2>1 \|\| 2>3	true
!	逻辑非 not	!true	false

赋值运算符

运算符	说明	案例
=	赋值	var a = 100
+=, -=	加, 减一个数后再赋值	var age = 10; age += 5
*=, /= ,%=	乘, 除, 取模后再赋值	var a = 5; age *= 2

三元运算符
条件表达式 ? 表达式1 : 表达式2
- 条件为真, 返回表达式1的结果
- 条件为假, 返回表达式2的结果
运算符的优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ -- !
3	算数运算符	先 * / % 后 + -
4	关系运算符	>``>=``<``<=
5	逻辑运算符	先 && 后 \|\|
6	赋值运算符	=

流程控制

条件

if (条件表达式) {
    // 条件成立执行的代码语句
}

if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

switch

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

循环

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

while

while (条件表达式) {
  // 当...条件满足时, 一直执行循环体
  // 循环体代码 
}

continue; break

posted @ 2024-10-24 23:13 Khru 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

khrushchefox