Javascript笔记
笔记参考来源狂神说Java视频https://space.bilibili.com/95256449/channel/seriesdetail?sid=393820
0、前端知识体系
想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。
0.1、前端三要素
- HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
- CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
- JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
0.2、结构层（HTML）
太简单，略
0.3、表现层（CSS）
CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：
- 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护； 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。
什么是CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
常用的CSS预处理器有哪些
- SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
- LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。
0.4、行为层（JavaScript）
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。
JavaScript框架
- JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
- React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
- Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
- Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；
UI框架
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
- *BootStrap*：Teitter推出的一个用于前端开发的开源工具包
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架
JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
- WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载
注：以上知识点已将WebApp开发所需技能全部梳理完毕
0.5、三端同一
混合开发（Hybrid App）
主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
- 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）
微信小程序
详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WebUI
1、什么是Javascript
1.1、概述
javaScript是一门世界上最流行的脚本语言 Java，JavaScript 10天 一个合格的后端人员，必须精通JavaScript
1.2、历史
见百度
ECMAScript它可以理解为JavaScript的一个标准 最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持es5代码上！ 开发环境–线上环境，版本不一致
2、快速入门
2.1、引入JavaScript
1、内部标签
<script>
//....
<script>
2、外部引入
hj.js
aert("hello,world");
test.html
<!--外部引入
注意：script必须成对出现
-->
<script src="js/hj.js"></script>
<!--不用显示定义type，也默认就是javaScript-->
<script type="text/javascript"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写Javascript代码-->
<!--<script>
alert("hello,world");
</script>-->
<!--外部引入
注意：script必须成对出现
-->
<script src="js/hj.js"></script>
<!--不用显示定义type，也默认就是javaScript-->
<script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
2.2、基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
// 1. 定义变量 变量类型 变量名 = 变量值
var score = 1 ;
//alert(num)
// 2. 条件控制
if (score > 60 && score < 70){
alert("60~70");
}else if(score > 70 && score < 80){
alert("70~80");
}else{
alert("other")
}
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知：
2.3、数据类型
数值，文本，图形，音频，视频
变量
var a
number
js不区分小树和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符 ！！！重要！
= 1，"1" == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型一样，值一样，结果为true）
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
- NaN === NaN，这个与所有的数值都不相等，包括自己
- 只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.00000001
数组
Java的数组必须是相同类型的对象~，JS中不需要这样
//保证代码的可读性，尽量使用[] var arr = [1,2,3,4,5,'hello',null,true]; //第二种定义方法 new Array(1,2,3,4,5,'hello');
取数字下标：如果越界了，就会 报undefined
undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个属性不需要逗号
// Person person = new Person(1,2,3,4,5); var person = { name:'Tom', age:3, tags:['js','java','web','...'] }
取对象值
person.name > "Tom" person.age > 3
2.4、严格检查格式use strict
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IDEA需要设置支持ES6语法 'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题 必须写在JavaScript的第一行！ 局部变量建议都使用let去定义~ --> <script> 'use strict'; //全局变量 let i=1 //ES6 let </script> </head> <body> </body> </html>
3、数据类型
3.1、字符串
1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符 \
\' \n \t \u4e2d \u##### Unicode字符 \x41 Ascall字符
3、多行字符串编写
//tab 上面 esc下面 var msg = `hello world 你好呀 nihao `
4、模板字符串
//tab 上面 esc下面 let name = 'Tom'; let age = 3; var msg = `你好，${name}`
5、字符串长度
str.length
6、字符串的可变性，不可变
7、大小写转换
//注意，这里是方法，不是属性了student.toUpperCase();student.toLowerCase();
8、student.indexof(‘t’)
9、substring，从0开始
[)student.substring(1)//从第一个字符串截取到最后一个字符串student.substring(1,3)//[1,3)
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6];//通过下标取值和赋值1
1、长度
arr.length
注意：假如给arr.lennth赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，
通过元素获得下标索引
arr.indexOf(2)1
字符串的"1"和数字 1 是不同的
3、slice（）
截取Array的一部分，返回的一个新数组，类似于String中substring
4、push()，pop()尾部
push：压入到尾部pop：弹出尾部的一个元素
5、unshift(),shift() 头部
unshift：压入到头部shift：弹出头部的一个元素12
6、排序sort()
(3)["B","C","A"]arr.sort()(3)["A","B","C"]
7、元素反转reverse()
(3)["A","B","C"]arr.reverse()(3)["C","B","A"]123
8、concat()
注意：concat()并没有修改数组，只是会返回一个新的数组
9、连接符join
打印拼接数组，使用特定的字符串连接
10、多维数组
数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3、对象
若干个键值对
var 对象名 = { 属性名：属性值， 属性名：属性值， 属性名：属性值}//定义了一个person对象，它有四个属性var person = { name:"Tom", age:3, email:"123456798@QQ.com", score:66}
Js中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！ JavaScript中的所有的键都是字符串，值是任意对象！ 1、对象赋值
最低0.47元/天 解锁文章
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
