【熬夜猛肝万字博文】学妹问我怎么入门 Javascript，百般盘问下我终于决定贡献出自己的 JavaScript入门笔记(二)_公众号:「请叫我阿ken」

网络投稿 02-07 671

你好，我是阿ken🦁

有学妹想以后做前端，就会问到 JavaScript怎么学的问题，在多次百般盘问下，阿ken🦁 决定贡献出自己之前学习 JavaScript时的笔记。

目录传送门：

2.1_数据类型

2.1.1_变量的数据类型

2.1.2_数据类型分类

2.1.3_数字型

2.1.4_字符串型

2.1.5_布尔型

2.1.6_undefined 和 null

2.1.7_数据类型检测

2.1.8_字面量

2.2_数据类型转换

2.3_运算符

2.4_分支结构

2.1_数据类型 2.1.1_变量的数据类型

JavaScript 是一种弱类型语言，不用提前声明变量的数据类型。相对于 C、JAVA，这二者就是强类型语言。

//强类型语言（Java） int num = 10; ?// 这里的变量num是int型（整数类型） //弱类型语言（JavaScript） var num = 10; ?//这里的变量num一开始是一个数字型 num = 'abc'; ? //赋值一个字符串，现在num变成了字符串类型

2.1.2_数据类型分类

(1) 数字型（Number），包含整型值和浮点型值：

var num1 = 21; // 整型值 var num2 = 0.21; // 浮点型值

(2) 布尔型 (Boolean)，包含 true和 false两个布尔值：

var bool1 = true; // 表示真、1、成立 var bool2 = false; // 表示假、0、不成立

(3) 字符串型（String），用单引号或双引号包裹：

var str1 = ''; // 空字符串 var str2 = 'abc'; // 单引号包裹的字符串 var str3 = "abc"; // 双引号包裹的字符串

(4) 未定义型（Undefined），只有一个值 undefined：

var a; // 声明变量a、未赋值，此时a就是 undefined var b = undefined; // 变量b的值为 undefined

(5) 定型（Null），只有一个值 null：

var a = null; // 变量a的值为 null

需要注意：代码中的值 true、false、undefined和 null全部都要写成小写字母。

2.1.3_数字型

1. 进制（1）在数字开头加上0，表示八进制数

var num1 = 07; console.log (num1); ? // 输出结果：7 var num2 = 010; console.log (num2); ? // 输出结果：8

（2）在数字开头加上0x，表示十六进制数

var num1 = 0X9; console.log (num1); ? //输出结果：9 var num2 = 0Xa; console.log (num2); ? //输出结果：10 // 十六进制数中的"X"和"a~f"不区分大小写

2. 最值数字型的最大值和最小值用如下代码来获取。

console.log (Number.MAX_VALUE); ?//输出结果: 1.7976931348623157e+308 console.log (Number.MIN_VALUE) ; ?//输出结果: 5e-324

在输出结果中，使用了科学计数法来表示，在 JavaScript 中可以使用科学计数法表示数字。

3. 特殊值

数字型有3个特殊值，分别是 Infinity(无穷大)、-Infinity( 无穷小) 和 NaN( Not a Number,非数字)

console.log (Number.MAX VALUE * 2); ?// 输出结果: Infinity console.log (-Number.MAX VALUE * 2) ; // 输出结果: -Infinity console.log('abe' - 100); ?// 输出结果: NaN

> NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

若要判断一个变量是否为非数字的类型，可以用 isNaN() 来进行判断，它会返回一个布尔值，返回 true 表示非数字，返回 false 表示是数字，示例代码如下。

console.log (isNaN(12)); ?// 输出结果: false console.log (isNaN('abc')); // 输出结果: true 2.1.4_字符串型

字符串是指计算机中用于表示文本的一系列字符，在 JavaScript 中使用单引号或双引号来包裹字符串。

var str1 = '单引号字符串'; var str2 = "双引号字符串";

1. 单、双引号嵌套

在单引号字符串中可以直接书写双引号，在双引号字符串中也可以直接书写单引号，示例代码如下。

//正确的语法 var strl = 'I am a "progranmer"'; ?// I am a"prograrmer"; var str2 = "I'm a 'prograrmer'"; ?// I'm a 'programmer'; //常见的错误语法 var str1 = 'I'm a programmer'; ?//单引号错误用法 var str2 = "I'm a "prograrmer""; //双引号错误用法 var str3 = 'I am a programmer"; //单双引号混用

2. 转义符

在字符串中使用换行、Tab等特殊符号时，可以用转义符来进行转义。转义符都是以“\”开始的。

转义符解释说明\ '单引号\n换行\ ''双引号

3. 字符串长度

var str1 = 'I\'m a programmer'; console.log(str1.length); ? //输出结果：16 ?//上述输出语句为 ?I'm a programmer ?加上空格字符串长度一共是16 var str2 = '我是程序员'; console.log(str2.length); ?//输出结果：5

4. 访问字符串中的字符

字符串可以使用 " [index] " 语法按照 index(索引) 访问字符，index 从0开始，数值为字符串的长度减1，如果超过了index最大值，会返回 undefined。

var str = 'I\'m a programmer' ; ?//输出语句为 ?I'm a programmer console.log(str[0]); ?//输出结果:I console.log(str[1]); ?//输出结果: ' console.log(str[15]); ?//输出结果: r console.log(str[16]); ?//输出结果: undefined

5. 案例：输出年龄

// 弹出提示框，让用户输入年龄 var age = prompt('请输入您的年龄'); // 组合语句并输出 var msg = '您今年' + age + '岁了'; alert(msg); 2.1.5_布尔型

布尔型有两个值 true 和 false

当布尔型（true false）与数字型相加的时候，会转化为（1 0）

2.1.6_undefined 和 null

如果一个变量声明后没有赋值，则变量的值就是 undefined。我们也可以给一个变量赋一个 null 值，null 一般用来表示空对象指针，具体会在后面的章节中讲解。

案例：演示 undefined 和 null 的使用。

var a; console.log (a); ? ? ? // 输出结果: undefined console.log (a + '_'); // 输出结果: undefined_(字符串型) console.log (a + 1); ? // 输出结果: NaN var b = null; console.log (b + '_'); // 输出结果: null_(字符串型) console.log(b + 1); ? ?// 输出结果:1(b转换为0) console.log(b + true); // 输出结果:1(b转换为0，true转换为1) 2.1.7_数据类型检测

在开发中，当不确定一个变量是什么数据类型的时候，可以利用 typeof 运算符进行数据类型检测。

案例：

console.log (typeof 12); ? ? ? ? // 输出结果：number console.log (typeof '12'); ? ? ? // 输出结果：string console.log (typeof true); ? ? ? // 输出结果：boolean console.log (typeof undefined); ?// 输出结果：undefined console.log (typeof null); ? ? ? // 输出结果：object 2.1.8_字面量

字面量是指源代码中的固定值的表示法，简单来说，就是用字面量来表示如何在代码中表达这个值。

2.2_数据类型转换

1. 转换为字符串

var num = 3.14; // 方式一利用 + '' 拼接字符串 var str = num + ''; console.log(str, typeof str); // 3.14 string // 方式二利用 toString()转换成字符串 var str = num.toString(); console.log(str, typeof str); // 3.14 string // 方式三利用String()转换成字符串 var str = String(num); console.log(str, typeof str); // 3.14 string

> 注意： > null 和 undefined 无法使用 toString() 方式进行转换 > num = 5; num.toString(2) 表示将5转为二进制，结果为101

var num = 5;? console.log ( num.toString(2) ); // 101

2. 转换为数字型?

// 方式一使用 parseInt() 将字符串转为整数 console.log ( parsenInt('78') ); ?// 78 // 方式二使用 parseFloat() 将字符串转为浮点数 console.log ( parseFloat('3.94') ); ?// 3.94 // 方式三使用 Number() 将字符串转为数字型 console.log ( Number('3.94') ); // 3.94 // 方式四利用算术运算符(-, *, \)隐式转换 console.log ('12' - 1); ?// 11

待转数据Number()和隐式转换parseInt()parseFloat()纯数字字符串转成对应的数字转成对应的数字转成对应的数字空字符串0NaNNaN数字开头的字符串?NaN转成开头的数字转成开头的数字非数字开头字符串NaNNaNNaNnull0NaNNaNundefined0NaNNaNfalse0NaNNaNtrue1NaNNaN

console.log ( parseInt('F', 16) ); ? // 代码表示将字符F转变为十六进制数，结果为15

3. 转换为布尔型

转换为布尔型使用 Boolean()

console.log ( Boolean('') ); // false 待转数据Boolean()0falseNaNfalsenullfalseundefinedfalse‘小白’true12true

2.3_运算符

1. 算术运算符 +、 -、 *、 /、 %

2. 递增(++)和递减(--)运算符 _ 递增和递减运算符既可以写在变量前面，也可以写在变量后面(num++、num--)。当放在变量前面时，称为前置递增(递减)运算符放在变量后面时，称为后置递增(递减)运算符前置和后置的区别在于，前置返回的是计算后的结果，后置返回的是计算前的结果。

var a = 1, b = 1; console.log (++a); // 2 console.log (a); ? // 2 console.log (b++); // 1 console.log (b); ? // 2 var a = 10; var b = ++a + 2; // b = 11 + 2, a = 11 var c = b++ + 2; // c = 13 + 2, b = 14 var d = c++ + ++a; // d = 15 + 12, c = 16, a = 12

案例：演示，

// n , n1 = 10 var n = n1++; // n1 = 11 n1++ = 10 console.log ('n = ' + n); // n = 10 console.log ('n1 = ' + n1); // n1 = 11 n = ++n1; // n1 = 12 ++n1 = 12 console.log ('n = ' + n); // n = 12 console.log ('n1 = ' + n1); // n1 = 12

3. 比较运算符?

运算符name< > >= <=小于、大于、大于等于、小于等于==等于!=不等于===全等!==不全等

console.log (6 == 6); ? ?// true console.log (6 == '6'); ?// true console.log (6 === 6); ? // true console.log (6 === '6'); // false console.log (5 !== '5'); // true

4. 位运算符?

运算符名称示例运算解析&与a&b如果两个二进制位都1才1，有0则0|或a|b如果两个二进制位上有一个值是1，则运算结果为1，无1才0~非~ a0取反为1，1取反为0^异或a^b二进制位相同则0，不同才1<<左移a<<b将a左移b位，运算时，左边的空位补0，左边移走的部分舍去>>右移a>>b将a右移b位，运算时，左边的空位根据原数的符号位补0或者1，原来是负数就补1，正数就补0>>>无符号右移a>>>b将a右移b位，丢弃被移出位，左边最高位用0填充，不考虑原数正负

// 1. 位运算符 ~ 　　var num = 7; 　　var num2 = ~num; 　　alert(num2);　　　　// -8 　　var num3 = -1; 　　var num4 = ~num3; 　　alert(num4);　　　　// 0 　//　可以看出：~ 就是将原来的数值加1后取负， ?即： ~x = -(x + 1)。　//　底层原理：? ?//　先了解一下基本知识　　　// 1、计算机里的数字是以补码的形式表示的。　　　// 2、取反即：0变1，1变0。　　　// 3、第一个数为符号位，0为正数，1为负数。　　　// 4、正数的原码、反码、补码都一样。　　　// 5、负数的反码：符号位不变，其余取反。补码：反码加1。　　　// 6、0的反码补码都为0。　　　// ~ 即对当前数取反所表示的值。计算机中数字以补码形式表示，7的取反正好是-8的补码，所以~7 == -8；

　//　用途：　　//　1)、取整数随机数　　　　　　~~(Math.random()*7); ? ?// 在0~6内取整数随机数，包括0和6 　　　　　　~(Math.random()*7); ? ? ?// 在-7~-1内取整数随机数，包括-7和-1 　　　　　　~(Math.random()*7); ? ? ?// 在1~7内取整数随机数，包括1和7 　　//　2)、解决抽象渗漏　　　//　　抽象渗漏：在代码中暴露底层实现的细节。　　　//　　对于indexOf判断是否存在，像>-1、!=-1、>=0、<0之类细节就应该屏蔽掉　　　//　　那么用~就很好解决了　　　　　　　　var str = 'hello World'; 　　　　　　if(~str.indexOf('ell'))? 　　　　　　　　return true; 　　　　　　else 　　　　　　　　return false; // 2、按位与& 　　　　var num1 = 25 & 7; 　　　　var num2 = 25 & -7; 　　　　var num3 = -25 & 7; 　　　　var num4 = -25 & -7; 　　　　alert(num1);　　　　// 1 　　　　alert(num2);　　　　// 25 　　　　alert(num3);　　　　// 7 　　　　alert(num4);　　　　// -31 　　　　原理：1&1=1、1&0=0、0&1=0、0&0=0。　　　　根据规则对补码处理：　　　　25 & 7 　　　　　　　// 25 & -7 　　　// -25 & 7 　　　// -25 & -7　　　　　　// 红 & 红 == 绿　　　　绿 == 最后一行的数的补码　　　　 // 3、按位或 |? ?　　// 原理：1|1=1、1|0=1、0|1=1、0|0=0。　　?//　例子：参考上面的。? // 4、按位异 ^ 　　//　　原理：1^1=0、1^0=1、0^1=1、0^0=0。　? //　? 例子：参考上面的。

// 5、左移 << ? 、右移 >> ?、无符号右移 >>> 　　　　　　　// 简单记法：　　　　(a << b) === Math.ceil(a*(2**b));　　　　　　　　　(a >> b) === Math.floor(a/(2**b));

2.4_分支结构

1. if 语句

2. if...else 语句

3. if...else if 语句

4. switch 语句

switch(表达式){ case 值1 ? 代码段 1; ? break; case 值2 ? 代码段 2; ? break; ?...... default; ? 代码段 n; }

三连必回，谢谢支持！