ES6特性

田埂上的希望
148 阅读5分钟

Es6特性

1.const let

(1)相同之处两者都为块级作用域。let 和 const 声明只在最靠近的一个块中（花括号内）有效

(2)不同之处const 只能声明常量并且值不能被修改。Let声明变量。const 在声明时必须被赋值

(3) let 关键词声明的变量不具备变量提升特性

(4)当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

2.模板字符串

(1)基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定；

(2)ES6反引号(``)直接搞定；

$("body").html(`This demonstrates the output of HTML content to the page, 
including student's ${name}, ${seatNumber}, ${sex} and so on.`);

3.箭头函数

(1)ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体；

(2)不需要 function 关键字来创建函数

(3)省略 return 关键字

（4）没有this指向。它的this跟随包裹它最近的一个函数。

4.对象与数组结构

const point = [10, 25, -34];const [x, y, z] = point;

console.log(x, y, z);

const gemstone = {
type: 'quartz',
color: 'rose',
 karat: 21.29};

const {type, color, karat} = gemstone;

console.log(type, color, karat);

5.for in 和for of的区别

for in 一般常用来遍历对象或json

for of数组对象都可以遍历，遍历对象需要通过和Object.keys()，可以随时停止或退出for of循环

for in循环出的是key，for of循环出的是value

let letters = ['a', 'b', 'c'];

letters.size = 3;
for (let letter of letters) {
console.log(letter);}// 结果: a, b, c

let stus = ["Sam", "22", "男"];

for (let stu in stus) {
 console.log(stus[stu]);
}// 结果: Sam, 22, 男

6.Promise

一.实现串行任务队列

二.实现串行任务管道

三.处理运行时才能确定执行顺序的串行任务

Promise 是一个构造函数，是异步编程的一种解决方案。所谓Promse,它本身就是一个容器，里面保存着异步操作的结果，对的，这和回调函数类似。
Promise 容器本身不是异步的，而里面封装一个异步任务。他有三种状态，即：1.pending(进行中)、2.resolved(成功)、3.r   ejected(失败)。状态只能变为一种。

#promise函数的理解#
参考网址：https://www.cnblogs.com/qinmengjiao123-123/p/8321382.html
答：一、Promise是什么？
Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。
ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

二、Promise是为解决什么问题而产生的？
promise是为解决回调地狱。以同步代码解决异步操作。

7.对象字面量简写法

使用和所分配的变量名称相同的名称初始化对象时如果属性名称和所分配的变量名称一样，那么就可以从对象属性中删掉这些重复的变量名称。

8.展开运算符

展开运算符（用三个连续的点 (...) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素

const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"];
console.log(...books);

使用展开符来结合数组。

const fruits = ["apples", "bananas", "pears"];

const vegetables = ["corn", "potatoes", "carrots"];

const produce = [...fruits,...vegetables];

console.log(produce);

使用展开运算符将数组展开为多个元素, 使用剩余参数可以将多个元素绑定到一个数组中.

剩余参数也用三个连续的点 ( ... ) 表示，使你能够将不定数量的元素表示为数组.

用途1: 将变量赋数组值时:

const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];

const [total, subtotal, tax, ...items] = order;

console.log(total, subtotal, tax, items);

用途2: 可变参数函数
在ES6中使用剩余参数运算符则更为简洁,可读性提高:

function sum(...nums) {
 let total = 0;  
for(const num of nums) {
    total += num;
}
 return total;}

9.Es6类

ES6类只是一个语法糖,原型继续实际上在底层隐藏起来, 与传统类机制语言有些区别.

class Plane {
//constructor方法虽然在类中,但不是原型上的方法,只是用来生成实例的.
constructor(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}
//原型上的方法, 由所有实例对象共享.
startEngines() {
    console.log('starting engines…');
    this.enginesActive = true;
}}

console.log(typeof Plane); //function

javascript中类其实只是function, 方法之间不能使用,,不用逗号区分属性和方法.

静态方法
要添加静态方法，请在方法名称前面加上关键字 static

class Plane {
constructor(numEngines) {
this.numEngines = numEngines;
this.enginesActive = false;
}

static badWeather(planes) {
    for (plane of planes) {
    plane.enginesActive = false;
    }
 }

startEngines() {
console.log('starting engines…');
this.enginesActive = true;
}}

关键字class带来其他基于类的语言的很多思想,但是没有向javascript中添加此功能
javascript类实际上还是原型继承
创建javascript类的新实例时必须使用new关键字

10模块化(Module)

在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量
//test.js

export var name = 'Rainbow'

ES6将一个文件视为一个模块，上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

//test.js

var name = 'Rainbow';

var age = '24';

export {name, age};

导出函数

// myModule.js

export function myModule(someArg) {
return someArg;
}

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

import {myModule} from 'myModule';// main.js

import {name,age} from 'test';// test.js
avatar
文章
阅读
粉丝