es6新特性

最新推荐文章于 2024-07-06 00:11:00 发布

jierenjia

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/jierenjia/article/details/80806614

版权

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

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

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

1.背景介绍

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

2.知识剖析

下面是介绍下ES6中的解构赋值

解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let a = 1;
let b = 2;
let c = 3;
ES6允许写成这样：
let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
数组的解构，数组的元素是按次序排列的，变量的取值由它的位置决定。

const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'

而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

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

对象的解构，变量和属性名对应即可，跟顺序无关,也可以起一个别名。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
解构不成功的值

当解构不成功值为undefined

var [a,b] = [1];
console.log(a,b); //1 undefined

默认值
只有当值全等与undefined时才会起作用

var [a,b = 2] = [1];
console.log(a,b); //1 2

var [a,b = 2] = [1,null];

console.log(a,b); //1 null

默认值也可以引用解构赋值中的其他变量，但是这个变量必须已经声明

let [a,b = a] = [1];
console.log(a,b); //1 1

let [a = b,b = 1] = [];
console.log(a,b); //Uncaught ReferenceError: b is not defined

解构的用途
交换变量

let a = 1;
let b = 2;
[a,b] = [b,a];

console.log(a,b); //2 1

从函数返回多个值

// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();

只取需要的值

let arr = [
{
title:1111,
love:{
one:'one_1',
two:'two_1'
}
},
{
title:2222,
love:{
one:'one_2',
two:'two_2'
}
}
];

for(let {title,love:{two}} of arr){
console.log(title,two);

}

提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用

let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

3 常见问题
解构赋值还有什么用法？

4 解决方案