ES6之你应该知道的知识（一）
前言
复习时使用，希望可以帮到自己，也可以帮到大家。
ECMA相关介绍
ECMA为欧洲计算机制造商协会，这个组织的目的是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。
1.1 什么是ECMAScript
ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。
1.2 什么是ECMA-262
Ecma国际制定了许多标准，而ECMA只是其中的一个，所有标准列表有兴趣可以去查看https://www.ecma-international.org/publications/stands/Standard.htm，如下。
1.3 ES6相关历史
1.4 谁在维护ECMA-262
TC39是推进ECMAScript发展的委员会。其会员都是公司（主要是浏览器厂商，比如谷歌、苹果、微软、因特尔等）。TC39定期召开会议，会议由会员公司的代表与特邀专家出席。
1.5 为什么要学习ES6
- ES6版本变动内容最多，具有里程碑；
- 加入许多新语法特性，编程实现更简单、高效；
- 是前端发展趋势，就业必备技能；
二.let和const变量声明及相关特性
2.1 let变量及相关特性
2.1声明格式与var一样：
let a;
let b,c,d;
let e= 100;
let f = 521,g = 'love';
2.2特性
- 变量不能重复声明
let star = '吴亦凡';
let star = '加拿大电鳗';
会出现如下类型的错误：
- 块级作用域 全局，函数，eval
{let girl="zhou";
}
console.log(girl);
//此时不能打印成功，因为girl这个变量只作用在花括号那一块，所以不能打印；
//即只在所属块的作用域里有效；
- 不存在变量提升
console.log(song);
let song = 'let me love you';
出现如下的错误：
表示不允许在声明之前去使用这个变量
- 不影响作用域链
{let school = "xu";function fn() {console.log(school);}fn();
}
打印成功：
;
console.log(z);
console.log(li);
console.log(g);
运行结果如下：
3.2 对象的解构（方法频繁调用时可使用）
const hu = {name: '胡歌',age: '四十大几',yanxi: function() {console.log('我可以演戏');}};let {name,age,yanxi} = hu;console.log(name);console.log(age);console.log(yanxi);yanxi();
运行结果如下：
四.模板字符串及简化对象写法
4.1模板字符串
4.1.1 声明
let str = `字符串`;//不知道有没有人和我一样，不知道怎么打出反引号，是键盘数字1旁边的那个 console.log(str, typeof str);
运行结果：
4.1.2 特性
- 内容可以直接出现换行符
let str = `<ul><li>张</li><li>李</li></ul>`;
- 可在字符串进行换行或者拼接的地方使用
- 可以进行变量拼接
let lov = '贾玲';let out = `${lov}是我喜欢的喜剧演员`;console.log(out);
运行结果:
4.2简化对象写法
let name = 'zhoushen';let sing = function() {console.log('达拉崩吧！');}const jieshao = {name,//简化属性的写法，之前为name:name,sing,//简化函数的写法// improve:function() {// cosnole.log('达拉崩吧斑得贝迪');// }improve() {cosnole.log('达拉崩吧斑得贝迪')}}console.log(jieshao);
运行结果如下：
五.箭头函数
5.1 声明
let fn = (a, b) => {return a + b;}//调用函数let result = fn(1, 2);console.log(result);
5.2 声明特点
- this是静态的，this始终指向函数声明时所在作用域下的this值
function getName() {console.log(this.name);}let getName2 = () => {console.log(this.name);}// 设置window对象的name属性window.name = 'www';const school = {name: 'AWWW',}// 直接调用getName(); //this值指向windowgetName2(); //在全局作用域下声明，this值也是指向window// call调用getName.call(school); //this所指发生了改变getName2.call(school); //箭头函数依然指向window
运行结果如下：
可以看出使用call调用的时候，箭头函数的this并没有发生改变,无论使用什么方法去调用，this始终指向函数在声明时作用域下的this值
- 不能作为构造函数，实例化对象
let Person = (name,age) => {this.name = name;this.age = age;}let me = new Person ('xiao',30);console.log(me);
运行结果如下：
- 不能使用arguments变量
let fn = () => {console.log(arguments);}fn(1, 2, 3);
运行出现错误：
- 箭头函数的简写
// 当形参只有一个的时候，省略小括号let add = n => {return n + n;//省略花括号。当代码体只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
// let pow = (n) => {// return n*n;
// }let pow = n => n * n;console.log(pow(9));
现在我们来举个栗子来更好的理解箭头函数：
<div id="ad"></div><script>let ad = document.getElementById('ad');//绑定事件ad.addEventListener("click", function() {//let _this = this;//一般函数时，如果没有这个值来保存this值，则会出错，//this指向Window，而window没有style属性，所以出错 setTimeout(() => { //如果使用箭头函数，this此时是静态值，指向函数声明时所在作用域的this值this.style.background = 'pink';}, 2000);});</script>
数组的返回：
const arr = [1, 6, 9, 100, 10, 25];//一般函数const result = arr.filter(function(item) {if (item % 2 === 0) {return true;} else {return false;}});//箭头函数const result = arr.filter(item => item % 2 === 0);console.log(result);
六.其他特性
6.1函数参数的默认值设置
ES6允许给函数参数赋值初始值
6.1.1 形参初始值 具有默认值得参数，一般位置要靠后（同样是潜规则啦）
function add(a, b, c = 10) {return a + b + c;}let result = add(1, 2);console.log(result); //13
6.1.2 与解构赋值结合使用
function connect({host = '127.0.0.1',//如果connect传有 参数，则使用connect的参数，如果没有，则使用我们设置的默认值username,password,port}) {console.log(host);console.log(username);console.log(password);console.log(port);}connect({host: 'localhost',username: 'root',password: 'root',port: 3308})
6.2 rest参数
引入rest参数，用于获取函数的实参，用来代替arguments
首先我们来看看ES5获取实参的方法
function date() {console.log(arguments);}date('白芷', '胡歌', '周星星'); //Arguments(3)
返回结果：
返回的是一个对象
0: “白芷”
1: “胡歌”
2: “周星星”
callee: ƒ date()
length: 3
Symbol(Symbol.iterator): ƒ values()
proto: Object
ES6:
function date(...args) {//放在了形参里面，而下一个的扩展运算符则是放在了调用的实参里面console.log(args);//filter some every map}date('白芷', '胡歌', '周星星');
返回的是一个数组：
[“白芷”, “胡歌”, “周星星”]
0: “白芷”
1: “胡歌”
2: “周星星”
length: 3
proto: Array(0)
rest参数必须要放到参数最后：
function fn(a,b,...args) {console.log(a); //1console.log(b); //2console.log(args); //[3,4,5,6]
}
fn(1,2,3,4,5,6);//如果写成function fn(a,...args,b){}
//则会出现错误如下：
//Uncaught SyntaxError: Rest parameter must be last formal parameter
6.3 扩展运算符
6.3.1 扩展运算符的介绍
扩展运算符能将数组转换为逗号分隔的参数序列
const tf = ['易烊千玺','王源','王俊凯'];function chunwan() {console.log(arguments);}chunwan(...tf);//如果只写入tf//chunwan(tf);//返回结果是://0: (3) ["易烊千玺", "王源", "王俊凯"]//callee: ƒ chunwan()//length: 1//Symbol(Symbol.iterator): ƒ values()//__proto__: Object
结果如下：
Arguments(3)
0: “易烊千玺”
1: “王源”
2: “王俊凯”
callee: ƒ chunwan()
length: 3
Symbol(Symbol.iterator): ƒ values()
proto: Object
6.3.2 扩展运算符的应用
- 数组的合并
const kuaizi = ['王太利', '肖央'];const fenghuang = ['曾毅', '玲花'];const zuixuanxiaopg = [...kuaizi, ...fenghuang];console.log(zuixuanxiaopg); //["王太利","肖央","曾毅","玲花"]
- 数组的克隆
const sanzhihua = ['E', 'G', 'M'];const sanyecao = [...sanzhihua];console.log(sanyecao); //(3) ["E", "G", "M"]
- 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');const divArr = [...divs];console.log(divArr); //(3) [div, div, div],此时变成了一个真正的数组
6.4 Symbol
Symbol 是ES6引入的一种新的原始数据类型，表示独一无二的值。是一种类似于字符串的值
6.4.1 特点
1.Symbol的值是唯一的 ，用来解决命名冲突的问题
2.Symbol值不能与其他数据进行运算
3.Symbol定义的对象属性不能使用for…in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
6.4.2 Symbol的创建
- 创建Symbol：
let s = Symbol();let s2 = Symbol("zs");let s3 = Symbol("zs");console.log(s2 === s3); //false//false可以理解为s2和s3虽然值一样，但是他们的编号不同，所以错误
- Symbol.for创建：
let s4 = Symbol.for('sg');let s5 = Symbol.for('sg');console.log(s4 === s5); //true
6.4.3 Symbol的注意事项
- 不能与其他数据进行运算
let s = Symbol();let result = s + 100;
结果出现如下错误：
Uncaught TypeError: Cannot convert a Symbol value to a number
- 对象添加Symbol类型的属性：
let game = {};let methods = {up: Symbol(),down: Symbol()};game[methods.up] = function() {console.log("下降");}game[methods.down] = function() {console.log("上升");}console.log(game);- Symbol内置值
Symbol内置值是Symbol的属性，而Symbol和它的内置值，可以作为对象和数组的属性来使用，具体如下：
//1.class Person {static[Symbol.hasInstance](param) {console.log(param);console.log("wobeiyonglaijiance ");}}let o = {};console.log(o instanceof Person); //检测这个值是否是该对象的实例
//2.
const arr = [1, 2, 3];const arr2 = [4, 5, 6];arr2[Symbol.isConcatSpreadable] = false; //控制数组在进行合并时，是否可以展开console.log(arr.concat(arr2));
6.5 迭代器
迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据只要部署Iterator接口，就可以完成遍历操作。
ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费
原生具备Iterator接口的数据有：Array、Arguments、Set、Map、String、TypeArray、NodeList
工作原理：
1.创建一个指针对象，指向当前数据结构的起始位置；
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3.接下来不断调用next方法，指针一直在往后移动，一直到指向最后一个成员
4.每调用方法返回一个包含value和done属性的对象
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
let iterator = xiyou[Symbol.iterator]();console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());
自定义遍历数据：
//使用for...of来遍历banji里stus的值
const banji = {name: "zjyb",stus: ['xiaoming','xiaoning','xiaotian','night'],[Symbol.iterator]() {let index = 0;let _this = this;return {next: function() {if (index < _this.stus.length) {const result = {value: _this.stus[index],done: false};index++;return result;} else {return {value: undefined,done: true}}}};}}for (let v of banji) {console.log(v);}
结果：
6.6生成器函数
生成器函数是ES6提供的一种异步编程解决方案，语言行为与传统函数完全不同
异步编程：文件操作、网络操作（AJAX，request）、数据库操作
6.6.1生成器函数声明及调用：
function* gen() {console.log('hello ');}let iterator = gen();// console.log(iterator);直接调用并不能成功，而需要使用next方法调用iterator.next(); //hello
// yield：
function* gen() {console.log(111);yield 'meiyouerduo';//函数代码的分隔符，即分段的作用console.log(222);yield 'meiyouweiba';console.log(333);yield 'zhenqiguai';console.log(444);}let iterator = gen();iterator.next(); //111//若只调用一次next，则只打印111，而不是像传统函数一样全部打印//遍历for (let v of gen()) {console.log(v);}
6.6.2生成函数参数
function* gen(arg) {console.log(arg); //AAAlet one = yield 111;console.log(one); //BBBlet two = yield 222;console.log(two); //CCClet three = yield 333;console.log(three); //DDD}let iterator = gen('AAA');console.log(iterator.next()); //next方法可以传入实参，传入的实参就是yield语句的返回结果//第一次调用返回传入函数的实参console.log(iterator.next('BBB')); //第二次传入的实参会作为第一个yield语句的整个返回结果console.log(iterator.next('CCC'));//第三次传入的实参会作为第二个yield语句的整个返回结果console.log(iterator.next('DDD'));//即next传入的实参会作为上一个yield语句的返回结果
6.6.3实例
1.获取数据
//2模拟获取 用户数据 订单数据 商品数据function getUsers() {setTimeout(() => {let data = '用户数据';iterator.next(data);}, 1000);}function getOrders() {setTimeout(() => {let data = '订单数据';iterator.next(data);}, 1000);}function getGoods() {setTimeout(() => {let data = '商品数据';iterator.next(data);}, 1000);}function* gen() {let users = yield getUsers();console.log(users);let orders = yield getOrders();console.log(orders);let goods = yield getGoods();console.log(goods);}let iterator = gen();iterator.next();
结果：
2.解决回调地狱
// 1s后控制台输出 111 2s后输出222 3s后输出333// 回调地狱:不停回调function one() {setTimeout(()=>{console.log(111); //111iterator.next();},1000);}function two() {setTimeout(()=>{console.log(222); //222iterator.next();},2000);}function three() {setTimeout(()=>{console.log(333); //333iterator.next();},3000);}function * gen() {yield one();yield two();yield three();}let iterator = gen();iterator.next();
总结
这是第一部分，后面的知识会在几天后发出，我们一起探讨学习啊，如果有错误，也请多多指出啦~
ES6之你应该知道的知识（一）相关推荐
- 一次性搞定JavaScript 从 ES6 到 ES12的基础框架知识
Javascript 是前端三剑客技术最重要的技能之一.每个学习前端的人,这个JavaScript技术是必须要学的.随着技术不断更新迭代,所以现在有一些新的知识来支持我们去学习 ES6 ~ ES12. ...
- es6去除重复项_ES6 常用知识总结
一.ES6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来 ...
- es6中类的使用、及其转es5源码解析
文章目录 前言 一.es6中的类 1.类的定义 2.类的构造方法.方法定义和实现继承 1.类的构造方法 2.类的方法定义 3.类实现继承 二.es6转es5源码解析 总结 前言 在前几节里面,介绍了在 ...
- [HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
文章目录 前言 HTML HTML 知识整理与补充 CSS CSS 知识整理与补充 JS ES6 JS Web API JQuery JS 知识整理与补充 前言 根据视频和PPT整理 视频及对应资料: ...
- JavaScript前端经典面试题之ES6面试题汇总es6
推荐阅读: vue3面试题:最新vue3.0前端经典面试试题及答案(持续更新中--)_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使 ...
- es6 获取本月本年_微信小程序之ES6与事项助手
本文发表至今已有一段时间,错别字多.文笔混乱.内容过于陈旧.本人建议读者不必细究,大概浏览即可,最新的开发指南还是以官方文档为准,该博文的示例代码经过了重构,已经与官方文档同步,可能与文中的代码片段有 ...
- 如何使用React.js和Heroku快速实现从想法到URL的转变
by Tom Schweers 由汤姆·史威士(Tom Schweers) 如何使用React.js和Heroku快速实现从想法到URL的转变 (How to go from idea to URL ...
- 你不知道的JavaScript系列（一）—— 类型
为什么80%的码农都做不了架构师?>>> JavaScript中有七种内置类型: 1.空值(null) 2.undefined 3.布尔值(boolean) 4.数字(number) ...
- vue使用python_如何使用Python和Vue创建两人游戏
vue使用python by Neo Ighodaro 由新Ighodaro 如何使用Python和Vue创建两人游戏 (How to create a two-player game with Py ...
- 回顾2017年JavaScript状况
by Sacha Greif 由Sacha Greif 回顾2017年JavaScript状况 (A Look Back at the State of JavaScript in 2017) 在20 ...
最新文章
- IDEA 报错红色下划线“cannot resolve”但仍能运行的解决方法
- 怒肝两个月MySQL源码，我总结出这篇2W字的MySQL协议详解（超硬核干货）！！
- 安装AverMedia UltraA 实时游戏录屏转播模块
- 通过Iframe在A网站页面内嵌入空白页面的方式，跨域获取B网站的数据返回给A网站！...
- 关于WebApi 跨域问题的解决的方式
- Java黑皮书课后题第3章：**3.24（游戏：抽牌）编写程序，模拟从一副52张的牌中抽一张牌，程序应显示牌的大小、花色
- mysql5.7.17的linux安装,linux下mysql5.7.17最新稳定版本安装教程
- java 8 lambda_异常作弊– Java 8 Lambdas
- 22 省遭受重大洪灾，机器学习未来能预报么？
- 滴滴CTO张博：过去的1095天 人工智能发展主要依赖3件事
- php获取当前域名的方法 如何获得域名
- C语言52单片机串口中断,52单片机的中断及其使用方法
- obj、fbx 转 3dtiles（免费转换工具）
- 微信小程序真机预览图片图标无法显示
- 手机植入木马可以监视你的一举一动，黑客是怎样入侵别人手机的？
- 在轮询系统如何将A站订单在B站自动建立，并调用B站产品
- Python markdown转epub (格式间转换)
- php 函数索引 中文索引
- c#实现循环输入商品编号和购买数量，结账时应付金额并找零
- 【LabVIEW懒人系列教程-小白入门】1.15LabVIEW程序结构之跑马灯