ES6知识点

简介: ES6知识点

1. let 关键字

特性:

let 关键字用来声明变量,使用 let 声明的变量有几个特点:

1. 不允许重复声明;

2. 块儿级作用域(局部变量);
3. 不存在变量提升;

4. 不影响作用域链;

应用场景: 推荐以后使用 let 来定义变量

2. Const 关键字

特性:
const 关键字用来声明常量,const 声明有以下特点:

1. 声明必须赋初始值;

2. 标识符一般为大写(习惯);

3. 不允许重复声明;

4. 值不允许修改;

5. 块儿级作用域(局部变量);
应用场景: 推荐声明对象类型使用 const,非对象类型声明选择 let;

3. 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;

1、数组的解构赋值
let arr = ["张三","李四","王五","赵六"];
let [a,b,c,d] = arr;
2、对象的解构赋值
let obj = {
name : "张三",
age : 22,
sex : "男",
}
let {name,age,sex} = obj;

应用场景: 频繁使用对象方法、数组元素,就可以使用解构赋值形式;

4. 模板字符串

模板字符串是增强版的字符串,用反引号( ` )标识,特点:

字符串中可以出现换行符;
可以使用 ${xxx} 形式引用变量;

应用场景: 当遇到字符串与变量拼接的情况使用模板字符串;

5. 简化对象写法

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;

let name = "张三";
let fun = function(){
console.log("哈喽");
}
let obj = {
name,
fun
}

6. 箭头函数

ES6 允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式。

箭头函数多用于匿名函数的定义;
箭头函数的注意点:

1. 如果形参只有一个,则小括号可以省略;

2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
3. 箭头函数 this 指向声明时所在作用域下 this 的值;

4. 箭头函数不能作为构造函数实例化;

5. 不能使用 arguments;

特性:

1. 箭头函数的 this 是静态的,始终指向函数声明时所在作用域下的 this 的值;

2. 不能作为构造实例化对象;

3. 不能使用 arguments 变量;
注意:

ES6 允许给函数参数赋值初始值

fun.call(obj) 箭头函数不能修改 this 指向
7. 拓展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列;

let arr = ['张三','李四','王五']; console.log(...arr);

8. Symbol

ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。

Symbol 的值是唯一的,用来解决命名冲突的问题;

let s2 = Symbol('a');
let s3 = Symbol('a');
console.log(s2==s3); // false

9. Promise 对象

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作

并可以获取其成功或失败的结果;

1. Promise 构造函数: new Promise (function(resolve,reject) { });
2. Promise.prototype.then 方法;
3. Promise.prototype.catch 方法;

语法格式:

let num = 2;
new Promise(function(resolve,reject){
setTimeout(function(){
if(num == 1){
resolve("成功");
}else{
reject("失败");
}
},2000)
}).then(function(res){
console.log(res);
}).catch(function(err){
console.log(err);
})

Promise 封装:

let ajax = (obj) => {
if(obj.type == undefined || obj.type == ''){
obj.type = "GET"
}
if(!obj.data == undefined || !obj.data == ''){
let statu = 1;
obj.url += '?'
for (let k in obj.data){
if(statu > 1){
obj.url += "&" + k + "=" + obj.data[k];
}else{
obj.url += k + "=" + obj.data[k];
statu = 2;
}
}
}
return new Promise(function(resolve, reject) {
let xml = new XMLHttpRequest();
xml.open(obj.type,obj.url);
xml.send();
xml.onreadystatechange = function() {
if (xml.readyState == 4) {
if (xml.status == 200) {
resolve(xml.response);
} else {
reject(xml.status);
}
}
}
})
}

封装调用:

ajax({
type:"get",
url:"http://www.wangruolin.top/api/Index/index",
data:{ id: 10 }
}).then(function(res) {
console.log(JSON.parse(res));
}).catch(function(err) {
console.log(err);
})

10. Map 集合

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类

型的值(包括对象)都可以当作键。
Map 的属性和方法:

1. size 返回 Map 的元素个数; map.size

2. set 增加一个新元素,返回当前 Map; map.set(键,值)
3. get 返回键名对象的键值; map.get(键)

4. has 检测 Map 中是否包含某个元素,返回 boolean 值; map.has(键)

5. clear 清空集合,返回 undefined;map.clear()

11. Set 集合

ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的。
Set 的属性和方法:

1. size 返回集合的元素个数; set.size

2. add 增加一个新元素,返回当前集合; set.add(值)
3. delete 删除元素,返回 boolean 值; set.delete(值)

4. has 检测集合中是否包含某个元素,返回 boolean 值; set.has(值)

5. clear 清空集合,返回 undefined; set.clear()

12. Class

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,

可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新

的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已;
知识点:

1. class 声明类;

2. constructor 定义构造函数初始化;
3. extends 继承父类;

4. super 调用父级构造方法;

5. static 定义静态方法和属性;

6. 父类方法可以重写;(子类中定义同名的方法会覆盖掉父类里的方法)

定义类:

class Parent {
constructor(name, sex) {
this.name = name;
this.sex = sex;
}
hi() {
console.log("哈喽,你好呀!");
}
static age = 18;
}
let Hello = new Parent("张三", "男");
Hello.hi();
console.log(Hello);
console.log(Hello.age);
console.log(Parent.age);

继承类 :

class Child extends Parent{
constructor(name, sex, height) {
super(name,sex);
this.height = height;
}
run(){
console.log("我跑的超快");
}
}
let zhi = new Child('李四','女',180);
console.log(zhi);
zhi.hi();

Class getter 获取和 setter 设置:

class Cla {
get num (){
console.log("原价");
return 100;
}
set num (val){
console.log('现价');
return val;
}
}
let shangpin = new Cla();
console.log(shangpin.num);
console.log(shangpin.num = 999);
相关文章
|
4天前
|
人工智能 JavaScript Linux
【Claude Code 全攻略】终端AI编程助手从入门到进阶(2026最新版)
Claude Code是Anthropic推出的终端原生AI编程助手,支持40+语言、200k超长上下文,无需切换IDE即可实现代码生成、调试、项目导航与自动化任务。本文详解其安装配置、四大核心功能及进阶技巧,助你全面提升开发效率,搭配GitHub Copilot使用更佳。
|
5天前
|
存储 人工智能 自然语言处理
OpenSpec技术规范+实例应用
OpenSpec 是面向 AI 智能体的轻量级规范驱动开发框架,通过“提案-审查-实施-归档”工作流,解决 AI 编程中的需求偏移与不可预测性问题。它以机器可读的规范为“单一真相源”,将模糊提示转化为可落地的工程实践,助力开发者高效构建稳定、可审计的生产级系统,实现从“凭感觉聊天”到“按规范开发”的跃迁。
808 12
|
2天前
|
云安全 安全
免费+限量+领云小宝周边!「阿里云2026云上安全健康体检」火热进行中!
诚邀您进行年度自检,发现潜在风险,守护云上业务连续稳健运行
1161 1
|
5天前
|
消息中间件 人工智能 Kubernetes
阿里云云原生应用平台岗位急招,加入我们,打造 AI 最强基础设施
云原生应用平台作为中国最大云计算公司的基石,现全面转向 AI,打造 AI 时代最强基础设施。寻找热爱技术、具备工程极致追求的架构师、极客与算法专家,共同重构计算、定义未来。杭州、北京、深圳、上海热招中,让我们一起在云端,重构 AI 的未来。
|
4天前
|
人工智能 JavaScript 前端开发
【2026最新最全】一篇文章带你学会Cursor编程工具
本文介绍了Cursor的下载安装、账号注册、汉化设置、核心模式(Agent、Plan、Debug、Ask)及高阶功能,如@引用、@Doc文档库、@Browser自动化和Rules规则配置,助力开发者高效使用AI编程工具。
619 4
|
10天前
|
存储 JavaScript 前端开发
JavaScript基础
本节讲解JavaScript基础核心知识:涵盖值类型与引用类型区别、typeof检测类型及局限性、===与==差异及应用场景、内置函数与对象、原型链五规则、属性查找机制、instanceof原理,以及this指向和箭头函数中this的绑定时机。重点突出类型判断、原型继承与this机制,助力深入理解JS面向对象机制。(238字)
|
7天前
|
IDE 开发工具 C语言
【2026最新】VS2026下载安装使用保姆级教程(附安装包+图文步骤)
Visual Studio 2026是微软推出的最新Windows专属IDE,启动更快、内存占用更低,支持C++、Python等开发。推荐免费的Community版,安装简便,适合初学者与个人开发者使用。
914 11
|
4天前
|
存储 人工智能 测试技术
【Claude Skills】从原理到实战的完全指南
Claude Skills通过模块化设计,将AI变为领域专家,实现工作流标准化。它支持指令封装、自动触发与脚本集成,提升复用性与协作效率,适用于个人提效与团队协同,是AI定制化的新范式。
|
8天前
|
人工智能 Shell 开发工具
Claude Code 2.1.2超详细更新说明,小白也能10分钟上手
Claude Code 2.1.x重磅更新:Shift+Enter换行、Esc+Esc撤销、Ctrl+B后台运行,Skills技能系统全面升级,支持多语言、通配符权限与动态MCP检测,性能提升50%,迭代速度惊人,开发者效率暴涨!
Claude Code 2.1.2超详细更新说明,小白也能10分钟上手