这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
前端的三要素
Html (结构) ：超文本标记语言，决定网页的架构和内容 CSS (表现) ： 层叠样式表，设定网页的表现样式 JavaScript (行为) ：是一种弱类型脚本语言，其源码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。
JavaScript 框架
Jquery :熟知的JavaScript 库，优点就是简化了Dom 操作，缺点就是Dom 操作大频繁影响前端性能 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 通信功能；
JavaScript构建工具
Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载
快速入门
方式一
这种是直接在页面离写js 。我们也可以用下面的方式写入
方式二
基础语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 1. 定义变量 变量类型 变量名 = 变量值
var num =10;
if (num<0) {
alert("你怎么这么少啊")
} else if (num ==10 ) {
alert("正确")
}
</script>
</body>
</html>
调试
数据类型
js 中所有的变量都是
var 变量
number 变量
//整数 11
//123.1 浮点数 js 是不区分整数和浮点数的
// 1.23e ..科学计数法
//-99 负数
NaN //不是数字
Infinity //表示无限大
字符串
var a ='asd'
//或者
var b = "adv"
//单引号或者双引号
布尔值 跟Java 也是返回 true ,false
逻辑运算符
&& 两个都为真，结果就是真
|| 一个为真，结果就是真
！ 真即假，假即真
比较运算符
= //就是赋值
== //等于（类型不一样，值一样，也会判断为true）
=== // 绝对等于 （类型一样，值一样 结果为true）
比较的过程
双等号 == ： 1，如果两个值类型相同，再进行三个等号比较 2，如果两个值类型不同，也有可能相等，需根据一下规则进行类型转换再比较 如果一个是null ，一个是undefined 那么相等 如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
三等号 === ： 1，如果类型不同，就一定不同 2，如果两个都是数值，并且是同一个值，那么相等，如果其中至少一个是NaN ，那么不相等。（判断一个值是否是NaN,只能使用IsNaN 来判断） 3，如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等 4，如果两个值都是true 或者 false 那么相等 5，如果两个值都引用同一个对象或是函数，那么相等，否则不相等 6，如果两个值都是null,或是undefined ，那么相等
数组
Java 的数组必须是相同类型的对象，Js 不需要
var arr = [1,2,'ooo']
// 第二种
new Array (1,2,1)
取数字下标 如果越界，就会报
undefined
1,长度
arr.length
注意 ：加入给 arr.length 赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2，indexof,通过元素获得下标索引
arr.indexof(2)
注意 字符串的“1” 和 1是不同的
3，slice () 截取Array 的一部分，返回一个新数组，类似于String 的Substring
arr.slice (1,2)
4,push() pop ()尾部
push () 压入到尾部
pop () 弹出尾部的一个元素
5，unshift (),shift () 头部
unshift () 压入到头部
shift () 弹出头部的一个元素
6，元素反转 reverse()
var arr = ["A","B","C"]
arr.reverse()
7,concat()
var arr =["A","B","C"]
arr.concat([1,2,3])
对象类型
var 对象名 = {
属性名 ： 属性值，
属性名 ： 属性值，
属性名 ： 属性值
}
// 定义了一个 person 对象，它有四个属性
var person = {
name："fjj",
age:3
}
注意 ： js 中对象，{....} 表示一个对象键值对描述属性 xxx: xxx 多个属性之间使用逗号隔开，最后一个属性不加逗号！
循环体 if 循环
var age = 3;
if (age>3) {
//第一个判断
alert("我是熊孩子")
} else if (age <5) {
alert ("我是大孩子")
}
**while **
while (age <100) {
age = age +1
console.log(age)
}
for 循环
for (let i =0; i<100; i++) {
console.log(i)
}
forEach 循环
var age = [1,2,3,4,5,6,7,8,9]
//函数
age.forEach(function (value)) {
console.log(value)
}
for ...in
for (var num in age) {
if (age.hasOwnProperty(num)) {
cosole.log("存在")
}
}
Map 和 Set
var map = new Map([['fjj',100],['zyh',0]])
var name = map.get('fjj')
console.log(name)
Set 无序不重复的集合
set.add(2) //添加
set.delete(1) //删除
cosole.log(set.has(3)) //是否包含某个元素
遍历map
var map = new Map([['fjj',100],['zyh',0]])
for (let x of map) {
console.log(x)
}
遍历 set
var set = new Set([5,6,7]);
for (let x of set) {
console.log(x)
}
函数 1，定义函数 方式一
//方式一 绝对值函数
function fjj(x) {
if(x>=0) {
return x;
} else {
return -x;
}
}
一旦执行到return 代表函数结束，返回结果！如果没有执行return ，函数执行完也会返回结果，结果就是 undefined
方式二
var fjj = function (x) {
if (x>=0) {
return x;
} else {
return -x;
}
}
function (x) 这是一个匿名函数，但是可以把结果赋值给fjj 通过sjj 调用函数！
参数问题： JavaScript 可以传任意个参数，也可以不传递参数~ 可以自定义异常
var abs = function (x) {
//手动设置异常来判断
if (typeof x!=='number') {}
throw '异常';
if (x>=0) {
return x;
} else {
return -x;
}
}
arguments arguments 是一个免费赠送的关键字 表示 传递进来的所有参数，是一个数字！
var fjj =function (x) {
for (var i =0 ; i<arguments.length;i++) {
console.log(arguments[i])
}
if (x>=0) {
return x;
} else {
return -x;
}
}
问题 ：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数 Es6 引入了新特性，获取除了已经定义的参数之外的所有参数
function aa(a,b...rest) {
console.log(rest)
}
rest 参数只能写在最后面，必须用。。标识
