ES6的认识和常用

最新推荐文章于 2024-06-26 09:43:08 发布

半壶水响叮当的人

最新推荐文章于 2024-06-26 09:43:08 发布

阅读量471

点赞数

文章标签： es6 firefox chrome

本文链接：https://blog.csdn.net/MadLeey/article/details/128060813

版权

本文介绍了ECMAScript 6（ES6）的主要特性，包括let和const声明、Symbol数据类型以及内置对象Map和Set的使用。let和const提供了块级作用域，解决了变量污染和循环变量问题。Symbol用于创建独一无二的值，防止属性名冲突。Map和Set则提供了新的数据结构，Map保持键值对并允许任意类型作为键，Set则存储不重复的值。

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

简介

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

　　1、IE浏览器内核：Trident内核，也是俗称的IE内核；　　2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；　　3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；　　4、Safari浏览器内核：Webkit内核；　　5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

声明与表达式

1、let与const

ES6新增加了两个重要的 JavaScript 关键字: let 和 const。

（2）解构模型

在解构中，有下面两部分参与：

（3）数组模型的解构（Array）

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

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

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

let [a = 1, b] = []; // a = 1, b = undefined

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

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

let [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); //h e l l o

let [a = 2] = [undefined]; // a = 2

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

let [a = 3, b = a] = [];     // a = 3, b = 3
let [a = 3, b = a] = [1];    // a = 1, b = 1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2

1. a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3

2. a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1

3. a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

let 声明的变量只在 let 命令所在的代码块内有效（块级作用域、局部作用），ES6 推荐在函数中使用 let 定义变量，而非 var。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

（1）为什么需要块级作用域

优点：1、避免变量污染

        var time = new Date();

        function fn() {
            console.log(time); //undefined 因为预编译中的步骤导致
            if (false) {
                var time = "你好";
            }
        }
        fn();

2、在循环中由于声明用的var导致i变成了全局变量。

        var s = "hello";
        var i = "你好";
        for (var i = 0; i < s.length; i++) {
            console.log(s[i]);//这个i也会导致全局变量污染
        }
        console.log(i); // i变成了全局变量

（2）let命令
基本用法：

//块级作用域：{}括起来的代码块
{
  let a = 0;
  console.log(a);   // 0
}
console.log(a);   // 报错 ReferenceError: a is not defined

代码块内有效：

{
    let a = 0;
    var b = 1;
    
}
console.log(b); // 1
console.log(a); // ReferenceError: a is not defined

不能重复声明

var a = 1;
var a = 2;
console.log(a);  // 2

let b = 3;
let b = 4;
console.log(b);  // Identifier 'a' has already been declared

不存在变量提升
```
console.log(a);  //undefined
var a = "banana";

console.log(b);  //ReferenceError: b is not defined
let b = "apple";
```
变量 a 用 var 声明存在变量提升，所以当脚本开始运行的时候，a 已经存在了，但是还没有赋值，所以会输出 undefined。

变量 b 用 let 声明不存在变量提升，在声明变量 b 之前，b 不存在，所以会报错。

（3）const命令

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
基本用法：

const PI = "3.1415926";
console.log(PI);  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration

暂时性死区：
```
var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}
```
ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。
2、解构赋值

（1）概述
解构赋值是对赋值运算符的扩展。
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。
基本
可嵌套
可忽略
不完全解构默认值
剩余运算符
字符串
解构默认值

（4）对象模型的解构（Object）

基本

let { foo, bar } = { bar: 'bbb' , foo: 'aaa'};
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

可嵌套可忽略
不完全解构
剩余运算符
解构默认值

Symbol

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。

它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

声明方式

let s = Symbol();

typeof s
// "symbol"

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

let sys1 = Symbol("hello");
let sys2 = Symbol("hello");
console.log(sys1 === sys2);

注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

Symbol值可以显示转换为字符串

Symbol值也可以转换为布尔值但是没法转换为数值

内置对象

1、Map与Set

（1）Map

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map和Object的区别：

- 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
- Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
- Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
- Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

Map特点：有序、键值对（键可以是任意类型）、键名不能重复（如果重复，那么覆盖）

Map中的key

key是字符串

var myMap = new Map();
var keyString = "a string"; 
 
myMap.set(keyString, "和键'a string'关联的值");
 
myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"
                         // 因为 keyString === 'a string'

key是对象

var myMap = new Map();
var keyObj = {}, 
 
myMap.set(keyObj, "和键 keyObj 关联的值");

myMap.get(keyObj); // "和键 keyObj 关联的值"
myMap.get({}); // undefined, 因为 keyObj !== {}

key是函数

var myMap = new Map();
var keyFunc = function () {}, // 函数
 
myMap.set(keyObj, "和键 keyObj 关联的值");
 
myMap.get(keyFunc); // "和键 keyFunc 关联的值"
myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}

key是NaN

var myMap = new Map();
myMap.set(NaN, "not a number");
 
myMap.get(NaN); // "not a number"
 
var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"