1 写在前面

以下内容大纲：

• JS变量
• JS数据分类：
  • 基本数据类型
  • 引用
• 详细分析数据类型

2 JS

2.1 ECMAScript（ES）核心语法

2.1.1 变量

var

function

let (ES6)

const (ES6) 常量

import (ES6)模块规范导出需要信息

class (ES6)类

var a = 1;
let a = 1;
const a = 1;
function begin(    ){

}

• 注意：

  • 命名规范

    _studentInfo下划线在前端是指公共变量

    $studentInfo（一般存储JQ元素）

  • 区分大小写

  • 关键字保留

2.1.2 数据分类

1. 基本数据类型

   • number

     tip：NAN(not a number非有效数字，但是number类型

   • string

     无论''还是""包起来都是字符串，由0到多个字符组成

   • null

   • 布尔类型

     var b = true;

   • undefined

2. 引用

   （1）object

   • 普通对象

     var o ={name:'xxx',age:9}; //普通对象

     {}空对象

   • 数组对象

     var array = [12,23,34];

   • 正则对象

     var reg = /-?(\d|(1-9]\d+))(\.\d+)?/g;    由元字符组成的完整正则

   • 日期对象

   • ...

   (2)function

   function begin(    ){
   
   }

3. Symbol 唯一值(ES6)

var a = Symbol('xxx');  
var b = Symbol('xxx');  
//a 不等于b

const a = Symbol('xxx'); //唯一且不能更改

2.1.3 扩展-JS运行机理

JS代码如何被运行及运行后如何输出结果？

1. 运行
   • 代码运行在浏览器（内核渲染解析）

<script src = "js/xxx.js"></script>  //引用JS
//第二种直接卸载标签里面

• 基于NODE来运行（Node基于V8引擎渲染和解析JS工具）

2. 输出

   • alert: 在浏览器中弹窗提示

     window.alert();
     alert();//window可不写
     //基于alert输出的结果都会转化为字符串,把计算结果通过toString转换为字符串，输出
     alert(1+1); => '2'
     alert(true); =>'true'
     alert([12,23]); =>'12,23'
     alert({name: "aaa"});  =>'[Object Object]' 为什么？

//在ES5中
当调用toString方法时，下列步骤会被执行：

• 如果this未定义时，返回“[object Undefined]”

• 如果this为null时，返回“[object Null]”

• 定义O，并且让O=ToObject(this)

  定义class，并且使class为O内置属性[[class]]的值

  返回三个字符串的拼接字符:"[object",class,"]"

通过官方解释，可以清晰的得出toString()是在以特殊的字符串形式输出this的类型，不管你传入什么参数，该方法都是执行了window.toString()方法，this一直指向了window对象，所以输出了上述结果。

window.toString()//=>""[object Window]"
var a = {};
a.toString(); //=>"[object Object]"

• confirm: 确认提示框

  和alert用法一致，提示框有确定和取消按钮

  var flag = confirm(num);
  if (flag){
      //业务1
  }else{
      //业务2
  }

• prompt ：在confirm基础上增加输入框（不常用）

• console.log：在浏览器控制台输出日志

  var num  =12;
  console.log(num);
  //num.log TAB快捷键    

  F12控制台

  • Elements: 当前页面元素和样式，并可以修改

  • Console：控制台，可以直接写JS代码.log输出

  • source：源文件

  • network：通信信息

  • Application：cookies等

  • ...

• console.dir：比log输出的更加详细（尤其是输出对象）

• console.tabel：按把SON数据，按照表格方式输出

• ...更多console输出方法

2.1.4 详解数据类型

1 number数字类型

NAN: not a number 但他是数字类型

isNAN：检测当前值是否为有效数字，true非有效，false有效

var num = 12;
isNaN(num); =>false
isNaN('13'); =>false
isNaN('zhufeng'); =>true
isNaN(true); =>false
isNaN(false); =>false
isNaN(null); =>false
isNaN(undefined); =>true
isNaN({age:9}); =>true
isNaN([12,23]); =>true
isNaN([12]); =>false

• 检测机制

  1. 首先验证当前是否为数字，非，浏览器默认把值转换为数字类型

     非数字类型：

     • 其他基本类型转换为数字，Number方法转换

   [字符串转数字]

   Number('12')->12

   Number('12px')->NaN    如果字符串出现任意非有效数字字符，结果为NaN

   Number('12.5')->12.5    可以识别小数



   [布尔转数字]

   Number(true)->1

   Number('false')->1





   [其他]

   Number('null')->12

   Number('undefined')->12



 - 引用转数字：

   先调toString转字符串，再转数字



   [对象]

   ({}).toString()  ->    '[object object]'    ->NaN



   [数组]

   ([12,23]).toString()  ->    '12,23'    ->NaN



   [正则]

   (/^$/).toString()  ->    '/^$/'    ->NaN



   **注意：**

   Number('')        ->    0

   Number([])        ->    0

   [].toString() -> ''    => isNaN([]): false

2. 当前值为数字类型，是返回false，否返回true（数字类型只有NaN为非有效数字）

1. parseInt / parseFloat

   等同于Number，也是把其他类型转换为数字类型

   和Number的区别在于字符串转换分析

   Number:出现非有效数字NaN

   parseInt：把字符串整数部分解析出来

   parseFloat：把字符串中小数（浮点数）解析出来

   parseInt('12.5px')->12
   parseInt('width:12.5px')->NaN
   //从最左边开始查找，以到第一个非有效数字字符。查找结束
   

2. NaN的比较

   NaN == NaN: false NaN和谁都不相等，包括自己

   if(Number(num) == NaN){
       alert('num不是有效数字！')
   }
   //NaN和谁都不相等，条件永远不成立，因为NaN ！= NaN
   //因此只能用isNaN检测
   if(isNaN(num)){
           alert('num不是有效数字！');
   }

2 布尔类型

只有true/false

如何把其他数据类型转为布尔类型？

• Boolean
• !
• !!

Boolean(1) ->true

!'珠峰'    ->先把其他数据类型转为布尔类型，然后取反

!!null    ->    取两次饭，相当于没取，转换布尔类型，相当于Boolean

规律: 再JS中只有"0/NaN/空字符串/null/undefined"这五个值转换为布尔类型为false，其余为true

3 null&undefined

都代表空或没有

• null：空对象指针
• undefined：未定义

null一般意料之中的没有（通俗理解认为手动赋值null，后面程序再次赋值）

var = num = null;    //手动赋值null，预示着后面修改num变量值

undefined代表为没有，一般不是认为手动控制，大部分为浏览器自主为空（后面可赋值也可以不赋值）

var num; //此时变量值浏览器分配undefined

4 object对象数据类型

普通对象

• 大括号包裹
• 由零到多组属性名和属性值（键值对）组成

属性是用来描述当前对象特征的，属性名是当前具备这个特征，属性值是对这个特征的描述

（专业语法：属性名称为键[key]，属性值[value]，一组属性名和属性值成为一组键值对

var obj ={
    name:'xxx',
    age:9
}

//=>对象的操作：对键值对进行增删改查

[获取]

语法：对象.属性名    /    对象[属性]

obj.name

obj['name']     一般来说，对象的属性名都是字符串格式，属性值格式不固定



[增/改]

JS对象属性名是不允许重复，是唯一
obj.name = 'lll';    //原有属性name，修改
obj.sex = 'man';     //原有对象不存在，增加sex属性

[删除]
彻底删除：对象不存在该属性
delete obj['age']
无法再次获得=>undefined

假删除：并没有一处这个属性，只是让当前属性值为空
obj.sex = null;
可以获得，值为null

思考题

var obj ={
    name:'xxx',
    age:9
};

var name = 'lll';

问:
obj.name    =>'xxx'
obj['name']    =>'xxx'
obj[name]    =>undefined    此处的name是一个变量，相当于obj['lll']


'name'和name的区别？
'name'是一个字符串值
name代表的是本身存储的值

一个对象的属性名不仅仅是字符串格式，还有可能是数字格式

var obj ={
    name:'zzz',
    0:12
};
obj[0] = 12
obj[name]    =>    undefined
obj['name']    =>    undefined
obj.0        =>    systaxError语法错误

//当我们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转换为字符串（toString），然后再进行促成存储
obj[{}] = 300;    =>({}).toString()后的结果作为对象的属性名存储起来 obj['[object Object]']=300

obj[{}] =>获取的时候也是先把对象转换为字符串'[object Object]'，然后获取之前储存的300

----
数组对象（对象由键值对组成）
var pp ={
    a:12
};

var array = [12,23];    =>12和23都是属性值
通过观察结果，发现数组对象的属性名是数字（我们把数字属性名称为当前对象的索引）
array['0']    =>12
array[0]    =>12
array['length']        => 2
array.0     =>报错