ES6的理解

七小山

于 2022-07-09 18:46:54 发布

阅读量3.6k

点赞数

文章标签： es6 javascript

本文链接：https://blog.csdn.net/qq_55928824/article/details/125695571

版权

本文深入介绍了JavaScript的ES6版本，强调其为解决ES5不足而引入的特性，如let和const声明变量，块级作用域，模板字符串，函数默认参数，箭头函数，Set和Map数据结构等。let和const提供了更精确的变量控制，模板字符串简化字符串拼接，箭头函数简化函数定义，而Set和Map则提供了新的数据组织方式。此外，还探讨了WeakSet和WeakMap在内存管理上的独特作用。

摘要由CSDN通过智能技术生成

1、ES6是什么？用来做什么？

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版
它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ES6提供了大量的语法糖
ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念
目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6

2、Let和Const

（1）let声明变量，可变

const定义常量（实际指的是变量和的内存地址），不可变，只能在其声明或定义的代码块内有效

let：ES6新增，用于声明变量，有块级作用域
var：ES5中用于声明变量的关键字，存在各种问题
如果你的代码里还存在 var，那就不太好了！

注：若区块中存在let或者const命令，则这个区块对这些变量和常量在一开始就行成封闭作用域，只要在声明之前使用就会报错（可能会出现暂时性死区）不能重复声明，否则报错。

（2）let命令存在块级作用域

if (true) {
    var a = 10;
    let b = 20;
}
console.log(a); //10
console.log(b); //Uncaught ReferenceError: b is not defined

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

（3）Let不存在变量提升

//var的情况
console.log(foo);
var foo = 2;   //undefined

//let的情况
console.log(bar);
let bar = 2;   //ReferenceError: Cannot access 'bar'
上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。 变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。 因此，使用let声明变量，极大的消除了代码的潜在bug的隐患
（4）Let暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。
var temp = 123;
if(true){
    temp = 'abc';  //ReferenceError: Cannot access 'temp' 
    let temp;
}

3、ES6提供的模板字符串

注意：ES6模板字符串中必须要使用反引号。

const name = "why";

const age = 12;

const height = 1.33;

// ES6提供的模板字符串

const message = my name is ${name},age is ${age},height is ${height};

console.log(message); //my name is why,age is 12,height is 1.33

const info = age double is ${age * 2};

console.log(info); //age double is 24

function doubleAge() {

return age * 2;

}

const info2 = double age is ${doubleAge()};

console.log(info2); //double age is 24

4、标签模块字符串的使用

// 第一个参数依然是模块字符串中的整个字符串，只是被切成多块，放到一个数组中

// 第二个参数是某开字符串中第一个${}

function foo(m, n) {

console.log(m, n, "----");

}

const name = "why";

const age = 12;

foohello${name}wor${age}ld; //[ 'hello', 'wor', 'ld' ] why ----

5、ES6中函数的默认参数

//有默认值的形参最好放到最后

function bar(x, y, z = 20) {

console.log(x, y, z); //undefined 10 30

}

bar(undefined, 10, 30);

// 有默认值的函数的Length属性

function baz(x = 2, y, z, m) {

console.log(x, y, z, m);

}

console.log(baz.length); //0

6、ES6中函数的剩余参数

function foo(m, n, ...args) {

console.log(m, n); //20 30

console.log(args); //[ 40, 50, 50 ]

}

foo(20, 30, 40, 50, 50);

7、箭头函数的语法

（1）如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

let f = () => 5;
// 等同于
let f = function() { return 5 };

let sum = (num1, num2) => {
return num1 + num2;
};
// 等同于
let sum = function(num1, num2) {
return num1 + num2;
};

（2）由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

let getTempItem = id => ({ id:id, name:'Temp' })

使用箭头函数的注意点

1.函数体内的this对象。

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
或者说：箭头函数当方法使用时没有定义this绑定，而是捕获所在上下文的 this ，作为自己的 this 。

8、Set和Map

（一）Set
类似于数组，其成员唯一，不重复

Set本身是一个构造函数，用于生产Set数据结构

let s=new Set();
（1）Set函数可以接受一个数组，作为参数，用于初始化

（2）向Set加入值时不会发生数据转换，即1和’1’为不同的值

（3）在Set内部，两个NaN相等

（4）Set实例的属性
Set.prototype.Constructor（）：构造函数，就是Set（）
Set.prototype.size（）：返回Set实例成员总数，长度
add（value）：添加值，返回Set本身
delete（value）：删除值，返回一个布尔值，表删除是否成功
has（value）：返回布尔值，表参数是否为Set成员
clear（）：清除所有成员，无返回值
（5）遍历
keys（）：返回键名的遍历器
values（）：返回键值的遍历器
entries（）：返回键值对的遍历器
forEach（function（）{}）：使用回调函数遍历每个成员，无返回值（可加参2，表示绑定的this对象）

（二）WeaKSet
与Set类似，表不重复的集合

与Set的区别

（1）WeakSet的成员只能是对象，不能是其他值

（2）WeakSet中的对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用

（3）WeakSet的成员不能引用，因为其随时可能消失

（4）WeakSet本生是一个构造函数，使用生成WeakSet数据结构

let w = new WeakSet();
可接受一个数组或者类似于数组的对象作为参数来初始化

（5）WeakSet的方法
WeakSet.prototype.add（value ）：添加新成员
WeakSet.prototype.delete（value）：删除指定成员
WeakSet.prototype.has（value）：返回布尔值，表指定值是否在WeakSet实例中
WeakSet无size属性，无法遍历其成员