1.js基础知识(个人学习笔记)

1.javascript简介

https://es6.ruanyifeng.com/
js：轻量级的客户端脚本语言（面向对象编程），基于node可以做服务器端程序

1.1js的组成部分

• ESMAScript(ES)：JS的核心语法
• DOM：document object model 文档对象模型
  提供各种API(属性和方法)，让js可以获取或者操作页面中的HTML元素(DOM)
• BOM：browser object model 浏览器对象模型，提供各种API，让js可以操作浏览器

1.2ESMAScript

是js的语法规范，js中的变量、数据类型、语法规范、操作语句、设计模式等等都是ES规定的

1.3变量

不是具体的值，只是用来存储具体值的容器或者代名词，因为存储的值可以改变，所以称为变量
在js中创建变量有以下方式

• var (es3)
• function (es3) 创建函数(函数名也是变量，只不过存储的值是函数类型的而已)
• let(es6)
• const(es6) 创建的是常量
• import(es6) 基于es6的模块规范导出需要的信息
• class(es6) 基于es6创建类

var [变量名]=值;
let  [变量名]=值;
const [变量名]=值;
function 函数名() {}
var n=13;  
n=15;  
alert(n+10);=》 //结果是25
const n=100;  
n=200;  
alert(n);=》Uncaught TypeError: Assignment to constant variable 不能给一个常量重新赋值 常量存储的值不能被修改

1.4命名规范

• 严格区分大小写
• 遵循驼峰命名法
• 不能使用关键字和保留字：在js中有特殊含义的叫做关键字，未来可能会成为关键字的叫做保留字

1.5数据类型

• 基本数据类型(值类型)
  • 数字number
  • 字符串string
  • 布尔boolean
  • null
  • undefined
• 引用数据类型
  • 对象object
    • 普通对象
    • 数组对象
    • 正则对象
    • 日期对象
  • 函数function
• es6中新增加了一个特殊的类型：Symbol，唯一的值

[基本数据类型]

var n=13;  数字类型中有一个特殊的值NaN(不是一个有效的数字，但是属于number类型)
var s=' '; //=> ""  '13'  "{}" js中所有用单引号或双引号包裹起来的都是字符串，里面的内容是当前字符串中的字符(一个字符串由0到多个字符组成)
var b = true; //=>布尔类型只有两个值 true false

[引用数据类型]

var o ={name:'chen',age:9}; //=>普通的对象：由大括号包裹起来，里面包含多组属性名和属性值(包含多组键值对) {}空对象
var ary = [12,23,45,56]; //=>中括号包裹起来，包含0到多项内容，这种是数组对象 []空数组
var reg = /-?(\d|([1-9]\d+))(\.\d+)?/g; //=>由元字符组成一个完整的正则
function fn() {} //=>函数

[Symbol]

创建出来的是一个唯一的值
var a = Symbol('陈');
var b = Symbol('陈');
a==b =>false 不相等
const a = Symbol('flag'); =>不可更改且唯一

1.6js代码运行及输出方式

[如何运行]

• 代码运行在浏览器中(浏览器内核来渲染解析)
• 基于node来运行(node是一个基于v8引擎渲染和解析js的工具)

[如何输出结果]

• alert：在浏览器中通过弹框的方式输出(浏览器提示框)
• confirm：和alert用法一致，只不过提示的框中有确定和取消两个按钮，所以它是确认提示框
• prompt：在confirm的基础上增加输入框
• console.log：在浏览器控制台输出日志
• console.dir：比log输出的更加详细一些(尤其是输出对象数据值时)
• console.table：把一个json数据按照表格的方式输出

var num = 12;
alert(num); //=>window.alert
var str='chen';
alert(str);
alert(1+1); //=>'2' 基于alert输出的结果都会转换成字符串：把值(如果是表达式)通过toString这个方法转换为字符串，然后再输出
alert(true); //=>'true'
alert([12,23]); //=>'12,23'
alert({name:'xxx'}); =>'[object Object]'
    
var flag = ("你确定要退出吗");  
if(flag){  
//flag:true 点击的是确定按钮  
}else{  
//flag:false 点击的是取消按钮  
}
	
var num = 12;  
//num.log +tab快捷键  
console.log(num);

1.7基本数据类型解析

1.number数字类型

• NaN：not a number 但是它是数字类型
• isNaN：检测当前值是否不是有效数字，返回true不是有效数字，返回false是有效数字

语法：isNaN([value])
var num=12;
isNaN(num); //=>检测num变量存储的值是否为非有效数字 false
isNaN('13') =>false
isNaN('陈') =>true
isNaN(true) =>false
isNaN(false) =>false
isNaN(null) =>false
isNaN(undefined) =>true
isNaN({xxx:'xxx'}) =>true
isNaN([12,23]) =>true
isNaN([12]) =>false
正则 函数 肯定是true

isNaN检测机制
1.首先验证当前要检测的值是否为数字类型，如果不是，浏览器会默认的把值转换为数字类型
把非数字类型的值转换成数字
- 其它基本类型转换为数字：直接使用Number这个方法转换的
[字符串转数字]
	Number('13') ->13
	Number('13.5') ->13.5 可以识别小数
	Number('13px')->NaN 如果当前字符串中出现任意一个非有效数字字符，结果则为NaN
[布尔转数字]
	Number(true)->1
	Number(false)->0
[其它]
	Number(null) ->0
	Number(undefined) ->NaN
	
- 把引用数据类型转换为数字：先把引用类型调取toString转换为字符串，然后再把字符串调取Number转换为数字
[对象]
    ({}).toString() -> "[object Object]" ->NaN
[数组]
    [12,23].toString() -> '12,23' ->NaN
    [12].toString() -> '12' ->12
[正则]
    /^$/.toString() ->"/^$/"->NaN
[特殊的情况]
    Number('')->0
    [].toString()->''
    =>isNaN([]) :false
    
2.当前检测的值已经是数字类型，是有效数字返回false，不是有效数字返回true(数字类型中只有NaN不是有效数字，其余都是有效数字)

2.parseInt&parseFloat

等同于Number,也是为了把其他类型的值转换为数字类型，和Number的区别在于字符串转换分析上
Number：出现任意非有效数字字符，结果就是NaN
praseInt：把一个字符串中的整数部分解析出来，praseFloat是把一个字符串中的小数(浮点数）部分解析出来

parseInt('13.5px') //->13
parseFloat('13.5px') //->13.5
parseInt('width:13.5px') //->NaN
parseInt：从字符串最左边字符开始查找有效数字字符，并且转换为数字，但是一旦遇到一个非有效数字字符，查找结束。

3.NaN的比较

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

思考题：有一个变量num，存储的值不知道，我想检测它否为一个有效数字
if(Number(num) == NaN){
	alert('num不是有效数字');
}
NaN和谁都不相等，条件永远不成立(即使num不是有效数字，转换的结果是NaN 但是NaN!=NaN)
    
正确方法
if(isNaN(num)){
//=>检测是否是有效数字 只有这一种方案
	alert('num不是有效数字');
}

4.布尔类型

只有两个值：true/false

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

• Boolean
• !
• !!

Boolean(1)=>true
Boolean(0)=>false
Boolean(NaN)=>false
     
!'啦啦啦' =>先把其他数据类型转换为布尔类型，然后取反
!0 =>true
!'' =>true
    
!!null =>取两次反，等价于没取反，也就相当于转换为布尔类型了

规律：在JS中只有“0、NaN、空字符串、null、undefined”这五个值转换为boolean类型为false，其余转换都为true

5.null && undefined

都代表空
null：空对象指针
undefined：未定义

null：一般都是人为手动的先赋值为null，后面的程序会再次给它赋值

var num =null; //->null是手动赋值的，后面会对num变量的值进行修改
num=12;

undefined：一般都不是人为设置的，大部分都是浏览器自主为空(后面可以赋值也可以不赋值)

var num; //->此时变量的值，浏览器给分配的就是undefined
后面可以赋值 也可以不赋值

1.8引用数据类型

1.Object对象数据类型

普通对象

• 由大括号包裹起来的
• 由0到多组属性名和属性值(键值对)组成

属性是用来描述当前对象特征的，属性名是当前具备这个特征，属性值是对这个特征的描述(属性名称为键[key]，属性值称为值[value])，一组属性名和属性值称为一组键值对

 var obj = {
	 name:'陈',
	 age:9
};
对象的操作：对键值对的增删改查
[获取对象] 对象.属性名 / 对象[属性]
obj.name
obj['name'] 一般来说对象的属性名都是字符串格式(属性值不固定，任何格式都可以)
    
[增加/修改对象]
js对象中属性名是不允许重复的，是唯一的
obj.name='陈'; =>原有对象中存在name属性，此处属于修改属性值
obj.sex='男'; =>原有对象中不存在sex属性，此处相当于给当前对象增加一个属性sex
obj['age']=28;
    
[删除对象]
彻底删除：对象中不存在这个属性了
delete obj['age']; 
假删除：并没有移除这个属性，只是让当前属性的值为空
obj.sex=null;

----
在获取属性值的时候，如果当前对象有这个属性名，则可以正常获取到值（哪怕是null），但是如果没有这个属性名，则获取的结果是undefined
obj['friends'] =>undefined

2.关于对象的细节知识

var obj={
	name: '陈',
	age: 9
}
obj.name =>陈 获取name属性值
obj['name'] =>陈 获取name属性值
obj[name] =>undefined 此处的name代表的是一个变量，它代表的是本身存储的值，即obj['陈'] =>没有这个属性 属性值就是undefined

'name’与name的区别
'name’是一个字符串值，他代表本身
name是一个变量，它代表的是本身存储的这个值

3.数组也是对象

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

var obj = {
	name: '陈',
	0: 100
};
obj[0] =>100
obj['0'] =>100
obj.0 => Uncaught SyntaxError: Unexpected number

当我们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转换为字符串(toString)，然后在进行存储

obj[{}]=600; =>先把({}).toString()后的结果作为对象的属性名存储起来，obj['[object Object]']=600
obj[{xxx:'xxx'}] =>600

数组对象（对象由键值对组成）

var ary = [12,23]; =>12 23都是属性值，观察结果属性名是数字(即为下标索引)
ary[0]
ary['0']
ary.0 = >报错
ary['age']=10 =>age:10