标签：ES6 ES5 const name ... 前端 90% var 函数
90% 前端都会的 ES6 简化代码技巧，你用过哪些？
本文主要讲解一下内容：- 块级作用域
- 解构
- 箭头函数
- 模板字符串
- 剩余参数 / 展开语法
- 对象字面量简写语法
- 数组实例的 includes()
- Async / await 异步语法
块级作用域
为什么需要块级作用域？
ES5只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。
- 第一种场景，内层变量可能会覆盖外层变量。
以上代码的原意是，if代码块外部使用外层的 tmp 变量，内部使用内部的 tmp 变量。但是，函数 fn 执行后，输出的结果为 undefined，原因在于变量提升导致内层的 tmp 变量覆盖了外层的 tmp 变量。
- 第二种场景，用来计数的循环变量泄露为全局变量。
上面代码中，变量 i 只是用来控制循环，但是循环结束后，他并没有消失，而是泄露成了全局变量。
let 实际上为 JavaScript 新增了块级作用域。
上面的函数有两个代码块，都声明了变量 n ，运行后输出 5 。这表示外层代码块不受内层代码块的影响。如果使用 var 定义变量，最后输出的值就是 10。
看到这，相信聪明的你已经理解块级作用域的好处了 O(∩_∩)O
那么 ES5 能不能实现 块级作用域的效果呢？可以的，我们可以利用闭包
结构
解构：是将一个数据结构分解为更小的部分的过程。ES6中，从数组和对象中提取值，对变量进行赋值。
那么结构有什么用处呢？ 1.可以大大的简化变量的声明操作。
// ES5
var foo = 1
var bar = 2
var baz = 3
// ES6
let [foo,bar,baz] = [1,2,3]
2.变量交换：看起来如同镜像。赋值语句的左侧的解构模式，右侧是临时创建的数组字面量。x 被赋值为数组中的 y，y 被赋值为数组中的x。
let x = 1
let y = 2
[x,y] = [y,x]
// x = 2, y = 1
3.对象结构
var obj = { x:1,y:2,c:1 }
let { x,y } = obj
// x = 1
// y = 2
4.字符串解构
const [a,b,c,d,e] = hello
// a => h
// b => e
// c => l
// d => l
// e => o
5.函数参数解构
const shaochang = {name:'少昌',age:18}
function getAge({ name,age }){ return `${name}今年${age}岁` }
getAge(shaochang) // 少昌今年18岁
箭头函数
ES6 允许使用箭头 => 定义的函数
var f = v => v
// 等同于ES5的
var f = function(v){ return v }
var f = () => 5
// 等同于 ES5 的
var f = function (){ return 5 }
var sum = (num1,num2) => num1 + num2
// 等同于 ES5 的
var sum = function(num1, num2){ return num1 +num2 }
const full = ({ first, last }) => first + + last;
// 等同于 ES5 的
function full(person){
return person.first + + person.last;
}
const isEven = n => n % 2 === 0
const square = n => n * n
var result = values.sort((a, b) => a - b)
// 等同于 ES5 的
var result = values.sort(function (a, b) { return a - b })
箭头函数使用注意点。
1.函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
2.不可以当做构造函数，也就是不可以使用 new 命令，否则会抛出一个错误。
3.不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以使用 rest 参数代替。
4.不可以使用 yield 命令，因此箭头函数不能作 Generator 函数。
// ES6
function foo() { setTimeout(() => { console.log(id:,this.id) },100) }
// 转换成 ES5
function foo(){ var _this = this; setTimeout(function () { console.log( id:,_this.id ) },100) }
上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的 this，而是引用外层的 this。
模板字符串
模板字符串（template string）是增强版的字符串，用反引号（``）标识。它可以当作普通字符串，也可以用来定义多行字符串，或者在字符串中嵌入变量。
const { log } = console
const name = wenshaochang
const age = 18
// 普通字符串拼接
const result = name + '今年' + age + '岁'
// 使用模板字符串
const result2 = `${name}今年${age}岁`
log(result) // wenshaochang今年18岁
log(result2) // wenshaochang今年18岁
// ${} 大括号可以放入任意的 JavaScript 表达式，可以进行运算
const result3 = `${name}今年${age * 2}岁`
log(result3) // wenshaochang今年36岁
剩余参数 / 展开语法
ES6 引入了 rest参数（形式为 ...变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。
function sortNumbers(){ return Array.prototype.slice.call(arguments).sort() }
// 使用 rest
const sortNumbers = (...numbers) => numbers.sort()
比较以上两种写法可以发现，rest 参数的写法更自然也更简洁。 扩展运算符（spread）是三个点（...）如同 rest 参数的逆运算 将一个数组转为用逗号分隔的参数序列
console.log(...[1, 2, 3]) // 1 2 3
console.log(1,...[2,3,4],5) // 1 2 3 4 5
下面是扩展运算符取代 apply 方法的一个实际例子，应用 Math.max 方法简化求出数组中的最大元素。
// ES5 的写法
Math.max.apply(null,[14,2,77])
// ES6 的写法
Math.max(...[14,3,77])
// 等同于
Math.max(14,3,77)
扩展运算符提供了数组合并的新写法。
// ES5
[1,2].concat(more)
// ES6
[1,2,...more]
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。
let z = { a:3, b:bb }
let n = { ...z }
n // { a:3, b:bb }
n === z // false
特别注意：... 扩展对象，只能做到当对象属性是 基本数据才是深拷贝，如果是 引入数据类型，那就是浅拷贝。
let z = { a: 3, b: bb , c: { name: ccc } }
let n = { ...z }
n // { a: 3, b: bb , c: { name: ccc } }
n === z // false
n.c === z.c // true
// n.c 跟 z.c 是同一个引用地址
对象字面量简写语法
const name = wen
// ES5 写法
const obj = {
name:name,
f:function(){
console.log(this.name)
},
}
// ES6 简写
const obj2 = {
name,
f(){
console.log(this.name)
}
}
obj.f() // wen
obj2.f() // wen
数组实例的 includes()
Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016引入了方法。
[1,2,3].includes(2) // true
[1,2,3].includes(4) // false
[1,2,NaN].includes(NaN) // true
没有该方法之前，我们通常使用数组的 indexOf 方法，检查是否包含某个值。
// ES5
if (arr.indexOf(el) !== -1) {
// ...
}
// ES6
if (arr.includes(el)) {
// ...
}
// 那么 indexOf 能不能做到类似于 includes 的写法呢？ 我们可以利用 ~ 位运算符
if (~arr.indexOf(el)) {
// ...
}
indexOf 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。
;[NaN].indexOf(NaN) // -1
includes 使用的是不一样的判断算法，就没有这个问题
;[NaN].includes(NaN) // true
Async / await 异步语法
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。
async function getTitle(url) {
let response = await fetch(url)
let html = await response.text()
return html.match(/([sS]+)/i)[1]
}
getTitle( https://tc39.github.io/ecma262/ ).then((res) => console.log(res))
上面代码中，函数 getTitle 内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行 then 方法里面的 console.log
标签：ES6,ES5,const,name,...,前端,90%,var,函数 来源： https://www.cnblogs.com/wenshaochang123/p/14899913.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。