es6 提取数组对象一部分_ES6新特性你了解了多少呢?
ES6新特性
ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度很大,所以ES6中的特性比较多。
在这里列举几个常用的:
类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const
1.类(class)
对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。
class Animal { // 构造函数,实例化的时候将会被调用,如果不指定,那么会有一个不带参数的默认构造函数. constructor(name,color) { this.name = name; this.color = color; } // toString 是原型对象上的属性 toString() { console.log('name:' + this.name + ',color:' + this.color);
} }
var animal = new Animal('dog','white');//实例化Animal animal.toString();
console.log(animal.hasOwnProperty('name')); //true console.log(animal.hasOwnProperty('toString')); // false console.log(animal.__proto__.hasOwnProperty('toString')); // true
class Cat extends Animal { constructor(action) { // 子类必须要在constructor中指定super 函数,否则在新建实例的时候会报错. // 如果没有置顶consructor,默认带super函数的constructor将会被添加、 super('cat','white'); this.action = action; } toString() { console.log(super.toString()); } }
var cat = new Cat('catch') cat.toString();
// 实例cat 是 Cat 和 Animal 的实例,和Es5完全一致。 console.log(cat instanceof Cat); // true console.log(cat instanceof Animal); // true
2.模块化(Module)
ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export)
ES6允许在一个模块中使用export来导出多个变量或函数。
导出变量
//test.jsexport var name = 'Rainbow'
ES6不仅支持变量的导出,也支持常量的导出。 export const sqrt = Math.sqrt;//导出常量
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
//test.js var name = 'Rainbow'; var age = '24'; export {name, age};
导出函数
// myModule.jsexport function myModule(someArg) { return someArg;}
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {myModule} from 'myModule';// main.jsimport {name,age} from 'test';// test.js
一条import 语句可以同时导入默认函数和其它变量。import defaultMethod, { otherMethod } from 'xxx.js';
3.箭头(Arrow)函数
这是ES6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。
箭头函数的结构
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
// 箭头函数的例子()=>1v=>v+1(a,b)=>a+b()=>{ alert("foo");}e=>{ if (e == 0){ return 0; } return 1000/e;}
卸载监听器时的陷阱
错误的做法:
class PauseMenu extends React.Component{ componentWillMount(){ AppStateIOS.addEventListener('change', this.onAppPaused.bind(this)); } componentWillUnmount(){ AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this)); } onAppPaused(event){ }}
正确的做法:
class PauseMenu extends React.Component{ constructor(props){ super(props); this._onAppPaused = this.onAppPaused.bind(this); } componentWillMount(){ AppStateIOS.addEventListener('change', this._onAppPaused); } componentWillUnmount(){ AppStateIOS.removeEventListener('change', this._onAppPaused); } onAppPaused(event){ }}
除上述的做法外,我们还可以这样做:
class PauseMenu extends React.Component{ componentWillMount(){ AppStateIOS.addEventListener('change', this.onAppPaused); } componentWillUnmount(){ AppStateIOS.removeEventListener('change', this.onAppPaused); } onAppPaused = (event) => { //把函数直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针 }}
需要注意的是:不论是bind还是箭头函数,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。
4.函数参数默认值
ES6支持在定义函数的时候为其设置默认值:
function foo(height = 50, color = 'red'){ // ...}
不使用默认值:
function foo(height, color){ var height = height || 50; var color = color || 'red'; //...}
这样写一般没问题,但当参数的布尔值为false时,就会有问题了。比如,我们这样调用foo函数:
foo(0, "")
因为0的布尔值为false,这样height的取值将是50。同理color的取值为‘red’。
所以说,函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。
5.模板字符串
ES6支持模板字符串,使得字符串的拼接更加的简洁、直观。
不使用模板字符串:
var name = 'Your name is ' + first + ' ' + last + '.'
使用模板字符串:
var name = `Your name is ${first} ${last}.`
在ES6中通过${}就可以完成字符串的拼接,只需要将变量放在大括号之中。
6.解构赋值
解构赋值语法是JavaScript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;console.log(one); // "one"console.log(two); // "two"console.log(three); // "three"
//如果你要忽略某些值,你可以按照下面的写法获取你想要的值var [first, , , last] = foo;console.log(first); // "one"console.log(last); // "four"
//你也可以这样写var a, b; //先声明变量
[a, b] = [1, 2];console.log(a); // 1console.log(b); // 2
如果没有从数组中的获取到值,你可以为变量设置一个默认值。
var a, b;
[a=5, b=7] = [1];console.log(a); // 1console.log(b); // 7
通过解构赋值可以方便的交换两个变量的值。
var a = 1;var b = 3;
[a, b] = [b, a];console.log(a); // 3console.log(b); // 1
获取对象中的值
const student = { name:'Ming', age:'18', city:'Shanghai' };
const {name,age,city} = student;console.log(name); // "Ming"console.log(age); // "18"console.log(city); // "Shanghai"
7.延展操作符(Spread operator)
延展操作符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造对象时, 将对象表达式按key-value的方式展开。
语法
函数调用
myFunction(...iterableObj);
数组构造或字符串:
[...iterableObj, '4', ...'hello', 6];
构造对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):
let objClone = { ...obj };
应用场景
在函数调用时使用延展操作符
function sum(x, y, z) { return x + y + z;}const numbers = [1, 2, 3];
//不使用延展操作符console.log(sum.apply(null, numbers));
//使用延展操作符console.log(sum(...numbers));// 6
构造数组
没有展开语法的时候,只能组合使用 push,splice,concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅:
const stuendts = ['Jine','Tom']; const persons = ['Tony',... stuendts,'Aaron','Anna'];conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]
和参数列表的展开类似, ...
在构造字数组时, 可以在任意位置多次使用。
数组拷贝
var arr = [1, 2, 3];var arr2 = [...arr]; // 等同于 arr.slice()arr2.push(4); console.log(arr2)//[1, 2, 3, 4]
展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。
连接多个数组
var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回//等同于var arr4 = arr1.concat(arr2);
在ECMAScript 2018中延展操作符增加了对对象的支持
var obj1 = { foo: 'bar', x: 42 };var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };// 克隆后的对象: { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };// 合并后的对象: { foo: "baz", x: 42, y: 13 }
在React中的应用
通常我们在封装一个组件时,会对外公开一些 props 用于实现功能。大部分情况下在外部使用都应显示的传递 props 。但是当传递大量的props时,会非常繁琐,这时我们可以使用 ...(延展操作符,用于取出参数对象的所有可遍历属性) 来进行传递。
一般情况下我们应该这样写
<CustomComponent name ='Jine' age ={21} />
使用 ... ,等同于上面的写法
const params = { name: 'Jine', age: 21}params} />
配合解构赋值避免传入一些不需要的参数
var params = { name: '123', title: '456', type: 'aaa'}
var { type, ...other } = params;
type='normal' number={2} {...other} />//等同于type='normal' number={2} name='123' title='456' />
8.对象属性简写
在ES6中允许我们在设置一个对象的属性的时候不指定属性名。
不使用ES6
const name='Ming',age='18',city='Shanghai';
const student = { name:name, age:age, city:city};console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
对象中必须包含属性和值,显得非常冗余。
使用ES6
const name='Ming',age='18',city='Shanghai';
const student = { name, age, city};console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
对象中直接写变量,非常简洁。
9.Promise
Promise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
不使用ES6
嵌套两个setTimeout回调函数:
setTimeout(function(){ console.log('Hello'); // 1秒后输出"Hello" setTimeout(function(){ console.log('Hi'); // 2秒后输出"Hi" }, 1000);}, 1000);
使用ES6
var waitSecond = new Promise(function(resolve, reject){ setTimeout(resolve, 1000);});
waitSecond .then(function(){ console.log("Hello"); // 1秒后输出"Hello" return waitSecond; }) .then(function(){ console.log("Hi"); // 2秒后输出"Hi" });
上面的的代码使用两个then来进行异步编程串行化,避免了回调地狱:
10.支持let与const
在之前JS是没有块级作用域的,const与let填补了这方便的空白,const与let都是块级作用域。
使用var定义的变量为函数级作用域:
{ var a = 10;}
console.log(a); // 输出10
使用let与const定义的变量为块级作用域:
{ let a = 10;}
console.log(a); //-1 or Error“ReferenceError: a is not defined”
本文选自网络,如侵,请联系删除
珠峰前端课程等你来学习
2019年6月3日 《零基础入门课程》 2019年5月27日 《全日制框架课程》
2019年5月27日 《周末班框架课程》
2019年6月3日 《前端就业课程》
es6 提取数组对象一部分_ES6新特性你了解了多少呢?相关推荐
- 【es6】用map对数组对象中插入新的属性
问题: 用map对数组对象中插入新的属性 举例子 在arr中查看有没有cat,有就用原先的,没有就加默认cat:0,同样后面也可以拼接father:'' let arr = [{name:'hong' ...
- vue 中遍历数组对象 存到一个新数组里
vue 中遍历数组对象 存到一个新数组里(亲测可行!!!) 参考文档 : MDN-解构赋值 方法一 : For of 迭代和解构 var people = [{name: 'Mike Smith',f ...
- es6删除数组某项_es6删除数组元素或者对象元素的方法介绍(代码)
本篇文章给大家带来的内容是关于es6删除数组元素或者对象元素的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一,删除数组元素let arr = [ {name:'黎 ...
- JS在数组对象中添加新字段
在数组对象中每一项都添加相同字段 第一步使用forEach遍历数组 然后通过Object.assign()来添加 var arr = [{age:18,sex:'女'}, {age:30,sex:'男 ...
- es6 遍历数组对象获取所有的id_ES6对象遍历Object.keys()方法
[Object.keys()] ES5 引入了Object.keys()方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名var obj = { foo ...
- js提取数组对象中的最大值和最小值
var array=[{"index_id": 119,"area_id": "18335623","name": &q ...
- [转]ES6、ES7、ES8、ES9、ES10新特性一览 (个人整理,学习笔记)
目录 1.ES6新特性(2015) 1.1模块化(Module) 1.1.1导出(export) 1.1.2导入(import) 1.2箭头(Arrow)函数 1.2.1箭头函数的结构 1.3默认参数 ...
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法?
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...
- ES6新特性常用总结
我会总结一些工作中常用也比较核心的es6+的语法知识 一. let和const let 用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,即let声明的是一个块作用域内的变量. 特 ...
最新文章
- RxJava debounce()和throttleWithTimeout()
- Gmail新增新功能 支援四种语言等智能功能
- r语言glmnet包系数显示不全_第一章: R语言介绍
- MySQL修改字符集
- Jquery 多行拖拽图片排序 jq优化
- HTML+CSS+JS实现 ❤️卡通人物吃水果游戏❤️
- Linux Mint外接显示器分辨率调节
- Linux 命令(48)—— stat 命令
- php curl jsonrpc,JsonRPC: Lightweight Json-RPC 2.0 client/server in PHP extension
- 2023年全国最新工会考试精选真题及答案41
- java webservice用户名密码_WebService 用户名密码验证
- U3D RPC网络传输相机画面
- 打开浏览器显示找不到服务器DNS地址,电脑浏览器找不到服务器dns地址
- win10定时关机c语言,win10定时关机怎么设置,win10设置定时关机设置方法-电脑怎么定时开关机...
- TarsGo新版本发布,支持protobuf,zipkin和自定义插件
- LIO-SAM:在高斯牛顿法求解过程中用SO3代替欧拉角
- 土地调查图斑编号_第三次全国国土调查内业信息提取相关表、记录表、图斑、专项用地调查标注内容及代码...
- wpf 仿QQ音乐歌词卡拉OK
- freemarker导出word文档对图片拉伸或拉长的处理
- Flask asyncio 异步处理请求
热门文章
- 图像从程序到GPU再到LCD显示的流程:GPU渲染管线(五)
- Linux编译安装qemu
- Win10彻底关闭Antimalware Service Executable占用内存过高问题
- Android反射set/get系统属性(SystemProperties)
- VFS之基本数据结构
- tensorflow之视频质量诊断
- python资源网站_Python 博客网站资源
- 做人做事,就两个字!
- 对超级计算机的认识有关论文,计算机科与技术专业的认识与思考.docx
- python 01列表异或_python运算符及优先级顺序