金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 金沙棋牌官方平台:变量声明,一种从数组或者

金沙棋牌官方平台:变量声明,一种从数组或者

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-20 14:29

ES6:解构——JavaScript 从数组和对象中提取数据的优雅方法

2017/04/17 · JavaScript · es6

原文出处: deadcoderising   译文出处:胡子大哈   

ES6 有很多新特性,它很大程度上提升了 JavaScript 的编程体验,并且也告诉外界,JavaScript 依旧强势。

其中一个新特性是其对数组和对象的解构,通过解构方法从数组和对象中提取数据变得非常简单和方便。接下来看一下它是如何做到的,我们从数组开始讲起。

ES6充满着乐趣,它不但真正提升了我们对 JavaScript 的编程体验,而且显示了 JavaScript 值得活下来。

var声明

声明的为全局变量。

for(var i = 0; i < 10; i++) {

    setTimeout(() => {

        console.log(i);

    }, 100 * i)

}

结果:10,10,10,。。。。。。(10个)

原文出处: deadcoderising   译文出处:胡子大哈   

从数组中提取数据

假设你有如下的数组,里面是几个人的名字:

JavaScript

const names = ['Luke', 'Eva', 'Phil'];

1
const names = ['Luke', 'Eva', 'Phil'];

接下来,使用解构从里面提取数据。

它有一个从数组和对象中解构值的新特性,使得我们很方便的就能从数组和对象中提取到数据。

let声明

声明的变量为局部变量,作用域为块作用域。

for(let i = 0; i < 10; i++) {

    setTimeout(() => {

        console.log(i);

    }, 100 * i)

}

结果: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

金沙棋牌官方平台 1

从数组中取元素

首先从最基本的开始——提取数组中第一个元素。

JavaScript

const [first] = names; console.log(first); // 'Luke'

1
2
const [first] = names;  
console.log(first); // 'Luke'

ok,下面分析一下这个语法都做了什么。把一个变量用中括号括起来,表示我们想要取得 names 数组中的第一个元素,并且把它分配给指定的变量,本例中即变量 first

那么现在想要提取几个元素,比如第一个和第二个怎么办呢?很简单,在中括号中添加变量就可以。这样会从数组中顺序提取几个元素分配给指定的变量。

JavaScript

const [first, second] = names; console.log(first, second); // 'Luke' 'Eva'

1
2
const [first, second] = names;  
console.log(first, second); // 'Luke' 'Eva'

让我们看看是如何做到的,我们先从数组开始。

const声明

const和let拥有相同的作用域规则,只是const不能被赋值。其实也只是不能整体赋值,给单独的元素赋值是合法的。

const all = {

    name: 'xiaoming',

    age: 10,

};

// error

all = {

    name: 'honghong',

    age: 18,

};

// right

金沙棋牌官方平台,all.name = 'honghong';

all.age++;

上一篇文章中,我介绍了一些关于 ES6 解构方法的新特性。

元素缺失时的默认值

以上面的数组为例,如果我们要取 4 个值,而数组中只有 3 个值会发生什么呢?

JavaScript

const [first, second, third, fourth] = names; console.log(fourth); // undefined

1
2
const [first, second, third, fourth] = names;  
console.log(fourth); // undefined

这种场景下,fourthunderfined

这在很多场景下都是我们不想见到的,所以可以当数组中没有那么多的值的时候,我们可以提前给变量赋上默认值。

JavaScript

const [first, second, third, fourth='Martin'] = names; console.log(fourth); // 'Martin'

1
2
const [first, second, third, fourth='Martin'] = names;  
console.log(fourth); // 'Martin'

从数组中提取数据

假设我们有一个存着名字的数组:

const names = ['Luke', 'Eva', 'Phil'];  

接下来让我们用解构来从中提取数据。

let vs const

使用原则:最小特权原则,既所有变量的定义,除了你计划去修改的,都应该使用const去定义。

本文中我们一起来看一下另外一个 JavaScript 新增语法 —— spread syntax(扩展语法)。

跳过数组中的元素

学会了如何按顺序从数组中提取数据。现在有这样的场景:想要跳过数组中的某个元素取值,这样就可以避免取到不想取的值。解构方法中提供了很好的解决方案。

JavaScript

var [first, , second] = names; console.log(first, second); // 'Luke' 'Phil'

1
2
var [first, , second] = names;  
console.log(first, second); // 'Luke' 'Phil'

通过简单的添加逗号,就可以避免分配相应的数组元素,直接跳到下一个元素了。如果想要跳过多个元素呢?也很简单,多加几个逗号就可以了。

从数组中提取元素

让我们从最最基本的提取第一个元素开始:

const [first] = names;
console.log(first); // Luke

现在,我们来分析这段代码做了些什么。一个变量被方括号包含,这就意味着我们想从 names 数组拿到第一个元素并且将这个元素赋值给变量,在我们的例子中首先把数组中第一个元素的值赋给了变量。

现在,假如我们想从数组中拿到多个元素的值,比如说第一和第二个,我们该如何做? 其实很简单,我们只需要在方括号中添加多个变量就可以实现。这样在数组前列的新元素就会被提取并且赋值给定义的变量。

const [first, second] = names;
console.log(first, second); // Luke Eva

解构

spread syntax 实际上非常简单,假设你的可遍历对象中有一些元素(如数组),你想把这些元素应用于另一个新的数组或者一个函数调用。通常的做法,你会从索引开始,利用循环访问每个元素。但是通过 spread syntax 这个事情就变的很简单了,你可以使用三个点作为前缀,即 ... 应用于可遍历对象上,问题就解决了。

分配数组中剩下的给某元素

到现在,已经知道了如何从数组中提取单个元素,那么对于想要取数组中的后面连续部分的元素怎么办呢?看下面的解构代码。

JavaScript

var [first, ...rest] = names; console.log(rest); // ['Eva','Phil']

1
2
var [first, ...rest] = names;  
console.log(rest); // ['Eva','Phil']

通过在最后一个变量前加 ... 标记,这个意思是分配数组中剩下的所有元素给 rest 变量。

元素不存在时的默认值

假设我们从只有三个元素的数组中解析四个元素,会发生什么?

const [first, second, third, fourth] = names;  
console.log(fourth); // undefined  

在这种情况下,fourth 为 undefied 。
我们可以给第四个元素设置一个默认的值,当结构时数组元素不足时,第四个值默认就是我们设置的值。

const [first, second, third, fourth='Martin'] = names;  
console.log(fourth); // 'Martin'  

数组解构

let [ 1, 2 ] = input;

最简单的结构:

let [ first, second ] = input;

console.log(first); // 1

console.log(second); // 2

作用于函数参数:

function f([ first, second ]: [ number, number ] ) {

    console.log(first, second); 

}

f(input); // 1, 2

可以在数组里使用...语法创建剩余变量:

let [ first, second, ...rest ] = [ 1, 2, 3, 4 ];

console.log(first, second); // 1, 2

console.log(rest);  // [ 3, 4 ]

你可以忽略你不关心的元素:

let [ first ] = [ 1, 2 ,3, 4 ];

console.log(first); // 1

let [ , second, , fourth ] = [ 1, 2, 3, 4 ];

console.log(second, fourth); // 2, 4

为了更直观,我们一起看几个用例就明白了。

解构对象

ok,数组的解构已经都学会了,下面看一下从对象中提取数据,假设有如下描述一个人的对象。

JavaScript

const person = { name: 'Luke', age: '24', facts: { hobby: 'Photo', work: 'Software Developer' } }

1
2
3
4
5
6
7
8
const person = {
    name: 'Luke',
    age: '24',
    facts: {
        hobby: 'Photo',
        work: 'Software Developer'
    }
}

略过数组中的值

现在我们已经知道了从数组开始时解构,但是,我们经常遇见我们只需要数组中一部分的值,所以就会存在略过数组的值的情况。
不过很棒的地方就是,解构其实可以满足我们这种需求:

var [first, , second] = names;  
console.log(first, second); // 'Luke' 'Phil'  

其实很简单只需要把略过的值得逗号加上,就可以略过数组中的值。

对象解构

let person = {

    name: 'xiaoxiao',

    school: 'beijing',

    age: 12,

};

最简单的形式:

let { name } = person; // 'xiaoxiao'

let { name, ...rest} = person;

console.log(name); // 'xiaoxiao'

console.log(rest); // { school: 'beijing', age: 12 }

属性重命名:新名称写在冒号后面

let { name: newName, school: newSchool } = person;

默认值:

function keep(ol: { a: number, b?: number }) {

    let { a, b = 1002 } = ol;

} // 当没有传入b参数时,b变量使用默认值1002

复制一个数组

假设有一个数组名字是 names。

JavaScript

const names = ['Luke','Eva','Phil'];

1
const names = ['Luke','Eva','Phil'];

如何把 names 里面的元素复制到一个新数组中呢?

传统的做法是用循环来实现,但是使用 spread syntax,解决方法很简洁。

JavaScript

const copiedList = [...names] console.log(copiedList); // ['Luke','Eva','Phil']

1
2
const copiedList = [...names]  
console.log(copiedList); // ['Luke','Eva','Phil']

可以看到比循环方法简单的多。

这里值得一提的是,这里复制的是引用。也就是说如果一个数组中的元素发生改变,那么另一个数组中的元素也相应地发生改变。

JavaScript

var initialArray = [{name: "Luke"}]; var copiedArray = [...initialArray]; initialArray[0]['name'] = 'Mark'; console.log(initialArray); //Array [{'name': 'Mark'}] console.log(copiedArray); //Array [{'name': 'Mark'}]

1
2
3
4
5
6
7
var initialArray = [{name: "Luke"}];  
var copiedArray = [...initialArray];
 
initialArray[0]['name'] = 'Mark';
 
console.log(initialArray); //Array [{'name': 'Mark'}]  
console.log(copiedArray); //Array [{'name': 'Mark'}]

从对象中提取数据

依然从最基本的开始,提取从 person 中提取 nameage

JavaScript

const {name, age} = person; console.log(name, age); // 'Luke' '24'

1
2
const {name, age} = person;  
console.log(name, age); // 'Luke' '24'

可以看到,和从数组中提取数据的语法都是一样的,唯一的不同是把方括号替换成了花括号。

把数组中剩下的部分赋值给变量

解构不同的值现在变得很简单,但是很多情况下我们需要保留一部分没有被解构的数组。
我们现在来看看如何做到:

var [first, ...rest] = names;  
console.log(rest); // ['Eva','Phil']  

在变量前加上 ... 就能够将剩下部分数组保存到变量中。

展开

数组展开:

let first = [ 1, 2 ];

let second = [ 3, 4 ];

let third = [ ...first, ...second, 5]; // [ 1, 2, 3, 4, 5 ]

对象展开:

let first = {

    name: 'apple',

    color: 'red',

};

let second = {

    price: 4,

    size: 'big',

};

let all = { ...first, ...second, color: 'yellow' }; // { name: 'apple', color: 'yellow', price: 4, size: 'big' }

注意:当展开一个对象实例时,会丢失其方法。

连接数组

spread syntax 另一个用法是连接数组,做法是把你想要扩展的数组放到一起。如下:

JavaScript

const concatinated = [...names, ...names]; console.log(concatinated); // ['Luke','Eva','Phil', 'Luke','Eva','Phil']

1
2
const concatinated = [...names, ...names];  
console.log(concatinated); // ['Luke','Eva','Phil', 'Luke','Eva','Phil']

提取嵌套值

假设想要提取对象结构中深层次的值该怎么处理?比如 person 中的 hobby。代码如下。

JavaScript

const {facts: {hobby}} = person; console.log(hobby); // 'Photo'

1
2
const {facts: {hobby}} = person;  
console.log(hobby); // 'Photo'

通过冒号可以描述对象中的路径,这样就可以取到对象中深层的嵌套值了。

解构对象

我们已经知道了如何解构数组, 现在让我们来看看如何从对象中解构值,先看这个对象

const person = {  
  name: 'Luke',
  age: '24',
  facts: {
    hobby: 'Photo',
    work: 'Software Developer'
  }
}

把独立变量扩展到一起

除了把元素复制到一个新数组中,还可以把独立变量一起扩展到某数组中。下面举个例子,把第一个元素和 names 数组扩展到一起。

JavaScript

const first = ['Emily', ...names]; console.log(first); // ['Emily','Luke','Eva','Phil']

1
2
const first = ['Emily', ...names];  
console.log(first); // ['Emily','Luke','Eva','Phil']

还可以把独立变量放到 names 的后面。

JavaScript

const last = [...names, 'Emily']; console.log(last); // ['Luke','Eva','Phil', 'Emily']

1
2
const last = [...names, 'Emily'];  
console.log(last); // ['Luke','Eva','Phil', 'Emily']

数据缺失时的默认值

如在解构数组时的处理方案一样,当想要抽取的值不存在时,也可以给对象里的值赋默认值。如下面代码,想要提取 hometown 属性,并且给定 Unknown 默认值。

JavaScript

const {hometown = 'Unknown'} = person; console.log(hometown); // 'Unknown'

1
2
const {hometown = 'Unknown'} = person;  
console.log(hometown); // 'Unknown'

从这个对象中解构值

我们从最基础的开始,从Person 对象中解构name 和 age 的值。
···
const {name, age} = person;
console.log(name, age); // 'Luke' '24'
···
我们可以看到,几乎和数组的写法一致,只是把方括号换成大括号。

在函数调用中使用 spread syntax

你已经掌握了如何在数组中运用 spread syntax,现在我们来看一下如何在函数调用中使用。

假设我们有个简单函数 —— printer —— 接受三个参数,并且打印出来。

JavaScript

const printer = (name1, name2, name3) => { console.log(`Names: ${name1}, ${name2} and ${name3}`); };

1
2
3
const printer = (name1, name2, name3) => {  
    console.log(`Names: ${name1}, ${name2} and ${name3}`);
};

依照 printer 函数定义,可以使用 spread syntax 把数组元素应用于 printer 函数。

JavaScript

printer(...names); // Names: Luke, Eva and Phil

1
printer(...names); // Names: Luke, Eva and Phil

和数组的用法一样,可以把独立变量一起输出。我们添加 ‘Emily’ 作为 printer 函数的第一个参数,后面跟着 ...names

JavaScript

printer('Emily', ...names); // Names: Emily, Luke and Eva

1
printer('Emily', ...names); // Names: Emily, Luke and Eva

如果传递给函数过多的参数,那么超过函数参数个数的元素将会被忽略掉。

解构函数参数

在结束本文之前,我们来看最后一个例子——解构函数参数。

假设你有一个函数,接受一个对象作为参数。那么你可以直接在参数列表中对对象进行解构。例如下面这个 toString 函数,打印出 nameage

JavaScript

const toString = ({ name, age }) = > { return` $ { name } is $ { age } years old`; } toString(person); // Luke is 24 years old

1
2
3
4
5
6
7
8
9
10
11
12
13
const toString = ({
    name, age
}) = > {
    return` $ {
        name
    }
    is $ {
        age
    }
    years old`;
}
toString(person); // Luke is 24 years old

不过要提醒大家的是,这不是一个好的编程习惯,如果别人使用你的函数,很容易造成误解,调试起来特别不方便,这里只是告诉大家可以这样进行解构而已。

ok,那么到现在对于数组和对象的解构问题大家应该都学会了,后面也还会介绍一些 JavaScript 的一些新特性,欢迎大家对我保持关注。

如果你认为文章中还需要注意什么,或者添加什么,请让我知道。

1 赞 1 收藏 评论

金沙棋牌官方平台 2

解构嵌套的值

假设我们现在想解构对象深层次的值,比如说 person 对象的 hobby:

const {facts: {hobby}} = person;  
console.log(hobby); // 'Photo'  

通过冒号,我们可以找到属性的路径,从而可以解析我们需要哪个值。

Bonus:spread syntax 应用于对象字面值!

这个特征是基于 ECMAScript的附加特征。但是目前使用它需要 babel 插件,叫做:babel-plugin-transform-object-rest-spread。

通过 spread syntax 这种变体,你可以把两个对象扩展到一起。假设你有两个对象包含了个人信息 —— nameAndAgeabout

JavaScript

const nameAndAge = { name: 'Luke', age: 24, } const about = { work: 'Developer', hobby: 'Skydiving', }

1
2
3
4
5
6
7
8
9
    const nameAndAge = {  
      name: 'Luke',
      age: 24,
    }
 
    const about = {  
      work: 'Developer',
      hobby: 'Skydiving',
    }

接下来用 spread syntax 把两个对象合并到一起。

JavaScript

const person = { ...nameAndAge, ...about, } console.log(person); //{ // "age": 24, // "hobby": "Skydiving", // "name": "Luke", // "work": "Developer" //}

1
2
3
4
5
6
7
8
9
10
11
12
  const person = {  
      ...nameAndAge,
      ...about,
    }
 
    console.log(person);  
    //{
    //  "age": 24,
    //  "hobby": "Skydiving",
    //  "name": "Luke",
    //  "work": "Developer"
    //}

OK,这篇文章介绍了 spread syntax 的用法。后面我们会继续介绍 ES6 新特性,敬请继续关注!

1 赞 收藏 评论

当没有解构成功时的默认值

我们在解析数组时可以给解构变量设置默认值,对象也同样可以。为了看到是怎样做的,我们我们可以尝试解构默认值为 Unknow 的 hometown。

const {hometown = 'Unknown'} = person;  
console.log(hometown); // 'Unknown'  

解构函数参数

结束之前,我们来看看解构最后一个应用,函数参数解构。假设你的函数有一个对象类型的参数,然后你就可以直接在参数表中解构变量。
我们尝试写一个叫做 tostring 的函数,函数中将打印一个人的名字和年龄。

const toString = ({name, age}) => {  
  return `${name} is ${age} years old`;
}

toString(person); // Luke is 24 years old  

译者注

本文翻译至这里,译者水平有限,错漏缺点在所难免,希望读者批评指正。另:欢迎大家留言讨论。

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:金沙棋牌官方平台:变量声明,一种从数组或者

关键词: