JavaScript学习笔记-1
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 数据分类
基本数据类型
number
tip：NAN(not a number非有效数字，但是number类型
string
无论''还是""包起来都是字符串，由0到多个字符组成
null
布尔类型
var b = true;
undefined
引用
（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( ){ }Symbol 唯一值(ES6)
var a = Symbol('xxx');
var b = Symbol('xxx');
//a 不等于b
const a = Symbol('xxx'); //唯一且不能更改 2.1.3 扩展-JS运行机理
JS代码如何被运行及运行后如何输出结果？
- 运行
- 代码运行在浏览器（内核渲染解析）
<script src = "js/xxx.js"></script> //引用JS //第二种直接卸载标签里面
- 基于NODE来运行（Node基于V8引擎渲染和解析JS工具）
输出
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
检测机制
首先验证当前是否为数字，非，浏览器默认把值转换为数字类型
非数字类型：
- 其他基本类型转换为数字，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- 当前值为数字类型，是返回false，否返回true（数字类型只有NaN为非有效数字）
parseInt / parseFloat
等同于Number，也是把其他类型转换为数字类型
和Number的区别在于字符串转换分析
Number:出现非有效数字NaN
parseInt：把字符串整数部分解析出来
parseFloat：把字符串中小数（浮点数）解析出来
parseInt('12.5px')->12 parseInt('width:12.5px')->NaN //从最左边开始查找，以到第一个非有效数字字符。查找结束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 =>报错 
查看5道真题和解析