ES6的理解

2023-11-16

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属性,无法遍历其成员

(三)Map
类似于对象,也是键值组合

其键的范围不限于字符串,可为各种数据类型的值(包括对象)均可当做键

使用Map()构造函数生成

let m = new Map();
(1)Map可接受一个数组作为参数,其数组成员为一个个表示键值对的数组

(2)若一个键多次赋值,则后面的覆盖前面的值

(3)若读取一个未知的键,则返回undefined

(4)Map的键实际上绑定的是地址值,只要地址不同,即视为两个键(解决了同名属性碰撞的问题)

(5)Map实例的属性方法
1、size():返回Map结构的成员总数

2、set(key,value):设置key值所对应的键,然后返回Map结构。若key已经有值,则赋值更新,否则新生成该键值

3、get(key):获取key对应的值,若找不到key则返回undefined

4、has(key):返回一个布尔值,表示ley是否在Map结构中

5、delete(key):删除某个键,删除成功则返回true,反之返回false

6、clear():清除所有成员,无返回值

(6)遍历
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach(function(){}):遍历Map所有成员
Map的遍历顺序就是插入顺序

(四)Map与其他数据类型的转化


(1)Map转数组
Map转化为数组最快的方法时结合使用扩展运算符( . . . )

(2)数组转Map
将数组传入构造函数即可

(3)Map转对象
若Map所有键都是字符串,则可以转为对象

function strMapToObj(strMap){
    let obj = Object.create(null);
    for (let [k,v] of strMap){
        obj[k]=v;
    }
    return obj;
}

(4)对象转Map
function objToStrMap(obj){
    let strMap=new Map();
    for(let k of Object.keys(obj)){
        strMap.set(k.obj[k]);
    }
    return strMap;
}

(5)Map转JSON
情况一:Map键名都是字符串,可以转为对象JSON

function StrMapToJson(StrMap){
    reutrn JSON.stringify(strMapToObj(strMap));
}

情况二:Map键名中含有非字符串,转为数组JSON

function mapToArrayJson(map){
    return JSON.stringify(...map);
}

(6)JSON转Map
正常情况所有键名都是字符串

function jsonToStrMap(jsonStr){
    return objToStrMap(JSON.parse(jsonStr));
}

特殊情况:在整个JSON就是一个数组,且数组成员本身又是由一两个成员的数组,此时应该一一对应的转为Map(数组转为JSON的逆操作)

function jsonToMap(jsonStr){
    return new Map(JSON.parse(jsonStr));
}

(五)WeakMap
与Map结构类似,也用于生成键值对的集合

通过WeakMap函数生成

let wMap = new weakMap();

(1)可使用set方法添加成员

(2)可接受一个数组,作为构造函数的参数

(3)WeakMap与Map的区别

WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名(即数组和Symbol值作为WeakMap的键名时会报错)

WeakMap的键名所指向的对象不计入垃圾回收机制(会自动被移除,有助于防止内存泄漏)

WeakMap没有遍历操作,也,没有size属性

无法清空,即没有clear()方法

(4)WeakMap的语法
get()
set()
has()
delete()
 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ES6的理解 的相关文章

随机推荐

  • Deprecated: __autoload() is deprecated, use spl_autoload_register()

    官网是这样说的 spl autoload register PHP 5 gt 5 1 0 PHP 7 spl autoload register 注册给定的函数作为 autoload 的实现 说明 spl autoload register
  • ply补全为立方体_PLY 文件结构

    典型的 PLY 文件结构 头部 顶点列表 面片列表 其他元素列表 头部是一系列以回车结尾的文本行 用来描述文件的剩余部分 头部包含一个对每个元素类型的描述 包括元素名 如 边 这个元素在工程里有多少 以及一个与这个元素关联的不同属性的列表
  • 第八章 假设检验

    目录 一 假设检验的基本概念 假设及假设检验的定义 原假设与备择假设 基本思想 接受域与拒绝域 假设检验的分类 两类错误 二 一个正态总体下的参数假设检验 期望 方差的假设检验 三 两个正态总体下的参数假设检验 期望的差异性 方差的差异性的
  • 【H5】 svg的 defs用法 渐变

    defs defs元素用于预定义一个元素使其能够在SVG图像中重复使用 在元素中定义的图形不会直接显示在SVG图像上 要显 示它们需要使用元素来引入它们 symbol 元素用于定义可重复使用的符号 嵌入在元素中的图形是不会被直接显示 的 除
  • 前端高频面试题汇总(css,html)

    目录 H5 的新特性有哪些 C3 的新特性有哪些 如何使一个盒子水平垂直居中 如何实现双飞翼 圣杯 布局 CSS 的盒模型 CSS 中选择器的优先级以及 CSS 权重如何计算 列举 5 个以上的 H5 input 元素 type 属性值 C
  • Keil警告warning: #223-D: function “memcpy” declared implicitly

    使用memcpy 函数编译后出现警告 解决方案 在 h文件中加上头文件 include string h
  • GPTzero

    关于GPTzero 网址 https gptzero me 这是我今天才发现的网站 功能是你可以分辨任何人工智能写的文章与人为写的文章 注册方法 注册方法非常简单 只需要一个电子邮箱 我用的是outlook邮箱 其他的也行 使用方法 登录成
  • 【超分辨率】—基于深度学习的图像超分辨率最新进展与趋势

    1 简介 图像超分辨率是计算机视觉和图像处理领域一个非常重要的研究问题 在医疗图像分析 生物特征识别 视频监控与安全等实际场景中有着广泛的应用 随着深度学习技术的发展 基于深度学习的图像超分方法在多个测试任务上 取得了目前最优的性能和效果
  • 我在修改jupyter字体的时候输入命令jt -l 遇到了jt既不是内部也不是外部命令咋整?...

    点击上方 Python爬虫与数据挖掘 进行关注 回复 书籍 即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 独立三边静 轻生一剑知 大家好 我是Python进阶者 一 前言 前几天在Python白银交流群 Joker 问了一
  • 如何在本地快速启动一个k8s集群?小技巧,学到了

    背景 最近在阅读 每天5分钟玩转Kubernetes 这本书 个人感觉是一本不错的 K8S 的入门书籍 我们在刚开始学习一项技术的时候 不论是通过官方文档 书籍 亦或是视频的形式 如果仅仅是去看 而不去练习实践的话 那么是很难将其真正应用起
  • JSTL的错误“attribute test does not accept any expressions”解决方法

    解决方法有2个 1 将 更改为 2 使用JSTL的备用库 将 更改为
  • 数据中台与数据仓库比较

    从三个点来说 1 提供服务的对象 2 业务域 3 层次的划分 1 提供服务的对象 a 数据仓库的服务对象基本上是人 明细数据 聚合指标 转化率模型 他们的目前用户都是人 b 数据中台的服务对象变成 人 机器 用户标签 机器学习模型 数据挖掘
  • 扩展Lucas定理

    本介绍主要是在学习后写下自己的理解 故以转载形式发出 题意 给定 n m p n m p n m p 求 C
  • 个人游戏作品动态图展示

    暗黑破坏神3D战斗手游 2D射击联网对战小游戏 类似以前玩过的4399 联网炸金花游戏 解密类小游戏
  • CRC 在线计算器

    On line CRC calculation and free library https www lammertbies nl comm info crc calculation html
  • warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]

    在C 11中有明确规定 char p abc valid in C invalid in C 如果你进行了这样的赋值 那么编译器就会跳出诸如标题的警告 但是如果你改成下面这样就会通过warning char p char abc OK 或者
  • Liunx基础-进程概念(下)

    目录 一 程序地址空间 二 fork返回值问题理解 一 程序地址空间 研究背景 kernel 2 6 32 32位平台 程序地址空间回顾 1 地址空间描述的基本空间大小单位是字节 2 32位下 gt 2 32次方个地址 3 一共有2 32个
  • 【2023】终端的n种打开方式+Anaconda修改虚拟环境默认安装路径+创建虚拟环境

    目录 一 终端的n种打开方式 1 使用 运行 对话框 2 通过右键菜单 3 通过开始菜单 4 通过搜索 5 通过文件资源管理器 6 通过任务管理器 二 更改虚拟环境安装路径 1 使用命令行修改 方法一 查看conda配置 使用如下命令更改默
  • 【MATLAB教程案例23】基于MATLAB图像分割算法仿真——阈值分割法、Otsu阈值分割法、K均值聚类分割法等

    FPGA教程目录 MATLAB教程目录 目录 1 软件版本 2 通过二值图实现图像分割 3 通过Otsu阈值分割实现图像分割
  • ES6的理解

    1 ES6是什么 用来做什么 ES6 全称 ECMAScript 6 0 是 JavaScript 的下一个版本标准 2015 06 发版 它的目标 是使得 JavaScript 语言可以用来编写复杂的大型应用程序 成为企业级开发语言 ES