ES6学习笔记

ES6 学习笔记 ES6 引入了许多新特性,如let/const解构表达式箭头函数Promise等,极大地提升了 JavaScript 的开发效率和代码可读性。掌握这些新特性,能够帮助我们编写更加现代化和高效的 JavaScript 代码。 阅读详情

ES6学习笔记

本文作者:imweb coolriver 原文出处:imweb社区 未经同意,禁止转载

本文为初步阅读ECMAScript6入门后的一些记录与感想。

简介

ES6的设计目标,是使得JavaScript语言可以用来编写大型复杂的应用程序,成为企业级开发语言。ES6将于2015年6月正式发布。

现在最新版本的Nodejs上可以通过`--harmony`参数开启ES6的部分支持。如果旧的Nodejs版本不支持或者想体验更多的ES6 特性
可以 使用Google的[traceur](https://github.com/google/traceur-compiler)工具。traceur可以在前端编译ES6代码,也可以
在node上 编译或执行ES6代码。
  • traceur在node上安装: npm install -g traceur
  • 直接执行ES6文件: traceur test.es6.js
  • 编译ES6文件到ES5文件:traceur --script test.es6.js --out test.es5.js ES6在很方面都对ES5有增强,下面将从不同方面对ES6在ES5上的加强进行介绍。

新增块级作用域(let与const关键字)

let声明变量

  在ES5中,除了全局作用域外,限定所声明的变量的作用域是函数作用域。这使得ES5在很多情况下为了模拟块级作用域(避免变量名污染)需要使用立即执行的匿名函数。在ES6中新增了声明块级使用域变量的关键字let。与var相比,使用let声明的变量有如下特点:

  1. let声明的变量所在的作用域为块级。
  2. let声明的变量不存在变量提升。
  3. let声明的变量不允许重复声明,否则会报错。 使用let可以替代ES5中为了模拟块级作用域而使用的立即执行的匿名函数:
//ES5实现方法:
(function(){
    for (var i = 0;i < 10;i++){
        //doSomething
    }
})();

//ES6实现方法:
for (let i = 0;i < 10;i++){
    //doSomething
}
  • 需要注意的是,ES6中函数本身的作用域在其块级作用域之类(相当于使用let声明了),这样,在if条件内声明的函数就不会像ES5因函数提升而总会被声明。
const声明常量

  ES6中可以使用const关键字来声明常量,被声明的常量不能被修改。与使用let声明的变量类似,const声明的常量为块级作用域,不存在变量提升,且不可重复声明。
  const只限定就是所以的地址不能改变,意味着如果声明的目标为对象,那么对象的属性是可以修改的。书中建议如果要使对象为常量的话可以配合Object.freeze()函数来实现:

const foo = Object.freeze({a:1});

//foo = {b:2} 无法修改foo
//foo.a = 2   无法修改foo.a

  以上方法中的Object.freeze()函数本身有局限性,它只能冻结对象的属性不被修改,并不能冻结它的属性的属性被修改。如果要实现将对象内部所有属性冻结,需要使用自定义的强化的冻结函数。关于深度冻结对象的方法在codewars上的一个题目有描述,具体方案如下:


Object.deepFreeze = function (object) {
    Object.freeze(object);
    Object.keys(object).forEach(function(key) { 
        if(typeof(object[key]) == 'object') 
        return Object.deepFreeze(object[key]); 
    });
}

   通过以上deepFreeze即可实现完全将对象常量化。效果如下:


const foo = Object.freeze({a:[1]}); //使用原始的冻结函数
foo.a.push(2); //本操作可以使foo.a变为[1,2]

const foo2 = Object.deepFreeze({a:[1]}); //使用深度冻结函数
foo2.a.push(2); //本操作无法改变foo2.a
全局对象属性

  全局对象是最顶层的对象,在浏览器环境指的是window对象,在Node.js指的是global对象。ES5规定,所有全局变量都是全局对象的属性。
  ES6规定,var命令和function命令声明的全局变量,属于全局对象的属性;let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。

变量的解构赋值

  ES6中新增了一种赋值方法,可以批量地从对象(或数组)中提取出相应的值赋值到一组对应的变量上。下面为数组形式的解构赋值:

//数组的解构赋值
var [a,b,c] = [1,2,3];

//相当于
var a = 1,b = 2,c = 3;

  下面为对象形式的解构赋值:

//对象的解构赋值方式一
var {bar, foo} = {foo: "aaa", bar: "bbb"};
foo //"aaa"
bar //"bbb"

//对象的解构赋值方式二
var {first: f, last: l} = {first: "hello", last: "world"};
f //"hello"
l //"world"

解构赋值可以带来很多便利:

  • 变量交换 :[x, y] = [y, x]
  • 函数返回多个值赋值给多个变量
  • 可以方便地将一组参数与变量名对应起来。
  • 方便提取JSON数据
  • 方便设置函数参数默认值。(解构赋值可以指定默认值)
  • 遍历Map:for (let [key, value] of map){}
  • 加载模块时指定需要加载的方法:const {SourceMapConstumer, SourceNode} = require("source-map")

字符串扩展

  • ES6中提供了一级新的方法来解决ES5里某些中文字符(UTF-16编码大于0XFFFF)编码的问题。另外ES5中使用码点"\uXXXX"来表示字符的方法不能表示大于0XFFFF的字符,在ES6中可以使用大括号将码点括起来就可以表示大于0XFFFF的字符:"\u{XXXX}"。
  • ES6对正则表达式添加了u修饰符,用来正确处理大于\uFFFF的Unicode字符。点(.)字符在正则表达式中,解释为除了换行以外的任意单个字符。对于码点大于0xFFFF的Unicode字符,点字符不能识别,必须加上u修饰符:
var s = "
超详细的ES6学习笔记 ES6笔记 1.let和const关键字 2.解构赋值 ​3.函数 4.数组 5.字符串 6. 对象 7. Promise 对象 阅读详情

相关推荐

# es6 学习笔记

es6学习笔记

huangjinghui66的博客 537

了解一些ECMAScript 6

ECMAScript 6的新特性: class模块,箭头函数; 让浏览器现在就使用ES6的新功能的工具:  Babel , Jspm, webpack; 可以使用Google的Traceur(在线转换工具),将ES6代码编译为ES5。 # 安装 npm install -g traceur # 运行ES6文件 traceur /path/to/es6 # 将ES6文件转为ES5文件

兜ぃф糖 1091

RabbitMq安装

本文详细介绍了在CentOS7系统上离线部署RabbitMQ4.3.2的完整流程。主要内容包括:1)准备RabbitMQ安装包、Erlang依赖和socat网络工具;2)安装系统编译依赖并编译安装Erlang;3)部署RabbitMQ服务,配置环境变量和socat依赖;4)启用Web管理插件并创建管理员账号;5)配置防火墙放行端口;6)设置Systemd开机自启服务;7)提供常用运维命令。文档特别强调离线部署注意事项,包括socat依赖、版本兼容性、账号安全及主机名配置等问题,为生产环境部署提供完整解决方案

sinat_25821779的博客 323

Traceur 使用方式

ES6于2015年6月正式发布,各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。目前各大浏览器和开发环境对支持ES6的支持情况参差不齐,在实际项目开发中,我们仍旧不得不降级使用ES5语法以兼容各平台。幸好有几款工具可以将ES6语法转换成ES5,让我们在使用ES6新特性编写代码的同时,不需要考虑具体的兼容性情况。将E...

衣乌安、随笔 4187

底层软件测试规范,QA评审底层测试

本文首发于【林子的空间】“林子,咱们上次讨论的高效Desk check清单,用起来还挺好的,最近我们组每次Desk check变得顺利多了,Dev也是越来越熟练。”玥玥跟我说。“真好!我们组感觉也是这样!”“不过,我听小慧说他们组有人对QA review UT提出了一些concern(质疑),觉得QA review的价值不大,基本都是Dev给讲一遍,QA也提不出来什么反馈...”玥玥补充说道。“哦...

weixin_42144707的博客 1188

实战解析:如何通过LTspice仿真优化MOS管缓启动电路,解决上电冲击电流问题

本文详细解析如何通过LTspice仿真优化MOS管缓启动电路,有效解决上电冲击电流问题。文章从问题根源分析入手,介绍LTspice环境搭建、缓启动电路设计原理、参数优化技巧及实际工程问题排查,帮助工程师掌握MOS管电源开关电路的关键设计方法,提升系统可靠性和性能。

weixin_28683689的博客 515

ES6转码(编译)工具——Babel转码器、Traceur转码器

当ES6不兼容时,需要用到转码工具1.Babel转码器:Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。// 转码前input.map(item =&gt; item + 1);// 转码后input.map(function (item) {return item + 1;});上面的...

qq_38619931的博客 663

外贸英文函电第三版张梅英课后习题答案解析

我参加了一些外贸模拟竞赛,将所学知识运用到实际工作中,取得了不错的成绩。此外,我还积极参与了一些外贸实践活动,如参加实习、担任志愿者等,从中积累更多的经验。在这个过程中,我逐渐摸索出了一套适合自己的学习方法,不仅提高了学习效果,还增强了自信心。通过学习这本书,我们可以提高自己在外贸领域的沟通能力,更好地应对未来的工作挑战。在学习这本书的过程中,我遇到了一些困难,比如对某些专业术语的理解不够透彻,对信件的结构和格式掌握不够熟练。出版社: 高等教育出版社。上传者: ʚ河西撒手没ɞ。

weixin_58833001的博客 1425

Traceur 转码器

Traceur 转码器 § ⇧ Google 公司的Traceur转码器,也可以将 ES6 代码转为 ES5 代码。 直接插入网页 Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页头部加载 Traceur 库文件。 import './Greeter.js'; 上面代码中,一共有4个script标签。第一个是加载 Traceur 的库文件,第二个

齐枫的博客 857

ZYNQ PL通过EMIO ETHE1外接PHY由GMII转RGMII

1,设置EMIO方式引出ETHE1 2,从GMII过度到RGMII GMII: 发送 gmii_tx_clk gmii_tx_d[7:0] gmii_tx_en gmii_tx_er 接收 gmii_rx_clk gmii_rx_d[7:0] gmii_rx_dv gmii_rx_er RGMII: 发送 tx_clk tx_d[3:0] tx_ctrl 接收 rx_clk rx_d[3:0] rx_ctrl 首先数据总线从时钟单边沿采样8bit转变为了双边沿采样4bit,从88E1

wangjie36的博客 1万+

【使用DeepSeek辅助Python接口性能自动化测试教程-实战教程】

访问DeepSeek官方网站,注册账号并获取API Key。此Key是调用DeepSeek API的必要凭证,务必妥善保管。安装时,注意勾选“Add Python to PATH”选项,以便系统能识别Python命令。确保你已安装Python 3.8或更高版本。会自动发现并执行所有以。

Dreams°的博客 2466

ES6/ES2015学习笔记

ES6/ES2015学习笔记概述语法Arrow Function箭头函数(=>) 概述 自用ES6/ES2015学习笔记。 语法 Arrow Function箭头函数(=>) //1. 基本用法: x => x * x //相当于 function (x) { return x * x; } //2. 包含多条语句,不能省略{ ... }和return: x => { if (x > 0) { return x * x; }

qq_41113339的博客 262

免杀思路总结

免杀思路总结 1.免杀技术简介 1.免杀的重要性 2.免杀的难度 3.杀毒软件的排行 国外 国内 1 、Bitdefender 1、360 2 、Norton 360 2、智量安全(没测过,据说很厉害) 3 、Kaspersky 3、火绒安全 4 、Webroot 4、金山独霸 5 、Trend Micro 5

LiBai'S BLOG 1万+

ES6-学习笔记

在学习ES6时做下的笔记,因为个人习惯,一些笔记写在代码中

2401_83884421的博客 1092

金融行业大数据可视化:实时监控与风险预警系统构建

随着金融业务数字化转型,日均产生的交易数据、市场数据、客户行为数据呈指数级增长(单家银行日交易数据量可达TB级)。数据实时性不足(分钟级延迟难以应对高频交易风险)风险特征挖掘浅层(仅基于规则引擎,漏报率高达30%+)可视化分析能力薄弱(静态报表无法支持动态决策)本文聚焦构建具备毫秒级数据响应智能风险建模交互式可视化决策能力的新一代系统,覆盖数据采集、实时处理、多维可视化、智能预警四大核心模块,适用于银行、证券、保险等金融细分领域。章节核心内容技术亮点核心概念可视化系统架构/数据流模型。

AI天才研究院 1523

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

ES6尚硅谷学习笔记

B站ES6尚硅谷课程学习笔记

presentD的博客 742

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

ES6学习笔记(11)--ES6对象

引言:对象这里比较简单,但是还是记一下笔记吧 1.对象 ES5这么写 var a = 1; var b = 2; var obj = { a:a, b:b } 但是ES6可以这么写 var a = 1; var b = 2; var obj = { a, b } 2.key值构建 可用在未确定key的情况 let key = 'name...

YmwWow的博客 267

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

ES6学习笔记(8)--箭头函数的使用

引言:谈不上说写了ES5几年,但是在ES6中使用的箭头函数看起来就是比ES5爽,然后学习ES6的语法,后期我的编程当中会一直使用ES6,这样才可以进步 开始学习 1.以下是ES5的函数写法 function name(firstName,lastName){ return firstName+' '+ lastName; } console.log(name('yang','...

YmwWow的博客 833

es6学习笔记

11.15 星期三学习地址:ECMAScript 6 入门 http://es6.ruanyifeng.com/ 阮一峰下载node js,Node JS环境搭建及sublime Text 3配置Node Js环境,添加前端插件。一、es6简介: 二者关系:ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言...

jyf_568的博客 436

ES6学习笔记(5)--字符串模板

引言:在ES6中提供了一个字符串模板,这个笔记中将列出ES5和ES6对字符串的操作。 开始学习 1.ES5对字符串的拼接 var str1 = 'tony'; var str2 = "hello!"+str1+",welcome to my home" console.log(str2); 2.ES6对字符串的拼接 let str1 = 'tony'; let str2 = ...

YmwWow的博客 350

ES6学习笔记二

1. set ES6提供的新的数据结构。类似于数组,但成员的值是唯一的,集合实现iterator接口。所以可以使用扩展运算符和`for...of...`进行遍历 1) set的声明和api //声明set let set1=new Set(); let set2=new Set(['黑猫','白猫','胖猫','瘦猫']); //元素个数 console.log(set2.size) //添加元素 set2.add('橘猫'); //

xiaojiango0的博客 1360

ES6入门学习笔记

ES6学习笔记 学习开课吧 石川老师视频教程 兼容性 各大浏览器的最新版本,对 ES6 的支持可以查看kangax.github.io/compat-table/es6/。随着时间的推移,支持度已经越来越高了,超过 90%的 ES6 语法特性都实现了。 ES6(ES2015)——IE10+、Chorme、FirFox、移动端、NodeJS 编译转换: 在线转换 提前编译(babel==brows...

hen1183392934的博客 339

ES6与ReactJS学习笔记

1.ES6 ES6,是ECMAScript 6 的简称,是JavaScript语言的下一代标准,已于2015年6月正式发布。 1.1. let于const 之前,我们在编写js定义变量的时候,只有一个关键字 var。var有一个问题,就是定义的变量会成为全局变量。 // var变量的作用域问题检查 for(var i = 0;i<5;i++){ console.log(i); } c...

fechinchu的博客 1812
上一篇: sheral——一个方便定制及扩展的UI组件库
下一篇: React-Native实践
IMWebteam
博客等级 码龄10年 4粉丝 0原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值