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     =>报错