十一、ES6中Class关键字
类是什么 虽然ES6提供了class关键字用于创建对象,但其终究只是语法糖,底层并未实现。 123456789// ES6创建类class Hero { constructor() { this.name = "张无忌"; this.sayMe = function () { console.log("this is 张无忌"); }; }} 类的声明 类的声明方式 123class name [extends]{ // class body} name表示当前类的名称。此方法不允许再次声明已经存在的类,否则会抛出一个类型错误。 类的表达方式 123const MyClass = class [className] [extends]{ // class body} 和函数表达式相同的一点是,类表达式可以是命名也可以是匿名的。如果是命名类表达式,这个名字只能在类体内部才能访问到。 构造函 ...
十、ES6中迭代器与生成器
Symbol ES6新增的一种原始类型,用于唯一的不可修改的,并且也可以用来用作Object的key值。 12345678let symbol = Symbol();console.log(typeof symbol); // symbollet symbol2 = Symbol("xxx");console.log(typeof symbol2); // symbollet symbol3 = Symbol(666);console.log(typeof symbol3); // symbol 该类型的值不可枚举。 Symbol的方法 for(key) 从Symbol类型中查找指定的key,如果存在则返回,不存在就创建并返回。 12345let symbol = Symbol.for("foo"); // 创建console.log(symbol); // Symbol(foo)let result = Symbol.for("foo"); // 查找console.log(symbol); // Symbol(fo ...
九、ES6中键值对集合
Set 集合 set 集合是键唯一的集合。 12let set = new Set([1, 2, 3, 4, 5, 2]);console.log(set); // Set { 1, 2, 3, 4, 5 } NaN、undefined等值允许存储在 set 集合中。 其在 set 集合中是相等的。 12let set = new Set([NaN, NaN, undefined, undefined, null, null]);console.log(set); // Set { 1 NaN, undefined, null } 空数组、空对象、空函数不会被认为是同一个 12let set1 = new Set([[], [], {}, {}]);console.log(set1); //Set { [], [], {}, {} } Set 对象的属性和方法 属性 size属性 相当于数组中的 length 属性 12let s ...
七、ES6中Promise对象
创建Promise对象 123456789101112131415// 初始化状态let promise = new Promise(function (resolve, reject) { /** * resolve - 是一个函数,将Promise对象的状态改为成功 * rejecte - 是一个函数,将Promise对象的状态改为失败 */ setTimeout(() => { resolve("测试成功了!"); }, 200);});// then将promise的状态改变promise.then(function (value) { console.log(value); // 测试成功了!}); Promise对象原型的方法 then()方法 主要作用是为Promise对象添加状态改变时回调函数。其第一个参数resolved状态的回调函数。第二个参数是rejected状态时的回调函数。 catch()方法 此方法返回一个Promise对象,并且处理拒 ...
八、ES6中async函数
语法结构 异步函数声明式 1async function name([param]){} 异步函数表达式 1let name = async function([param]){} 用法示例: 1234567async function myAsync() { return "hello world";}let promise = myAsync();promise.then((value) => { console.log(value); // hello world}); await表达式 await表达式用于等待一个Promise对象,它只能在异步函数中使用。 1[return_value] = await expression; return_value 返回Promise对象的处理结果。如果等待的不是Promise对象,则返回该值本身。 expression 一个Promise对象或者任何要等待的值 123456789101112131415f ...
六、ES6中数组的扩展
扩展运算符 原地展开一个数组 1234// 定义一个数组var arr = [1, 2, 3, 4];// 直接打印数组内每个元素console.log(...arr); // 1 2 3 4 函数调用时,逐个传入 1234567// 定义一个数组var arr = [1, 2, 3, 4];// 函数内取每个参数function fn(a, b) { console.log(a + b);}fn(...arr); // 结果3 实际传入的为数组第一个和第二个 复制数组 深复制:复制数组中的元素内容(数据) 浅复制:复制数组的内存地址 ES6的复制数组为深复制,即复制出的数组与原数组数据不会互相影响。 12345678var arr1 = [1, 2, 3, 4, 5];// 写法1-深复制var arr2 = [...arr1];arr2[2] = 6;// 写法2var [...arr3] = arr1;arr3[2] = 6;console.log(arr1, arr2, arr3); //[ 1, 2, 3, 4, 5 ] [ 1, ...
五、ES6中函数的扩展
函数参数的默认值 12345function fn(arg = 0) { console.log(arg);}fn(); // 0fn(100); // 100 与解构赋值配合使用 1234function fn([a, b = 0]) { console.log(a + b);}fn([1]); // 1 函数参数的作用域 1234567let v = 100;function fn(arg = v) { let v = 1000; console.log(arg);}fn(); // 100 rest参数 1234function fn(a, b, ...args) { console.log(a, b, args);}fn(1, 2, 3, 4, 5); // 1 2 [ 3, 4, 5 ] rest参数会将多余的参数放入到一个数组。 rest参数只能放在最后。 函数的length属性不包含rest参数 箭头函数 基本语法 1234567891011let fn1 = () ...
四、ES6中对象的扩展
对象的属性 ES6中允许直接将变量和函数作为对象的属性和方法。 1234567891011let name = "张无忌";function sayMe() { console.log("this is 张无忌");}var obj = { // ES6运行变量名直接作为对象的属性和方法 name, sayMe,};console.log(obj.name);//张无忌 Object的方法 is() 对同值相等算法的具体实现 12console.log(Object.is(+0, -0)); // falseconsole.log(Object.is(NaN, NaN)); // true assign(target,...sources)方法 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。 target:目标对象 sources:源对象 返回值:目标对象 12345678var obj = { name: "张无忌", age: 18, ...
三、ES6中字符串的扩展
判断是否包含 ES6提供了三个方法用于判断字符串是否包含。 includes(str,[index]) 判断指定位置开始,字符串是否包含指定字符串 startsWith(str,[index]) 字符串的索引值开始是否以另一个字符串开头 endsWith(str,[index]) 字符串的索引值开始是否以另一个字符串结尾 三个方法的使用方法基本保持一致。 区分大小写 第一个参数为待搜索的字符串 第二个参数表示开始的索引位置,默认为0 结果返回布尔值 12345let str = "xiaokangboke";console.log(str.includes("o")); //trueconsole.log(str.includes("o", 3)); //true// 区分大小写console.log(str.includes("O", 3)); //false 如果想要不区分大小写可以将字符串全部转化为大/小写,然后在判断是否包含。示例: 12345678let str = &quo ...
二、ES6中的解构赋值
解构赋值 ECMAScript 6允许按照一定模式从数组或对象中提取值,对变量进行赋值。这种赋值方式被称为解构赋值。 ECMAScript 6的“解构赋值”本质上属于“模式匹配”。赋值运算符两边的模式相同,左边的变量会被赋予对应位置的值。 变量的解构赋值 从指定的数组或对象中提取值,为指定变量进行赋值。 1var/let [变量名1,变量名2,变量名3] = 数组或对象 变量的索引值对应值的索引值。 123let [a, b, c] = [1, 2, 3];console.log(a, b, c); // 1 2 3 赋值失败 123let [a] = [];console.log(a); // undefined 以上代码相当于定义了一个变量a,但未初始化(赋值) 12let [n, m] = [1];console.log(n, m); // 1 undefined 以上代码表示由于变量只有一个,而定义变量有两个,因此m不会得到值。 不完全解构赋值 即定义变量的数量小于值的数量。 12let [a, b] = [1, 2, 3];console.log(a, b); // ...