es6 学习笔记(二)

您所在的位置：网站首页 › 未分配利润借方余额表示增加还是减少 › es6 学习笔记(二)

es6 学习笔记(二)

#es6 学习笔记(二)| 来源: 网络整理| 查看: 265

es6重点理解 1.let,const

let:

特性：

1> 块级作用域//块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了

2> 不存在变量提升

3> 在let声明之前，变量都是不可用的

const:const声明一个只读的常量。一旦声明，常量的值就不能改变。

特性：

1> 块级作用域

2> 声明的常量不会提升，

3> 生命不赋值也会报错，

4> 在const声明之前，常量都是不可用的

2.rest: ...rest

相当于除已有形参之外的所有形参，

function fn(name,...rest) { console.log(name);//'luyuan' console.log(rest);//[1,2,3,4] } fn('luyuan', 1,2,3,4) 3.解构赋值（最外层的大括号表示块级作用域）

对象解构：

{ let obj = { a: [1,2], b: 3 } const {a, b} = obj; console.log(a, b); }

嵌套对象解构：

{ let obj = { a: { d: 5, b: { c: 4 } } } const {a: {d, b}} = obj; console.log(d,b.c); }

数组结构：

let arr = [1, 2, 3] //解构前2个元素 const [a, b] = arr console.log(a,b) //1 2

调换两个变量的值：

let a = 1,b = 2; [a, b] = [b, a]; //实际解构过程，左边的变量和右边的数组元素一一对应下标。

不定元素解构：

let arr = [1,2,[3,45]]; //相当于克隆 let [...rest] = arr;

解构参数：

{ function fn(area, infor) { let {name = 0, age = 18} = infor; console.log(area, infor); } fn('bj', {'name': 'luyuan', 'age': 21}); } 4.String,Math,Object,Number,Array新的API

Number

//判断一个值是否为NAN Number.isNaN()

String

//includes() 用来查看是否包含数组中的相连的任意几个包含返回ture 不包含false var str = 'includes'; str.includes('includ') //true; //startsWidth() 以字符串字母开头(一个或两个) 是返回ture 不是包含false var str = 'includes'; str.startsWidth('in') //true //endsWidth 以字符串字母结尾(一个或两个) 是返回ture 不是包含false //repeat复制定义几个就会复制几个 "abc".repeat(3) // "abcabcabc"

Array

//Array.from 复制一份 let arrs = Array.from(arr); //Array.of 放到一个数组里,类似于 new Array Array.of(1, 2, 3);//[1,2,3]

fill

//1代表数组的下标，7代表从下标为1处及之后内容用7填充。 [0, 0, 0].fill(7, 1) // [0,7,7] [0, 0, 0, 4, 6, 3, 4].fill(9, 3) // [0,0,9,9,9,9,9]

Object

//第一个参数为目标对象，后面的参数都是源对象。 var aa = { a: 1 }; var qq = { b: 2 }; var zz = { c: 3 }; var kk = Object.assign(aa, qq, zz); console.log(kk === aa) //true

Math、Number、String 、Array、Object 的新 APIs

5.函数参数默认值 function test(name = 'luyuan') { console.log(name); } 等同于： function test(name) { name = name || 'luyuan' }

怎么理解？

let foo = 'outer'; function bar(func = x => foo) { let foo = 'inner'; console.log(func()); } bar(); //outer // bar的参数: func = x => foo let func = function(x) { return foo; }

6.对象属性，方法的简写。 { function person(obj) { let {name = "ll", age = "18", sex = "girl"} = obj return { name, age, sex, sayHello() { console.log('hello'); } } } console.log(person({"name": "luyuan", "age": 21, "sex": "boy"})); } 7.Set

Set是类似于数组的一种新的数据结构，它是一个构造函数，类似于Array()，但是他不允许有重复值;

生成一个set

//可以接受一个数组，来初始化一个set， let set = new Set([1,2,3,4,5,3,4,5]);// //let set = new Set(); [1,2,3,4,5,3,5,6].forEach(x => set.add(x));

遍历方法

keys()：返回键名的遍历器（什么是遍历器？Iterator）values()：返回键值的遍历器entries()：返回键值对的遍历器forEach()：使用回调函数遍历每个成员

//for-of for(let k of set.values()) { console.log(k);//1,2,3,4,5,6 } for(let k of set.keys()) { console.log(k);//1,2,3,4,5,6 } for(let k of set.entries()) { console.log(k);//1,2,3,4,5,6 }

//[...set][...set];//[1,2,3,4,5,6]

操作集合

class与语法糖

“语法糖”的意思是现有技术本可以实现，但是采用某种写法会更加简洁优雅。最常见的就是声明对象采用的就是语法糖 var a={b:111}。ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

例子：

{ 　　//class People，类，它相当于构造函数和原型的集合，　　class People { 　　　　//constructor相当于是es5中的构造函数　　　　constructor(work, name){ 　　　　　　this.name = name; 　　　　　　this.work = work; 　　　　　　//初始化方法　　　　　　this.init(); 　　　　} 　　　　//在原型上的方法，People类所有的实例都有　　　　init() { 　　　　　　console.log('我的工作是' + this.work + ',' + '我叫' + this.name); 　　　　} 　　　　eat(area) { 　　　　　　console.log(this.name + '去' + area + '吃饭'); 　　　　} 　　} 　　//extends，继承类，它可以继承People类中所有的属性和方法。　　class Student extends People{ 　　//通过extends继承的类称为子类，他没有自己的this对象，同样是要继承父类的this对象(即实例对象) 　　　　constructor(work, name, rank) { 　　　　　　//继承父类的this对象，super(参数)必须放在首行，　　　　　　super(work, name); 　　　　　　this.rank = rank; 　　　　　　this.getRank(rank); 　　　　} 　　　　getRank(rank) { 　　　　　　console.log('我是' + this.name + ',我的排名是' + rank); 　　　　} 　　} 　　let people = new People('develop', 'people'); 　　people.eat('酒店'); 　　let student = new Student('study', 'student', 1); 　　student.eat('食堂'); }

30分钟掌握ES6/ES2015核心内容（上）

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this

9.async-await总结

1.async-await是解决异步回调最终的答案

async是generator和yield的语法糖，实现的功能都是相同的，只是实现的方式更方面了一些，代码看上去优雅，可读性好，

2.语法

async function asyncGrammer() { let result = await Math.random(); console.log(result); } //返回一个Promise对象 asyncGrammer();

ES6系列文章异步神器async-await

【本文地址】

es6 学习笔记(二)

es6 学习笔记(二)

今日新闻

推荐新闻