感激相遇 你好 我是阿ken
作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴
🌊🌈关于内容：
————— JavaScript 数据类型 —————
📚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_数据类型转换
📓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.2.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() |
|---|---|---|---|
| 纯数字字符串 | 转成对应的数字 | 转成对应的数字 | 转成对应的数字 |
| 空字符串 | 0 | NaN | NaN |
| 数字开头的字符串 | NaN | 转成开头的数字 | 转成开头的数字 |
| 非数字开头字符串 | NaN | NaN | NaN |
| null | 0 | NaN | NaN |
| undefined | 0 | NaN | NaN |
| false | 0 | NaN | NaN |
| true | 1 | NaN | NaN |
console.log ( parseInt('F', 16) );
// 代码表示将字符F转变为十六进制数，结果为15
📕2.2.3. 转换为布尔型
转换为布尔型使用 Boolean()
console.log ( Boolean('') ); // false
| 待转数据 | Boolean() |
|---|---|
| 0 | false |
| NaN | false |
| null | false |
| undefined | false |
| ‘小白’ | true |
| 12 | true |
📚2.3_运算符
📓2.3.1. 算术运算符\
+、 -、 *、 /、 %
📒2.3.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
📕2.3.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
\
📘2.3.4. 位运算符
| 运算符 | 名称 | 示例 | 运算解析 |
|---|---|---|---|
| & | 与 | a&b | 如果两个二进制位都1才1，有0则0 |
| | | 或 | a|b | 如果两个二进制位上有一个值是1，则运算结果为1，无1才0 |
| ~ | 非 | ~ a | 0取反为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_分支结构
📓2.4.1. if 语句
📒2.4.2. if...else 语句
📕2.4.3. if...else if 语句
📘2.4.4. switch 语句
switch(表达式){
case 值1
代码段 1;
break;
case 值2
代码段 2;
break;
......
default;
代码段 n;
}
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南（十六）_多媒体技术
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「关注」 谢谢支持❤
