前端之ES6语法
- 1. ES6简介
- 2. ES6新特性
- 3.ES6不支持，使用babel
- 3.1 参考文献
- 4.let和const命令
- 5. 模版字符串
- 6.函数之默认值、剩余参数
- 7. 函数之扩展运算符、箭头函数
- 8.箭头函数this指向和注意事项
- 9.解构赋值
- 10.对象扩展
- 11.Symbol类型
- 12.Set集合类型
- 13.Map数据类型
- 14.数组的扩展_1
- 15.数组的扩展_2
1. ES6简介
- ES5语言的先天性不足。比如变量提升、内置对象的方法不灵活、模块化实现不完善等
- 为了后面vue、尤其是react框架做好了准备
- 目前大部分公司的项目都在使用es6
ECMAScript6.0(l以下简称ES6)是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一
代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特
指该年发布的正式版本的语言标准。
2. ES6新特性
- let和const命令
- es6的模板字符串
- 增强的函数
- 扩展的字符串、对象、数组功能
- 解构赋值
- Symbol
- Map和Set
- 迭代器和生成器
- Promise对象
- Proxyi对象
- async的用法
- 类class
- 模块化实现
各大浏览器的最新版本，对ES6的支持可以查看 点我，随着时间的推移，支特度已经越来越高了，超过90%的ES6语法特性都实现了。
3.ES6不支持，使用babel
- 被称为下一代的JavaScript编译器。可以将es6的代码转换成es5的代码，从而让浏览器获得支特
- 这个课程我们只需要知道前端工具babe这个工具的作用，在这里不做过多的赘述
- 这里不讲解babel，只讲述es6语法
3.1 参考文献
- ES6阮一峰教程 http://es6.ruanyifeng.com
- MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
4.let和const命令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>let_const</title>
</head>
<body><script>// var// console.log(a) //输出 undefined// var a = 2;// a = 2;//1.let声明变量, 没有变量提升,报错// console.log(a)// let a = 2;//2.是一个块级作用域,报错:Uncaught ReferenceError: b is not defined// console.log(b)// if(1==1) {// let b = 10;// }// 3. let不能重复声明(Uncaught SyntaxError: Identifier 'c' has already been declared )// let c = 1;// let c = 2;// 4.const定义变量,不能重新修改const NAME = "热爱学习编程";// NAME = "我不喜欢学习"; // 直接报错// 5.const修饰的对象，只能修改其属性，不能对对象重新赋值。const obj = {name: "张三",age: 18}// 可以obj.age = 19;// 不可以/* obj = {name: "李四",age: 20}*/const arr = [];for(let i = 0 ; i <10; i++) {arr[i] = function(){return i;}}console.log(arr[5]()) // 输出10，不对呀，不应该是5吗？/*解决方法: 使用let*/// 不会污染全局变量let RegExp = 10;console.log(RegExp)console.log(window.RegExp)/** 建议：在默认情况下用const;* 而只有你知道变量会改变值的时候，用let.*/</script>
</body>
</html>
5. 模版字符串
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模版字符串</title>
</head>
<body><div class="box"></div><script>// 模板字符串：使用tab键上面的反引号``，插入变量时使用$(变量名)const oBox = document.querySelector('.box');let id = 1,name = "ypy";// 麻烦版本// oBox.innerHTML = "<ul><li><p id="+id+">" +name+ "</p></li></ul>";// 方便版本oBox.innerHTML = `<ul><li><p id=${id}>${name}</p></li></ul>`</script>
</body>
</html>
6.函数之默认值、剩余参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数默认参数_剩余参数</title>
</head>
<body><script>// es5/*function add(a,b) {a = a || 10;b = b || 20;return a+b;}*/// console.log(add()); // 30function add(a = 10, b = 20) {return a + b;}console.log(add())console.log("-----------------------")//es5写法/*function pick(obj) {let result = Object.create(null);for (let i = 1; i < arguments.length; i++) {result[arguments[i]] = obj[arguments[i]];}return result;}const book = {title: 'es6教程',author:'yeskip',year:'2019'}let bookData = pick(book,'author','year')console.log(bookData)*/// 剩余参数：由三个点，和一个紧跟着的具名参数指定 ...keys// 解决了argument的问题function pick(obj, ...keys) {let result = Object.create(null);for (let i = 0; i < keys.length; i++) {result[keys[i]] = obj[keys[i]];}return result;}const book = {title: 'es6教程',author:'yeskip',year:'2019'}let bookData = pick(book,'author','year')console.log(bookData)</script>
</body>
</html>
7. 函数之扩展运算符、箭头函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扩展运算符_箭头函数</title>
</head>
<body><div></div>
<script>// 剩余参数：把多个独立的参数，合并成一个数组// 扩展运算符：把数组展开成独立的参数，并将值作为参数传递给函数const maxNum = Math.max(20, 30)console.log(maxNum)// 处理数组的最大值，使用applyconst arr = [10, 20, 30, 40, 50, 60, 70, 100]console.log(Math.max.apply(null, arr))// 使用es6扩展运算符const maxNumber = Math.max(...arr);console.log("maxNumber=", maxNumber)console.log("--------------------------------")//箭头函数/** 使用=> 定义 function(){} 等价于 () => {}*/let addWithArrow = (a,b) => a+b;console.log("arrow function compute result: ",addWithArrow(1, 2));;/*let getId = id => {return {id: id,name: "小袁子"}}*/// ===》 等价于let getId = id => ({id: id, name: "小袁子"});let obj = getId(1)console.log(obj)// 闭包函数/*声明一个函数fun1，此函数fun1返回一个函数fun2,执行fun1()*/let fn = (function() {return function() {console.log("hello es6");}})();fn();let fnWithArrow = () => (function(){console.log("hello es6 with arrow!")})()let fnWithArrow2 = (()=>{return ()=>{console.log("hello es6 with arrow!!!")}})();// fnWithArrow();fnWithArrow2();</script>
</body>
</html>
8.箭头函数this指向和注意事项
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>箭头函数需要注意</title>
</head>
<body><script>// this指向，没有// es5中this指向，取决于该函数的上下文对象// function.bind() 是将function绑定到其他对象身上的做法,绑定到参数上的thislet PageHandle = {id: 123,init: function (){document.addEventListener('click', function (event){//Uncaught TypeError: this.doSomething is not a function// this => documentthis.doSomething(event.type);}.bind(this), false);},doSomething: function (type) {console.log(`事件类型: ${type},当前id: ${this.id}`)}}// PageHandle.init();// 使用箭头函数let pageHandler = {id: 123,init: () => {// 箭头函数是没有this指向的，箭头函数内部this值只能通过查找作用域链来确定，// 一旦使用箭头函数，当前就不存在作用域链，全部没有的话，就找到了window对象document.addEventListener('click', (event) => {//Uncaught TypeError: this.doSomething is not a function// this => documentthis.doSomething(event.type);});},doSomething: function (type) {console.log(`事件类型: ${type},当前id: ${this.id}`)}}pageHandler.init();// 如果上边的pageHandler.init定义方法都是箭头函数，那么就会找到这一层的scopefunction doSomething(type) {console.log(`this is window scope. ${type}`);}// 使用箭头函数注意事项/** 1.使用箭头函数的注意事顶1：使用箭头函数函数内部没有arguments*/// let getVal = (a, b) => {// console.log(arguments)// 没有作用域了，相应的argument也不在// return a + b;// }// console.log(getVal(1, 3))let getVal2 = function (a, b) {console.log(arguments)return a + b;}console.log(getVal2(5, 8));// 箭头函数能使用new关键字实例化对象// let Person = ()=> {//// }// 这样可以创建new Personlet Person = function(a,b) {return {age: a,name: b}}// function函数也是一个函数，但是箭头函数不是一个对象，其实就是一个语法糖(表达式)let p = new Person(11,"tom");console.log(p)</script>
</body>
</html>
9.解构赋值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>解构赋值</title>
</head>
<body>
<script>// 解构赋值是对赋值运算符的一种扩展// 它针对数组和对象来进行操作// 优点: 代码书写上简洁易读let node = {type: 'iden',name: 'foo'}// 完全解构let {type, name} = node;console.log(type, name)let obj = {a: {name:"张三"},b:[],c:"hello world"}// 不完全解构let {a,b,c} = obj;// console.log(a)// console.log(b)// console.log(c)// 剩余运算符,起别名let {a:ss,...res} = obj;// console.log(aa,res)console.log(ss)console.log(res)// 数组解构let arr = [1,2,3]let [t,m,p] = arr;console.log(t,m,p)// 嵌套let [r,[w],v] = [12,[13],49];console.log(r,w,v)
</script>
</body>
</html>
10.对象扩展
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>扩展的对象</title>
</head>
<body>
<script>const name = "yeskip", age = 20;const person = {name: name, age: age, sayName() {}}// 对象扩展const person1 = {name, // 等价于name:nameage, // 等价于age:agesayName() {console.log(this)console.log(this.name)}}person1.sayName();// 特殊的写法const names = 'a'const obj = {isShow: true,['f' + names]() {console.log(this)},[names + 'bc']: 123}console.log(obj)// is() 比较两个对象严格相等 assign()console.log(Object.is(NaN, NaN));console.log(NaN === NaN);// assign对象的合并let target = {}let obj1 = {name: '李四'}let obj2 = {age: 34}Object.assign(target, obj1, obj2)console.log(target)</script>
</body>
</html>
11.Symbol类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>symbol类型</title>
</head>
<body><script>// 原始数据类型 Symbol，它表示独一无二的值// 最大的用途：用来定义对象的私有变量const name = Symbol('name')const name2 = Symbol('name')console.log(name === name2)let s1 = Symbol('s1');console.log(s1)let obj = {[s1]:'小袁'}//let obj = {}// obj[s1] = '小袁'console.log(obj)// 如果用symbol定义的对象中的变量，取值时一定要用[变量名]console.log(obj[s1])console.log("obj对象所有的keys:"+Object.keys(obj)); // 看不到// 获取自己的属性获取let s = Object.getOwnPropertySymbols(obj);console.log(s)// 反射获取let m = Reflect.ownKeys(obj);console.log(m)console.log(m[0])console.log(obj[m[0]])</script>
</body>
</html>
12.Set集合类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Set集合类型</title>
</head>
<body>
<script>// 集合let set = new Set();set.add("张三")set.add(12)set.add(123)// set.delete(12)// 校验某个值是否在集合set中let exist = set.has(`张三`);// console.log(exist)// console.log(set)// 集合长度// console.log(set.size);set.forEach((item, index) => {console.log(item, index)})// 将set转换为数组,扩展运算符let arr = [...set]console.log(arr)//了解即可 1.set中对象的引用无法被释放let set3 = new Set(),obj1 = {}set3.add(obj1)obj1 = null;console.log(set3) // 还存在一个元素，无法释放// 使用弱引用let set4 = new WeakSet(),obj2 ={name:"张三"};set4.add(obj2)obj2 = null;console.log(set4)// WeakSet// 1. 不能传入非对象类型的参数// 2. 不可迭代// 3. 没有forEach()// 4. 没有size属性</script>
</body>
</html>
13.Map数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Map数据类型</title>
</head>
<body>
<script>let map = new Map();map.set("name", "张三")map.set("age", 12)map.set([0, 1, 2], "hello");let map2 = new Map([['1', 2], ['3', 4]]);console.log("map2:", map2)console.log(map)let existAge = map.has("age");console.log(existAge)map.forEach((value, key) => {console.log(key, value)})// 删除key为name的项map.delete("name")//清空mapmap.clear()let weakMap = new WeakMap();</script>
</body>
</html>
14.数组的扩展_1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组的扩展</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
<script>// 数组的方法 from() of()// from() 将伪数组转换为真正的数组function add() {let args = Array.from(arguments)console.log(args)}add(1, 2, 3)// from应用let lis = Array.from(document.querySelectorAll('li'));console.log(lis)// 扩展运算符let les = [...document.querySelectorAll('li')]console.log(les)// from 接收第二个参数，用于对每个元素进行处理let list = [1, 2, 3]let newList = Array.from(list, ele => ele ** 2);console.log(newList)// of将一组值转换为一个数组(将任意类型的数据转为一个数组)let arr2 = Array.of(3, 11, 20, '30', {id: 12})console.log(arr2)// 3.copywithin()// 从3位置往后的所有数值，替换从0位置往后的三个数值console.log([0, 1, 2, 4, 5, 6, 7, 8, 9].copyWithin(0, 3));// find findIndex()// find 找出第一个符合条件的数组成员// findIndex找出第一个符合条件的数组成员索引let number = [1, 2, -10, 5, -8].find(n => n < 0);let index = [1, 2, -10, 5, -8].findIndex(n => n < 0);console.log(number,index)
</script>
</body>
</html>
15.数组的扩展_2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组的扩展2</title>
</head>
<body><script>// entries() keys() values() 返回一个遍历器，可以使用for...of循环遍历let arr = [1,2,3,4]let entries = arr.entries();let keys = arr.keys();let values = arr.values();for (let key of keys) {console.log(key)}for (let value of values) {console.log(value)}for (let [index,ele] of entries) {console.log(index + "==> " + ele)}// 还可以使用遍历器下一部分讲// includes()返回一个布尔，表示某个数组是否包含给定值console.log([12,56,55].includes(12))console.log([12,56,55].includes(51))</script>
</body>
</html>
