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

  1. 引用

    （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(    ){

}

  2. 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工具）

  1. 输出

    • 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
  1. 当前值为数字类型，是返回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     =>报错