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