前端深度学习笔记最全
本站点无更新 最全内容链接：https://www.yuque.com/liyang-qjg8h/ogb65t
一、JS发展历史、ECMA简介、变量、值
1、JavaScript 发展史
1.1、 主流浏览器(⭐)
5大主流浏览器：1、chrome 2、IE 3、safari 4、firefox 5、opera
对应内核： 1、trident 2、 webkit blink 3、 webkit 4、gecko 5、 presto
1.2 浏览器历史
1990年，蒂姆 伯纳斯 李 超文本分享资讯的人，开发了浏览器：world wide web ，后移植到C，最后更名为 libwww/nexus，真正意义上的浏览器 libwww/nexus：允许别人浏览他人编写的网站；1993年， 美国伊利诺大学 NCSA组织中的 马克.安德森 开发了 MOSIAC 浏览器，可以显示图片，MOSIAC: 真正意义上的图形化浏览器。1994年，马克.安德森 和 吉姆.克拉克 (硅图SGI公司成员) 成立了公司：MOSIAC communication corporation 马赛克交流公司， MOSIAC 商标属于 伊利诺大学，在马克.安德森离开后，被转让给了 spy glass 公司，所以更名为 Netscape communication corporation，网景公司在 MOSIAC 的基础上开发了 netscape navigator浏览器，流行了将近十年->2003。1996年第一件大事，微软公司收购了 spy glass，通过 MOSIAC 开发了 IE internet exploror 1.0，发布了 IE3，出现了第一个脚本语言：JScript，可以让用户在网页上进行动态的交互。1996年第二件大事，网景公司 Brendan eich 在 NETSCAPE NAVIGATOR 开发出了 livescript(JavaScript前身)。1996年第三件大事，JAVA 有知名度了，网景 livescript 不温不火，和 SUN 公司商量，合伙推广和宣传产品，livescript 更名为 javascript。2001年， IE6诞生，出现 JS 引擎，IE6 将渲染引擎中解析 Javascript 的这一部分剥离出来，形成了引擎。2003年，mozilla 公司的 firefox 是根据 netscape navigator 改的。2008年，google 基于 WEBKIT BLINK 内核 + GEARS功能(创造了离线上网的功能) 开发了 chrome ， chrome -> V8引擎(JS 引擎)，V8 引擎的优点：a. 直接翻译机器码，b. 独立于浏览器运行，Node.js 也是一个基于 Chrome V8 引擎能够独立运行的 JavaScript 环境。2009年，甲骨文oracle 收购了 SUN 公司（确认一下时间），JS的所有权给甲骨文。
1.3 ECMA简介
1、全称：European Computer Manufactures Association 欧洲计算机制造联合会
2、功能：评估、开发、认可 电信/计算机 标准
3、ECMA - 262 脚本语言的规范 ECMAScript
4、规范化脚本语言
为了让最初的JavaScript与最初的JScript能遵循同一套标准发展而诞生的ECMAScript，正好排到了作为Ecma的262号标准而已，所以得到ECMA-262编号
1.4 编程语言
1、编程语言分为编译型和解释型
2、编程语言的编译过程：
a、编译型：源码 通过 编译器，到机器语言，组成可执行文件（跨平台性不好，更适合复杂的、逻辑性较强的程序，这样运算速度会更快一些，更有优势）；
b、解释型：通过解释器，解释一行就执行一行（不需要根据不同的系统平台进行移植，只要系统里有相应的解释器就一定能够执行）
3、要素：变量、数据结构、函数、运算能力
1.5 脚本语言
脚本语言通过 脚本引擎 的 解释器 才能正常运行
- javascript: 客户端脚本，js 的解释器在浏览器JS引擎（浏览器）上，Jscript 微软，只能在IE上运行，Vbscript 微软
- php: 服务器端脚本，解释器在服务端上，所以页面看不到解释的过程
2、JavaScript基础
2.1、JS三大块
1、ECMAscript：
- 语法，
- 变量，
- 关键字，
- 保留字，
- 值，
- 原始类型，
- 引用类型运算，
- 对象，
- 继承，
- 函数
2、DOM (document object model)：
是 W3C 的规范
功能：操作 HTML 文档，获取、添加、删除、修改 HTML 元素
3、BOM (browser object model)
没有规范
功能：操作浏览器，滚动条、窗口的宽高、事件、注册/移除事件、事件冒泡捕获、键盘、鼠标的事件、正则
2.2、单线程、多线程
1、单线程：这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。
问：JS的引擎是单线程,为什么可以多个程序一起运行？
答：单线程可以通过轮转时间片进行模拟多线程
模拟过程：
- 任务1 任务2
- 切分任务1 任务2
- 随机排列这些任务片段，组成队列
- 按照这个队列顺序将任务片段送进JS进程
- JS 线程执行一个又一个的任务片段
2、多线程：多个程序可以同时运行
2.3、JavaScript代码引用
1、引用外部文件，填相对路径（更引用推荐外部文件的方式）
<script type="text/javascript" src="js/index.js"></script>
2、引用内部文件
<script type="text/javascript">document.write("inner")</script>
注：type="text/javascript"写错则不执行
但有时会故意写错，将其作为模板，如：
<!-- 这里作为模板，不会执行 -->
<script type="text/html" id="name">
<div>{{name}}</div>
</script>
<script type="text/javascript">
<!-- 在这里对模板中的数据进行处理 -->
var nameDiv = document.querySelector('#name').innerHTML;
</script>
2.4、JavaScript变量
1、 变量
是容器，
功能： 存储数据
作用：能取出进行后续使用
2、声明变量：
var -> variable
var a; // 变量声明：向系统申请一个存储空间，这个存储空间命名为 a
a = 3; // 变量赋值：为变量分配一个存储空间
var a = 3; // 变量声明并赋值
3、单一声明方式
一个 var声明多个变量
var x = 1,
y;
4、重复赋值
后面的赋值覆盖前面的
5、命名规范
a. 不能以数字开头，可以用 字母 _ $ 开头
b. 变量里可以包含 字母 _ $ 数字
c. 关键字、保留字不可以使用
d. 语义化、结构化，要有意义
e. 小驼峰命名法
f. 不要用拼音和拼音缩写
g. 约定俗成的缩写可以用
6、优先级
运算 > 赋
2.5、JavaScript的值
1、原始值（基本数据类型）
(ES5)5种原始值：Number StringBoolean undefined null
js是根据值来判断数据类型的 动态语言 -> 基本上都是 脚本语言-> 解释型语言->弱类型语言（弱化数据类型，自动识别） 静态语言->
编译型语言 -> 强类型语言(强调数据类型)
1、Number
var a = 12;
var b = 13.14;
2、String
var a = '文字'
3、Boolean: true false
计算机中 非真即假 非假即真
var a = true;
4、undefined
var a; // a: undefined
5、null
用到的地方：空值、初始化组件、函数 、销毁函数、占位
2、引用值（引用数据类型）
object array funciton date Reg
Array例子
var arr = [1, 2, 3, 4];
arr.push(5);
arr // [1, 2,3, 4, 5]
2.6、栈和堆
var a = 3;
var b = a; //b=3
a = 1;
1、 原始值都存在栈内存中，先进后出，数据是永久保存，不可修改的
原始值 把 a 赋值给 b 时，是拷贝了一份 a 的值 给 b，a 重新赋值的时候，新开辟了一个空间 a，赋值为1，原有的a=3，则释放a命名空间，但值仍留在内存中
var arr1 = [1,2,3,4];
var arr2 = arr1; //arr2 = [1,2,3,4]
arr1.push(5); //arr1=[1,2,3,4,5] arr2=[1,2,3,4,5]
arr1 = [1,2];//arr1=[1,2] arr2=[1,2,3,4,5]
2、 引用值的指针存在栈内存中，对应的栈内存的值 存对应的堆内存的地址，引用值的值存在堆内存中arr1 赋值给 arr2 的时候，实际上是arr2指向的是arr1指向的堆的地址的，所以只要arr1改变，arr2值也改变,重新赋值的时候，是新开辟了一个栈内存空间，指向新的堆内存地址，arr2还是对应之前的地址。
二、语法、规范、错误、运算符、判断分支、注释
1、 基本语法与规范
1、语句结束用 ;
js 引擎是以 ; 分割语句的，如果没有加，会自动给你加上
2、符号的两边都加空格
2、错误
2.1、语法错误
语法错误，则一个代码块的内容都不会执行
console.log(1);
console.log(2)； // 这里分号写成了中文的分号，语法错误，则这一整个代码块的内容都不会执行
console.log(3);
2.1、引用错误
console.log(1);
console.log(a);
console.log(2);
// 输出 1
// 然后 报 a 的引用错误，之后的不执行
问题
问：多个脚本块中其中一个脚本块中报错了，其它的是否能正常执行？
答：脚本块与脚本块之间错误互不影响
//两个内嵌script标签的代码块
3、运算符
3.1 + 加法
1、数学运算
2、字符串拼接
任何数据类型的值 + 字符串 都是字符串
var a = 1,
b = 2,
c;
c = a + b; // 数学运算
c = 1 + "str"; // 字符串拼接，任何数据类型的值 + 字符串 都是字符串
c = 'str' + undefined; // strundefined
c = 1 + 1 + 'str' + (1 + 1) ; //2str2
3.2 / 除法
NaN -> 数字类型
Infinity -> 数字类型
var c;
c = 0 / 0; // NaN -> Not a Number 非数
c = 'a' / 'b'; // NaN
c = 1 / NaN; // NaN
c = 1 / 0; // Infinity 正无穷
c = -1 / 0; // -Infinity 负无穷
3.3 %取模取余
var c;
c = 5 % 3; // 2
c = 0 % 6; // 0
c = 4 % 6;// 4
交换值的问题
问：如何交换 a, b 的值
var a = 1,
b = 2;
答：
方法一
var c = a;
a = b;
b = c;
方法二
a = a + b; // a = 3
b = a - b; // 3 - 2 = 1
a = a - b; // 3 - 1 = 2
方法三
[a, b] = [b, a]
3.4 ++ - -
var a = 1;
console.log(a++); // 1;
console.log(a); // 2
var b = 1;
console.log(++b); // 2
题目
var a = 5,
b;
// b = a++ + 1;
// console.log(b, a); // 6 6
// b = ++a + 1;
// console.log(b, a); // 7 6
// b = a-- + --a;
// console.log(b, a); // 8 3
b = --a + --a;
console.log(b, a); // 7 3
b = --a + a++;
console.log(b, a); // 8 5
3.5 比较运算符
> < >= <= == === != !==
1、number 遇上 string, string 先转换为 number 再比较
var bool = 1 > '2';
console.log(bool); // false
2、字符串对比，比较字符串相对应的ASCII码（字符相对应的十进制代码），
多个字符的，从左到右依次对比，直到比较出码的大小为止（4>1 . 也要进行比较 转换成ASCII码）
var a = '4.5' > '11'; // true
3、相等是不看数据类型，全等需要看数据类型是否相等
var b = 1 == "1"; // true
var c = 1 === "1"; // false
4、!=， NaN 与包括自己在内的任何东西都不相等
var d = 1 !== 1; // false
// NaN 与包括自己在内的任何东西都不相等
var e = NaN == NaN; // false
4、判断分支
4.1 if
1、在条件中
&&就是并且，&&两边都必须满足条件即可
||就是或者，||两边有一边满足条件即可
2、 条件：互斥性 -> else if
// 查询成绩等级
var score = 63;
if(score >= 90 && score <= 100) {
console.log('A')
}
else if(score >= 80 && score < 90) {
console.log('B')
}
else if(score >= 70 && score < 80) {
console.log('C')
}
else if(score >= 60 && score < 70) {
console.log('D')
}
else if(score < 60 && score >= 0) {
console.log('不合格')
}
else {
console.log('您的成绩出现异常');
}
4.2 switch
格式：
switch(变量) {
case 值：
语句;
default:
语句;
}
例子：
var city = window.prompt('请输入您所在的地区'); //window.prompt 接收一个包含input弹出框的输入值
console.log(city);
switch(city) {
case '北京':
console.log('15k');
break;
case '上海':
console.log('13k');
break;
default:
console.log('9k');
break;
}
4.3 二者比较
定值用 switch 比较好
范围用 if 比较好
5、 逻辑运算
与&& 或|| 非!
1、undefined, null, NaN, “”, 0, false 为假
除上述以外全部都是真
2、&& 遇到真就往后走，遇到假就返回，或走到最后就返回当前最后一个的值
&& 两边都为真，值才为真
|| 遇到假就往后走，遇到真就返回，或走到最后就返回当前值
|| 两边都为假，值才为假，只要有一个为真，则为真
// 遇到真就往后走，遇到假就返回，或走到最后就返回当前最后一个的值
var a = 1 && 2;
console.log(a); // 2
var c = 1 && 2 && undefined && 10; // undefined
// && 两边都为真，值才为真
1 && 1 // 1 真
0 && 1 // 1 假
1 && 0 // 1 假
0 && 0 // 0 假
// || 遇到假就往后走，遇到真就返回，或走到最后就返回当前值
var b = 1 || 2;
console.log(b); // 1;
var d = 0 || null || 1 || 0; // 1
1 || 1 // 1 真
0 || 1 // 1 真
1 || 0 // 1 真
0 || 0 // 0 假
3、 ！
// 1 true !1 false
var a = !1; // false
6、注释
1、行注释
// 行注释
2、块注释
/*
* 块注释
*/
7、题
描述：网页弹出对话框提示“请填写星期几”，用户输入中文星期几，然后继续弹出“选择上午或下午”，用户进行填写，点击确定之后，页面显示对应的星期几上午/下午的安排：计划
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript">
var day = window.prompt("请填写星期几");
var time = window.prompt("选择上午或下午");
var plan;
if (time === '上午') {
switch (day) {
case '星期一':
plan = '学习语文'
break;
case '星期二':
plan = '跑步'
break;
case '星期三':
plan = '阅读'
break;
case '星期四':
plan = '运动'
break;
case '星期五':
plan = '学习英语'
break;
case '星期六':
plan = '打扫房间'
break;
case '星期日':
plan = '打羽毛球'
break;
default:
plan = '输入的值不正确'
break;
}
} else if (time === '下午') {
switch (day) {
case '星期一':
plan = '学习数学'
break;
case '星期二':
plan = '游泳'
break;
case '星期三':
plan = '看电影'
break;
case '星期四':
plan = '看话剧'
break;
case '星期五':
plan = '学习物理'
break;
case '星期六':
plan = '逛街'
break;
case '星期日':
plan = '总结反思'
break;
default:
plan = '输入的值不正确'
break;
}
} else {
plan = '输入的值不正确'
}
document.write(`${day}${time}的安排：${plan}`)
</script>
<body>
</body>
</html>
三、循环、引用值、显示隐式类型转换
1、循环
1.1、for循环
for() {
执行语句
}
// 例
for(var i = 0; i < 10; i++) {
console.log(i);
}
//步骤
1. 声明变量 i = 0
2.
if(i < 10) {
console.log(i);
}
3. i++
2.
if(i < 10) { // 不满足条件，停止循环
console.log(i);
}
3. i++
1.2、while循环
// for 循环可以转换为 while 循环
while(i < 10) {
console.log(i);
i++;
}
1.3、do while循环
// do while 无论条件是否成立，都会先执行一次
do {
console.log('开始循环');
i++;
} while(i < 10);
// 无论条件是否成立，都会先执行一次
do {
console.log('开始循环'); // 这里会执行一次
i++;
} while(0);
1.4、死循环
// 死循环
while(1) {
console.log(i);
i++;
}
for(; 1;) {
console.log(i);
i++;
}
1.5、循环练习题
1.5.1、让如下代码只输出1-10，不可以用return/exit(0)/break
//题：
var i = 1;
for(; i;) {
console.log(i);
i++;
}
//答
var i = 1;
for (; i; ){
console.log(i);
i++;
// 当i === 11时，把i置为false
if (i === 11) {
i = 0
}
}
1.5.2、从0开始做加法，加到什么时候总和是小于100的
var sum = 0;
var i;
for ( i = 0; i < 100; i++) {
if (sum >= 100) {
break;//跳出循环
}
sum += i;
}
console.log(i, sum);
1.5.3、100以内的数跳过可以被7整除或个位数是7的数
for (let i = 1; i < 100; i++) {
if (i % 7 === 0 || i%10 === 7) {
continue;//符合条件跳过档次循环
}
console.log(i);
}
1.5.4、0-9求和
var sum = 0;
for (let i = 0; i < 10; i++) {
sum += i;
}
1.5.5、可以被4、5、6整除的数
for (let i = 0; i < 100; i++) {
if (i % 4 === 0 || i % 5 === 0 || i % 6 ===0){
console.log(i);
}
}
1.5.6、打印0-100的数，()里只能有一句，不能写比较，{} 里不能出现 i++ i–
var i = 100;
for ( ; i--;) {
console.log(i);
}
1.5.7、打印10的5次方 （n次方）
var n = 5;
var num = 1;
for (let i = 0; i < n; i++) {
num *= 10
}
1.5.8、10的阶乘 （n的阶乘）
var sum = 1;
var n = 10;
for(var i = n;i > 0; i--) {
sum *= i
}
console.log(sum)
1.5.9、交换789的位置为987
var num = 789;
var a = num % 10;
var b = (num - a) % 100 / 10;
var c = (num - a - b * 10) /100;
console.log('' + a + b + c);
1.5.10 打印三个数中最大的数
var a = 1,
b = 2,
c = 3;
if(a > b) {
if(a > c) {
console.log(a);
} else {
console.log(c);
}
} else {
if(b > c) {
console.log(b);
} else {
console.log(c);
}
}
1.5.11 打印100以内的质数
质数（又称素数）：仅仅能被1和自己整除的数；
var c = 0;
for(var i = 2; i < 100; i++) {
for(var j = 1; j <= i; j++) {
if(i % j === 0) {
c++;
}
}
if(c === 2) {
console.log(i);
}
c = 0;
}
2、引用值
array object function date RegExp
2.1、array 数组
var arr = [1, 2, 3, 4];
// 一维数组以索引的方式取值，从0开始
console.log(arr[0])
// 赋值
arr[3] = null;
// 取长度
console.log(arr.length);
// 遍历，取每一位
for(var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
2.2、object 对象
var person = {
// 属性名/键名: 属性值/键值
name: 'tom',
age: 18,
height: 100,
weight: 140
}
// 取值
console.log(person.name);
// 赋值
person.age = 20;
3、typeof
3.1、使用
可以识别的类型：number string boolean object undefined function
object = 引用类型 object/array
console.log(typeof(123)); // number;
typeof(null); // object
typeof(1 - 1); // number;
typeof(1 - '1'); // number;
typeof('1' - '1'); // number;
typeof(typeof(1)); // string
typeof Date(); // string 返回的是函数执行的结果
typeof new Date(); // object new 的方式一定返回一个对象 ⭐
// Date() 和 new Date() 执行后的结果值是一样的，但是类型时不一样的
typeof Date; // function
3.2、问题
3.2.1、为什么typeof(null) 是 object
问：为什么typeof(null) 是 object
答：null 刚开始是为了指定空对象，实际上是一个指空对象的指针，也是空对象的占位符，所以最早开始将其作为引用类型，后来有人提议将其类型改为null，但被ECMA拒绝了，属于历史遗留问题
JavaScript中，不同的对象都是使用二进制存储的，如果二进制前三位都是0的话，系统会判断为是Object类型，而null的二进制全是0，自然也就判断为Object。
3.2.2 一个未被定义的变量的类型是什么？
console.log(a); // a is not defined
typeof a; // undefined
typeof(typeof(a)) // string ⭐任何的typeof出来在进行typeof都是string
4、类型转换
4.1、显示类型转换
4.1.1、Number
Number() 是函数调用，做类型转换的工作
new Number() 是实例化一个对象，把值变为一个真正的对象
var a = '123';
console.log(typeof(Number(a)) + '-' + Number(a))); // number - 123
console.log(typeof(Number('true')) + '-' + Number('true')); // number - NaN
typeof(typeof(Number('false')) + '-' + Number('false')); // number - NaN
typeof(Number(true)); // number - 1
typeof(Number(false)); // number - 0
typeof(Number(null)); // number - 0 ⭐
typeof(Number(undefined)) // number - NaN
Number(Infinity); // Infinity -> 是number
Number(''); // 0
Number(' '); // 0
// 对象转原始值
var obj = {
toString(){
return 1;
},
valueOf(){
return 2
}
}
// Number 是为了求值，所以先 valueOf
Number(obj); // 2 -> 先调用valueOf方法，返回的是一个原始值，则通过Number包装类进行判断
var obj1 = {
toString(){
return 1;
},
valueOf(){
return {}
}
}
// 如果valueOf返回的是引用值，则去toString，如果toString返回的是一个原始值，则通过Number包装类，
// toString返回不是原始值则报错
Number(obj1); // 1 -> 自身的toString方法
var obj2 = {
valueOf(){
return {}
}
}
Number(obj2); // NaN -> 调用Object原型上的toString方法，得到'[object, Object]'，再通过Number包装之后变为NaN
// -------------
Array.prototype.toString.call([1,2,3]); // 1,2,3 -> 等效于 [].toString.call([1,2,3)
console.log(Number([1, 2])); // NaN -> 调用数组上的toString -> 1,2 -> Number('1,2') -> NaN
console.log(Number([10])); // 10
console.log(Number({})); // NaN
// Number做进制转换
Number(011) // 八进制
Number(0x11) // 十六进制
Number('123'); // 123
Number(' 123'); // 123
Number('.123'); // 0.123
Number('0xa'); // 10
Number('abc'); // NaN
Number('123abc'); // NaN
Number('1 2 3');// NaN
4.1.2、 parseInt
将字符串转为数字
解决了Number识别不完全的问题，添加了字符串截断，第二个参数
功能：解析一个字符串(string)并返回指定基数(radix)的十进制整数
只管转换为整型
特点： 从第一个数开始往后识别，如果第一个数不是数字则直接返回NaN
否则，往后识别，不是数字了则停止识别，输出前面的数字部分
1. 使用
parseInt('123abc') // 123
typeof(parseInt('123')); // number - 123
typeof(parseInt(true)); // number - NaN
typeof(parseInt(null)); // number - NaN
typeof(parseInt(undefined)); // number - NaN
typeof(parseInt(NaN)); // number - NaN
typeof(parseInt('3.14')); // number - 3
typeof(parseInt('3.99')); // number - 3
2. 参数
parseInt(string, radix);
- string: 如果不是字符串，通过toString()转换(开头的空白忽略)
- radix: 基数/进制数，取值范围 2-36之间的整数，要解析成整数的字符串是多少进制 ，然后把这个进制数转换成十进制整数
- 返回值：
a. 能解析的返回整数
b. 返回NaN- radix 小于2 或者大于 36
- 未填写参数
- 字符串第一个字符不能被正常转换数字的情况
console.log(parseInt('10', 2)); // 2
// '10' 被当做 2进制数，然后转换成10进制的整数，返回出来
// 以十六进制为基础转换为十进制
console.log(parseInt('10', 16)); // 16
parseInt('abc123'); // NaN
// 从第一个数开始往后识别，如果第一个数不是数字则直接返回NaN
// 否则，往后识别，不是数字了则停止识别，输出前面的数字部分
parseInt('1abc23'); // 1
parseInt('123', 5); // 38
// 把 ‘123’ 作为 5进制数 转为十进制
// 公式：当前这一位数字 * 进制数^(数字位数-1) + 数字 * 进制数^(数字位数-2) + 数字 * 进制数^(数字位数-3)
// 1 * 5^2 + 2 * 5^1 + 3 * 5^0
疑问：第二个参数输入0或1会出现什么情况❓
var a = '10';
parseInt(a, 0); // 10
parseInt(a); // 10
parseInt(a, 10); // 10
parseInt(a, null); // 10
parseInt(a, undefined); // 10
parseInt(a, 1); // NaN
parseInt(a, 37); // NaN
3. 流程
- 可能会转字符串 toString
- 对字符串进行整数解析
- 返回整数或NaN
4. 问： parseInt 的字符串不符合 radix 基数的数字要求会如何？
答：从不符合该进制要求的数字开始，忽略后续所有的字符
parseInt('123', 2); // 1
5. 支持 ±；去掉开头的空格
- 去掉符号
- 对数字进行解析
parseInt('-1 13', 2); // -1
6. radix 默认值
- 0x、0X 开头 -> 16进制
- 0开头 -> 8进制、10进制(ES5 规范 10进制) -> 都要写清楚 radix
- 其他开头 -> 10进制
7. parseInt -> NaN
如果 isNaN(string) -> true -> NaN，但如果是 ‘1abc’，则不可以通过 isNaN判断
4.1.3 parseFloat
var num = parseFloat('3.1415926');
console.log(num.toFixed(2))//四舍五入保留两位小数 3.14
4.1.4 string
null 、 undefined 没有 toString 方法，调用会报错
1. 使用
typeof(String(123)); //string '123' 包装类
typeof(123 + ''); // string
var str = 3.14;
str.toString(); //'3.14' 原型上的方法
var obj = {
toString(){
return 1;// Number.prototype.toString()
},
valueOf(){
return 2
}
}
String(obj); // 1 -> 优先考虑 toString 方法，有参数决定调用哪里的toString方法
var obj1 = {
toString(){
return [];
},
valueOf(){
return 2
}
}
String(obj1); // 2 toString是引用值，则走valueOf,都是引用值，报错
console.log(String([])); // ''
console.log(String([1,2])); // '1,2'
console.log('' + [1,2]); // '1,2'
console.log(String({})); // '[object Object]'
console.log('' + {}); // '[object Object]'
// ------------------
function test(){
console.log(1);
}
// test 是通过 new Function() 构造出来的
// 都是调用 Function.prototype.toString()
console.log(String(test)); //'function test(){console.log(1)}'
console.log(test.toString()); //'function test({console.log(1)}'
2.参数
str.toString(radix); radix代表基底
var str = '100';
var a = parseInt(str, 2); // 4 以二进制为基础转为十进制数
a.toString(16); // 转换为十六进制
4.1.5 Boolean
虚值(falsey)：通过Boolean转换为false的值
其中 null undefined NaN ‘’ 0 false 都是 false,
其他的都是true
Boolean(1); // true
Boolean(null); // false
Boolean(undefined); // false
Boolean(new Error()) // true
Boolean([]) // true
题目：有多少种方法可以将字符串转为数值类型
Number parseInt parseFloat 正负运算
4.2 隐式类型转换
null 和 undefined 既不大于零，也不小于零，更不等于零
undefined == null
4.2.1 所有转换实例
var a = '123';
a++; // Number(a) 这是js做数学运算（可以理解为除了+号都是转数字，+号是字符串拼接），'123'可以直接转为123
console.log(a); // 124
var b = 'b' + 1; // b1 String(1)
var c = '3' * 2; // 6 */-% -> 将 str 转为 number
// > < >= <= 都会转换为number
var d = '1' > 2; // false Number
var e = 1 > '2'; // false Number
var f = 'a' > 'b'; // 两个字符串比较时转换为 ascii 码比较
var g = 1 == '1'; // true Number
var h = 1 != '2'; // true Number
var j = 1 === '1'; // false 这个不进行隐式转换
var k = NaN == NaN; // false NaN不等于任何东西
var m = 2 > 1 > 3; // false
var n = 2 > 1 == 1; // true
// null 和 undefined 既不大于零，也不小于零，更不等于零
var p1 = undefined > 0; // false
var p2 = undefined < 0; // false
var p3 = undefined == 0; // false
var q1 = null > 0; // false;
var q2 = null < 0; // false;
var q3 = null == 0; // false
var p = undefined == null; // true
var q = undefined === null; // false 因为不是一个数据类型
// 运算符
+ - * / % +a
// 位运算符
& | ^ << >> >>>
// 关系运算符
== !== >= <= > <
// 原始值比较
console.log(undefined == null); // true⭐
console.log(NaN == NaN); // NaN 非数，代表一个类型的值 ⭐
console.log(1 == true); // 其中一个是布尔值，布尔值通过Number()
console.log('1' == true); // 布尔值通过Number()
console.log('1' == 1); // 字符串和数值比较，字符串先通过Number()转换为数值
console.log(undefined == true);//false
console.log(undefined == false);//false 需要通过布尔值转换其才为false值，其本身与false无关
console.log(!!null == false); //true
console.log(!!undefined == false); //true
console.log([1] == 1); // true
console.log([1] == true); // true
console.log([] == false); // true // []做了toString类型转换,转换为'',就为false，因为引用值 在做比较的时候js需要将其转换为原始值
console.log(![]); // false //除undefined等之外都为true，因为[]占一个堆内存，相当于有值， 只不过里面为空
console.log([] == null); // false
console.log([1,2] == NaN); // false NaN不等于NaN ⭐
// 通过Array上的toString 转
// Number([]) -> [].toString -> '' -> Number('') -> 0
// ![] -> false
console.log([] == ![]);
// Number({}) -> {}.toString -> '[object Object]' -> Number('[object Object]') -> NaN
// !{} -> false -> 0
// NaN == 0 -> false
console.log({} == !{}); // false
console.log({} == {}); // false -> 引用值比较地址
4.2.2 正负运算 ±
var num = '123';
console.log(typeof(+ num)); // number 123
console.log(typeof(- num)); // number -123
var num = 'abc';
console.log(typeof(+ num)); // NaN
console.log(typeof(- num)); // NaN
+undefined; // NaN
+null; // 0
4.2.3 isNaN 判断是否为非数
isNaN(NaN); // true
isNaN(123); // false
isNaN('123'); // false
isNaN('a'); // true Number('a')->NaN
isNaN(null); // false Number(null)->0
isNaN(undefined); // true Number(undefined)->NaN
4.2.4 涉及到布尔转换
if;
for(;;)
switch;
while;
|| &&
!;
?:;
5. instanceof
用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
语法：object instanceof constructor
object：某个实例对象
constructor：某个构造函数
var simpleStr = "This is a simple string";
var myString = new String();
var newStr = new String("String created with constructor");
var myDate = new Date();
var myObj = {};
var myNonObj = Object.create(null);
// 返回 false, simpleStr 并不是对象
simpleStr instanceof String;
// 返回 true
myString instanceof String;
// 返回 true
newStr instanceof String;
// 返回 true
myString instanceof Object;
// 返回 true
myObj instanceof Object;
// 返回 true
({}) instanceof Object;
// 返回 false, 一种创建非 Object 实例的对象的方法
myNonObj instanceof Object;
// 返回 false
myString instanceof Date;
// 返回 true
myDate instanceof Date;
// 返回 true
myDate instanceof Object;
// 返回 false
myDate instanceof String;
6. 斐波那契数列
var n = parseInt(window.prompt('N = ?'));
if (n <= 0) {
console.log('输入错误');
} else {
if (n <= 2) {
console.log('结果为1');
} else {
var n1 = 1,
n2 = 1,
n3;
for (let i = 2; i < n; i++) {
n3 = n1 + n2;
n1 = n2;
n2 = n3;
}
console.log('n3 =', n3);
}
}
不断更新中。。。。