ES6新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50233139/article/details/121393781

文章目录

1.let 和 const 命令

1.let 和 const 命令

一.let命令

1.1基本语法

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

if (true) {
var a = 10;
let b = 10;

}
console.log(a);
console.log(b);
a // 10
b // 报错: b is not defined

上面代码在代码块中，分明用let和var声明了两个变量。然后再代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for 循环的计数器，就很合适用let命令。

for(let i=0;i<10;i++){
}
console.log(i)
//报错:i is not defined

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

下面代码如果用var，最后输出是10

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋值给数组a
的函数内部的consloe.log(i),里面的i指向的就是全局的i，也就是说，所有数组a
的成员里的i，指向的都是一个i，导致运行时输出的最后一轮i的值，也就是10

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以走后输出是6。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部分是一个单独的子作用域

for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了3次abc。这表明函数内部的变量i与循环变量i在不同一个作用域，有各自单独的作用域(同一个作用域不可使用let重复声明同一个变量)

1.2不存在变量提升

var命令会发生"变量提升"现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少会奇怪，按照逻辑，变量应该在声明语句之后才可以使用。

let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错

// var 的情况
console.log(a); // 输出undefined
var a = 2;
// let 的情况
console.log(b); // 报错ReferenceError
let b = 2;

上面代码中，变量a用var命令声明，会发生变量提升，即脚本开始运行时，变量a已经存在了，但是没有值，所以会输出undefined。变量b用let命令声明，不会发生变量提升。这表示在声明它之前，变量b是不存在的，这是如果用到它，就会抛出一个错误。

1.3不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function fun() {
let a = 10;
var a = 1;
}
// 报错
function fun() {
let a = 10;
let a = 1;
}

因此，不能在函数内部重新声明

function fun(arg) {
let arg;
}
fun() // 报错
function fun(arg) {
{
let arg;
}
}
fun() // 不报错

二.块级作用域

let 实际上为JavaScript新增了块级作用域

function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5

}

上面的函数有两个代码块，都声明了变量n，运行后输出5.这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出值才是10

ES6允许块级作用域的任意嵌套

{{{{
{let insane = 'Hello World'}
console.log(insane); // 报错
}}}};

代码使用了五层块级作用域，每一层都是单独的作用域，第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

{{{{
let name = 'Hello World';
{let name = 'Hello World'}
}}}};

三.const命令

基本用法

const声明一个只读常量，一旦声明，常量的值(内存地址)就不能改变

具有块级作用域

if(true){
const a = 10;
}
console.log(a);//a is not defined

声明常量时必须赋值

const PI;// Missing initializer in sonst declaration

常量赋值后，值不能修改

const Pi = 3.1415;
Pi // 3.1415
Pi = 3;//；类型错误:Assignment to constant variable.

上面代码表名改变常量的值会报错

四、let、const、var的区别

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

var	let	const
函数作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可以更改	值可以更改	值不可更改

五. 解构赋值

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

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量

5.1 数组解构

let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);

数组解构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量

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

let [foo] = [];
let [bar, foo] = [1];

5.2 对象解构

let person = {name: 'zhangsan', age: 20};
let {name, age} = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20

六、箭头函数

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

() => {}
const fn = () => {}

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(num1, num2) {
return num1 + num2;
}

const sum = (num1, num2) => num1 + num2;

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

const fn(v) {
return v;
}
const fn = v => v;

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

const obj = {name: '张三'};
function fn() {
console.log(this);
return () => {
console.log(this);
}
}
const resFn = fn.call(obj);
resFn();

箭头函数和普通函数的区别

一.外形不同：箭头函数使用箭头定义，普通函数中没有代码实例如下：

// 普通函数

function func(){
// code
}

// 箭头函数

let func=()=>{
// code
}

二.箭头函数都是匿名函数

普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。

代码实例如下：

// 具名函数

function func(){
// code
}

// 匿名函数

let func=function(){
// code
}

// 箭头函数全都是匿名函数

let func=()=>{
// code
}

三.箭头函数不能用于构造函数，不能使用new

普通函数可以用于构造函数，以此创建对象实例。

代码实例如下：

function Person(name,age){
this.name=name;
this.age=age;
}
let admin=new Person("张三",18);
console.log(admin.name);
console.log(admin.age);
//张三
//18

七、剩余参数

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

function sum (first, ...args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10,20,30);

八、ES6 的内置对象扩展

8.1 Array 的扩展方法

8.1.1 扩展运算符

扩展运算符（展开语法）

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

let ary = [1, 2, 3];
...ary // 1, 2, 3

console.log(…ary); // 1 2 3 // 参数序列中的逗号，会被 console.log
方法当做方法的参数分隔符

console.log(1, 2, 3); // 1 2 3

扩展运算符可以应用于合并数组

// 方法一

let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];

// 方法二

ary1.push(...ary2);

将类数组（伪数组）或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];

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

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

let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length:3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

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

let arrayLike = {
'0': 1,
'1': 2,
'2': 3,
length:3
};
let newAry = Array.from(aryLike, item => item * 2)

实例方法：find()

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

let ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find((item, index) => item.id == 2);

8.1.3 实例方法：findIndex()

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

let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value>9);
console.log(index); // 2

8.1.4 实例方法：includes()

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

[1, 2, 3].includes(2); // true
[2, 3, 4].includes(1); // false

8.2 String 的扩展方法

8.2.1 模板字符串

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

let name = `zhangsan`;

模板字符串可以解析变量

let name = 'zhangsan';
let sayHello = `hello, my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行

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

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

const sayHello = function() {
return '哈哈哈';
};
let greet = `${sayHello()} 哈哈哈`;
console.log(greet); // 哈哈哈

8.2.2 实例方法：startsWith() 和 endsWith()

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

let str = 'hello world!';
str.startsWith('hello'); // true
str.endsWith('!'); // false

8.2.3 实例方法：repeat()

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

'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"

8.3 Set 数据结构

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

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

const s = new Set();

Set 函数可以接收一个数组作为参数，用来初始化

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

可以利用 Set 数据结构做数组去重

const s3 = new Set(["a", "b", "a", "b"]);
console.log(s3); // Set(2) {"a", "b"}
console.log(s3.size); // 2
const ary = [...s3];
console.log(ary); // ["a", "b"]

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

const s = new Set();

s.add(1).add(2).add(3); // 向 set 结构中添加值

s.delete(2); // 删除 set 结构中的2值

s.has(1); // 表示 set 结构中是否有1这个值，返回布尔值

s.clear(); // 清除 set 结构中的所有值

遍历

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

const s = new Set(["a", "b", "c"]);
s.forEach(value => console.log(value))