ES5和6的一些新特性
JavaScript
let和const命令
var
之前,js定义变量只有一个关键字 var
var
有一个问题 就是定义的变量有时候会莫名其妙的变成全局变量
例如这样一段代码:
<script>for(var i = 0;i<5;i++){console.log(i)}console.log("循环外:"+i++)</script>
效果:
let
let
所声明的变量,只在let
命令所在的代码块内有效
我们把刚才的代码中的var
改成let
<script>for(let i = 0;i<5;i++){console.log(i)}console.log("循环外:"+i++)</script>
效果:
const
const
声明的是常量,不能被修改
<script>for(let i = 0;i<5;i++){console.log(i)}const i = 1;console.log(i++)
</script>
效果:
解构表达式
数组解构
比如有一个数组
let attr = [1,2,3]
想获取其中的值,按照以往的方式,我们只能通过角标attr[0]
来获取,但是在ES6里我们可以这样
//xyz将对应数组中的位置来对应取值
let [x,y,z] = attr
//打印
console.log(x,y,z)
效果:
那我们不想要全部或者只想要后面几个呢?
//不要最后一个
let [x,y] = attr
//只要最后一个
let [,,z] = attr
也可以直接解构获取全部
let [...obj] = attr
- 对于数组的解构一般用于数值较少的情况
对象解构
let person = {name:"jack",age:20}
let {name,age} = person
效果:
- 需要注意的是 对象解构不像数组解构,因为对象没有角标,所以对象解构根据的是对象的属性名来取值
如果想用其他变量接收,需要额外指定别名
let {name:n,age:a} = person
对象解构也适用于复杂类型的对象,就比如
let person = {name:"jack",age:20,girl:{name:"tom",age:19}}
//先对person解构获取到girl对象,然后再对其解构获取name属性
let {girl:{name:n}} = person
效果:
对象解构也可以直接解构获取全部属性
let {...obj} = person
函数优化
箭头函数
ES6中定义函数的简写方式
var print = function(obj){console.log(obj);
}
//简写为
var print2 = obj => console.log(obj);
多个参数
var sum = function(a,b){return a + b;
}
//简写为
var sum2 = (a,b) => a+b
代码不止一行,可以使用{}
括起来
var sum3 = (a,b) => {return a + b;
}
对象的函数属性简写
const person = {name:"jack",age:21,sayHello:function(age){console.log(age);}//箭头函数sayHello1 : (name,age) => console.log(name,age)//简写sayHello2(age){console.log(age)}
}
箭头函数结合解构表达式
比如有一个函数
const person = {name:"jack",age:21
}function hello(person){console.log(person.name,person.age);
}
箭头函数结合解构表达式
const hello = ({name,age}) => console.log(name,age)
map和reduce
数组中新增了map和reduce方法
map
map()
接收了一个函数,将原数组中的所有元素用这个函数处理后放入原数组返回
举例:有一个字符串数组,我们希望转为int类型的数组
let attr = ['1','2','3','5'];
console.log(attr);
attr = attr.map(s => parseInt(s));
console.log(attr);
reduce
接收一个函数和一个初始值,这个函数中接收两个参数
- 第一个参数是上次reduce函数运算的结果
- 第二个参数是下次要参与运算的元素
reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数
const arr = [1,20,-5,3]arr.reduce((a,b)=>a+b) //19arr.reduce((a,b)=>a*b) //-300//可以指定第一个参数的默认值,指定默认值为-1
arr.reduce((a,b)=>a*b,-1) //300
ES6给Object拓展了许多新的方法,如:
- keys(obj):获取对象的所有key形成的数组
- values(obj):获取对象的所有value形成的数组
- entries(obj):获取对象的所有key和value形成的二维数组。格式:[[k1,v1],[k2,v2],...]
- assian(dest, ...src) :将多个src对象的值 拷贝到 dest中(浅拷贝)。
ES5和6的一些新特性相关推荐
- ES5 to ESNext — 自 2015 以来 JavaScript 新增的所有新特性
type: FrontEnd title: ES5 to ESNext - here's every feature added to JavaScript since 2015 link: medi ...
- es5和es6的区别、以及es6的新特性
es5和es6的区别 系统库的引入 es5:ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 es6:ES6里,可以使用import方法来直接实现系统库引用,不需要额 ...
- ES5新特性总结(一)
新特性一:严格模式--------在程序顶部,写"use strict" ①禁止给为声明的变量赋值 ------> 避免了内存泄漏和全局污染 ②静默失败升级为错误 --- ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6一些新特性记录
ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.fore ...
- ES6基础-字符串的新特性
字符串的新特性 1. es6新增遍历接口:for...of循环遍历 2. 模版字符串: 使用``号对字符串进行原格式输出 可以使用trim()方法进行取消换行 模版字符串潜入变量,需要将变量名写在${ ...
- ECMAScript 2016(ES7)新特性简介
简介 自从ES6(ECMAScript 2015)在2015年发布以来,ECMAScript以每年一个版本的速度持续向前发展.到现在已经是ECMAScript 2020了. 每个版本都有一些新的特性, ...
- ECMAScript 6新特性简介
文章目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript ...
- es6添加删除class_ES6中常用的10个新特性讲解
ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ...
最新文章
- 70.打印所有Spring boot载入的bean【从零开始学Spring Boot】
- 点分治问题 ----------- HDU 5977 or 2016年大连ICPC [点分治+状态压缩]
- ibatis时间比较大小
- java 线程 通过interrupted_分析Java线程中断机制stop和interrupted的用法
- linux基础——linux进程间通信(IPC)机制总结
- 在java中补零的作用是什么_浅谈Java中的补零扩展和补符号位扩展
- 基础平台为第三方应用接入提供oauth2认证接口
- ubuntu15.04 php版本,在ubuntu下安装php版本问题
- 瑞友天翼服务器ip地址怎么修改,(瑞友天翼安装教程.doc
- “双态IT”成就业务“互联网+”转型
- IDEA各种颜色代表什么
- python tkinter教程 博客园_布同:如何循序渐进学习Python语言
- Unity ParticleSystem 之 简单的电子自旋 Electrons ParticleSystem 粒子特效
- Dota对我来说是什么?
- 用华为手机拍照!要学会这4个功能,随手一拍都是单反大片
- java web开发常见问题_javaWeb开发中常见的问题
- 离线语音远程遥控车控门制作教程(二)
- 自媒体视频如何消重?批量处理去重消重去水印去logo软件企鹅号视频不重复必学的消重技巧...
- C#之Sokect通讯实例
- 搜索下半场:微信要做大搜索吗?