菜鸟的ES6与JavaScript学习总结
菜鸟的ES6与JavaScript学习总结
- 说明
- 一、概述
- （1）什么是ES6
- （2）ES6和JavaScript的关系
- 二、语法
- （1）变量
- （2）箭头函数
- （3）解构赋值
- （4）数组操作
- （5）字符串操作
- （6）面向对象
说明
更新时间：2020/7/14 17:32，更新了整体内容
记录JavaScript与ES6的关系以及ES6的语法，本文会持续更新，不断地扩充
本文仅为记录学习轨迹，如有侵权,联系删除
一、概述
首先需要搞清楚如下几个问题
（1）什么是ES6
ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6），它是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。除此之外还有ES还有其他版本，像ES5等，目前ES6还不被大多数浏览器兼容。
（2）ES6和JavaScript的关系
使用了这么久的js，我竟然都不知道他们的关系，在查询了相关资料之后才知道，简单一句话总结就是，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。所以ES6是JavaScript的一个实现标准。更准确来说JavaScript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。
二、语法
（1）变量
跟ES5相比较，ES6主要增加了两个关键字，用于定义变量，之前定义变量都是var关键字，用var关键字定义变量有什么缺点吗？
| 缺点 | 说明 |
|---|---|
| 1、变量可以重复定义 | var a = 1;var a = 2;重复定义，使用的时候会覆盖前面的值 |
| 2、无法限制修改 | 没有常量和变量的概率，基本所有var定义的变量可以随意修改 |
| 3、没有块级作用域 | 定义的变量基本全局都可以访问 |
上面这些缺点如果在小型的开发倒是没什么问题，但是如果是大型开发的话，则会出现各种问题，像是变量名冲突，作用域出错问题等，所以为了解决这些问题，ES6新增了两个关键字let和const
| 关键字 | 说明 |
|---|---|
| let | 用于定义变量，不能重复定义，可以修改，块级作用域 |
| const | 用于定义常量，不能重复定义，不可以修改，块级作用域 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
let a = 10;
const PI = 3.14;
alert(a)
alert(PI)
script>
head>
<body>
body>
html>
（2）箭头函数
ES6新定义了一个函数的写法，叫箭头函数，具体如下代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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）解构赋值
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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）字符串操作
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>