ES6有哪些新特性

最新推荐文章于 2025-05-03 08:55:57 发布

jierenjia

最新推荐文章于 2025-05-03 08:55:57 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jierenjia/article/details/80720647

大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS-8任务中可能会使用到的知识点：

HTTP状态码有哪些？分别代表是什么意思?

1.背景介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.知识剖析

下面是介绍几个ES6的新特性

箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。不需要 function 关键字来创建函数, 有时可以省略 return 关键字, 继承当前上下文的 this 关键字。

//例如：
[1,2,3].map(x => x + 1)

//等同于：
[1,2,3].map((function(x){
return x + 1

}).bind(this))

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 RETURN；例如:

let people = name => 'hello' + name

//参数name就没有括号

解构赋值
ES5我们提取对象中的信息形式如下：

const people = {
name: 'lux',
age: 20
}
const name = people.name
const age = people.age

使用ES6
现在，解构能让我们从对象或者数组里取出数据存为变量，例如

//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'

console.log(second) //'blue'

函数参数默认值

不使用ES6 为函数的参数设置默认值

function foo(height, color)
{
var height = height || 50;
var color = color || 'red';
//...
}

但是，当参数的布尔值为false时，是会出事情的！比如，我们这样调用foo函数： foo(0, "")

因为0的布尔值为false，这样height的取值将是50。同理color的取值为‘red’。

使用ES6

function foo(height = 50, color = 'red')
{
// ...
}

模板字符串
不使用ES6

var name = 'Your name is ' + first + ' ' + last + '.'

使用ES6,将变量放在大括号之中：

var name = `Your name is ${first} ${last}.`

多行字符串
不使用ES6 使用“\n\t”将多行字符串拼接起来：

var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'

+ 'Had worn them really about the same,\n\t'

使用ES6
将多行字符串放在反引号之间就好了：

var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`

对象属性简写
不使用ES6 对象中必须包含属性和值，显得非常多余：

function people(name, age) {
return {
name: name,
age: age
};
}
使用ES6
键值对重名，ES6可以简写如下

function people(name, age) {
return {
name,
age
};
}

3 常见问题

Spread Operator展开运算符有什么用途?

4.解决方法

视频

PPT

5.编码实战

ES6中另外一个好玩的特性就是SPREAD OPERATOR 也是三个点儿...接下来就展示一下它的用途。
组装对象或者数组：

//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]

//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

//数组
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user

console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

对于 Object 而言，还可以用于组合成新的 Object 。 (ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }

console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

6.扩展思考

7.参考文献

10个最佳ES6特性
ES6这些就够了

ECMAScript 6 入门

8 更多讨论

1，什么是块级作用域

let实际上为 JavaScript 新增了块级作用域。

function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

2.const用法？

const声明一个只读的常量。一旦声明，常量的值就不能改变。const的作用域与let命令相同：只在声明所在的块级作用域内有效。

3，对象简写使用？