JavaScript基础
了解
CSS预处理器：CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编程工作，转化成“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用。”
- SASS：基于Ruby，通过服务器处理，功能强大，解析效率高，需要学习Ruby语言
- LESS：基于NodeJS,通过客户端处理，使用简单，功能比SASS简单，解析效率也低于SASS。
JavaScript：弱类型脚步语言，其源代码再发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器有浏览器解释运行。
Native原生JS开发
原生JS开发：根据【ECMAScript】标准的开发方式，简称是ES，特点是所有浏览器都支持。
TypeScript微软的标准
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上这个语言添加了可选的静态类型和基于类的面向对象编程。该语言具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以需要编译成JS后才能被浏览器正确执行。
JavaScript的框架
- jQuery库：简化了DOM操作，缺点：DOM操作太频繁，影响前端性能
- Angular：将后台的MVC模式搬到前端并增加了模块化开发的理念，采用TypeScript语法开发
- React：高性能的JS前端框架，提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效提升前端渲染效率，缺点是使用复杂，需要学习JSX语言
- Vue：一款渐进式JavaScript框架，逐步实现新特性，如实现模块化开发、路由、状态管理等新特性，特点是综合了Angular（模块化）和React（虚拟DOM）的优点
- Axios：前端通信框架,因为Vue的边界明确，为了处理DOM，所以不具备通信能力，此时就需要额外使用一个通信框架与服务器交互，也可以直接选择使用jQuery提供的AJAX通信能力。
JavaScript是一门世界上最流行的脚本语言，ECMscript是JavaScript的一个标准。
引入方式
内部引入
在script标签内写JavaScript代码，script标签可放在head或body里面
效果图：
外部引入
创建JavaScript文件。
在需要引入的html文件中使用script标签中的src属性引用。
基本语法
原生开发用es6语法
定义变量
变量类型 变量名(严格区分大小写)=变量值；
变量名：不能以数字开头
控制台调试
利用控制台调试,在控制台打印变量，一般常用console.log()
断点调试
严格检查模式strict
默认检查时：全局变量
i=1; //正常显示
局部变量用let
let i=1;
使用ES6语法，使用严格检查模式,预防JavaScript的随意性导致产生的一些问题
‘use strict’ //必须写在script的第一行
在严格检查模式下，该定义i出错，且无法打印
数据类型
数值、文本、图形、音频、视频等
js不区分小数和整数，Number
number
123//整数
123.4//浮点数
1.232e3//科学计数法
-23//负数
NaN//not a number
Infinity//无限大
字符串
1.正常字符串使用单引号或双引号包裹
转义字符\
‘abc’ //直接定义
"abc"
转义字符
\' //字符串
\n //换行
\t //Tab
\u4e2d //中
\x41 //ASCII字符中的A
2.多行字符串编写
利用`(Tab键上方)包裹的内容可以实现多行字符串编写
var str=`Hello,
world!
`
3.模板字符串
用${变量名}将变量拼接在一起，如下
let name="Serenity";
let age=18;
let msg=`你好，${name}`
4.字符串长度
计算字符串长度：变量名.length
let student="student";
console.log(student.length) //7
5.字符串的不可变性
6.大小写转换
小写转换为大写：参数名.toUpperCase()
大写转换为小写：参数名.toLowerCase()
7.获取指定的下标
参数名.indexOf()方法
在student内，d的下标是3
8.substring()
substring(下标1，下标2) //包含前面，不包含后面
student.substring(1); //从下标为1的字符串开始截取到最后一个字符串
student.substring(1,3) //从下标为1的字符开始截取，直到第2个
布尔值
true、false
console.log(2>1)
true
console.log(2<1)
false
逻辑运算
&&两个都为真
|| 一个为真，结果为真
！ 真变为假，假变为真
比较运算符
= 赋值
== 等于（类型不一样，值为一样，也会为true）
=== 绝对等于（类型一样，值一样，才能为true）
NaN===NaN结果为false，因为NaN与所有的数值都不相等
判断NaN,只能通过isNaN来判断
isNaN(NaN)
true
浮点数问题
尽量避免使用浮点数进行计算，存在精度问题。
可使用Math进行计算
console.log(Math.abs((1/3)===(1-2/3))<0.00000001) //控制台结结果为true
null和undefined
null //空
undefined //未定义
数组
Java数组中是一系列相同类型的对象，JS中不需要,JS中数组可以包含任意的数据类型，如下：
var arr=[1,2,3,4,5,'hello',null,true]；
或
new Array(1,5,6,8,9,'hello');
取数组下标，如果越界，会提示undefined，如取下标为8的元素。
1.length获取数组长度
给arr.length赋值，数组大小会发生改变。赋值过大，会产生为定义元素，赋值过小，元素会丢失。
2.indexOf
通过元素，获得下标索引
arr.indexOf("hello") //获取元素hello的下标
>5 //hello的下标为5
字符串的1和数字1不同
3.slice()截取数组的一部分，返回一个新数组，似于String中的substring
4.push（）、pop（）
数组名.push（） //将元素添加到数组尾部
数组名.pop（） //将尾部元素弹出
5.unshift()、shift()
数组名.unshift（） //将元素添加到数组头部
数组名.shift（） //将头部元素弹出
6.排序sort()
数组名.sort()
7.元素反转reverse()
['a', 'b', 'c', 'd']
arr1.reverse()
['d', 'c', 'b', 'a']
8.concat()拼接元素
返回一个新的数组,没有修改原数组
arr1.concat(1,2,3)
['d', 'c', 'b', 'a', 1, 2, 3]
arr1
['d', 'c', 'b', 'a']
9.连接符join()
打印拼接数组，使用特定的字符串连接
arr1.join('-')
'd-c-b-a' //打印结果
10.多维数组
arr2=[[1,2],[3,4],['5','6']]
arr2[1][0] //取值
3
对象
对象用大括号，数组用中括号。
Java定义对象:
Person person=new Person();
JS定义对象：每个属性用逗号隔开，最后一个属性不需要加，
注：JavaScript中的所有键都是字符串，值是任意对象
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
var person={
name:"serenity",
age:16,
tags:['java','js','...']
}
控制台调用：
1.对象赋值
对象.属性名=属性值
person.age=19
person.age //查看年龄
19
2.使用一个不存在的对象属性，不会报错，只会提示undefined
3.动态的删减属性，eg：通过delect删除对象的属性
delete person.name //删除person对象的属性name
4.动态的添加，直接给新的属性添加值即可
5.判断属性值是否在这个对象中，'属性' in 对象
in可以找到父类的方法
6.hasOwnProperty（）方法，判断一个属性是否是这个对象拥有的
流程控制
if判断
while循环（避免程序死循环），实现从1加到100
for循环
for (let i = 0; i <= 100; i++) {
console.log(i)
}forEach循环
var num=[12,56,45,89,23,586,2,238,9];
num.forEach(function (value) {
console.log(value)
})
for....in循环
for(var index in object){
对象[数字]
}
for (var nums in num){
console.log(num[nums])
}Map和Set
获取Map内的值
var map=new Map([['xiaom',123],['fheb',456],['vf',452]]);
var name=map.get('xiaom');//通过key获得value
console.log(name); //123Map增加或修改set
delect（）删除元素
map.delete("fheb");
Set：无序不重复的集合
var set=new Set([3,1,1,1]); //Set可以去重
console.log(set);
Set的add()方法与delete（）
set.add(6);
set.delete(1);
判断是否包含某个数
set.has(6);
iterator
利用for of 遍历数组，for in是使用下标
var num=[12,56,45,89,23,586,2,238,9];
for (var x of num){
console.log(x)
}
利用for of遍历Map数组
var map=new Map([['xiaom',123],['fheb',456],['vf',452]]);
for (var x of map){
console.log(x)
}
遍历Set
var set=new Set([3,1,1,1,5]); //Set自动设置为无序不重复的集合
for (var y of set){
console.log(y)
}