菜鸟的ES6与JavaScript学习总结
说明
一、概述
（1）什么是javascript?
（2）什么是ES6
（3）ES6和JavaScript的关系
（4）ES6的浏览器兼容情况
二、语法
（1）变量
（2）箭头函数
（3）解构赋值
（4）数组操作
（5）字符串操作
（6）面向对象
说明
更新时间：2020/7/14 17:32，更新了整体内容
记录JavaScript与ES6的关系以及ES6的语法，本文会持续更新，不断地扩充
本文仅为记录学习轨迹，如有侵权,联系删除
一、概述
首先需要搞清楚如下几个问题
（1）什么是javascript?
重新认识一下javascript，定义是javascript是一种弱类型的脚步语言，用于动态渲染html。仅此而已？更深入了解的话，发现其实javascript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。其中ESMAScript就是本文的重点。
（2）什么是ES6
ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6），它是JavaScript语言的下一代标准，已经在2015年6月正式发布了，所以ES6也称为ES2015。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。除此之外还有ES还有其他版本，像ES5等，目前ES6还不被大多数浏览器兼容。
（3）ES6和JavaScript的关系
简单一句话总结就是，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。所以ES6是JavaScript的一个实现标准。更准确来说JavaScript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。
（4）ES6的浏览器兼容情况
二、语法
（1）变量
跟ES5相比较，ES6主要增加了两个关键字，用于定义变量，之前定义变量都是var关键字，用var关键字定义变量有什么缺点吗？
缺点 说明
1、变量可以重复定义 var a = 1;var a = 2;重复定义，使用的时候会覆盖前面的值
2、无法限制修改 没有常量和变量的概率，基本所有var定义的变量可以随意修改
3、没有块级作用域 定义的变量基本全局都可以访问
上面这些缺点如果在小型的开发倒是没什么问题，但是如果是大型开发的话，则会出现各种问题，像是变量名冲突，作用域出错问题等，所以为了解决这些问题，ES6新增了两个关键字let和const
关键字 说明
let 用于定义变量，不能重复定义，可以修改，块级作用域
const 用于定义常量，不能重复定义，不可以修改，块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let a = 10;
const PI = 3.14;
alert(a)
alert(PI)
</script>
</head>
<body>
</body>
</html>
（2）箭头函数
ES6新定义了一个函数的写法，叫箭头函数，具体如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
alert("ES6之前的写法")
}
window.onload = ()=>{
alert("ES6的箭头函数写法")
// 语法：(变量名1，变量名2，...)=>{
// ...
// }
}
// 举例说明
let result1 = (a,b)=>{
let c = a+b;
return c;
}
let result2 = (a,b = 10)=>{
let c = a+b;
return c;
}
alert(result1(1,2))
alert(result2(20))
</script>
</head>
<body>
</body>
</html>
简洁明了
（3）解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 语法：
// 1、赋值号两边结构必须一样
// 2、声明和赋值同时完成
let [a,b,c] = [1,2,3]//数组的定义
alert(a)
alert(b)
alert(c)
let {d,e,f} = {d:4,e:5,f:6}//json的定义
alert(d)
alert(e)
alert(f)
let [{g,h},[i,j],k] = [{g:7,h:8},[9,10],"hello"]//混合用法
alert(g)
alert(i)
alert(k)
let [json,array,str] = [{g:7,h:8},[9,10],"hello"]//混合用法
alert(json)
alert(array)
alert(str)
</script>
</head>
<body>
</body>
</html>
（4）数组操作
数组的操作主要学习几个函数，这里只列举两个map和filter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//(1) map:一对一映射
// 举例1
let array = [1,2,3]
let result = array.map((item)=>{
return item*2;
});
alert(result)
// 举例2
let score = [78,13,56,89,90,100]
let result2 = score.map(item=> item>=60? '及格':'不及格')
alert(result2)
//(2)filter:过滤器
let num = [1,2,3,4,5,6,7,8,9,10]
let result3 = num.filter(item=>{
// 或者简写为
//return item%2;
if(item%2 == 0){
return true;
}else{
return false;
}
})
alert(result3)
</script>
</head>
<body>
</body>
</html>
（5）字符串操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1、两个方法,
let str = "abc";
alert(str.startsWith('a'))//true
alert(str.endsWith('c'))//true
alert(str.startsWith('b'))//false
//2、字符串模板：反单引号用法
let a = `abc`
let b = `this is ${a} apple`
alert(b)//this is abc apple
</script>
</head>
<body>
</body>
</html>
（6）面向对象