【javascript】您好, 您要的ECMAScript6速记套餐到了 (一)

简介: 【前言】本文“严重参考” 自阮一峰老师写的ES6文档,在此我郑重感谢他沉默无声的帮助   总结一下ES6为 javascript中的 对象/数组/函数 这JS三巨头所提供的更简洁优雅的书写方式,以及扩展的API。

【前言】本文“严重参考” 自阮一峰老师写的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: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

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...inObject.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) // [1,2,3]

 

出现原因: 弥补Array构造函数的不足:


Array构造函数因为接收参数的不同行为表现差异非常巨大
1. 当接收一个参数的时候,它会以为你传的是数组的长度,从而创建一个对应长度的“空”数组

Array(3) // [, , ,]

2. 当接收多个参数的时候,它会以为你传的是数组元素, 从而创建一个指定数组元素的数组

Array(1, 2, 3) // [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方法,用于在一个数组中找到第一个符合条件的数组元素
[1, 2, 3, -1].find((n) => n < 0)
// -1

ES5中我们可能会使用IndexOf方法来寻找一个特定的元素,但它的局限性在于indexof只能以数组元素的值作为查找条件,而find方法则更加灵活, 它提供了一个以数组元素为参数的函数供你做更加灵活的操作,并取得第一个返回true的数组元素

  • fill方法, 通过array.fill(value), 可以将array数组的所有值都写为value

一般可以用于初始化空数组:

new Array(4).fill(1)
// [1, 1, 1,1]
  • includes方法 检测数组中是否含有某个元素, 返回true或者false

【注意】array.indexOf(数组元素) === -1 这个常用于判断条件的表达式可以用 includes方法去替代

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

函数篇

  • 函数参数在ES6下可以设置默认值
function log(x, y = 'World') {
   console.log(x, y);
}

log('Hello') // Hello World
  • rest 参数

可以通过“...”的运算符把接收到的函数参数合为数组放入紧跟“...”的变量中

function fn(...args) {
}
fn(1, 2, 3) // 此时 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);
  }, 100);
}

var id = 21;
foo.call({ id: 42 });
// 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);
  }, 100);
}
var id = 21;

foo.call({ id: 42 });
// id: 42

 

如果园友看到这里了, 那么请容我道个歉, 在这篇文章里, 其实多处“参考”了《ES6入门》中的例子, 比起自己亲手写的代码,多少可能会让读者们感到有些难理解,因为这几天实在挺累的,所以写这篇文章的时候有些心力不足,见谅。

 

 资料来源

1.  MDN  https://developer.mozilla.org/zh-CN/

2.  ECMAScript 6入门 http://es6.ruanyifeng.com/

 

 

其实啊,我只是把你们喝咖啡的时间,都用来喝啤酒而已
目录
相关文章
|
10月前
|
设计模式 JavaScript 前端开发
|
7天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
17 0
|
2天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
9 1
|
2天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
7 1
|
4天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
5天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
27 0
|
7天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
7天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
11 0
|
7天前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
16 0
|
7天前
|
JavaScript 前端开发
前端 JS 经典:原型和原型链
前端 JS 经典:原型和原型链
14 0