1前端串讲笔记 | 青训营

120 阅读6分钟

ES6的概述

ECMAScript的快速发展:

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。ECMAScript定义了:

[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。

[类型]– 布尔型、数字、字符串、对象等。

[原型和继承]

内建对象和函数的

[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。

ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的[Web API],这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似[node.js]的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版?其实,在过去确实曾计划发布提出巨量新特性的第4版,但最终却因想法太过激进而惨遭废除(这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统)。

ES4饱受争议,当标准委员会最终停止开发ES4时,其成员同意发布一个相对谦和的ES5版本,随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”,因此,ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言,并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5,引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。

ES6: 是JavaScript语言的下一代标准,2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

小结:

ECMAScript是前端js的语法规范;可以应用在各种js环境中。如:浏览器或者node.js环境。 它有很多版本:es1/2/3/5/6,很多新特性,可以在js环境中使用这些新特性。

ES6的语法:let和const命令

变量和常量的严格区分。

解决了

var 变量穿透的问题

for(var i=0;i<5;i++){ console.log(i);}console.log(i);//产生变量作用域穿透,不严格 1 const 常量修改: 这个关键字,很需要!

注:

在实际开发和生产中,如果是小程序,uniapp 或者一些脚手架中的,可以大胆地去用let和const 但如果是web开发,建议还是使用 var ,因为许多低版本的浏览器并不支持 let 和 const 核心代码:

新建espro6\demo01.html如下

Document

1 双击espro6/demo01.html运行如下:

小结 let : 可变变量 const 是常量 var:最原始。

ES6的语法:模板字符串

笔记: 字符串会牵涉到动态拼接部分 以前: 我们都是使用 ‘’ 或者 “” 来把字符串套起来

现在: `` 【反引号】

第一个用途:基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//es5 let name = 'itcast' console.log('hello ' + name) //es6 const name = 'itcast' console.log(hello ${name}) //hello itcast 1 第二个用途:在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

新建一个espro6\demo02.html如下:

模板字符串

ES6的语法:函数默认参数与箭头函数

解决函数无法提供默认值的问题 之前是默认为 undefined 且不能设置 函数默认参数 在方法的参数后面加上一个默认值即可 核心代码 双击espro6/demo03.html运行如下:

Document

1

箭头函数

箭头函数简化函数的定义,可以让我们不用使用function关键字

/箭头函数最直观的三个特点。 1不需要function关键字来创建函数 2省略return关键字 3继承当前上下文的 this 关键字/ 1 核心代码

双击espro6/demo04.html运行如下:

箭头函数

1

箭头函数深度学习

双击espro6/demo05.html运行如下:

箭头函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

ES6的语法:对象初始化简写

核心代码

它是指:如果一个对象中的key和value的名字一样的情况下可以定义成一个。

Document

1 双击espro6\demo06.html

对象简写

1

ES6的语法:对象解构

核心代码

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

双击espro6\demo07.html

对象解构

1 思考:为什么对象取值要提供两种方式: . 和 [ ] ?

ES6的语法:传播操作符【…】

把一个对象的属性传播到另外一个对象中

Spread Operator

核心代码

双击espro6\demo08.html

用传统方法,需要一个个去取剩下的值,但传播操作符就简洁明了了

ES6的语法:传播操作符【...】

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 3.8、ES6的语法:数组map和reduce方法使用(了解) 目标:数组中map方法的应用场景

讲解:

数组中新增了map和reduce方法。

map()

自带一个循环遍历指定的数组,然后根据指定的方法处理当前遍历的值后,回填到对应的位置 该方法不改变原来的数组,但返回一个新的处理后的数组 作用:可以很方便地处理后端传来的 Json 字符串集合

举例:有一个字符串数组,希望转为int数组

数组方法的扩展-map reduce

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

数组方法的扩展-map reduce

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 reduce()

reduce(function(),初始值(可选)) :

接收一个函数(必须)和一个初始值(可选),该函数接收两个参数: 第一个参数是上一次reduce处理的结果 第二个参数是数组中要处理的下一个元素 reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是 第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数 从左到右依次处理!

数组方法的扩展-map reduce

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

总结

ES6 中所有的新语法,都可以大胆地用在 Node.js 中