前端笔记01
常用的浏览器
- webkit内核（v8引擎）
- Safari
- Opera >V14
- 国产浏览器
- 手机浏览器
- Gecko
- 火狐
- Presto
- Opera <V14
- Trident
- IE
- IE EDGE开始采用双内核（包含 chrome迷你）
谷歌浏览器的控制台(F12/Fn+F12)
- Elements：查看结构样式，可以修改这些内容
- Console： 查看输出结果和报错信息，是JS调试的利器
- Sources： 查看项目源码
- Network： 查看当前网站所有资源的请求信息（包括和服务器传输的HTTP报文信息）、加载时间等（根据加载时间进行项目优化）
- Application：查看当前网站的数据存储和资源文件（可以导图）
Frames里面有网站所用到的所有图片，Open image in new tab即可copy
JS做客户端语言
按照相关的JS语法，去操作页面中的元素，有时还要操作浏览器里面的一些功能
- ECMAScript3/5/6…： JS的语法规范（变量、数据类型、操作语句等等）
- DOM（document object model）：文档对象模型，提供一些JS的属性和方法，用来操作页面中的DOM元素
- BOM(browser object model) ： 浏览器对象模型，提供一些JS的属性和方法，用来操作浏览器的BOM元素
JS中的变量 variable
变量：可变的量，在编程语言中，变量其实就是一个名字，用来存储和代表不同值的东西
//ES3
var a = 12;
console.log(a); //=>输出的是a代表的值12
//ES6
let b = 100;
b = 200;
const c = 1000; //可以理解为常量
//创建函数相当于在创建变量
function fn(){}
//创建类也相当于在创建变量
class A{}
//ES6的模块导入也可以创建变量
import B from './B.js'；
//Symbol创建唯一值
let a = Symbol(100);
let b = Symbol(100);
JS中的命名规范
- 严格区分大小写
- 使用数字、字母、下划线、$，数字不能作为开头
let $box; //一般用JQ获取的以$开头
let _box; //一般公共变量都是_开头
let 1box; //不可以
- 使用驼峰命名法：首字母小写，其余每个有意义的单词首字母都要大写（命名尽可能语义化明显，使用英文单词）
let studentInformation；
let studentInfo;
//常用缩写：add/insert/create/new（新增）、update（修改）、delete/del/remove/rm（删除）、sel/select/query/get（查询）、info(信息)...
//不正确的写法
let xueshengInfo;
let xueshengxinxi;
let xsxx;
- 不能使用关键字和保留字（未来可能会成为关键字的叫保留字）
var let const function
//=>代码强迫症（代码洁癖）：良好的编程习惯、极客精神
JS中常用的数据类型
- 基本数据类型
- 数字number
常用数字和NaN - 字符串string
所有用单引号、双引号、反引号包起来的都是字符串 - 布尔boolean
true/false - 空对象指针null
- 未定义undefined
- 数字number
- 引用数据类型
- 对象数据类型object
- {} 普通对象
- [] 数组对象
- /1?(\d|([1-9]\d+))(.\d+)?$/ 正则对象
- Math数学函数对象
- 日期对象
- …
- 函数数据类型 function
- 对象数据类型object
Number数字数据类型详解
NaN
not a number : 不是一个数，但它隶属于数字类型
NaN和任何值(包括自己)都不相等：NaN！=NaN,所以我们不能用相等的方式判断是否为有效数字
isNaN
检测一个值是否为有效数字，如果不是返回True,反之是有效数字返回False
在使用isNaN进行检测的时候，首先会验证检测的值是否为数字类型，如果不是，先基于Number（）这个方法，把值转换为数字类型，然后再检测
把其他类型值转换为数字类型
-
Number([val]) 把字符串转换为数字，只要字符串内包含任意一个非有效数字字符(第一个点号除外)，结果都是NaN，注意空字符串会变为0。
-
把引用数据类型转换为数字，是先把他基于toString方法转换为字符串，然后再转换为数字
-
parseInt/parseFloat([val],[进制]):从左到右依次查找有效数字字符，直到遇到非有效数字字符，停止查找（不管后面是否还有数字，都不找了），把找到的当做数字返回。
-
==进行比较的时候 =>‘10’ == 10 //true
String字符串数据类型详解
所有用单引号、双引号、反应包起来的都是字符串
把其他数据类型转换为字符串类型
[val].toSting()和字符串拼接
null和undefined是禁止直接toString的，但结果都是’null’/‘undefined’
普通对象.toSting()的结果是"[object Object]" =>?
=>Object.prototype.toSting方法不是转换为字符串的，而是用来检测数据类型的
四则运算中，除加法之外，其余都是数学计算，只有加法可能存在字符串拼接
console.log(‘10’+10) ; //1010 console.log(‘10’ - 10);//0
console.log(‘10px’ - 10); //NaN
boolean布尔数据类型
只有两个值 true/false
把其他类型值转换为布尔类型
只有 0、NaN、’’、null、undefined 五个值转换为FALSE，其余都转换为TRUE（无任何特殊情况）
!:取反（先转为布尔，然后取反）console.log(!1); //false
!!:相当于boolean console.log(!!1); //true
null / undefined
null和undefined都代表的是没有
- null:意料之中（一般都开始不知道值，我们手动先设置为null，后期在给予复制操作）
let num = null;//=> let num = 0;
一般最好用null作为初始的控制，因为零不是控制，他在栈内存中有自己的存储空间（占了位置）
- undefined：意料之外（不是我能决定的）
let num; //=>创建一个变量没有赋值，默认值是undefined
object对象数据类型-普通对象
{[key]:[value]，…} 任何一个对象都是有零到多组键值对（属性名：属性值）组成的（并且属性名不能重复）
数组是特殊的对象数据类型
数据类型的区别（堆栈底层机制）
浏览器想要执行JS代码：1.从电脑内存中分配出一块内存，用来执行代码（栈内存=>Stack）2.分配一个主线程用来自上而下执行JS代码。
栈内存分为变量存储空间和值存储空间
对于基本数据类型(按值操作)，创建变量a，存放到变量存储空间中；再创建一个值12并存放到值存储空间中；=为赋值，让a和12相互关联。
对于引用数据类型(按地址操作)，先在内存中分配出一块新内存，用来粗糙你出引用类型值（堆内存=>heap），内存有一个16进制地址；其次把对象中的键值对一次存放到堆内存中；最后把堆内存地址和变量关联起来。
JS中的数据类型检测
- typeof[val]:用来检测数据类型的运算符
- instanceof：用来检测当前实例是否率属于某个类
- constructor：基于构造函数检测数据类型（也是基于类的方法）
- Object.prototype.toString.call():检测数据类型的最好办法
基于typeof检测出来的结果
1.首先是一个字符串
2.字符串中包含对应的类型
typeof的局限性
1. typeof null=>"object" 但null并不是对象
2.基于typeof无法细分出当前值是普通对象还是数组对象等，因为只要是对象数据类型，返回的结果都是"object"
-
+- ↩︎