JavaScript ES6 特性

下面的代码主要是描述以下内容：

let是块区作用域，不会变量提升.var也是块做作用域，但是会变量提升。
…展开操作符作用于数组。
数组解构赋值。
对象增强。
…展开操作符作用于对象。
对象解构赋值。
for/of 结合迭代。
类继承。
get/set使用。
字符串复制(repeat)。
函数默认值设置。
箭头函数(arrow function) =>，会保持上下文 this。
生成器 generator(function*)， yield关键字(暂停执行函数，返回yield 后面的表达式)。
promise 延时操作。
fetch demo。
aysnc/await。

//1.let是块区作用域，不会变量提升.var也是块做作用域，但是会变量提升。
{let a = 12;var b = 52;
}
// console.log(a)// Uncaught ReferenceError: a is not defined
console.log(b)// 52//2. 数组展开操作符(...) array spread operator
let cats = ["Biscuit", "Jungle"];
let dogs = ["Stella", "Camper"];let animals = ["Smoky", "Miro", "Swimmy", ...cats, ...dogs];
//["Smoky", "Miro", "Swimmy", "Biscuit", "Jungle", "Stella", "Camper"]
console.log(animals)//3.数组解构赋值 destructing arrays
let [first, fifth] = ["Smoky", "Miro", "Swimmy", "Camper", "Jungle"];
console.log(first);//Smoky
console.log(fifth);//Mirolet [one, , , , five] = ["Smoky", "Miro", "Swimmy", "Camper", "Jungle"];
console.log(one);//Smoky
console.log(five);//Jungle
// 4. 对象增强
// ES5
function skierES5(name, sound) {return {name: name,sound: sound,powderYell: function () {let yell = this.sound.toUpperCase();console.log(`${yell}! ${yell}!`)}}
}skierES5("Sendy", "yeah").powderYell();//YEAH! YEAH!// ES6
function skierES6(name, sound) {return {name,sound,powderYell() {let yell = this.sound.toUpperCase();console.log(`${yell}! ${yell}!`)}}
}
skierES6("Sendy", "yeah").powderYell();//YEAH! YEAH!//5. 展开操作符（...）作用于对象
const daytime = {breakfast: "oatmeal",lunch: "peanut butter and jelly"
};const nighttime = "mac and cheese"const backpackingMeals = {...daytime,nighttime
}//{breakfast: "oatmeal", lunch: "peanut butter and jelly", nighttime: "mac and cheese"}
console.log(backpackingMeals);// 6.对象解构赋值
const { title, price } = {title: "Rebuen",price: 7,description: "A classic",ingredients: ["bread", "corned beef", "dressing", "sauerkraut", "cheese"]
}console.log(title, price)//Rebuen 7const vacation = {destination: "Chile",travelers: 2,activity: "skiing",cost: "so much"
}
function marketing({ destination, activity }) {return `Come to ${destination} and do some ${activity}`;
}console.log(marketing(vacation))//Come to Chile and do some skiing//7.for/of 结合迭代
for (let letter of "javascript") {console.log(letter)// j// a// v// a// s// c// r// i// p// t
}let topics = new Map();
topics.set("HTML", "/topic/html");
topics.set("CSS", "/topic/css");
topics.set("Javascript", "/topic/javascript");for (let topic of topics) {// ["HTML", "/topic/html"]// ["CSS", "/topic/css"]// ["Javascript", "/topic/javascript"]console.log(topic)
}//8. 类继承
class Vehicle {constructor(description, wheels) {this.description = description;this.wheels = wheels;}describeYourself() {console.log(`I am a ${this.description} with ${this.wheels}`);}
}class SemiTruck extends Vehicle {constructor() {super("semi truck", 18);}
}
let groceryStoreSemi = new SemiTruck();
groceryStoreSemi.describeYourself();//I am a semi truck with 18//9. get set使用 个人感觉很变扭，没必要这样做
class Hike {constructor(distance, pace) {this.distance = distance;this.pace = pace;}get lengthInHours() {return `${this.calcLength()} hours`;}calcLength() {return this.distance / this.pace;}
}const mtTallac = new Hike(10, 2);
console.log(mtTallac.lengthInHours)//5 hours//10. string.repeat
console.log("Hi".repeat(3));//HiHiHi//11. 函数设置默认值
function add(x = 5, y = 6) {console.log(x + y);
}
console.log(add())//11//12. 箭头函数arrow function
// ES5
// let studentList = function(students){//     console.log(students);
// }// ES6
let studentList = (students) => {console.log(students);
}studentList(["A", "B", "C"])//["A","B","C"]//ES5
let person = {first: "Angie",hobbies: ["bike", "hike", "ski"],printHobbies: function () {_this = this;this.hobbies.forEach(function (hobby) {let string = `${_this.first} likes to ${hobby}`;console.log(string);});}
};// Angie likes to bike
// Angie likes to hike
// Angie likes to ski
person.printHobbies();//ES6 arrow function
let personES6 = {first: "Angie",hobbies: ["bike", "hike", "ski"],printHobbies: function () {this.hobbies.forEach((hobby) => {let string = `${this.first} likes to ${hobby}`;console.log(string);});}
}
// Angie likes to bike
// Angie likes to hike
// Angie likes to ski
personES6.printHobbies();// 13. 生成器 generator(function*)， yield关键字(暂停执行函数，返回yield 后面的表达式)。
function* director() {yield "Three";yield "Two";yield "One";yield "Action";
}let countdown = director();
console.log(countdown.next().value);
console.log(countdown.next().value);
console.log(countdown.next().value);
console.log(countdown.next().value);//14.promise 延时操作
const delay = (seconds) =>new Promise((resolves, reject) => {if (typeof seconds !== "number") {reject(new Error("seconds must be a number"));}setTimeout(resolves, seconds * 1000)});
delay(2).then(() => console.log("2 sec"));//2 sec
delay("one").then(() => console.log("1 sec"));//seconds must be a number//15. fetch demo
let getSpacePeople = () =>fetch("http://api.open-notify.org/astros.json").then(res => res.json())let spaceNames = () =>getSpacePeople().then(json => json.people).then(people => people.map(p => p.name)).then(names => names.join(","));
//Sergey Ryzhikov,Kate Rubins,Sergey Kud-Sverchkov,Mike Hopkins,Victor Glover,Shannon Walker,Soichi Noguchi
spaceNames().then(console.log);//16. async await
const gtihubReuqest = async (login) => {let response = await fetch(`https://api.github.com/users/${login}`);let json = await response.json();let summary = `${json.name}, ${json.company}`;console.log(summary)
};gtihubReuqest("Tony");//Tony Narlock, @peergradeio

JavaScript ES6 特性相关推荐

javascript es6 特性简介
目录 1.变量声明 const 和 let 2.字符串 3.函数 4.拓展的对象功能 5.更方便的数据访问--解构 6.Spread Operator 展开运算符 7.import 和 export ...
JavaScript ES6新特性（二）：模块化
简介模块化指的是将一个很大的程序文件按照一定的规则进行拆分,然后根据需要进行引入组合. 好处: 防止命名冲突. 代码复用. 高维护性. 语法: 主要分为暴露语法和引入语法. 暴露语法: 在js代码块 ...
[转]JavaScript ES6 class指南
[转]JavaScript ES6 class指南前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...
es6 数组合并_九个前端开发必学超级实用的 ES6 特性
1.展开操作符顾名思义,用于对象或数组之前的展开操作符(-),将一个结构展开为列表. 这种写法够优雅,够简洁吧?如果不用展开操作符我们得这么写: 展开操作符也适用于合并对象的属性: 不用展开操作符 ...
最常用的ES6特性(转)
最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...
第四节：教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
9个超级实用的 ES6 特性,超级实用哦！
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应 ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...

JavaScript ES6 特性

JavaScript ES6 特性

JavaScript ES6 特性相关推荐

最新文章

热门文章