1.介绍ES
ES全称 EcmaScript, 是脚本语言的规范, 平时编写的 JavaScript仅仅是EcmaScript的一种实现, 所以ES新特性其实指的是 JavaScript的新特性
2.为什么要学习新的特性?
1) 语法更简洁, 功能更丰富
2) 框架中运用了大量的新的特性
3.什么是ECMA?
ECMA(European Computer Manufactures Association) 中文名称为 欧洲计算机制造商协会, 这个组织的目标是评估, 开发和认可电信和计算机标准. 1994年后这个组织改名为 Ecma 国际
4 什么是ECMAScript?
ECMAScript 是由Ecma国际通过 ECMA-262标准化的脚本程序设计语言
5.什么是ECMA-262?
Ecma国际制定了许多标准, 而ECMA-262只是其中一个
6.为什么要学习ES6?
ES6的版本变动内容最多
ES6加入了新的语法特性
7.对象的解构
作用是可以减少代码的书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 对象的解构
const zhao = {
name: '小赵',
age: '18',
eat: function () {
console.log('喜欢吃西瓜');
}
}
// 一般调用
// zhao.eat();
// ES6
let {eat} = zhao;
eat();
</script>
</body>
</html>
8.模板字符串
ES6 引入新的声明字符串的方式 [``]
1) 内容可以直接出现换行符
2) 变量拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.内容可以直接出现换行符等元素
let str = `<ul><li>企业家</li></ul>`
// 2.变量拼接
let lovest = '世界';
let out = `${lovest}我知道他很残酷 但是我害怕吗?`
console.log(out);
</script>
</body>
</html>
9. 简化对象的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ES6 允许写在大括号里面, 直接写入变量和函数, 作为对象的属性和方法.
let name = '企业家';
let change = function () {
console.log('就从今天开始');
}
const school = {
name,
change,
improve: function () {
}
}
</script>
</body>
</html>
什么叫做实例化?
创建对象的过程就叫实例化. 有时候也将对象叫做一个类的实例
10.[敲黑板敲黑板~~~] 箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ES6 允许使用[箭头] => 定义函数
//1. 声明一个函数
// let fn = function () {
// }
// let fn = () => {
// }
// // 2.this是静态的 this 始终指向函数声明时所在作用域下的 this的值
// function getName() {
// console.log(this.name);
// }
// let getName2 = () => {
// console.log(this.name);
// }
// // 设置 window 对象的 name属性
// window.name = '今天是优秀的 即将开始的一天';
// const school = {
// name: "8888"
// }
// getName.call(school);
// getName2.call(school);
// // 3.不能作为构造函数去实例化对象
// let Person = (name, age) => {
// this.name = name;
// this.age = age;
// }
// let me = new Person('xiao', 18);
// console.log(me);
// 4.箭头函数中 不能使用 arguments变量(arguments本身是用来保存实参的, 并且每个函数里面都有)
// 为什么不能使用arguments?
// 因为箭头函数中没有自己的 arguments
// let fn = () => {
// console.log(arguments);
// }
// fn(1, 2, 3);
// 5. 箭头函数的简写
// 1) 省略小括号, 当形参有且只有一个的时候
// let add = (n) => {
// return a + b;
// }
// console.log(add(9));
// 2) 省略花括号, 当代码体只有一条语句的时候,
// 此时 return 必须省略, 而且语句的执行结果就是函数的返回值
// let pow = (n) => {
// return n*n;
// }
// ⬇⬇⬇⬇⬇⬇⬇⬇ 可以简写为
// let pow = (n) => n*n;
// console.log(pow(1, 2));
</script>
</body>
</html>
11. ... 为扩展运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
// // 1. 数组的合并
// const a = ['喜羊羊', '灰太狼'];
// const b = ['葫芦娃', '小金刚'];
// // const text1 = a.concat(b);
// // console.log(text1);
// const text2 = [...a, ...b];
// console.log(text2);
// // 2.数组的克隆
// const text1 = ['A', 'B', 'C'];
// const ans = [...text1];
// console.log(ans);
// 3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);
</script>
</body>
</html>
12.Symbol(ES6新增数据类型)
添加唯一的值
不能与其他数据进行运算
JS中的数据类型:
USONB
undefined
String, Symbol
object
null number
Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let s = Symbol();
let s2 = Symbol('坚持');
let s3 = Symbol('坚持');
//Symbol.for 创建
let s4 = Symbol.for('坚持');
let s5 = Symbol.for('坚持');
</script>
</body>
</html>
使用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let youxi = {
name:'狼人杀',
[Symbol('say')]: function() {
console.log('我可以发言');
},
[Symbol('zibao')]: function() {
console.log('我可以自爆');
}
}
</script>
</body>
</html>
13. 解释生成器
生成器其实就是一个特殊的函数
function * 函数名 () {
}
14.