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的一些新特性相关推荐

  1. ES5 to ESNext —  自 2015 以来 JavaScript 新增的所有新特性

    type: FrontEnd title: ES5 to ESNext - here's every feature added to JavaScript since 2015 link: medi ...

  2. es5和es6的区别、以及es6的新特性

    es5和es6的区别 系统库的引入 es5:ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 es6:ES6里,可以使用import方法来直接实现系统库引用,不需要额 ...

  3. ES5新特性总结(一)

    新特性一:严格模式--------在程序顶部,写"use strict" ①禁止给为声明的变量赋值  ------> 避免了内存泄漏和全局污染 ②静默失败升级为错误  --- ...

  4. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  5. ES6一些新特性记录

    ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.fore ...

  6. ES6基础-字符串的新特性

    字符串的新特性 1. es6新增遍历接口:for...of循环遍历 2. 模版字符串: 使用``号对字符串进行原格式输出 可以使用trim()方法进行取消换行 模版字符串潜入变量,需要将变量名写在${ ...

  7. ECMAScript 2016(ES7)新特性简介

    简介 自从ES6(ECMAScript 2015)在2015年发布以来,ECMAScript以每年一个版本的速度持续向前发展.到现在已经是ECMAScript 2020了. 每个版本都有一些新的特性, ...

  8. ECMAScript 6新特性简介

    文章目录 简介 ECMAScript和JavaScript的关系 let和const 解构赋值 数组的扩展 函数的扩展 简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript ...

  9. es6添加删除class_ES6中常用的10个新特性讲解

    ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ...

最新文章

  1. 70.打印所有Spring boot载入的bean【从零开始学Spring Boot】
  2. 点分治问题 ----------- HDU 5977 or 2016年大连ICPC [点分治+状态压缩]
  3. ibatis时间比较大小
  4. java 线程 通过interrupted_分析Java线程中断机制stop和interrupted的用法
  5. linux基础——linux进程间通信(IPC)机制总结
  6. 在java中补零的作用是什么_浅谈Java中的补零扩展和补符号位扩展
  7. 基础平台为第三方应用接入提供oauth2认证接口
  8. ubuntu15.04 php版本,在ubuntu下安装php版本问题
  9. 瑞友天翼服务器ip地址怎么修改,(瑞友天翼安装教程.doc
  10. “双态IT”成就业务“互联网+”转型
  11. IDEA各种颜色代表什么
  12. python tkinter教程 博客园_布同:如何循序渐进学习Python语言
  13. Unity ParticleSystem 之 简单的电子自旋 Electrons ParticleSystem 粒子特效
  14. Dota对我来说是什么?
  15. 用华为手机拍照!要学会这4个功能,随手一拍都是单反大片
  16. java web开发常见问题_javaWeb开发中常见的问题
  17. 离线语音远程遥控车控门制作教程(二)
  18. 自媒体视频如何消重?批量处理去重消重去水印去logo软件企鹅号视频不重复必学的消重技巧...
  19. C#之Sokect通讯实例
  20. 搜索下半场:微信要做大搜索吗?

热门文章

  1. Linux磁盘分区管理(转载)
  2. Linux内存管理-高端内存(一)
  3. JVM学习笔记之四:分代垃圾回收
  4. 编译nginx时的两个报错
  5. 如何检查linux系统的负载高低
  6. 春天来了,我也发“芽”了!
  7. 力扣算法题—045跳跃游戏二
  8. Windows环境下的NodeJS+NPM+Bower安装配置
  9. linux文本处理-grep
  10. linux驱动之i2c学习