《JavaScript语言入门教程》记录整理：入门和数据类型

2023-08-15 18:25:16

本系列基于阮一峰老师的《JavaScrip语言入门教程》或《JavaScript教程》记录整理，教程采用知识共享 署名-相同方式共享 3.0协议。这几乎是学习js最好的教程之一(去掉之一都不过分)

最好的教程而阮一峰老师又采用开源方式共享出来，之所以重新记录一遍，一是强迫自己重新认真读一遍学一遍；二是对其中知识点有个自己的记录，加深自己的理解；三是感谢这么好的教程，希望更多人阅读了解

入门篇

js介绍

  1. JavaScript 是一种轻量级的脚本语言和嵌入式（embedded）语言，其只能通过宿主环境(host,浏览器或node环境)提供I/O操作
  2. 语法角度，JS是一种"对象模型"语言。支持函数式编程、"面向对象"编程、过程式编程等
  3. js核心语法包括：基本的语法构造（比如操作符、控制结构、语句）和标准库（就是一系列具有各种功能的对象比如Array、Date、Math等）。然后就是宿主提供的API(比如浏览器提供的BOM、DOM和Web互联网相关的类；Node环境提供文件操作API、网络通信API等)
  4. JavaScript 的所有值都是对象
  5. js可以采用事件驱动(event-driven)和非阻塞式(non-blocking)设计，实现高并发、多任务处理

历史

  1. 1995年，Brendan Eich 只用了10天，完成了js的第一版，其设计借鉴了C、java、Scheme、Awk、Self、Perl、Python等多种语言，同时也留下了各种设计缺陷(导致常常需要学习各种解决问题的模式)
  2. JavaScript与Java是两种不同的语言，两者的关系仅仅是js的基本语法和对象体系最开始是想要模仿Java，而后又与当时Java的公司Sun有合作，也借助Java的声势，从而后来改名叫JavaScript
  3. ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。ECMAScript 只用来标准化 JavaScript 的基本语法结构。但其他标准如 DOM 的标准就是由 W3C组织(World Wide Web Consortium)制定的
  4. 2007年，ECMAScript 4.0版草案发布，但是过于激进，导致后面中止了 ECMAScript 4.0 ，将其中一小部分功能发布为ECMAScript 3.1。之后又将其改名为 ECMAScript 5。
  5. 2015年6月，ECMAScript 6 正式发布，且更名为“ECMAScript 2015”。之后每年发布一个ECMAScript版本
  6. 周边大事记

基本语法

  1. js执行单位是行(line)，一行一行地执行，一般，一行就是一个语句
  2. 语句(statement)执行某种操作、表达式(expression)用于得到返回值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式(这一点使js某些使用很灵活)
  3. 语句以分号结尾，一个分号表示一个语句结束。多个语句可以写在一行内。分号前无内容，表示空语句。表达式不需要分号结尾
  4. 变量是对“值”的具名引用，即为"值"取名。变量的名字就是变量名。如下使用var声明一个变量a，并赋值1
var a=1;
  1. 只声明变量而不赋值，则该变量的值是undefined，表示"无定义"。同时变量赋值时不写var也有效，但不建议。变量必须先声明再使用，否则会报错not defined
  2. 一条var命令可以声明多个变量。js是动态类型语言，变量类型可以随时更改。
var a = 1;

a = 'hello';
  1. 使用var重新声明一个已存在的变量，是无效的，重新声明时赋值，相当于重新赋值
  2. 变量提升：js的执行方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行，这样就会导致所有变量的声明语句，会被提升到代码的头部，这叫做变量提升(hoisting)
  3. 标识符(identifier)指的是识别各种值的合法名称。比如变量名、函数名。js标识符大小写敏感。标识符的命名规则是：只能以字母、下划线(_)和美元符号($)开头，从第二个字符开始还可以使用数字。
  4. js标识符中的字母指的是Unicode字母。因此中文标识符也可以使用
  5. js中的保留字不能用于标识符，保留字是指js中用来表示特定含义的字符，如return、class、true、false、function等
  6. 注释：注释用来对代码进行解释，js引擎执行时会忽略注释部分。//表示单行注释。/* */表示多行注释
  7. js使用大括号表示"区块"(block)。对于var命令，js的区块不构成单独的作用域(scope)
  8. 条件语句：

  • if和if...else...结构,根据条件的布尔值判断执行。

  • switch结构判断表达式的值是否与case相符并执行，如果都不符则执行最后的default，case中break不能少，否则当前case代码块执行完会接着执行下一个case。switch语句部分和case语句部分，都可以使用表达式，这就是js中可以为值的地方，都可以使用表达式的体现，如下：

switch (1 + 3) {

  case 2 + 2:

    f();

    break;

  default:

    neverHappens();

}

switch语句的值和case语句的值，比较时采用的是严格相等运算符(===)

  • ?:三元运算符：如下，条件true,执行"表达式1"，否则执行"表达式2"，然后获取对应返回值
(条件) ? 表达式1 : 表达式2
  1. 循环语句：重复执行某个操作

  • while 循环：循环条件和代码块，条件为真，就循环执行代码块

  • for 循环：可以指定循环的起点、终点和终止条件。分为初始化表达式(initialize)、条件表达式(test)、递增表达式(increment)

for (初始化表达式; 条件; 递增表达式) {

  语句

}

所有for循环，都可以改写成while循环

for语句的无线循环表示：

for ( ; ; ){

  console.log('Hello World');

}
  • do...while 循环：先执行一次循环体，再判断条件
  • break语句用于跳出代码块或循环。continue语句用于立即终止本轮循环，并开始下一轮循环
  1. js语句的前面可以添加标签（label），相当于定位符，用于跳转到程序的任意位置
label:

  语句

数据类型

概述

  1. JavaScript的数据类型有六种(ES6新增了 Symbol 类型)
  • 数值(number)：整数和小数（比如1和3.14）
  • 字符串(strin)：文本（比如"Hello World"）。
  • 布尔值(boolean)：表示真伪的两个特殊值，即true(真)和false(假)
  • undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
  • null：表示空值，即此处的值为空。
  • 对象(object)：各种值组成的集合。

数值、字符串、布尔值称为原始类型(primitive type)，是最基本的数据类型。对象称为合成类型(complex type)。undefined和null两个特殊值。

对象分为：狭义的对象(object)、数组(array)、函数(function)

  1. 类型判断

typeof运算符返回一个值的数据类型:

  • 数值、字符串、布尔值分别返回number、string、boolean
  • 函数返回function，undefined返回undefined(可以检测未声明的变量)，对象返回object，null返回object 
// 检测未声明

if (typeof v === "undefined") {

  // ...

}

typeof window // "object"

typeof {} // "object"

typeof [] // "object"

typeof null // "object"
  • instanceof可以区分数组和对象
[] instanceof Array // false

[] instanceof Array // true

null 和 undefined

  1. 两者含义"类似"，if语句中自动转为false，相等于运算符(==)两者比较为true。null表示"空"对象，转为数值是0；undefined表示"无定义"的原始值，转为数值是NaN 
Number(null) // 0

Number(undefined) // NaN
  1. 函数没有返回值时，默认返回 undefined
  2. 布尔值表示true和false两个真假状态。
  3. 如果 JavaScript 预期某个位置应该是布尔值，则会将该位置上现有的值自动转为布尔值。

下面六个值会被转为false,其他的值都是true：

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""或''（空字符串）

空数组([])和空对象({})对应的布尔值，都是true

数值

  1. js中所有数字都是以64位浮点数存储，整数也是如此。因此1===1.0，是同一个数
1 === 1.0 // true

JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）

  1. 浮点数不是精确的值，因此小数的比较和运算要特别注意
0.1 + 0.2 === 0.3   // false

0.3 / 0.1           // 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)   // false
  1. js浮点数的64个二进制位，从最左边开始，由如下组成：
  • 第1位：符号位，0表示正数，1表示负数。数值正负
  • 第2位到第12位（共11位）：指数部分。数值的大小
  • 第13位到第64位（共52位）：小数部分（即有效数字）。数值的精度
  1. 绝对值小于2的53次方的整数，即$-253$到$253$，都可以精确表示
Math.pow(2, 53); // 9007199254740992

Math.pow(2, 53) + 1; // 9007199254740992

Math.pow(2, 53) + 2; // 9007199254740994

Math.pow(2, 53) + 3; // 9007199254740996

Math.pow(2, 53) + 4; // 9007199254740996
  1. 最大值和最小值:Number.MAX_VALUE和Number.MIN_VALUE 
Number.MAX_VALUE // 1.7976931348623157e+308

Number.MIN_VALUE // 5e-324
  1. 数值表示法：50(十进制)、0xFF(十六进制)、123e3或123e-3(科学计数法)
  2. 当小数点前面的数字多于21位时，或者小数点后的零多于5个时，js会自动将数值转为科学计数法表示
  3. 使用字面量(literal)表示数值时：
  • 十进制：没有前导0的数值
  • 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制：有前缀0x或0X的数值。
  • 二进制：有前缀0b或0B的数值。

js会自动将八进制、十六进制、二进制转为十进制

  1. js存在2个0:+0，-0，两者是等价的。唯一区别是+0或-0当作分母时表达式的返回值不相等。
  2. NaN表示“非数字”(Not a Number)，比如字符串解析为数字报错时会返回NaN。0除以0得到NaN。NaN只是一个特殊值，类型依旧是Number
  3. NaN不等于任何值，包括它本身
NaN === NaN // false

NaN的布尔值为false，NaN与任何数(包括它自己)的运算，得到的都是NaN

  1. Infinity表示“无穷”，表示无法表示正无穷(Infinity)和负无穷(-Infinity)；非0数除以0，得到Infinity。

    Infinity大于一切数值(除了NaN)，-Infinity小于一切数值(除了NaN)

NaN的比较运算会返回false

  1. parseInt()方法将字符串转为整数。字符串转为整数时，会一个个字符依次转换，如果遇到不能转为数字的字符，就不再进行下去，返回已经转好的部分。转换失败返回NaN。

解析科学计数法的数字时会出现奇怪的结果

第二个参数表示解析的值的进制

parseInt('1000', 2) // 8

parseInt('1000', 6) // 216

parseInt('1000', 8) // 512
  1. parseFloat()：将一个字符串转为浮点数，可以对科学计数法字符串正确转换
  2. isNaN()判断一个值是否是NaN。isNaN()只对数值有效，其他类型值会先转为数值，再判断。对于空数组和只有一个数值成员的数组，isNaN()返回false
isNaN('Hello') // true

// 相当于

isNaN(Number('Hello')) // true
  1. 判断NaN最好的方法是：NaN是唯一不等于自身的值 
function myIsNaN(value) {

  return value !== value;

}

如果使用isNaN()判断，要同时判断类型：

function myIsNaN(value) {

  return typeof value === 'number' && isNaN(value);

}
  1. isFinite()判断是否为正常的数值，判断是参数也会进行类型转换

字符串

  1. 字符串是放在单引号或双引号中的零个或多个排在一起的字符。字符串中使用相同的引号要用\反斜杠转义
  2. 每行的尾部使用反斜杠，可以实现多行字符串(\后面只能有换行符，否则报错)
var longString = 'Long \

long \

long \

string';

longString // "Long long long string"

也可使用+可以将多个字符串行连接

  1. 反斜杠(\)用来表示一些特殊字符，称为转义。如\n换行符；\r：回车键；\t：制表符。如果在字符串中需要包含反斜杠，需要\转义自身。
"你好，反斜杠\\";  // "你好，反斜杠\"
  1. 字符串可以看做字符数组，但仅能使用数组的方括号运算符获取字符，而不能进行其他操作
  2. length属性返回字符串长度
'hello'.length  // 5
  1. js使用Unicode字符集。不仅以Unicode存储字符，而且可以只用Unicode码点，如'\u00A9'表示版权符号
var s = '\u00A9';

s // ""

每个字符在 JavaScript 内部都是以16位（2个字节）的 UTF-16 格式储存。js单位字符长度固定为16位长度

js 对 UTF-16 的支持不完整，只支持两字节的字符，无法识别四字节的字符。比如四字节字符

上一篇：Nginx配置支持https协议-应用实践


下一篇：mysql命令行下创建数据库，创建表，插入数据，查询数据