JavaScript学习(2) – 基础语法知识

2130

《JavaScript高级程序设计（第三版）》学习笔记

Github笔记链接（持续更新中，欢迎star，转载请标注来源）

笔记目录：

JavaScript学习(1) – JavaScript历史回顾

JavaScript学习(2) – 基础语法知识

JavaScript学习(3)- 聊聊原型链- 1. 变量

关键词：<script/>标签的使用；JavaScript的变量、数据类型、操作符、语句

1. HTML中使用<Script>标签

1.1 <script>属性

属性名称 定义 备注
async 可选；应立即下载脚本，但不应妨碍页面中其他操作 仅对外部脚本文件有效
charset 可选；通过src属性指定的代码的字符集
defer 可选；脚本可以延迟到文档完全解析和显示之后再执行 仅对外部脚本文件有效
language 已废弃；表示编写代码使用的脚本语言
src 可选；包含要执行代码的外部文件
type 必选；表示编写代码使用的脚本语言的内容类型 常规：text/javascript；
非IE浏览器：application/javascript

1.2 <script>标签使用方法

  • 直接嵌入代码

    <script type="text/javascript">
	function foo() {
    alert('直接嵌入代码')
  }
</script>
复制代码

  • 引用外部js文件

    <script type="text/javascript" src="./example.js"></script>
复制代码

  • ES6支持引用方法：

    <script type="text/javascript" src="./example.js" />
复制代码

  • <script/>标签位置：常规：<head>中，现代浏览器：<body>中，以加快解析速度

  • 注意：

    1. 直接嵌入代码时，使用的代码不能包含</script>字符串。可通过转义字符\解决：`alert(“</script>”)
    2. 只要不存在async和defer属性，浏览器会按照

1.3 defer属性

  • 定义：脚本会被延迟到，整个页面都解析后再运行（脚本立即下载，但延迟执行）

  • 样例：

    <script type="text/javascript" src="./example.js" defer="defer"></script>
复制代码

1.4 async属性

  • 定义：不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。故建议异步脚本不要在加载期间修改DOM

  • 备注：async并不保证按指定先后顺序执行

  • 样例：

    <script type="text/javascript" src="./example.js" async></script>
复制代码

1.5. <noscript>元素

用在不支持JavaScript的浏览器中显示替代内容

<noscript>
	<p>
    本页面需浏览器支持（启用）JavaScript。
  </p>
</noscript>
复制代码

备注：浏览器支持JavaScript后，则该内容隐藏，不显示

2. 基础语法的学习

2.1 变量 – 松散类型

// var可以用于创建任何类型的变量
var message = 'hi'
var message2 = 123
复制代码

2.2 数据类型

数据类型 英文表达式 typeOf 返回结果
未定义 undefined “undefined”
布尔值 Boolean “boolean”
字符串 String “string”
数值 Number “number”
对象 Object “object”
Null Null “object”
函数 function “function”

2.2.1 undefined 类型 – 声明但未赋值的变量

var message;
alert(message); // 返回：undefined
复制代码

2.2.2 Null类型 – 空对象指针

var message = null
alert(typeof message) // 返回：object
复制代码

2.2.3 Boolean类型 – True / False

// 强制转换
var message = 123
var message2 = Boolean(message) // 返回： true

// 自动转换
if (message) { // 在控制语句中，自动驻安徽
  alert('value is true')
}
复制代码

备注： true不一定等于1，false不一定等于0

2.2.4 Number类型

// 整数
var intNum = 10 

// 八进制 - 以0开头，后面是八进制序列0~7
var octalNum = 077 

// 十六进制 - 以Ox开头，后面是十六进制数字0~9 A~F
var hexNum = 0x1f

// 浮点值
var floatNum = 1.1
var floatNum2 = 3.125e7

// NaN - not a number 非数值 - 表示本应返回数值，但未能返回的情况，以避免抛出错误
var nanNum = NaN / 10; // 返回：NaN
var nanNum2 = (NaN == NaN) // 返回： false - NaN与任何数值都不相等，包括其本身
var nanNum3 = isNaN(NaN) // 返回： true
var nanNum4 = isNaN("blue") // 返回：true - blue不可能被转换为数值
var nanNum5 = isNaN(true) // 返回：false - true可以转换为数值1， 故不是NaN

// 数值转换 - Number() - 复杂不合理
Number(true) // 1
Number(false) // 0
Number(10) // 10
Number(null) // 0
Number(undefined) //NaN
Number('blue') // NaN
Number('123') // 123
Number('1.1') // 1.1
Number('0xf') // 15
Number('') // 0

//数值转换 - parseInt() - 第一个参数为转换数据，第二个参数为解析进制基数
parseInt('1234blue') // 1234
parseInt('') // NaN
parseInt('0xA') // 10 - 十六进制：转换为对应的十进制
parseInt(22.5) // 22
parseInt("070") // 56 - 八进制：转换为对应的十进制
parseInt("70") // 70
parseInt("AF", 16) // 175 - 按十六进制解析，此时前面无需添加0x

复制代码

补充：isNaN()执行流程：

  1. 先调用valueOf()，确定其返回值是否可以转换为数值
  2. 再调用toString()，测试其返回值

2.2.5 String 类型

var name = "cindy"

// 转换为字符串 - toString() - 可传参数：进制数
var num = 10
num.toString() // “10”
num.toString(2) // “1010”
复制代码

2.2.6 Object类型

var obj = new Object()
复制代码
属性和方法 概念
constructor 保存用于创建当前对象的函数
hasOwnProperty(propertyName) 检查给定的属性在当前对象实例中是否存在
例如：obj.hasOwnProperty(“name”)
isPrototypeof(object) 检查传入的对象是否是当前对象的原型
propertyIsEnumerable(propertyName) 检查给定的属性是否能够使用for-in语句来进行枚举
toLocaleString() 返回对象的字符串表示，该字符串与执行环境的地区对应
toString() 返回对象的字符串表示
valueOf() 返回对象的字符串、数值、布尔值表示。通常与toString()返回值相同

2.3 操作符

2.3.1 一元操作符 – 只操作一个值的操作符

  // 1. 递增和递减 - 类似C语言思想
  // 1.1 前置型操作
  var age = 29
  ++age // 和 age = age + 1 效果相同
  --age // 和 age = age - 1 效果相同
  
  var anotherAge = --age + 2
  alert(age) // 28
  alert(anotherAge) // 30
  
  // 1.2 后置型操作
  var num1 = 2
  var num2 = 20
  var num3 = num1-- + num2 // 22
  var num4 = num1 + num2 // 21
  alert(num1) // 1
  
  // 1.3 适用于其他数据类型
  // 包含有效数字的字符串   - 先转换为数值变量，在执行加减操作
  // 不包含有效数字的字符串 - 变量值设置为NaN
  // false -------------- 先转为0，再执行加减1
  // true  -------------- 先转为1，再执行加减1
  // 浮点数 -------------- 直接执行加减1
  // 对象 ---------------- 先调用valueOf()方法，获得可供操作的值，再操作；若为NaN,则再调用toString()后再应用前述规则
  var s1 = "2"
  var s2 = "z"
  var b = false
  var f = 1.1
  var obj = {
    valueOf: function() {
      return -1
    }
  }
  
  s1++   // 3
  s2++   // NaN
  s3++   // 1
  f--    // 0.1
  obj--  // -2
  
  
  // 2. 一元加和减操作符
  // 2.1 一元加操作符 - 不对数值本身产生影响，但会类似Number()一样对数值执行强制类型转换
  var num = 25
  num = +num // 25
  
  // 2.2 一元减操作符 - 表示负数；对于非数值类型，先强制转换类型，再变为负数
  num = -num // -25
  
复制代码

2.3.2 位操作符 – 二进制 位计算

默认情况下，ECMAScript所有整数都是有符号整数。也存在无符号整数；

无符号整数 – 第32为不再表示符号，故可表示数值更大

// 1. NOT 按位非 ~
var num1 = 25    // 二进制 00000000000000000000000000011001
var num2 = ~num1 // 二进制 11111111111111111111111111100110

// 2. AND 按位与 &
var result = 25 & 3 // 1

// 3. OR 按位或 |
var result = 25 | 3 // 27

// 4. XOR 按位异或 ^
var result = 25 ^ 3 // 26

// 5. 左移 << （将数值所有位向左移动位数；且左移不影响符号位）
var oldValue = 2              // 二进制 0000010
var newValue = oldValue << 5  // 二进制 1000000  十进制：64

// 6. 右移 
// 6.1 有符号右移 - 保留符号位 >>
var oldValue = 64
var newValue = oldValue >> 5 // 2
// 6.2 无符号右移 - 正数无影响，负数有变化 >>>
var oldValue = -64             // 二进制 1111111111111111111111111111000000
var newValue = oldValue >>> 5  // 二进制 0000011111111111111111111111111110 十进制 134217726

复制代码

2.3.4 布尔操作符

    // 1. 逻辑非 !
    !false     // true
    !"blue"    // false
    !0         // true
    !NaN       // true
    !""        // true
    !12345     // false
    
    // 2. 逻辑与 &&
    obj && true      // true - 第一个是对象，则返回第二个操作数
    true && obj      // obj  - 第二个是对象，则在第一个为true时，返回对象
    obj1 && obj2     // obj2 - 两个都是对象，则返回第二个对象
    null && true     // null - 第一个是null，则返回null
    NaN && true      // NaN  - 第一个是NaN，则返回NaN
    udefined && true // undefined - 第一个是undefined，则返回undefined
    
    // 3. 逻辑或 ||
    obj || true          // obj - 第一个是对象，则返回第一个操作数；但第一个obj求职结果为false，则返回第二个
    obj1 || obj2         // obj1 - 两个都是对象，则返回第一个对象
    null || null         // null - 两个都是null，则返回null
    NaN || NaN           // NaN  - 两个都是NaN，则返回NaN
    udefined || udefined // undefined - 两个都是undefined，则返回undefined
复制代码

2.3.5 乘性操作符 – 乘法、除法和求模

    // 1. 乘法 - 乘积超过数值范围，则返回Infinity或-Infinity
    var result = 34 * 56
    NaN * 10            // NaN
    Infinity * 0        // NaN
    Infinity * 12       // Infinity
    Infinity * -12      // -Infinity
    Infinity * Infinity // Infinity
    
    // 2. 除法 - 商超过数值范围，则返回Infinity或-Infinity；特殊情况类似上述乘法
    var result = 66 / 11
    
    // 3. 求模 - 求余数；特殊情况类似上述乘法
    var result = 26 % 5 // 1
复制代码

2.3.6 加性操作符

    // 1. 加法
    var result = 1 + 2
    NaN + 1                    // NaN
    Infinity + Infinity        // Infinity
    (-Infinity) + (-Infinity)  // -Infinity
    Infinity + (-Infinity)     //NaN
    (+0) + (+0)                // +0
    (-0) + (-0)                // -0
    (+0) + (-0)                // +0
    
    // 2. 减法
    var result = 2 - 1
    NaN - 1                    // NaN
    Infinity - Infinity        // NaN
    (-Infinity) - (-Infinity)  // NaN
    Infinity - (-Infinity)     // Infinity
    (-Infinity) - Infinity     // -Infinity
    (+0) - (+0)                // +0
    (-0) - (+0)                // -0
    (-0) - (-0)                // +0
复制代码

2.3.7 关系操作符 – 大于、小于、小于等于、大于等于

    5 > 4                  // true
    5 < 3                  // false
    "Brick" < "alphabet"   // true - 均为字符串，比较字符编码值
    "23" < 3               // false - 一个为字符串，则将其转为数值后比较
    NaN < 3                // false
    NaN >= 3               // false
    
    // 补充：如果一个操作数是对象，则调用其valueOf()方法，如果没有valueOf()方法，则通过toString()处理后比较
复制代码

2.3.8 补充知识：相等操作符

相等不相等 – 先转换再比较

全等不全等 – 仅比较而不转换

// 1. 相等不相等 - 会产生强制转换类型
null == undefined     // true - null和undefined相等
"NaN" == NaN          // false - 只要一个为NaN，则返回false
5 == NaN              // false
NaN == NaN            // false
NaN != NaN            // true
false == 0            // true - 对false强制转型为0
true == 1             // true - 对true强制转型为1
true == 2             // false
undefined == 0        // false
null = 0              // false
"5" == 5              // true - 对"5"强制转型为数值5

// 2. 全等不全等 - 在两个操作数未经转换就像等的情况下返回true
null === undefined   // false
"55" === 55          // false
复制代码

2.3.9 补充知识：条件操作符

// ES5 常规版本：
variable = boolean_expression ? true_value : false_value

// ES6 新增内容：非空运算符：如果第一个参数不是 null/undefined，将返回第一个参数，否则返回第二个参数
null ?? 5  // 5
3 ?? 5     // 3
复制代码

2.4 语句

2.4.1 if

if (condition1) {
  // statement1
}
else if (condition2) {
  // statement2
}
else {
  // statement3
}
复制代码

2.4.2 do-while

// 先执行，再判断
do {
  // statement
} while(condition)
复制代码

2.4.3 while

// 先判断，再执行
while(condition) {
  // statement
}
复制代码

2.4.4 for

var count = 10
for (var i = 0; i < count; i++) {
  // statement
}

// 类似while
for (; i < count; i++) {
  // statement
}

// 无限循环
for (;;) { 
  // statement
}
复制代码

2.4.5 for-in

// 用于枚举对象属性
for (property in expression) { 
  // statement
}
复制代码

2.4.6 label

// 用户在代码中添加标签
label: statement

// example - start标签可同break和continue配合使用
start: for (var i = 0; i < count; i++) {
  alert(i)
}
复制代码

2.4.7 break和continue

break – 立即退出循环

Continue – 立即退出当前循环，但还会执行下一次循环

2.4.8 switch

switch(expression) {
  case value1: statement1; break
  case value2: statement2; break
  case value3: statement3; break
  default: break
}
复制代码

2.4.9 补充：with语句

// 将代码的作用域设置到特定对象中
with (expression) statement

// example - 将包含location对象的变量声明赋值放一起
with(location) {
  var qs = search.substring(1)
  var hostname = hostname
  var url = href
}
// 常规写法：
var qs = location.search.substring(1)
var hostname = location.hostname
var url = location.href
复制代码
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云