ES6-ES11新特性
ES6官方文档：
参考笔记：MurphyChen's Notes
一、ES6相关介绍
ES全程EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指的就算JavaScript的新特性。
1.1什么是ECMA
ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为Ecma 国际。
1.2什么是ECMAScript
ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。
1.3什么是 ECMA-262
Ecma 国际制定了许多标准，而ECMA-262 只是其中的一个，所有标准列表查看：Standards - Ecma International
ECMA-262 历史版本查看网址： ECMA-262 - Ecma International
-
ES5 是 ECMAScript 第5版，2009年发布。
-
ES6 是 ECMAScript 第6版，2015年发布，也叫 ES2015。
-
从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1。
1.4 谁在维护 ECMA-262
TC39（Technical Committee 39）是推进ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期召开会议，会议由会员公司的代表与特邀专家出席。
1.5 为什么要学ES6
-
ES6 的版本变动内容最多，具有里程碑意义
-
ES6 加入许多新的语法特性，编程实现更简单、高效
-
ES6 是前端发展趋势，就业必备技能
1.6 ES6兼容性
二、ES6新特性
1. let关键字
let 关键字用来声明变量，使用 let 声明的变量有几个特点：
-
不允许重复声明
-
块级作用域
-
不存在变量提升
-
不影响作用域链
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
let a;
let b,c,d;
let e = 100;
let f=521,g='iloveyou',h=[];
//1.变量不能重复声明 （会报错）
//而 var 声明变量时，可以重复声明 不报错。
// let star='罗志祥';
// let star='小猪';
//2.块儿级作用域 全局，函数，eval
{
let girl = '小红';
console.log(girl);
}
//外面读取不到
// console.log(girl);
//3.不存在变量提升
//出现undefined 而不报错
console.log(song);
//会报错 Uncaught ReferenceError: Cannot access 'song2' before initialization
console.log(song2);
var song = '恋爱达人';
let song2 = '恋爱达人';
//4.不影响作用域链
{
let school = '清华大学';
function fn(){
console.log(school);
}
fn();
}
</script>
</body>
</html>
应用场景：以后声明变量使用let 就对了
案例1：给多个 div 循环注册点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.item{
width: 80px;
height: 60px;
border: 1px blue solid;
margin-top: 10px;
/* background-color: aqua; */
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
//获取div元素对象
let items = document.getElementsByClassName('item');
//遍历并绑定事件
//var i=0;i<items.length;i++ 就不行，需要讲var改为let
for(let i=0;i<items.length;i++){
items[i].onclick = function(){
//修改当前元素的背景颜色
// this.style.background = 'pink';
items[i].style.background = 'pink';
}
}
</script>
</body>
</html>
2. const 关键字
const 关键字用来声明常量，const 声明有以下特点：
-
声明必须赋初始值
-
标识符一般为大写
-
不允许重复声明
-
值不允许修改
-
块级作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//声明常量
const SCHOOL = '清华大学';
//1.一定要赋初始值
//要不然会报错
//Missing itializer in const declaration (at new_file3.html:13:10)
// const A;
//2.一般常量使用大写（潜规则）
const a = 100; //小写也不会报错
console.log(a);
//3.常量的值不能修改
//Assignment to constant variable.
//以下会报错
// SCHOOL = 'QingHua';
//4.块级作用域
{
const PLAYER = 'uzi';
console.log(PLAYER);
}
// console.log(PLAYER); //这样会报错
//5.对于数组和对象的元素修改，不算做对常量的修改，不会报错
const TEAN = ['UZI','MXLG','Ming'];
TEAN.push('Meiko'); //这样不会报错
TEAN = 100; //这样会报语法错误
</script>
</body>
</html>
3.变量的解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//1.数组的解构
const F4 = ['小沈阳','刘能','赵四'];
let [xiao,liu,zhao] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
//2.对象的解构
const zhao = {
name:'赵本山',
age:'不祥',
xiaopin: function(){
console.log("我可以演小品");
}
};
let {name , age ,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();
//讲xiaopin 解构出来，为了让其书写方便，减少冗余。
// let {xiaopin} = zhao;
// xiaopin();
//不解构 需要这样写
zhao.xiaopin();
</script>
</body>
</html>
4.模板字符串
模板字符串（template string）是增强版的字符串，用反引号 ` 标识，特点：
-
字符串中可以出现换行符
-
可以使用
${xxx}形式输出变量
应用场景：当遇到字符串与变量拼接的情况使用模板字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//es6引入新的声明字符串的方式 [``] '' ""
//1.声明
let str = `我也是一个字符串哦！`;
console.log(str,typeof str);
// 输出结果： 我也是一个字符串哦！ string
//2.内容中可以直接出现换行符
let str1 = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>艾伦</li>
</ul>`
//3. 变量拼接
let lovest = '艾伦';
let out = `${lovest} 是我心目中最搞笑的演员！`;
console.log(out);
//变量拼接时 必须使用 ${}
</script>
</body>
</html>
5.对象的简化写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
let name ='清华大学';
let change = function(){
console.log('我们可以改变世界！');
}
const school ={
// name:name, //这写法和下面意思一样
name, //这是上面的简写
change,
// improve:function(){} //以下是简化
improve(){
console.log("我们可以提高你的技能");
}
}
console.log(school);
school.improve();
</script>
</body>
</html>
6.箭头函数以及声明特点
ES6 允许使用「箭头」=> 定义函数。
-
function 写法：
function fn(param1, param2, …, paramN) {
// 函数体
return expression;
}
-
=> 写法：
let fn = (param1, param2, …, paramN) => {
// 函数体
return expression;
}
箭头函数的 注意点:
-
如果形参只有一个，则小括号可以省略
-
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
-
箭头函数
this始终指向声明时所在作用域下this的值 -
箭头函数不能作为构造函数实例化
-
不能使用
arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//es6 允许使用【箭头】 ( => ) 定义函数。
//声明一个函数
let fn = function(){
}
//声明箭头函数
let fn1 = (a,b)=>{
return a+b;
}
let result = fn1(1,2);
console.log(result);
//1.this 是静态的 this始终指向函数声明时所在作用域下的this的值
function getName(){
console.log(this.name);
}
let getName2 = ()=>{
console.log(this.name);
}
//设置window 对象的 name属性
window.name = '清华同方';
const school = {
name: "ATGUIGU"
}
//直接调用
getName(); //清华同方
getName2(); //清华同方
//call 方法调用
getName.call(school); //ATGUIGU
getName2.call(school); //清华同方
//2.不能作为构造实例化对象
//以下汇报 person is not a constructor 错误
/* let person = (name,age)=>{
this.name = name;
this.age = age;
}
let me = new person('xiao',30);
console.log(me); */
//3.不能使用 arguments 变量
/* let fn2 =()=>{
console.log(arguments);
}
fn2(1,2,3); */ // arguments is not defined
//4.箭头函数的简写
//1)省略小括号，当形参有且只有一个的时候
let add = n =>{
return n + n;
}
console.log(add(5)); //10
//2)省略花括号，当代码体只有一条语句的时候,此时return必须省略
//而且语句的执行结果就是函数的返回值
// let pow = (n) =>{
// return n*n;
// };
let pow = (n) => n * n;
console.log(pow(6)); //36
</script>
</body>
</html>
7.箭头函数的实践与应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#ad{
width: 200px;
height: 200px;
background:blue;
}
</style>
</head>
<body>
<div id="ad"></div>
<script>
//案例1 点击 div 2s 后颜色变成 粉色
//获取元素
let ad = document.getElementById('ad');
//绑定事件
ad.addEventListener("click",function(){
//保存this的值
let _this = this;
//定时器
setTimeout(function(){
console.log(_this)
// ad.styl e.background = 'pink';
//_this 代表 ad
_this.style.background='pink'
},2000);
})
</script>
</body>
</html>
8.函数参数的默认值设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//ES6 允许给函数参数赋初始值
//1.形参初始值 具有默认值的参数，一般位置要靠后（潜规则）
function add(a,b,c=10){
return a+b+c;
}
// let result = add(1,2,3);//6
let result = add(1,2);//13
console.log(result);
//2.与解构赋值结合
function connect({host='127.0.0.1',username,password}){
console.log(host); //localhost
console.log(username); //root
console.log(password); //root
}
connect({
host:'localhost',
username:'root',
password:'root'
})
</script>
</body>
</html>
9.rest参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//es6引入rest 参数，用于获取函数的实参，用来代替 arguments
//es5获取实参的方式
function date(){
console.log(arguments);
}
date('百汇','想念','思慧');
//运行结果 Arguments(3) ['百汇', '想念', '思慧']
//rest 参数
function date1(...args){
console.log(args);
}
date1('悟空','八戒','沙僧');
// ['悟空', '八戒', '沙僧'] 这样运行结果为数组
//rest 参数必须要放到参数最后
function fn(a,b,...args){
console.log(a);
最低0.47元/天 解锁文章
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
