Promise对象
【Promise对象】
同步异步的介绍
Promise 是异步操作的一种解决方案。
异步的概念
异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。
在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。
以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一个子线程来完成任务。
什么时候用异步编程
在前端编程中(甚至后端有时也是这样),我们在处理一些简短、快速的操作时,例如计算 1 + 1 的结果,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。所以,当一个事件没有结束时,界面将无法处理其他请求。
现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。
为了避免这种情况的发生,我们常 ...
Set 和 Map 数据结构
【Set 和 Map 数据结构】
什么是 Set?
Set 是一系列无序、没有重复值的数据集合。
数组是一系列有序(下标索引)的数据集合。
123456789const s = new Set();s.add(1);s.add(2);// Set 中不能有重复的成员s.add(1);console.log(s); // Set(2) { 1, 2 }// Set 没有下标去标识每一个值,所以 Set 是无序的,也不能像数组那样通过下标去访问 Set 的成员。
Set 实例的方法和属性
add 方法
12345const s = new Set();s.add(0);// 可以连写s.add(1).add(2).add(2).add(3);console.log(s); // Set(4) { 0, 1, 2, 3 }
has 方法
12345const s = new Set();s.add(0);s.add(1).add(2).add(2).add(3);console.log(s.has(1)); // trueconsole.log ...
运算符的扩展
【运算符的扩展】
指数运算符
ES2016 新增了一个指数运算符(**)。
122 ** 2 // 42 ** 3 // 8
这个运算符的一个特点是右结合,而不是常见的左结合。多个指数运算符连用时,是从最右边开始计算的。
123// 相当于 2 ** (3 ** 2)2 ** 3 ** 2// 512
上面代码中,首先计算的是第二个指数运算符,而不是第一个。
指数运算符可以与等号结合,形成一个新的赋值运算符(**=)。
1234567let a = 1.5;a **= 2;// 等同于 a = a * a;let b = 4;b **= 3;// 等同于 b = b * b * b;
链判断运算符
编程实务中,如果读取对象内部的某个属性,往往需要判断一下,属性的上层对象是否存在。比如,读取message.body.user.firstName这个属性,安全的写法是写成下面这样。
12345678// 错误的写法const firstName = message.body.user.firstName || 'default';// 正确的写法const first ...
字符串的扩展
【字符串的扩展】
模板字符串
认识模板字符串
普通字符串:
12'字符串'"字符串"
模板字符串:
1`字符串`
模板字符串与一般字符串的区别
对于普通用法没有区别
1234const name1 = 'zjr';const name2 = `zjr`;console.log(name1, name2, name1 === name2);// zjr zjr true
字符串拼接的巨大区别
1234567891011121314const person = { name: 'zjr', age: 18, sex: '男'};const info = '我的名字是:' + person.name + ',性别是:' + person.sex + ',今年:' + person.age + '岁';console.log(info);// 我 ...
对象的扩展
【对象的扩展】
属性的简洁表示法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
123456const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};
上面代码中,变量foo直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。下面是另一个例子。
1234567891011function f(x, y) { return {x, y};}// 等同于function f(x, y) { return {x: x, y: y};}f(1, 2) // Object {x: 1, y: 2}
除了属性简写,方法也可以简写。
12345678910111213const o = { method() { ...
数组的扩展
【数组的扩展】
扩展运算符
含义
扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
12345678console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]
该运算符主要用于函数调用。
12345678910function push(array, ...items) { array.push(...items);}function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers) // 42
上面代码中,array.push(...items)和add(...numbers)这两行,都是函数的调用,它们都使用了扩展运算符。该运 ...
函数的扩展
【函数的扩展】
函数参数的默认值
认识函数参数的默认值
调用函数的时候传参了,就用传递的参数;如果没传参,就用默认值
函数参数默认值的基本用法
123456789// 之前的默认值实现方式const multiply = (x, y) => { if (typeof y === 'undefined') { y = 3; } return x * y;};console.log(multiply(2, 2)); // 4console.log(multiply(2)); // 6
123456// ES6 默认值实现方式const multiply = (x, y = 3) => { return x * y;};console.log(multiply(2, 2)); // 4console.log(multiply(2)); // 6
默认值的生效条件
不传参数,或者明确的传递 undefined 作为参数,只有这 ...
解构赋值
【解构赋值】
数组的解构赋值
原理
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
以前,为变量赋值,只能直接指定值。
123let a = 1;let b = 2;let c = 3;
ES6 允许写成下面这样。
1let [a, b, c] = [1, 2, 3];
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
模式(结构)匹配 [] = [1, 2, 3];
索引值相同的完成赋值 const [a, b, c] = [1, 2, 3];
举例
12const [a, [, , b], c] = [1, [2, 3, 4], 5];console.log(a, b, c); // 1 4 5
数组解构赋值的默认值
(1)默认值的基本用法
123456const [a, b] = [];console.log(a, b); // undefined undefined// ---------------------------------------const [a = 1, b ...
let和const
【let和const】
let 命令
基本用法
ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
1234567{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1
上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。
for循环的计数器,就很合适使用let命令。
123456for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not defined
上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。
下面的代码如果使用var,最后输出的是10。
1234567var a = [];for (var i = 0; i < ...
ES6 介绍
【ES6 介绍】
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript 和 JavaScript 的关系
一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?
要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 ...