H5W3
当前位置:H5W3 > JavaScript > 正文

ES6基础学习总结笔记

一、解构赋值的使用场景

  • 交换变量的值
[x, y] = [y, x];
  • 方便从函数取值
function func() { 
    return [1, 2, 3]; 
} 
var [a, b, c] = func();
  • 函数参数的定义
// 参数是一组无次序的值 
function f({x, y, z}) { ... } f({z: 1, y: 2, x: 3});
  • 提取JSON数据
var jsonData = { id: 12, name: "sss", data: [867, 5309] }; 
let { id, name, data: number } = jsonData;
  • 函数默认参数值
function move({x = 1, y = 2} = {}){ 
   // 默认值 
  return [x, y];
} 
move({x: 3}); // y使用默认值,x:3, y:2

二、let与const

  1. let命令所在的代码块内有
  2. let不存在变量提升
  3. let 暂时性死区
  4. let 不能重复声明同个变量

const 声明一个只读的常量。const声明的常量不能重新赋值。

三、Symbol

常量使用Symbol值最大的好处,就是其他任何值都不可能有相同的值了
Symbol.for方法可以重新使用同一个Symbol值。
对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型

JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var s = 'Hello world!'; 
s.startsWith('Hello') // true 
s.endsWith('!') // true 
s.includes('w') // true

四、ES6数组拓展

Array.from方法用于将两类对象转为真正的数组

var arr= { '0': 'a', '1': 'b', '2': 'c', length: 3 }; 
// ES6的写法 
var arr2 = Array.from(arr); // ['a', 'b', 'c']

Array.of方法用于将一组值,转换为数组。如果没有参数,就返回一个空数组。

Array.of(7, 8, 9) // [7,8,9] 
Array.of(13) // [13] 
Array.of() // [] 
Array.of(13).length // 1

五、箭头函数

箭头函数this对象指向
普通函数this 的指向

  • js中的this是执行上下文,在普通函数中,this指向它的直接调用者;
  • 在默认情况下(非严格模式),在全局环境下,js中的this指向window;

箭头函数的this指向

箭头函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。

简单而言,箭头函数使用时,不绑定this对象,箭头函数没有自己的this,它的this是继承而来的,默认指向在定义箭头函数时所处的对象。

function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; }; } 
var f = foo.call({id: 1}); // 设置foo的id为1
var t1 = f.call({id: 2})()(); // id: 1 
var t2 = f().call({id: 3})(); // id: 1 
var t3 = f()().call({id: 4}); // id: 1

上面代码之中,只有一个this,就是函数foo的this。所以t1、t2、t3都输出同样的结果。

因为所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this。所以箭头函数的this指向是创建它所在的对象,不会改变。

箭头函数有几个使用注意点:

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

六、rest参数

ES6引入rest参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) 
{ let sum = 0; 
for (var num of values) { sum += num; } 
return sum; } 
add(4, 5, 6,7) // 22

注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。函数的length属性,不包括rest参数。

七、ES6属性的遍历

ES6一共有5种方法可以遍历对象的属性:

  • for…in

for…in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。

  • Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。

  • Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。

  • Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有Symbol属性。

  • Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举。

以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则。

  • 首先遍历所有属性名为数值的属性,按照数字排序。
  • 其次遍历所有属性名为字符串的属性,按照生成时间排序。
  • 最后遍历所有属性名为Symbol值的属性,按照生成时间排序。

八、class类

class关键字创建一个类代码如下:

class Person{ constructor(x, y) 
{ this.x = x; this.y = y; } // 方法之间不加逗号隔开,否则报错
sum(){ // 方法前面不用加function var sum=this.x+this.y; return sum } }

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,通过new命令生成对象实例时,自动调用该方法。而this关键字则代表实例对象。

构造函数的prototype属性,在ES6的“类”上面继续存在。所有的方法还是在prototype属性上。

类的方法内部如果含有 this,它默认指向类的实例。

九、Map与Set数据结构

ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

var set = new Set([1, 2, 3, 3, 4, 4]);
set   // Set { 1, 2, 3, 4 }

上面代码可以发现,定义的set对象会自己去除重复的值。Set表示数据的类型是Set。

因为Set数据值的唯一性,我们可以用它来对数组进行去重。代码如下

var arr=[1, 2, 2, 3, 4, 4]; // 定义一个数组 
var set = new Set(arr); //使用扩展运算符Set结构转为数组 
var newArr=[...set]; // 或者使用Array.from方法将Set结构转为数组 var newArr=Array.from(set);
newArr // [1, 2, 3, 4]

Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)
下面先介绍四个操作方法。

  • add(value):添加某个值,返回Set结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。
var s=new Set(); // 定义s 数据类型为
Set s.add(1).add(2).add(2); // 使用add方法添加值,重复值不会被添加 
s.size // 2 注意2被加入了两次,但是去重了一个,所以s的成员数是2 
s.has(1) // true 使用has方法判断是否有该值,有所以返回true 
s.has(2) // true
s.has(3) // false  没有该值返回
false s.delete(2); // 使用delete删除该值 
s.has(2) // false 因为2被上面删除了,所以没该值,返回false

Set结构的实例有四个遍历方法,可以用于遍历成员。Set的遍历顺序就是插入顺序。

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器,可以省略。
  • entries():返回键值对的遍历器。
  • forEach():使用回调函数遍历每个成员,它的参数是函数。

Map数据结构解决了传统对象只能用字符串当作键的局限性。

Map结构的实例属性和操作方法如下:

(1)size属性

size属性返回Map结构的成员总数。

(2)set(key, value)

set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

(3)get(key)

get方法读取key对应的键值,如果找不到key,返回undefined。

(4)has(key)

has方法返回一个布尔值,表示某个键是否在Map数据结构中。

(5)delete(key)

delete方法删除某个键,返回true。如果删除失败,返回false。

(6)clear()

clear方法清除所有成员,没有返回值。

使用方法如下:

var map=new Map();
map.set('foo', true); // 设置 
map.size; // 1
map.get('foo'); // true 
map.has('foo') // true 
map.delete('foo'); // 删除map对象的foo键,删除后使用has返回false 
map.clear() // 删除map对象所有的键

Map其他方法

Map原生提供三个遍历器生成函数和一个遍历方法。

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历Map的所有成员。

遍历方法和Set的差不多。

数据结构的互相转换

(1)Map转为数组

前面已经提过,Map转为数组最方便的方法,就是使用扩展运算符(…)。
[…myMap] // myMap表示Map数据

(2)数组转为Map

将数组转入Map构造函数,就可以转为Map。

new Map(数组)

(3)Map转为对象

如果所有Map的键都是字符串,它可以转为对象。

// Map转对象函数 
function cMapToObj(strMap)
{ let obj = Object.create(null); 
for (let [k,v] of strMap)
{ obj[k] = v; } 
return obj; 
}
cMapToObj(myMap)

(4)对象转为Map

function objToMap(obj) { let strMap = new Map(); 
for (let k of Object.keys(obj))
{ strMap.set(k, obj[k]); } 
return strMap; }
objToMap(对象)

(5)Map转为JSON

Map转为JSON要区分两种情况。一种情况是Map的键名都是字符串,这时可以选择转为对象JSON。

JSON.stringify(cMapToObj(myMap)) // cMapToObj是上面定义的函数

另一种情况是Map的键名有非字符串,这时可以选择转为数组JSON。

JSON.stringify([…myMap])

(6)JSON转为Map

JSON转为Map,正常情况下,所有键名都是字符串。

objToMap(JSON.parse( json数据 )) // objToMap是上面定义的函数

十、Proxy

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

下面是常见的 Proxy 支持的拦截操作方法。

(1)get(target, propKey, receiver)

拦截对象属性的读取,比如proxy.foo和proxy[‘foo’]。

最后一个参数receiver是一个对象,可选,参见下面Reflect.get的部分。

(2)set(target, propKey, value, receiver)

拦截对象属性的设置,比如proxy.foo = v或proxy[‘foo’] = v,返回一个布尔值。

(3)has(target, propKey)

拦截propKey in proxy的操作,以及对象的hasOwnProperty方法,返回一个布尔值。

(4)deleteProperty(target, propKey)

拦截delete proxy[propKey]的操作,返回一个布尔值。

(5)apply(target, object, args)

拦截 Proxy 实例作为函数调用的操作,比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。

(6)construct(target, args)

拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(…args)。

get()

get方法用于拦截某个属性的读取操作。上文已经有一个例子,下面是另一个拦截读取操作的例子。

var person = { name: "jack" }; 
var proxy = new Proxy(person, { 
get: function(target, property) { 
if (property in target) 
{ return target[property]; }
else { throw new ReferenceError("Property \"" + property + "\" does not exist."); } } }); 
proxy.name // "jack" 
proxy.age // 抛出一个错误

上面代码表示,如果访问目标对象不存在的属性,会抛出一个错误。如果没有这个拦截函数,访问不存在的属性,只会返回undefined。

set()

set方法用来拦截某个属性的赋值操作。

let obj = { 
  set: function(obj, prop, value) { 
  if (prop === 'age') { 
  if (!Number.isInteger(value)) {
  throw new TypeError('错误信息:不是整数'); } 
  if (value > 200) {
  throw new RangeError('错误信息:年龄大于200'); 
    } 
   } 
// 对于age以外的属性,直接保存 
obj[prop] = value; } }; 
let person = new Proxy({}, obj);
person.age = 13; person.age // 13
person.age = 'jack' // age不是整数报错 
person.age = 300 // age大于200报错

上面代码中,由于设置了存值函数set,任何不符合要求的age属性赋值都会抛出一个错误。

十一、Iterator接口

ES6创造了一种新的遍历命令for…of循环。Iterator接口的目的,就是为所有数据结构提供了一种统一的访问机制,即for…of循环

Iterator的遍历过程如下:

  1. 创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
  2. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
  3. 第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
  4. 不断调用指针对象的next方法,直到它指向数据结构的结束位置。

return方法的使用场合是,如果for…of循环提前退出(通常是因为出错,或者有break语句或continue语句),就会调用return方法。如果一个对象在完成遍历前,需要清理或释放资源,就可以部署return方法,注意,return方法必须返回一个对象,这是Generator规格决定的。

数组遍历语法的比较

for循环

最原始的就是for循环

for(var i=0;i<10;i++){ console.log(i); }

forEach

数组提供内置的forEach方法,缺点是无法中途跳出forEach循环,break命令或return命令都不能奏效。

myArray.forEach(function (value) { console.log(value); });

for…in

遍历的是key。

缺点:数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。

for…in循环主要是为遍历对象而设计的,不适用于遍历数组。

for (let i of list) { console.log( i ); }

for…of

遍历的是value。

for …of 循环相比上面几种做法,有一些显著的优点。

  • 有着同for…in一样的简洁语法,但是没有for…in那些缺点。
  • 不同用于forEach方法,它可以与break、continue和return配合使用。
  • 提供了遍历所有数据结构的统一操作接口。
for (var n of list ) { if (n > 1000) break; console.log(n); }

var list=[1,3,"a","b",6];

代码1

for( var i in list){     console.log(i) }

代码2

for(var  i of list){     console.log(i) }

代码1依次输出结果的是:0 1 2 3 4

代码2依次输出的结果是:1 3 a b 6

十二、Promise、async异步函数

Promise是为了解决多重嵌套回调函数而提出的它不是新的语法功能,而是一种新的写法,允许将回调函数的嵌套,改成链式调用。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。

Promise提供统一的API,各种异步操作都可以用同样的方法进行处理

Promise有以下两个特点:

  • 对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。
  • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,一直保持这个结果。

Promise也有一些缺点:

  • 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  • 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
  • 当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

ES6规定,Promise对象是一个构造函数,用来生成Promise实例。

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。

下面代码创造了一个Promise实例。

var promise = new Promise(function(resolve, reject) {
if (true){ 
resolve(value); 
} 
else { reject(error); }
});

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用并将异步操作的结果,作为参数传递出去。

**reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用并将异步操作报出的错误,作为参数传递出去。
**
then方法

Promise实例具有then方法。

then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

catch方法

Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
`

`getJSON("/posts.json") .then(function(posts) {}) .catch(function(error) {console.log('发生错误!', error); });`

`

上面代码中,getJSON方法返回一个Promise对象,如果该对象状态变为Resolved,则会调用then方法指定的回调函数;如果异步操作抛出错误,状态就会变为Rejected,就会调用catch方法指定的回调函数来处理这个错误。另外,then方法指定的回调函数,如果运行中抛出错误也会被catch方法捕获。

p.then((val) => console.log("fulfilled:", val)) .catch((err) => console.log("rejected:", err)); // 等同于 p.then((val) => console.log("fulfilled:", val)) .then(null, (err) => console.log("rejected:", err));

ES6诞生以前,异步编程的方法,常见的有下面四种。

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象

ES6将JavaScript异步编程带入了一个全新的阶段,ES7的Async函数更是提出了异步编程的新解决方案

async函数

ES7提供了async函数,使得异步操作变得更加方便。

async函数是什么?
async函数就是Generator函数的语法糖。

语法      async function name(param) { statements }

  • name: 函数名称。
  • param: 要传递给函数的参数名称。
  • statements: 函数体。

返回值

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

async函数内部return语句返回的值,会成为then方法回调函数的参数。

async function foo(){
return "这是async函数的返回值"; 
} 
console.log(foo()) // Promise { '这是async函数的返回值' } 
foo().then((args)=>{ // 回调函数是箭头函数 
console.log(args); // 这是async函数的返回值 
})

await命令

await操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

await 的返回值

  • 如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。
function testAwait (x) { 
return new Promise(resolve => {
setTimeout(() => { 
resolve(x);
}, 2000); 
});
}
async function foo() { 
var x = await testAwait ("hello world");
console.log(x); 
} 
foo (); // hello world
  • 正常情况下,await命令后面是一个Promise对象。如果不是,会被转成一个已完成状态的Promise对象。

async function f() { return await 123; } f().then(v => console.log(v)) // 123

async函数返回的Promise对象,必须等到内部所有await命令的Promise对象执行完才会发生状态改变。也就是说,只有async函数内部的异步操作执行完才会执行then方法指定的回调函数。

async函数的错误处理

如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject。

async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了111'); 
}); 
} 
f() .then(v => console.log(v)) .catch(e => console.log(e)) // Error:出错了111

上面代码中,async函数f执行后,await后面的Promise对象会抛出一个错误对象,导致catch方法的回调函数被调用,它的参数就是抛出的错误对象。

防止出错的方法,把await命令放在try…catch代码块中。

async function f() { 
try { 
 await new Promise(function (resolve, reject) { 
  throw new Error('出错了'); }); 
  } 
  catch(e) { 
  
  }
  return await('hello world'); 
  }

十三、ES6模块化
ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器

ES6 在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案

模块功能主要由两个命令构成:export 和 import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。

如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

本文地址:H5W3 » ES6基础学习总结笔记