0

0

ES6中非常实用的新特性介绍_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 15:11:20

|

1641人浏览过

|

来源于php中文网

原创

ecmascript 6离我们越来越近了,作为它最重要的方言,javascript也即将迎来语法上的重大变革,infoq特开设“深入浅出es6”专栏,来看一下es6将给我们带来哪些新内容。

写在前面

ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖。ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下。

1. for-of循环

这个东西用来循环数组很爽,原因呢,是因为它弥补了目前 es5 中循环数组的一切缺陷。

立即学习Java免费学习笔记(深入)”;

比如 for-in,它会遍历数组对象的附加属性,而不仅仅是遍历数组值。还有一点是,for-in 中的索引是 string 类型的,这一点尤其重要。

var arrObj=['alexchen',1,{}];
arrObj._name='attr-AlexChen';
for(var i in arrObj){
console.log(arrObj[i]) // 会把_name属性也遍历出来 
console.log(typeof(i)) // 全部输出 string
}

当然我们还有 forEach() 函数,它也有问题,比如你不能在里面 break return 之类的:

var arrObj = ['alexchen','boy','great'];
arrObj.forEach(function (v) {
if (v == 'boy') {
return 'can not return';
}
console.log(v) //会输出alexchen great
})

这样看起来要比 for-in 简便很多。但就像上面说的一样,它有也有不足的地方。那么我们来试试 for-of 吧:

var arrObj = ['alexchen',1,{}];
arrObj._name = 'attr-alexchen';
for (var i of arrObj) {
console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen
console.log(typeof(i))//这里会输出 string,number,object
if (i == 1) {
break;
}
console.log(i)//只会输出 alexchen,满足条件之后就不在继续循环,提高了效率并且可以自由控制跳出循环或继续循环
}

可以看到:

当使用 for-of 的时候,循环的是数组内部的元素且不会出现 for-in 中将附加属性也遍历的情况,其次,循环变量的类型和其在数组中的类型保持一致,而不是全部是 string 的情况。

就这两点就值得我们选择 for-of 而不是 forEach() 或 for-in 当然,现在还有些浏览器不支持。不过以上代码可以在最新版本的 FireFox 执行成功并得到预期结果。当然 for-of 并不是只在数组上使用,你可以用在任何类数组类型的对象上,比如 DOM NodeList, 字符串 等。

2. 模版字符串

这个东西也非常好玩,用在字符串拼接的地方。从名称上我们就知道是干啥的了。在前端开发过程中难免会遇到要动态拼接字符串的情况(动态dom生成,数据格式化)等:

(function sayHello(name, words) { 
console.log(`hello: ${name},welcome es6,your words is: ${words}`); //
})('alexchen','im admin')//运行之后将会输出:hello: alexchen,welcome es6,your words is: im admin

注意,被当作模版的字符串使用 ` 号包裹的。其中 $(paramenter) 是占位符,而且支持对象,eg:$(obj.name) 这种形式。与普通字符串相比模版字符串可以写成多行而不需要用 + 连接:

BtoC购物网站源码
BtoC购物网站源码

一、源码特点1、采用典型的三层架构技术进行开发,作品非常不错,功能很全面,欢迎下载学习交流二、功能介绍本源码是一个购物网站源码。分为前台用户界面和后台管理员界面,分别实现不同功能。三、菜单功能前台用户功能1、主页:显示主页面2、鞋子:鞋子所有品牌及相关信息3、手机数码:数码品牌及相关信息4、护肤品:所有品牌及相关信息5、新闻资讯:本页资讯;行业资讯6、我的账户;我的收藏;我的购物车;我的评论;退出

下载
hello:$(name),
welcome es6,
your words is $(words)

值得注意的是,模版字符串不会转义特殊字符,因此需要自己处理其中的安全隐患。模版字符串并不能够代替模版框架,原因是模版字符串没有内置的循环语法和条件语句。因此,对于常规的普通的字符串拼接,我们可以使用它来完成,会让你的代码看起来更酷一点。PS(除此之外,我觉得它并没有什么卵用。ψ(╰_╯))

这里有更详细的介绍来解决上面说道的没有内置循环和判断分支的问题:

es6-模版字符串-mozilla

3. 默认参数(Defaults parameters)

这个有点意思,是这样的,我们都知道 js 函数是不需要给函数参数设置默认值的,比如如下代码会报错:

(function(a=0,b=0){return a+b;})(1,2)//不支持es6的浏览器下会报错的SyntaxError: Unexpected token =

这也就意味着,我们的参数不能给默认值,如果需要给参数默认值就需要在函数内部判断其是否为 undefined 的方式来处理。然而在 ES6 中呢,我们可以给参数设置默认值,而不用在函数内部去判断后赋默认值,不但可以赋值默认值,还可以使用运算表达式,如下:

(function testDefaultsParams(pars1 = "alexchen",
pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {
console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串
})();
/**参数为空时输出,welcome alexchen ,u r admin!!,
如果第一个参数不是alexchen则输出,welcome alexchen ,u r not admin!!**/

这种方式在编写代码时非常的简便,和动态语言一样,比如 c# 中。这样既直观,又方便。所以用起来还是很不错的。还一个剩余参数(Rest parameters),笔者没发现有什么特别的用处,因此就不写啦,感兴趣的可以去看看

默认参数和剩余参数-mozilla

ES6 中还有很多新特性和语法。感兴趣的可以看一下 mozilla 团队的博客,里面有很详细的介绍,而且是系列文章。

mozilla-ES6-系列介绍

好了,以上就是我在 ES6 中发现的三个比较实用的新东西,这三个应该是日常开发中用的最多的了,在此做个记录。

关于ES6中非常实用的新特性介绍就给大家介绍这么多,希望对大家有所帮助!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

109

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

16

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

136

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

7

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作
windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

6

2026.01.26

2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

122

2026.01.26

个人所得税税率表2026 个人所得税率最新税率表
个人所得税税率表2026 个人所得税率最新税率表

以工资薪金所得为例,应纳税额 = 应纳税所得额 × 税率 - 速算扣除数。应纳税所得额 = 月度收入 - 5000 元 - 专项扣除 - 专项附加扣除 - 依法确定的其他扣除。假设某员工月工资 10000 元,专项扣除 1000 元,专项附加扣除 2000 元,当月应纳税所得额为 10000 - 5000 - 1000 - 2000 = 2000 元,对应税率为 3%,速算扣除数为 0,则当月应纳税额为 2000×3% = 60 元。

35

2026.01.26

oppo云服务官网登录入口 oppo云服务登录手机版
oppo云服务官网登录入口 oppo云服务登录手机版

oppo云服务https://cloud.oppo.com/可以在云端安全存储您的照片、视频、联系人、便签等重要数据。当您的手机数据意外丢失或者需要更换手机时,可以随时将这些存储在云端的数据快速恢复到手机中。

121

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ECMAScript6 / ES6---十天技能课堂
ECMAScript6 / ES6---十天技能课堂

共25课时 | 2万人学习

简单聊聊mysql8与网络通信
简单聊聊mysql8与网络通信

共1课时 | 811人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号