ES6、ES7、ES8、ES9、ES10新特性一览

正文

请到「今天看啥」查看全文

获取数组中的值

从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。

var foo = ["one", "two", "three", "four"];

var [one, two, three] = foo;
console.log(one); 
console.log(two); 
console.log(three); 

//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); 
console.log(last); 

//你也可以这样写
var a, b; 

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

如果没有从数组中的获取到值，你可以为变量设置一个默认值。

var a, b;

[a=5, b=7] = [1];
console.log(a); 
console.log(b); 

通过解构赋值可以方便的交换两个变量的值。

var a = 1;
var b = 3;

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

获取对象中的值

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};

const {name,age,city} = student;
console.log(name); 
console.log(age); 
console.log(city); 

7.延展操作符(Spread operator)

延展操作符... 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-value的方式展开。

语法

函数调用：

myFunction(...iterableObj);

数组构造或字符串：

[...iterableObj, '4', ...'hello', 6];

构造对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：

let objClone = { ...obj };

应用场景

在函数调用时使用延展操作符

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];


console.log(sum.apply(null, numbers));


console.log(sum(...numbers));

构造数组

没有展开语法的时候，只能组合使用 push，splice，concat 等方法，来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅：

const stuendts = ['Jine','Tom']; 
const persons = ['Tony',... stuendts,'Aaron','Anna'];
conslog.log(persions)

和参数列表的展开类似, ... 在构造字数组时, 可以在任意位置多次使用。

数组拷贝

var arr = [1, 2, 3];
var arr2 = [...arr]; 
arr2.push(4); 
console.log(arr2)

展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。

连接多个数组

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];
//等同于
var arr4 = arr1.concat(arr2);

在ECMAScript 2018中延展操作符增加了对对象的支持

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };


var mergedObj = { ...obj1, ...obj2 };

javascript

在React中的应用

通常我们在封装一个组件时，会对外公开一些 props 用于实现功能。大部分情况下在外部使用都应显示的传递 props 。但是当传递大量的props时，会非常繁琐，这时我们可以使用 ...(延展操作符,用于取出参数对象的所有可遍历属性) 来进行传递。

一般情况下我们应该这样写

 name ='Jine' age ={21} />

使用 ... ，等同于上面的写法

const params = {
    name: 'Jine',
    age: 21
}
<CustomComponent {...params} />

配合解构赋值避免传入一些不需要的参数

var params = {
    name: '123',
    title: '456',
    type: 'aaa'
}

var { type, ...other } = params;

<CustomComponent type='normal' number={2} {...other} />
//等同于
<CustomComponent type='normal' number={2} name='123' title='456' />

8.对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名。

不使用ES6

const name='Ming',age='18',city='Shanghai';

const student = {
    name:name,
    age:age,
    city:city
};
console.log(student);

对象中必须包含属性和值，显得非常冗余。

使用ES6

const name='Ming',age='18',city='Shanghai';

const student = {
    name,
    age,
    city
};
console.log(student);

对象中直接写变量，非常简洁。

Promise 是异步编程的一种解决方案，比传统的解决方案callback更加的优雅。它最早由社区提出和实现的，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

不使用ES6

嵌套两个setTimeout回调函数：

setTimeout(function()
{
    console.log('Hello'); 
    setTimeout(function()
    {
        console.log('Hi'); 
    }, 1000);
}, 1000);

使用ES6

var waitSecond = new Promise(function(resolve, reject)

请到「今天看啥」查看全文