【javascript】您好, 您要的ECMAScript6速记套餐到了
【前言】本文“严重参考” 自阮一峰老师写的ES6文档,在此我郑重感谢他沉默无声的帮助
总结一下ES6为 javascript中的 对象/数组/函数 这JS三巨头所提供的更简洁优雅的书写方式,以及扩展的API。
对象篇
- 属性名简洁表示法, 当对象的属性名和作为属性值的变量名名称相同时,可只写属性名
var name = "彭湖湾"
var obj = { name: name }
可简写为
var name = "彭湖湾"
var obj = { name }
- 如果对象的属性是函数,可简写为类似于“函数声明”的形式:
var obj = {
methods: function () {}
}
可简写为
var obj = {
methods () {
// ...
}
}
- 对象字面量的属性名表达式
以前你只能对单一的对象属性使用表达式:obj['a' + 'b'] = value
现在你可以在一个对象字面量里对属性名使用表达式:
var obj = {
['a' + 'b']: value
}
- Object.assign(target, source1, source2 ....) 可把source1,source2等第二个参数以后的对象合并到target
1.规则是对于同名属性, 后面的对象会覆盖前面的,如source1覆盖target, source2会覆盖source1
var target = { a: , b: };
var source1 = { b: , c: };
var source2 = { c: }; Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
2. Object.assign的合并功能仅止于第一层属性,也就是说, 如果两个合并对象(如source1和source2)有一个第一层的同名属性,并且这个属性也是个有属性的对象,那么Object.assign不会“进入”位于第二层的属性对象,对其属性进行合并,而是简单地用后面对象的第一层属性替代前面对象的第一层属性
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
结果是
{ a: { b: 'hello' } }
不是
{ a: { b: 'hello', d: 'e' } }
- 遍历属性对象的几个API对比:
1.for...in 遍历对象自身属性和原型中的属性, 且要求是可枚举属性
2. Object.keys(obj),返回一个数组, 遍历自身属性, 不包括原型属性, 且要求是可枚举的
3. Object.getOwnPropertyNames(obj) 返回一个数组,遍历自身属性, 不包括原型属性, 且不要求是可枚举的
4.Object.values(): 和Object.keys(obj)类似,不过遍历的是属性值
5.Object.entries() 和Object.keys(obj)类似,不过遍历的是属性名/值对,返回一个二维数组:
[ ["key1", "value1"], ["key2", "value2"] ]
关键对比
1.for...in 和Object.keys(obj)/Object.getOwnPropertyNames(obj), 前者取得原型中的属性,后两者不取
2.Object.getOwnPropertyNames(obj) 和Object.keys(obj), 都是只返回遍历自身属性组成的数组,前者无论是否可枚举都返回, Object.keys(obj)只返回可枚举属性
3.Object.keys(obj) , Object.values(), Object.entries() 分别遍历对象的键, 值,键值对
数组篇
- Array.of 将一组参数作为数组元素组成数组, 如
Array.of(, , ) // [1,2,3]
出现原因: 弥补Array构造函数的不足:
Array构造函数因为接收参数的不同行为表现差异非常巨大
1. 当接收一个参数的时候,它会以为你传的是数组的长度,从而创建一个对应长度的“空”数组
Array() // [, , ,]
2. 当接收多个参数的时候,它会以为你传的是数组元素, 从而创建一个指定数组元素的数组
Array(, , ) // [1, 2, 3]
- Array.from将两类对象都转为数组
1类数组对象(如函数内部的arguments,DOM操作产生的NodeList集合)
2 ES6新增加的Set对象, Map对象
都转为真正的数组
转化类数组对象
function foo() {
var args = Array.from(arguments);
// arguments从对象变成了数组
}
转化ES6新增加的Set对象, Map对象
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
- find方法,用于在一个数组中找到第一个符合条件的数组元素
[, , , -].find((n) => n < )
// -1
ES5中我们可能会使用IndexOf方法来寻找一个特定的元素,但它的局限性在于indexof只能以数组元素的值作为查找条件,而find方法则更加灵活, 它提供了一个以数组元素为参数的函数供你做更加灵活的操作,并取得第一个返回true的数组元素
- fill方法, 通过array.fill(value), 可以将array数组的所有值都写为value
一般可以用于初始化空数组:
new Array().fill()
// [1, 1, 1,1]
- includes方法 检测数组中是否含有某个元素, 返回true或者false
【注意】array.indexOf(数组元素) === -1 这个常用于判断条件的表达式可以用 includes方法去替代
[, , ].includes() // true
[, , ].includes() // false
函数篇
- 函数参数在ES6下可以设置默认值
function log(x, y = 'World') {
console.log(x, y);
} log('Hello') // Hello World
- rest 参数
可以通过“...”的运算符把接收到的函数参数合为数组放入紧跟“...”的变量中
function fn(...args) {
}
fn(, , ) // 此时 args = [1,2,3]
【注意】 函数的reset参数可以看做是扩展运算符的“逆运算”
- name属性
函数可取name属性
function fn() {}
fn.name // "fn"
- 箭头函数
ES6引入了箭头函数,它有几大作用:
1. 使我们能通过一种更为简洁的方式书写函数
2. 箭头函数绑定了this对象, 减少了this绑定丢失所造成的麻烦
- 在javascript中, 大多数变量的查找的都是静态的,而不是动态的, 或者说是变量所在的作用域是定义时候决定的,而不是运行时决定
- 但this却恰好相反, this的绑定是动态的, 是运行时决定的, 这有时候就导致了让人苦恼的this绑定丢失问题
用一段代码展示一下普通函数(相比于箭头函数)所存在this绑定丢失的问题
function foo() {
setTimeout( function () {
console.log('id:', this.id);
}, );
} var id = ;
foo.call({ id: });
// id: 21
为什么输出的是21不是42呢? 因为setTimeout里的函数是异步执行的,当调用foo.call({ id: 42 })的时候setTimeout里的函数并没有立即得到执行,
所以setTimeout()调用的时候,它运行在与所在函数完全分离的执行环境上。这时候this指向的是window,而不是{ id: 42 } (在 ES6严格模式下是undefined)
但箭头函数的this是静态绑定的, 所以能很好地解决这个问题:
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, );
}
var id = ; foo.call({ id: });
// id: 42
如果园友看到这里了, 那么请容我道个歉, 在这篇文章里, 其实多处“参考”了《ES6入门》中的例子, 比起自己亲手写的代码,多少可能会让读者们感到有些难理解,因为这几天实在挺累的,所以写这篇文章的时候有些心力不足,见谅。
资料来源:
1. MDN https://developer.mozilla.org/zh-CN/
2. ECMAScript 6入门 http://es6.ruanyifeng.com/
【javascript】您好, 您要的ECMAScript6速记套餐到了的更多相关文章
- 【javascript】您好, 您要的ECMAScript6速记套餐到了 (一)
[前言]本文“严重参考” 自阮一峰老师写的ES6文档,在此我郑重感谢他沉默无声的帮助 总结一下ES6为 javascript中的 对象/数组/函数 这JS三巨头所提供的更简洁优雅的书写方式,以及扩展的 ...
- 为什么我要放弃javaScript数据结构与算法(第一章)—— JavaScript简介
数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...
- 20个提高开发效率的JavaScript技巧
减少代码行数和加快开发的技术! 我们在开发中,经常要写一些函数,如排序.搜索.寻找唯一的值.传递参数.交换值等,在这里我列出了我搜集的一些技术资源,可以像高手一样写出这些函数! JavaScript确 ...
- js实现自定义右键菜单--兼容IE、Firefox、Chrome
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 在webstrorm中配置好es6 babel
第一步,新建一个项目,我这里建立了基于express 的node项目 第二步:将JavaScript语言版本切换为ECMAScript6 点击File —>settings,弹出设置框.把js的 ...
- [原]node.js使用感想
最近尝试了使用node.js,但因为不是太深入(小项目,还没做完),所以不能谈心得谈经验,就来谈谈使用感想. node.js和以往的cgi接口的服务器+cgi程序(如apache+phpmod)中的单 ...
- WebStorm中使用ES6的几种方式
本篇总结几种在WebStorm下使用ES6的方式. 首先要选择Javascript的版本.依次点击"File","Settings","Languag ...
- Node.js最新Web技术栈(2016年4月)
Node.js是比较简单的,只有你有前端js基础,那就按照我的办法来吧!一周足矣,虽然这版上了es语法,但依然是可以简单写,也可以难写,参见<全栈工程师之路-Node.js>,里面讲了No ...
- 在IDEA(phpStorm)中使用Babel编译ES6
安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...
随机推荐
- [Hadoop源码系列] FairScheduler分配申请和分配container的过程
1.如何申请资源 1.1 如何启动AM并申请资源 1.1.1 如何启动AM val yarnClient = YarnClient.createYarnClient setupCredentials( ...
- C# TSC打印二维码和条形码
效果图 开发.使用环境说明 安装TSC_7.3.8_M-3.exe打印机驱动,安装时选择对应的ttp 244 pro 将TSCLIB.dll复制到C:\Windows\system 驱动安装说明 选择 ...
- static关键字,引发的spring普通类获取spring的bean的思考
在c++和java中static关键字用于修饰静态成员变量和成员函数 举例一个普通的javabean class AA { int a; static int b; geta/seta;//此处省略g ...
- xshell常用命令
常用的命令: suse linux 常用命令 (1) 命令ls--列出文件 ls 显示当前目录文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的"隐藏"文件 ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- Sping之Ioc
Ioc,控制反转,依赖注入! 作用:降低代码之间的耦合性 代码永远是最好的示例: 1.新建test类 package demo; public class test { String string_v ...
- (转)简单介绍java Enumeration
简单介绍java Enumeration 分类: java技术备份 java数据结构objectstringclass存储 Enumeration接口 Enumeration接口本身不是一个数据结构 ...
- (转)mybatis常用jdbcType数据类型
1 MyBatis 通过包含的jdbcType类型 BIT FLOAT CHAR TIMESTAMP OTHER UNDEFINED TINYINT REAL VARCHAR BINARY BLOB ...
- Spring源码情操陶冶-ContextLoader
前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-ContextLoaderListener 静态代码块内容 ContextLoader在被主动调用的时候,会执行其的一个静态块,代码 ...
- Charles录制App的接口har文件
Charles录制App的接口har文件 如果我们想录制我们自己App后台请求接口的信息,并生成har文件,要怎么做呢?其实很简单,就是通过Charles,让手机的访问请求走这个Charles代理就行 ...