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

阿申申Cindy
472 阅读8分钟

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

关键词：<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"
NullNull"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

笔记目录：

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

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

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

JavaScript学习(3)- 聊聊原型链- 2. 对象与原型

JavaScript学习(3)- 聊聊原型链- 3. 原型链与继承

JavaScript学习(4)- 聊聊闭包那些事

Github:

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

avatar
文章
阅读
粉丝