JavaScript高级教程（25）—

1.ES6简介

1.1什么是es6？

ES的全称是ECMAScript，它是由ECMA国际标准组织化制定的一项脚本语言的标准化规范。

1.2为什么使用ES6

每一次标准的诞生都意味着语言的完善，功能的增强。JavaScript语言本身也有一些令人不满意的地方。

变量提升特性增加了程序运行时的不可预测性
语法过于松散，实际相同的功能，不同的人可能会写出不同的代码

2.ES6的新增语法

2.1let

ES6中新增的用于声明变量的关键字

let声明的变量只在所处于的块级有效

注意：使用let关键字声明的变量具有块级作用域，使用var声明的变量不具备块级作用域特性。
不存在变量提升
暂时性死区

在块级作用域内声明的变量，就和这个块级作用域进行了整体的绑定，此代码会报变量未定义的错误。

let经典面试题1：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var arr = [];for (var i = 0; i < 2; i++) {arr[i] = function() {console.log(i);}}arr[0](); //2arr[1](); //2</script>
</body></html>

结果：

解析：此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的值。

let经典面试题2：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let arr = [];for (let i = 0; i < 2; i++) {arr[i] = function() {console.log(i);}}arr[0]();arr[1]();</script>
</body></html>

结果：

解析：此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域的变量都是不同的，函数执行时输入的时自己上一级（循环产生的块级作用域）作用域下的值。

2.2const

作用：声明变量，常量就是值（内存地址）不能变化的量。

具有块级作用域
声明常量时必须赋值
常量赋值后，值不能修改

3.let. const. var的区别

（1）使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
（2）使用let声明的变量，其作用域为语句所在的代码块内，不存在变量提升。
（3）使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

4.解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。

4.1数组解构

如果解构不成功，变量的值为undefined;

4.2对象解构

写法1：

写法2：

4.3箭头函数

ES6中新增的定义函数的方式。

箭头函数的特点：（1）函数体中只有一句代码，且代码的结果就是返回值，可以省略大括号

（2）如果形参只有一个，可以省略小括号

function fn(v){rerurn v;
}
//箭头函数写法
const fn = v => v;

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

箭头函数面试题：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var age = 100;var obj = {age: 20,say: () => {alert(this.age);}};obj.say(); //100//解析：对象不能产生作用域，say()方法实际是被定义在全局作用域下，say方法中的this指向的是window</script>
</body></html>

5.剩余参数

（1）剩余参数语法允许我们将一个不定数量的参数表示为一个数组

（2）剩余参数和解构配合使用

6.Array的扩展方法

6.1扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
扩展运算符可以应用于合并数组

将类数组或可遍历对象转换成真正的数组

6.2构造函数方法：Array.from()

将类数组或可遍历对象转换成真正的数组

方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

6.3实例方法：find()
用于找出第一个符合条件的数组成员，如果没有找到就返回undefined

6.4实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到，返回-1

6.5实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值。

7.String的扩展方法

7.1模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

模板字符串的特点：
①模板字符串可以解析变量

<script>let name = '张三';console.log(name);let sayHello = `Hello, 我的名子叫${name}`;console.log(sayHello);</script>

②模板字符串可以换行

 <script>let result = {name: 'zhangsan',age: 20}let html = `<div><span>${result.name}</span><span>${result.age}</span></div>`;console.log(html);</script>

③在模板字符串中可以调用函数

7.2实例方法：startWith()和endWith()

starWith()：表示参数字符串是否在原字符串的头部，返回布尔值。
endWith()：表示参数字符串是否在原数组的尾部，返回布尔值

7.3实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。

8.Set数据解构

ES6提供了新的数据解构Set。它类似于数组，但是成员是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成Set数据解构。

const s = new Set();

Set函数可以接受一个数组参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]);

实例方法：

add(value):添加某个值，返回Set结构本身
delete：删除某个值，返回一个布尔值，表示删除是否成功
has(value):返回一个布尔值，表示该值是否为Set的成员
clear():清除所有成员，没有返回值

遍历：

set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

JavaScript高级教程（25）——ES6相关推荐

尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
【javascript高级教程】JavaScript Array（数组）对象
数组对象的作用是:使用单独的变量名来存储一系列的值. 创建数组, 为其赋值: var mycars = new Array(); mycars[0] = "Saab"; mycar ...
【javascript高级教程】JavaScript 对象
JavaScript 中的所有事物都是对象:字符串.数值.数组.函数...及自定义对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法 ...
菜鸟教程之 JavaScript 高级教程
From:https://www.runoob.com/js/js-objects.html JavaScript 对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... ( ...
javascript高级教程
脚本语言:指WEB浏览器内由解释器执行的语言. javascript对象模型 window->document->form->table,button,text. 1.window为 ...
【javascript高级教程】JavaScript 字符串（String）对象
String 对象用于处理已有的字符块. JavaScript 字符串一个字符串用于存储一系列字符就像 "John Doe". 一个字符串可以使用单引号或双引号: var car ...
【javascript高级教程】JavaScript Number 对象
JavaScript 只有一种数字类型.可以使用也可以不使用小数点来书写数字. var pi=3.14; // 使用小数点 var x=34; // 不使用小数点极大或极小的数字可通过科学(指数)计 ...
【JavaScript高级教程】JavaScript prototype（原型对象）
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法. function Person(first, last, age, eyecolor) {this.fi ...
JavaScript高级教程-代理与反射
代理与反射一.代理基础 1. 创建空代理 2. 定义捕获器 3. 捕获器参数和反射 API 4. 捕获器不变式 5. 可撤销代理 6. 实用反射 API (1)反射 API 与对象 API (2)状 ...

JavaScript高级教程（25）——ES6

JavaScript高级教程（25）——ES6相关推荐

最新文章

热门文章