小奏

【Promise对象】 同步异步的介绍 Promise 是异步操作的一种解决方案。 异步的概念 异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。 在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。 简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。 以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。 什么时候用异步编程 在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。 现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。 为了避免这种情况的发生，我们常 ...

【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 命令 基本用法 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 介绍】 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 这个名字，且 ...