js es6 新特性

前言

ES6的发布，主要是为了解决 ES5 的先天不足，而新增了很多新特性，来提高开发人员的效率，那下文就讲讲有哪些新特性

一、汇总-图谱

二、常用的新特性

1、const 和 let

let：

局部作用域，(在一对{}启用)
不会变量提升
同作用域不能重复声明

const：

同let
声明只读常量，声明时必须初始化赋值

2、箭头函数

this指向声明时所在的作用域
不能作为构造实例化对象
不能使用arguments变量

例子

const fn = (a, b) => {return a + b
}
fn(1, 1) // 输出2

3、模板字符串

简化字符串的拼接，模板字符串通过反引号(``)来表示，如果要嵌入变量通过"${变量名}"来实现

例子

const userInfo = {name: 'aliang',age: 24,
}
let str = `姓名是：${userInfo.name}，年龄是：${userInfo.age}`
console.log(str) // 姓名是：aliang，年龄是：24

4、默认参数

定义：为函数的形参设置默认值
特点：①简洁；②易读；③便于维护

例子

function fn(a, b = 'b', c = 'c'){console.log(a, b, c);
}
fn('a', 'b1'); // a, b1, c

4、解构赋值

定义：针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
特点：简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

例子

// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a, b, c) // 1, 2, 3// 对象解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo, bar) // 'aaa', 'bbb'

5、Promise

Promise是ES6异步编程的一种解决方案，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果
promise的状态只能从未完成->完成, 未完成->失败且状态不可逆转
1、状态成功(resolve)，进入then()得到异步任务的正确结果
2、状态失败(reject)，进入catch()获取异常信息

例子

function fn(flag) {return new Promise(function (resolve, reject) {setTimeout(() => {if (flag === true) {resolve('promise状态为成功！')}if (flag === false) {reject('promise状态失败！')}}, 2000)})
}fn(true).then(res => {console.log(111111, res) // promise状态为成功！（2秒后执行）}).catch(err => {console.log(222222, err)})

6、模块，Import 和 export

定义：
1、export命令：导出模块内部变量、方法等
2、import命令：导入别的模块的变量、方法等，并对其进行使用
特点：
1、在一个文件中，export、import可以有多个，export default仅有一个
2、通过export导出时，导入需要加{}；而export default则不需要

例子
1、导出文件(export.js)

export const appId = '11111'
export const appKey = '22222'export default defaultCity = '杭州'

2、导入文件(import.js)

import defaultCity from './export'
import { appId, appKey } from './export.js'console.log('defaultCity==>', defaultCity) // 杭州
console.log('appId, appKey==>', appId, appKey) // 11111, 22222

7、class

可以看我之前写的文章，为你详细介绍class的使用

ES6 class类的基本语法

8、Set与Map

可以看我之前写的文章，为你详细介绍Set与Map

ES6 Set与Map是什么，如何使用

三、总结

es6的出现，无疑给人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。

觉得本文写的不错的，希望点赞、收藏、加关注，每月不定期更新干货哦，谢谢您嘞！

你可能感兴趣的文章：

Promise与Async/Await的区别
防抖(debounce) 和节流(throttling)

js es6 新特性相关推荐

ES6新特性之了解ES6以及其发展历史
ES6 新特性现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
尚硅谷es6新特性笔记
尚硅谷es6新特性笔记一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...
lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧接 ...
ES6新特性总结（2）解构赋值、模板字符串、Symbol
ES6新特性总结(2)解构赋值.模板字符串.Symbol 1 解构赋值 1.1 Spread / Rest 操作符 1.2 数组的解构 1.3 对象的解构 1.4 解构的默认值和参数的解构 2 模板字 ...
一文快速掌握 es6+新特性及核心语法
首先先祝各位节日快乐,好好去体验生活的快乐,在假期最后一天里,祝大家收获满满,同时抓住假期的尾巴,收割实用技能. 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了 ...
前端开发的ES6新特性（学生党必看）
一:ES6新特性-let&const 1.常量const const常量(声明之后不允许改变,一旦声明必须初始化, 否则报错) 2.let变量 let声明的变量有严格的作用域 var声明的变量 ...
Longstick的学习周记——ES6新特性
Longstick的学习周记--ES6新特性前言 ES6新特性 1. let 和 const let关键字 const 关键字 2. 模块字符串\` \` 3. 解构 4. 函数的参数默认值 5. ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
ES6新特性（函数默认参数，箭头函数）
ES6新特性之函数参数的默认值写法和箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...