前言：

最近在学习javascript中数据类型、运算符，以及运算符优先级等相关基础知识，相对简单、基础但也很重要。加上老师的推荐看了阮一峰老师所写的《javascript教程》。从中刷新了过往认知的概念和固有的规则，明白了javascript的出现会打破以往的惯性思维。在这里1+1不再一定等于2，你常见的算数符号也不是你通常认为的那种作用，一个数字可以是表达式，同时一个表达式也是一个值。。。所以学习这样一种新知识，你要学会先接受，然后敢于去打破自身的思维惯性，之后才能勇于迎接更多挑战。

自我总结：

值===数据类型——转化为：数值（number）/字符串（string）/布尔值（boolean）/undefined/null/对象（object）——转为Nan或者数字（其中：（1）数字+undefined===Nan （2）null===(undefined===Nan ) ——判断布尔值true or false

一、基本语法

1、调试

打开chrome开发工具：右键——检查——console（esc键调取另一个console）

• Win F12
• Mac Command + Option + I

2、语句

（1）语句 VS 表达式

A、区别：

• 语句，主要为了进行某种任务而进行的操作，一般情况下不需要返回值；
• 表达式，为了得到返回值的计算式，一定会返回一个值。凡是JavaScript语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式

B、例子：

• 赋值语句：var a = 1 + 3; //先用var命令，声明了变量a，然后将1 + 3的运算结果赋值给变量a
• 表达式：1 + 3

（2）分号

分号前面可以没有任何内容，JavaScript引擎将其视为空语句。

;;;

A、语句，以分号结尾。一个分号就表示一个语句结束。多个语句可以写在一行内。不需要加分号，换行默认上一行为语句。

var a =  1  +  3  ;  
var b =  'abc'; 
/*或*/
var a =  3 
var b =  4  
var c = a+b

B、表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。下面两行语句有返回值，但是没有任何意义，因为只是返回一个单纯的值，没有任何其他操作。

1  +  3;  //语句，但无任何意义 
 'abc';  

如图：

image

3、变量

（1）定义

最前面的var是变量声明命令。它表示通知解释引擎，要创建一个变量a（相当于申请了1个内存放在变量a这里）。

变量是对“值”的引用，使用变量等同于引用一个值。每一个变量都有一个变量名。

var a =  1;

（2）变量提升

A、定义：

变量提升（hoisting），即JavaScript引擎的工作方式是：先解析代码获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有变量的声明语句，都会被提升到代码的头部，如：

//假设 
   var a = 1
//这里会产生一个变量提升
    var a ;
    a =1;
或
    a = 3
    var a
//控制台显示并不会报错，只要有var变量命令的声明，默认情况下就会自动提升到最前面，之后再作赋值

总结：
变量提升只对var命令声明的变量有效，如果一个变量不是用var命令声明的，就不会发生变量提升。

B、说说变量提升的几种场景

第1种场景：

console.log(a);  var a =  1;

代码首先使用console.log方法，在控制台显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为有var存在，即也存在变量提升，引擎中真正运行的是下面这段代码：

var a; console.log(a); a =  1;

最后的结果是显示undefined，表示变量a已声明，且位于最前面，但还未赋值。

注：
这种变量提升的技巧很重要，与之后函数作用，复杂函数执行时所出现的一些情况都可解释

第2种场景：

console.log(b); b =  1;

语句将会报错，提示“ReferenceError:b is not defined”，即变量b未声明，这是因为b不是用var命令声明的，JavaScript引擎不会将其提升，而只是视为对顶层对象的b属性的赋值。

4、标识符

（1）定义：

标识符（identifier），用来识别具体对象的一个名称。最常见标识符：变量名、函数名。

注：
JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

（2）标识符命名规则

A、第一个字符，可以是任意Unicode字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。

B、第二个字符及后面的字符，除了Unicode字母、美元符号和下划线，还可以用数字0-9。

C、一些命名实例：

• 下面这些都是合法的标识符。

arg0
_tmp
$elem
π

• 下面这些则是不合法的标识符。

1a  // 第一个字符不能是数字
23  // 同上
***  // 标识符不能包含星号
a+b  // 标识符不能包含加号
-d  // 标识符不能包含减号或连词线

• 中文是合法的标识符，可以用作变量名。

var 临时变量 = 1;

• JavaScript有一些保留字，不能用作标识符：

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield

• 三个词具有特别含义，也不应该用作标识符：

Infinity
NaN
undefined

5、注释：

// 这是单行注释
/*
 这是
 多行
 注释
*/

//历史上JavaScript兼容HTML代码的注释，所以<!--和-->也被视为单行注释。
x = 1; <!-- x = 2;--> x = 3; 

6、区块

（1）定义 JavaScript使用大括号，将多个相关的语句组合在一起，称为区块（block）。

（2）与大多数编程语言不一样，JavaScript的区块不构成单独的作用域（scope）。即区块中的变量与区块外的变量，属于同一个作用域。如：

{
  var a = 1;
}
a // 1

二、数据类型

1、定义

JS语言的每一个值，都属于某一种数据类型。

2、值所属的数据类型分类

JavaScript 的数据类型，共有6种：

注：
ES6 又新增了第七种 Symbol 类型的值

（1）数值（number）：值为整数和小数（比如1和3.14）
（2）字符串（string）：值为字符组成的文本（比如"Hello World"）
（3）布尔值（boolean）：值判定为true（真）和false（假）两个特定值

注：
用于询问的便可用boolean进行变量命名,如：

var isBoy = true

（4）undefined：值判定为未处理，未定义或不存在。目前未定义所以此处暂时没有任何值，但之后可以去放东西。

注：
一个变量没有赋值，只能是undefined，不会是null

（5）null：值为表示经过处理之后的无值，即此处的值就是“无”的状态。

（6）对象（object）：或称“引用类型”，各种值组成的集合。对象=属性+值

对象又可以分成三个子类型：

• 狭义的对象（object）
• 数组（array）
• 函数（function）

3、typeof 运算符（用来确定值所属的数据类型）

（1）三种运算符用来确定数据类型
运算符，用于连接简单表达式，组成一个复杂的表达式（即通过一个关键字，后面加一个变量或值，得出一个结果）
JavaScript有三种方法，可以确定一个值到底属于什么类型。

• typeof运算符
• instanceof运算符
• Object.prototype.toString方法

（2）作用
用typeof可以判断一个变量或可以返回一个值为哪种数据类型，如：

※数值、字符串、布尔值分别返回number、string、boolean。

//数值、字符串、布尔值分别返回number、string、boolean。
typeof  123// "number"
typeof  '123'// "string"
typeof  false// "boolean"

※函数返回function。

function f(){

}
typeof f
// "function"

※ undefined返回 undefined

typeof  undefined
// "undefined"

※ 利用这一点，typeof用来检查一个没有声明的变量，而不报错。如代码中变量v没有用var命令声明，直接使用就会报错；但放在typeof后面就不报错了，而是返回undefined。

v
// ReferenceError: v is not defined  

typeof v
// "undefined"

※实际编程中，变量v要用var命令声明，这个特点通常用在判断语句。

// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}

※除此以外，其他情况都返回object。

//除此以外，其他情况都返回object
typeof window   // "object"
typeof {}      // "object"
typeof []     // "object"
typeof null   // "object"

实际操作中：

image

如何判断一个变量是否为函数？

image

4、布尔值

（1）作用

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。

（2）下列运算符会返回布尔值

A、两元逻辑运算符：&&(And)，||(Or)
B、前置逻辑运算符：!(Not)
C、相等运算符：===，!==，==，!=
D、比较运算符：>，>=，<，<=

如：

4>3-->true

（3）如果JavaScript预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六种值被转为false，其他值都视为true。

• undefined -->false
• null -->false
• false -->false
• +0，-0，NaN-->false【其他number（数字）为true】
• ""或''（空字符串）-->false【其他string（字符串,包含" "空白字符串）为true】

A、关于""或''（空字符串）布尔值往往用于程序流程的控制，
如：

if ('') {
  console.log(true);
}
// 没有任何输出
//上面代码的if命令后面的判断条件，预期应该是一个布尔值，所以JavaScript自动将空字符串，
//转为布尔值false，导致程序不会进入代码块，所以没有任何输出

B、空数组（[]）和空对象（{}）对应的布尔值，都是true。如：

if ([]) {
  console.log(true);
}
// true

if ({}) {
  console.log(true);
}
// true

三、数据类型转换解密

总结：js的数据类型如何判断，即任何表达式先转字符串再转数字

1、if判断

（1）js如何转换判断

从面试题说说if的数据类型：

// 题目1：如下代码输出什么?
if ("hello") {
    console.log("hello")
}    //true

// 题目2：如下代码输出什么?
if ("") {
    console.log('empty')
}//空字符串，代表里面什么都没有 //false

// 题目3：如下代码输出什么?
if (" ") {
    console.log('blank')
}//空白字符串，仍然代表一个值，只不过是空值 //true

// 题目4：如下代码输出什么?
if ([0]) {
    console.log('array')//对象 true
}

if（[]）{
  console.log('hahah')
}   //特殊对象 true

// 题目5：如下代码输出什么?
if('0.00'){
  console.log('0.00')
}       //字符串（除空字符串外）true

if（+0.00）{
  console.log('hahah')
}       //false

（2）判断原理：
对于if（）里括号的表达式（如以下），会被强制转换为布尔类型

• undefined --> false
• null -->false
• false`` -->false```
• +0，-0 ，NaN -->false 【其他number（数字）为true】
• ""或''（空字符串）-->false【其他string（字符串,包含" "空白字符串）为true】

2、==判断

（1）js处理 ==的表达式 判断

"" == 0  //题目1   ""空字符串===false===0  0==0  //true
" " == 0  //题目2   Number('   ')-->0===false 0==0 //true
"" == true  //题目3   0===1 //false
"" == false  //题目4  0===0 //true
" " == true  //题目5  false===0 0==1 //false

!" " == true  //题目6      "  "空白字符串===true !0===false===0  0不等于true  //false
!" " == false  //题目7       false==false //true
*"hello" == true  //题目8    字母字符串===Nan  Nan不等于1 //fasle
*"hello" == false //题目9    字母字符串===Nan  Nan不等于0  //fasle
"0" == true  //题目10        "0"（数字字符串）===0不等于1  //false
"0" == false  //题目11       "0"（数字字符串）===0===0    //true
*"00" == false  //题目12     "00"（数字字符串）===00===0   //true
"0.00" == false  //题目13    "0.00"（数字字符串）===0===0  //true
* undefined == null  //题目14   undefined===Nan===null //true
*{} == true  //题目15           {}===object（没有字符串）不等于true  //fasle

*[] == true  //题目16           []（空数组）===object（没有字符串）不等于true   //fasle

var obj = { 
  a: 0, 
  valueOf: function(){return 1} 
} 
obj == "[object Object]"  //题目17  //false
obj == 1  //题目18                  //true
obj == true  //题目19               //true

（2）判断原理

两图对照，就能判断表达式的数据类型：

image