ES6标准入门
创始人
2025-05-28 10:10:20
0

1,let和const:

块级作用域,只能在声明的位置后面使用;

都不能重复声明;

const声明的变量不允许修改(简单类型的变量不可修改,复杂类型的可修改);

例子:

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加letconst命令,还有两种声明变量的方法:import命令和class命令。所以,ES6 一共有 6 种声明变量的方法。

2,变量的解构(数组,对象,字符串,数值和布尔值,函数参数)

1,数组的解构赋值:

let [a, b] = [1, 2];  // a=1; b=2let [x = 1, y = 1] = [1, 2]; // x=1; y=2

2,对象的解构赋值:(变量必须与属性同名,才能取到正确的值)

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值是由它的位置决定的:而对象的属性没有次序,变量必须与属性同名才能取到正确的值。

也就是说,对象的解构赋值的内部机制是先找到同名属性,然后再赋值给对应的变量。真正被赋值的是后者,而不是前者。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

3,字符串的解构赋值:

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5

3,模板字符串

`Hello, ${place}` // 'Hello,'+ place

4,字符串相关

includes()返回布尔值,表示是否找到了参数字符串。

let s = 'Hello world!';
s.includes('o') // true

matchAll()方法返回一个正则表达式在当前字符串的所有匹配。

replaceAll()匹配并替换全部

5,数值的扩展

// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45Number.isInteger()  // 用来判断一个数值是否为整数。Math.sign()  // 方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

6,函数的扩展

1,rest参数:用于获取函数的多余参数,

function add(...values) {let sum = 0;for (var val of values) {sum += val;}return sum;
}add(2, 5, 3) // 10

2,箭头函数:

箭头函数没有自己的this对象;对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域中的this。也就是说,箭头函数内部的this指向是固定的,相比之下,普通函数的this指向是可变的。

例子:

function foo() {setTimeout(() => {console.log('id:', this.id);}, 100);
}var id = 21;foo.call({ id: 42 });
// id: 42

7,数组的扩展

1,扩展运算符展开数组:

function add(x, y) {return x + y;
}const numbers = [1, 2];
add(...numbers) // 3

替换了apply

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);// ES6 的写法
arr1.push(...arr2);

Array.from(obj)方法用于将可遍历对象转为真正的数组:

find() 数组实例的find()方法,用于找出第一个符合条件的数组成员并返回该成员;

findIndex() 返回第一个符合条件的数组成员的索引位置,如果所有成员都不符合条件,则返回-1

entries()keys()values()——用于遍历数组;

唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

includes() 返回一个布尔值,表示某个数组是否包含给定的值;

forEach,filter,every,reduce,some,map,

8,对象的扩展

Object.assign() 方法用于对象的合并,将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。(浅拷贝)
Object.assign(target, …sources) 【target:目标对象】,【souce:源对象(可多个)】

遍历对象:

1,for…in

2,Object.keys(obj) 返回键名

扩展运算符:(…)用于取出参数对象的所有可遍历属性

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的原型对象(prototype),返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

例子:

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);proto.y = 20;
proto.z = 40;obj.x // 10
obj.y // 20
obj.z // 40

Object.keys(obj) 返回数组,键名

Object.values(obj)返回数组,键值

Object.entries(obj) 返回数组,键值对

10.async函数

async 表示函数里有异步操作,
await 表示紧跟在后面的表达式需要等待结果。
进一步说, async 函数完全可以看作由多个异步操作包装成的一个Promise 对象,而await命令就是内部then 命令的语法糖。

// 第一种:Promise版
方法名(){请求().then(res=>{// 请求结果}).catch(e=>{// 捕获错误信息})
}// 第二种:async/await版
async 方法名(){try {await // 请求// 请求结果}catch(e) {// 捕获错误信息}
}

11.类和构造函数

使用new调用构造函数会自动创建一个新对象,因此构造函数本身只需初始化这个新对象的状态即可。构造函数的prototype属性被用来用作新对象的原型。这意味着通过同一个构造函数创建的所有对象都继承自一个相同的对象,因此他们都是同一个类的成员。

1.类的数据类型就是函数,类本身就指向构造函数

2.类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

3.constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。

class Point {constructor(){// ...}
}Object.assign(Point.prototype, {toString(){},toValue(){}
});

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...