内容回顾
一. 数据类型
1.1. Number
-
number 类型代表整数和浮点数。
var age = 18 var height = 1.88
-
数字****number可以有很多操作,比如,乘法 、除法 **/、加法* +****、减法 - 等等。
var num = 1 * 2 var num1 = 10 / 5
-
除了常规的数字,还包括所谓的“特殊数值(“special numeric values”)”也属于Number类型(了解)
-
Infinity:代表数学概念中的 无穷大 ∞,也可以表示-Infinity;
-
比如 1/0 得到的就是无穷大;
-
NaN:NaN 代表一个计算错误,它是一个错误的操作所得到的结果;
-
比如 字符串和一个数字相乘;
-
-
在之前我们学习过进制的概念,数字类型也有其他的进制表示方法:
- 十进制(掌握)、十六进制、二进制、八进制(了解)
-
◼ 数字表示的范围:
-
最小正数值:Number.MIN_VALUE,这个值为: 5e-324,小于这个的数字会被转化为0
-
最大正数值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
-
-
isNaN
- 用于判断是否不是一个数字。不是数字返回true,是数字返回false。
1.2. String
- 在开发中我们经常会有一些文本需要表示,这个时候我们会使用字符串String:
- 比如人的姓名:coderwhy。地址:广州市。简介:认真是一种可怕的力量;
- JavaScript 中的字符串必须被括在引号里,有三种包含字符串的方式。
- 双引号:“Hello”
- 单引号:'Hello’
- 反引号:
Hello
(ES6之后学习)
var name = "coderwhy"
var address = "广州市"
var descripttion = "了解真相你才能获得真正的自由"
- 前后的引号类型必须一致:
- 如果在字符串里面本身包括单引号,可以使用双引号;
- 如果在字符串里面本身包括单引号,可以使用双引号;
var message = "我是 'coderwhy'"
- 转义字符串开发中只有特殊场景才会用到,暂时****掌握 \’\” \t \n四个的用法即可
- ◼ 字符串还有很多细节和操作方法,在后续学习了面向对象后,我们再详细学习
- 这里我们先掌握几个基本的字符串使用操作:
- 操作一:字符串拼接,通过+运算符(后续还会详细讲解)*
var str1 = "孙悟空"
var str2 = "猪八戒"
var newStr = str1 + str2
- 操作二**:获取字符串长度**
conlose.log(newStr.length)
1.3. Boolean
-
◼ Boolean(布尔)类型用于表示真假:
- 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人;
- 比如开发中,我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等;
-
**布尔(英语:**Boolean)是计算机科学中的逻辑数据类型,以发明布尔代数的数学家乔治·布尔为名。
-
Boolean 类型仅包含两个值:true 和 false。
1.4. Undefined
- Undefined 类型****只有一个值,就是特殊值 undefined**。**
- 如果我们声明一个变量,但是没有对其进行初始化时,它默认就是undefined;
var message
console.log(message) // undefined
console.log(message === undefined) // true
-
下面的代码是一样的
-
这里有两个注意事项:
-
注意一:最好在变量定义的时候进行初始化,而不只是声明一个变量;
-
注意二:不要显示的将一个变量赋值为undefined
- 如果变量刚开始什么都没有,我们可以初始化为0、空字符串、null等值;
-
1.6. Object类型
-
Object 类型是一个特殊的类型,我们通常把它称为引用类型或者复杂类型;
-
其他的数据类型我们通常称之为 “原始类型”,因为它们的值质保函一个单独的内容(字符串、数字或者其他);
-
Object往往可以表示一组数据,是其他数据的一个集合;
-
在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象;
-
-
Object是对象的意思,后续我们会专门讲解面向对象的概念等;
-
Object相关的内容我们会在后续详细讲解。
var book = {
name: "JavaScript高级程序设置",
price: 98
}
1.7. Null类型
- Null 类型同样只有一个值,即特殊值 null。
- null类型通常用来表示一个对象为空,所以通常我们在给一个对象进行初始化时,会赋值为null;
-
null和undefined的关系:
-
undefined通常只有在一个变量声明但是未初始化时,它的默认值是undefined才会用到;
-
并且我们不推荐直接给一个变量赋值为undefined,所以很少主动来使用;
-
null值非常常用,当一个变量准备保存一个对象,但是这个对象不确定时,我们可以先赋值为null;
-
// 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
-
**JavaScript 中有八种基本的数据类型(前七种为基本数据类型,也称为原始类型,而 object 为****复杂数据类型,也称为引用类型)。
-
number 用于任何类型的数字:整数或浮点数。
-
string 用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。
-
boolean 用于 true 和 false。
-
undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
-
object 用于更复杂的数据结构。
-
null 用于未知的值 —— 只有一个 null 值的独立类型。
-
-
后续学习的类型:
-
symbol 用于唯一的标识符。
-
bigint 用于任意长度的整数
-
1.8. String类型转换
其他类型经常需要转换成字符串类型,比如和字符串拼接在一起或者使用字符串中的方法。
-
转换方式一:隐式转换
-
一个字符串和另一个字符串进行+操作;
- 如果+运算符左右两边有一个是字符串,那么另一边会自动转换成字符串类型进行拼接;
-
某些函数的执行也会自动将参数转为字符串类型;
- 比如console.log函数;
-
-
转换方式二:显式转换
-
调用String()函数;
-
调用toString()方法(后续面向对象再学习);
-
方法和函数的区别,我们后续在讲解面向对象时会讲到
-
1.9. Number类型转换
-
其他类型也可能会转成数字类型。
-
转换方式一:隐式转换
-
在算数运算中,通常会将其他类型转换成数字类型来进行运算;
-
比如 “6” / “2”;
-
但是如果是+运算,并且其中一边有字符串,那么还是按照字符串来连接的;
-
-
-
转换方式二:显式转换
- 我们也可以使用Number()函数来进行显式的转换;
-
其他类型转换数字的规则:
- undefined转换为Na
- null转换为0
- true和false转换为 1 和 0
- string转换为
- 去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空,则转换结果为 0。否则,将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。
1.10. Boolean类型转换
-
布尔(boolean)类型转换是最简单的。
-
它发生在逻辑运算中,但是也可以通过调用 Boolean(value) 显式地进行转换。
-
转换规则如下:
-
直观上为“空”的值(如 0、空字符串、null、undefined 和 NaN)将变为 false。
-
其他值变成 true。
-
-
注意:包含 0 的字符串 “0” 是 true
- 一些编程语言(比如 PHP)视 “0” 为 false。但在 JavaScript 中,非空的字符串总是 true。
二. 常见运算符
2.1. 运算符/运算元
在小学的时候我们就学习了各种运算符,比如****加号 +、乘号 *、减号 - 、除号/
-
几乎所有的编程语言都有各种各样的运算符(也被称之为操作符,operators)
-
初次接触这些运算符, 你会感觉种类繁多, 难以记忆.
-
但是并不需要特别担心, 因为很多的运算符我们在以后的开发中, 每天都会使用;
-
多练习, 不需要刻意去记忆;
-
而且常见的高级语言运算符都是相似的,学了JavaScript运算符很容易掌握C/C++/OC/Python等语言的运算符;
-
-
计算机最基本的操作就是****执行运算,执行运算时就需要使用运算符来操作:
-
比如 console.log(20 + 30);
+
号就是一个运算符. -
比如 console.log(20 * 30);
*
号也是一个运算符.
-
-
JavaScript按照使用场景的不同将运算符分成了很多种类型:
- 算术运算符/赋值运算符/关系(比较)运算符/逻辑运算符
-
在正式开始运算之前,我们先学习一下常见的术语:
-
运算元 —— 运算符应用的对象。
-
比如说乘法运算 5 * 2,有两个运算元;
-
左运算元 5 和右运算元 2;
-
有时候人们也称其为“参数”;
-
如果一个运算符对应的只有一个运算元,那么它是 一元运算符。
-
比如说一元负号运算符(unary negation)-,它的作用是对数字进行正负转换;
-
如果一个运算符拥有两个运算元,那么它是 二元运算符。
- 比如 2 + 3
-
◼ 一元运算符通常我们是使用 – 和 +,-号使用的会较多一些;
2.2. 算术运算符
- 算术运算符
-
算术运算符用在数学表达式中, 它的使用方式和数学中也是一直的;
-
算术运算符是对数据进行计算的符号;
-
+加法 2 + 3 = 5
-
+连接字符串 ‘中’ + ‘国’ = 中国
-
-减法 2 - 3 = -1
-
*乘法 2 * 3 = 6
-
/除法 5 / 2 = 2.5
-
%取余数 5 / 2 % 1
-
取余运算符是 %,尽管它看起来很像百分数,但实际并无关联
-
a % b 的结果是 a 整除 b 的 余数
-
console.log(10 % 3) // 1
-
**幂(es7) 2 * * 3 = 8
-
求幂运算 a * b 将 a 提升至 a 的 b 次幂。(ES7中的语法,也叫做ES2016)*
- 在数学中我们将其表示为 a的b次方。
-
console.log(2 ** 3) // 8 console.log(2 ** 4) // 16
-
2.3. 赋值运算符
- 前面我们使用的 = 其实也是一个运算符**,被称之为** 赋值( assignments )运算符**。**
- = 是一个运算符,而不是一个有着“魔法”作用的语言结构。
- 语句 x = value 将值 value 写入 x 然后返回 x。
- 链式赋值(Chaining assignments)
let a, b, c
a = b = c = 2 + 2
console.log(a, b, c ) // 4
-
链式赋值从右到左进行计算;
-
首先,对最右边的表达式 2 + 2 求值,然后将其赋给左边的变量:c、b 和 a。
-
最后,所有的变量共享一个值。
- **但是从代码的可读性的角度来说,**不推荐这种写法
-
什么是原地修改呢?
- 我们经常需要对一个变量做运算,并将新的结果存储在同一个变量中。
-
可以使用运算符 += 和 *= 来缩写这种表示。
运算符 运算规则 范例 结果
= 赋值 a = 5 5
+= 加后赋值 a = 5, a += 2 7
-= 减后赋值 a = 5, a -= 2 3
*= 乘后赋值 a = 5; a *= 2 10
/= 除后赋值 a = 5; a /= 2 2.5
%= 取模 (余数)后赋值 a = 5; a %= 2 1
**= 幂后赋值 a = 5; a **= 2 25
- 所有算术和位运算符都有简短的“修改并赋值”运算符:/= 和 -= 等。
2.4. 自增/自减
-
对一个数进行加一、减一是最常见的数学运算符之一。
-
所以,对此有一些专门的运算符:
-
自增 ++ 将变量加1;
-
自减 – 将变量减1;
-
-
自增/自减只能应用于变量。
- 将其应用于数值(比如 5++)则会报错。
++和–的位置
-
运算符 ++ 和 – 可以置于变量前,也可以置于变量后。
-
当运算符置于变量后,被称为“后置形式”(postfix form):counter++。
-
当运算符置于变量前,被称为“前置形式”(prefix form):++counter。
-
两者都做同一件事:将变量 counter 与 1 相加。
-
-
他们有什么区别吗?
- 有,但只有当我们使用 ++/-- 的返回值时才能看到区别;
-
如果自增/自减的值不会被使用,那么两者形式没有区别;
-
如果我们想要对变量进行自增操作,并且 需要立刻使用自增后的值,那么我们需要使用前置形式;
-
前置形式返回一个新的值,但后置返回原来的值;
-
优先级
-
运算符放到一起使用时会有一定的优先级:
-
在MDN上给出了所有运算符的优先级(不用去记)
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
2.5. 比较运算符
- 我们知道,在数学中有很多用于比较大小的运算符,在JavaScript中也有相似的比较:
-
大于 / 小于:a > b,a < b。
-
大于等于 / 小于等于:a >= b,a <= b。
-
检查两个值的相等:a == b,请注意双等号 == 表示相等性检查,而单等号 a = b 表示赋值。
-
检查两个值不相等:不相等在数学中的符号是 ≠,但在 JavaScript 中写成 a != b。
◼ 比较运算符的结果都是Boolean类型的
运算符 运算规则 范例 结果
== 相等 4 == 3 false
!= 不等于 4 != 3 true
> 小于 4 > 3 true
< 大于 4 < 3 false
>= 小于等于 4 <=3 false
<= 大于等于 4 >= 3 true
和=的区别
-
==: 在类型不相同的情况, 会对运算元进行隐式的转换
- 大部分情况下, 都是转成数字类型 toNumber()
- 对象类型相对比较特殊, 一般返回false
- https://262.ecma-international.org/5.1/#sec-11.9.3
-
===: 先比较类型, 类型不一致, 直接返回false
-
严格相等
-
普通的相等性检查 == 存在一个问题,它不能区分出 0 和 false,或者空字符串和 false这类运算:
-
这是因为在比较不同类型的值时,处于判断符号 == 两侧的值会先被转化为数字;
-
空字符串和 false 也是如此,转化后它们都为数字 0;
-
-
如果我们需要区分 0 和 false,该怎么办?
-
严格相等运算符 === 在进行比较时不会做任何的类型转换;
-
换句话说,如果 a 和 b 属于不同的数据类型,那么 a === b 不会做任何的类型转换而立刻返回 false;
-
-
同样的,“不相等”符号 != 类似,“严格不相等”表示为 !==。
-
**严格相等的运算符虽然写起来稍微长一些,但是它能够很清楚地显示代码意图,降低你犯错的可能性
-
三. 分支语句
3.1. 程序的执行顺序和代码块
-
在程序开发中,程序有三种不同的执行方式:
-
顺序 —— 从上向下,顺序执行代码
-
分支 —— 根据条件判断,决定执行代码的 分支
- 循环 —— 让 特定代码 重复 执行
-
-
**代码块是多行执行代码的集合,通过一个花括号{}**放到了一起。
- 在开发中,一行代码很难完成某一个特定的功能,我们就会将这些代码放到一个代码块中
-
在JavaScript中,我们可以通过流程控制语句来决定如何执行一个代码块:
-
通常会通过一些关键字来告知js引擎代码要如何被执行;
-
比如分支语句、循环语句对应的关键字等;
-
// 一个代码块
{
var num1 = 10
var num2 = 20
var result = num1 + num2
}
// 一个对象
var info = {
name: "why",
age: 18
}
3.2. 分支语句理解和if语句
-
程序是生活的一种抽象, 只是我们用代码表示了出来
-
在开发中, 我们经常需要根据一定的条件, 来决定代码的执行方向
-
如果 条件满足,才能做某件事情
-
如果 条件不满足,就做另外一件事情
-
-
分支结构
-
分支结构的代码就是让我们根据条件来决定代码的执行
-
分支结构的语句被称为判断结构或者选择结构.
-
几乎所有的编程语言都有分支结构(C、C++、OC、JavaScript等等)
-
-
JavaScript中常见的分支结构有:
-
if分支结构
-
switch分支结构
-
-
if语句的使用
-
// 案例一: 如果小明考试超过90分, 就可以去游乐场 // 1.定义一个变量来保存小明的分数 var score = 99 // 2.如果分数超过90分, 去游乐场 if (score > 90) { console.log("去游乐场玩~") } // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元 // 1.定义一些变量保存数据 var price = 5 var weight = 7 var totalPrice = price * weight // 2.根据购买的重量, 决定是否 -8 if (weight > 5) { totalPrice -= 8 } console.log("总价格:", totalPrice) // 案例三: 播放列表中 currentIndex // ["鼓楼", "理想", "阿刁"] var currentIndex = 2 // 对currentIndex++完操作之后 currentIndex++ if (currentIndex === 3) { currentIndex = 0 }
-
补充:
-
如果只有一行代码, {}可以省略
-
if (条件判断)的隐式转换;
-
// 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略 // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元 // 定义一些变量保存数据 var price = 5 var weight = 7 var totalPrice = price * weight // 2.根据购买的重量, 决定是否 -8 if (weight > 5) totalPrice -= 8 console.log("总价格:", totalPrice) // 补充二: if (条件判断) var num = 123 // true if (num) { console.log("num判断的代码执行") }
-
currentIndex++
if (currentIndex === 3) {
currentIndex = 0
}
* 补充:
* 如果只有一行代码, {}可以省略
* if (条件判断)的隐式转换;
* ```js
// 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略
// 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
// 定义一些变量保存数据
var price = 5
var weight = 7
var totalPrice = price * weight
// 2.根据购买的重量, 决定是否 -8
if (weight > 5) totalPrice -= 8
console.log("总价格:", totalPrice)
// 补充二: if (条件判断)
var num = 123 // true
if (num) {
console.log("num判断的代码执行")
}
```