es6的核心语法

在学习低代码时,经常有粉丝会问,低代码需要什么基础,es6就是基础中的一项。我们本篇是做一个扫盲,可以让你对基础有一个概要性的了解,具体的每个知识点可以深入进行了解,再结合官方模板就会有一个不错的掌握。

1 let和const

let:声明变量,具有块级作用域。
const:声明常量,值不能改变

let x = 5;
{let y = 10;
}
console.log(x);  // 输出 5
console.log(y);  // 报错:y is not defined
const PI = 3.14;
PI = 3.15;  // 报错:Assignment to constant variable.

2 模板字符串

使用反引号表示,方便字符串拼接和格式化

const name = 'Alice';
const age = 25;
const message = `Hello, ${name}. You are ${age} years old.`;
console.log(message);  // 输出:Hello, Alice. You are 25 years old.

3 函数的默认值

可以为函数的参数提供默认值

function greet(name = 'Guest') {return `Hello, ${name}!`;
}
console.log(greet());  // 输出:Hello, Guest!

4 剩余参数

允许接收不定数量的参数

function sum(...args) {let sum = 0;for (const num of args) {sum += num;}return sum;
}
console.log(sum(1, 2, 3, 4, 5));  // 输出:15

5 扩展运算符

扩展运算符(spread operator)用于将一个数组或对象的所有元素或属性展开。

let arr1 = [1, 2, 3];  
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]  let obj1 = { a: 1, b: 2 };  
let obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

6 箭头函数

箭头函数提供了一种更加简洁的函数书写方式,它没有自己的this、arguments、super或new.target。箭头函数内的this值继承自外围作用域。

let numbers = [1, 2, 3];  
numbers.forEach((num) => console.log(num)); // 输出每个数字  let obj = {  value: 10,  getValue: () => console.log(this.value)  
};  
obj.getValue(); // 输出 undefined,因为箭头函数不绑定自己的this,这里的this指向全局对象

7 箭头函数的this指向

箭头函数不会创建自己的this上下文,所以this引用的是定义箭头函数时的上下文。

function Outer() {  this.value = 1;  this.inner = () => {  console.log(this.value); // 输出 1,这里的this指向Outer的实例  };  
}  let outer = new Outer();  
outer.inner(); // 输出 1

8 解构赋值

解构赋值是一种JavaScript表达式,它可以将值从数组或对象中提取到不同的变量中。

let [a, b, ...rest] = [1, 2, 3, 4, 5]; // a = 1, b = 2, rest = [3, 4,5]
let { name, age } = { name: "Alice", age: 30 }; // name = "Alice", age = 30

9 对象字面量的属性简写

在ES6中,如果对象字面量的属性名和变量名相同,可以直接使用变量名作为属性名。

let name = "Alice";  
let age = 30;  let person = {  name, // 等同于 name: name  age, // 等同于 age: age  
};  console.log(person); // 输出 { name: "Alice", age: 30 }

10 对象字面量的方法简写

在ES6中,对象字面量中的方法可以直接使用函数名作为方法名,而不需要使用冒号和函数关键字。

let person = {  name: "Alice",  greet() {  console.log(`Hello, my name is ${this.name}.`);  }  
};  person.greet(); // 输出 "Hello, my name is Alice."

11 Symbol类型

Symbol是一种新的原始数据类型,表示一个唯一的、不可变的值。

let sym1 = Symbol("key1");  
let sym2 = Symbol("key1");  console.log(sym1 === sym2); // 输出 false,因为sym1和sym2是不同的Symbol值  let obj = {};  
obj[sym1] = "value1";  
console.log(obj[sym2]); // 输出 undefined,因为sym1和sym2是不同的Symbol值

12 Set和Map

Set和Map是ES6中引入的两种新的集合类型。

Set是一种值的集合,它类似于数组,但成员的值都是唯一的,没有重复的值。

let set = new Set([1, 2, 2, 3, 4, 4, 5]);  
console.log(set); // Set { 1, 2, 3, 4, 5 }

Map是一种键值对的集合,任何值(对象或者基本类型)都可以作为一个键或一个值。

let map = new Map();  
map.set('key', 'value');  
console.log(map.get('key')); // 输出 "value"

13 数组的扩展方法

提供了许多方便的方法,如filter()、map()、reduce()等

const array = [1, 2, 3, 4, 5];
const evenNumbers = array.filter(num => num % 2 === 0);
const doubledNumbers = array.map(num => num * 2);
const sumOfNumbers = array.reduce((accumulator, current) => accumulator + current, 0);

14 迭代器

迭代器(Iterator)是一个对象,它定义了一个序列,并且有一定的访问规则。任何具有Symbol.iterator属性的对象都是可迭代的。

let arr = [1, 2, 3];  
let iterator = arr[Symbol.iterator]();  
iterator.next(); // { value: 1, done: false }

15 生成器

生成器(Generator)是一种特殊的迭代器,可以暂停执行和恢复执行。它使用function*语法定义,并使用yield表达式输出。

function* generator() {  yield 1;  yield 2;  yield 3;  
}  let gen = generator();  
gen.next(); // { value: 1, done: false }  
gen.next(); // { value: 2, done: false }

16 Promise

Promise是处理异步操作的一种对象,它代表了可能现在、将来或永远不会完成的操作及其结果值。

let promise = new Promise((resolve, reject) => {  // 异步操作  setTimeout(() => resolve('Success!'), 1000);  
});  promise.then(result => console.log(result)); // 输出 "Success!"

17 async/await

async/await是建立在Promise上,用于处理异步操作的新语法,使得异步代码看起来和同步代码一样。

async function asyncFunc() {  return new Promise(resolve => setTimeout(resolve, 1000, 'Async result!'));  
}  async function main() {  let result = await asyncFunc();  console.log(result); // 输出 "Async result!"  
}  
main();

18 类

ES6引入了类的概念,用于对象的原型式继承。类提供了一种更加清晰、面向对象的方式来组织代码。

class Person {  constructor(name) {  this.name = name;  }  greet() {  console.log(`Hello, my name is ${this.name}.`);  }  
}  let alice = new Person('Alice');  
alice.greet(); // 输出 "Hello, my name is Alice."

19 模块

ES6引入了模块的概念,允许将代码分割成独立的文件,然后在其他文件中引入使用。
moduleA.js

export function greet() {  console.log('Hello from module A!');  
}

moduleB.js

import { greet } from './moduleA.js';  
greet(); // 输出 "Hello from module A!"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/779225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySql实战--全局锁和表锁 :给表加个字段怎么有这么多阻碍

今天我要跟你聊聊MySQL的锁。数据库锁设计的初衷是处理并发问题。作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则。而锁就是用来实现这些访问规则的重要数据结构。 根据加锁的范围,MySQL里面的锁大致可以分成…

安装编译cpprest sdk

1、安装vcpkg git clone https://github.com/microsoft/vcpkg运行 bootstrap-vcpkg.bat 2、用vcpkg安装cpprestsdk 下载cpprest,:git clone https://github.com/Microsoft/cpprestsdk.git安装依赖库:vcpkg install --triplet x64-windows zlib openss…

三元组数据模型:构建知识图谱的基石

目录 前言1. 三元组数据模型概述1.1 定义与结构1.2 特点 2. 三元组在知识图谱中的应用2.1 知识表示2.2 知识推理2.3 数据整合 3 三元组的数据格式3.1 N-Triples :3.2 RDF/XML :3.3 Turtle (又称为 Terse RDF Triple Language)&…

Ping32、IPguard三款主流文档加密软件对比,加密软件排行

在当今数字化的时代,数据安全越来越受到人们的重视。为了保护敏感信息不被泄露或滥用,众多企业选择采用数据加密软件。在市面上,Ping32、ipguard和亿赛通是三款备受关注的数据加密软件。本文将对这三款软件进行对比分析,以帮助您更…

蓝桥杯备考随手记: practise01

问题描述: 小明对数位中含有 2、0、1、9 的数字很感兴趣,在 1 到 40 中这样的数包 括 1、2、9、10 至 32、39 和 40,共 28 个,他们的和是 574。 请问,在 1 到 2019 中,所有这样的数的和是多少? 思路分析…

一、JAVA集成海康SDK

JAVA集成海康SDK 文章目录 JAVA集成海康SDK前言一、项目依赖 jar1. examples.jar2. 项目依赖 jna.jar,可以通过 maven依赖到。二、集成SDK1.HcNetSdkUtil 海康 SDK封装类2.HCNetSDK3.Linux系统集成SDK三、总结前言 提示:首先去海康官网下载 https://open.hikvision.com/dow…

Flink-CDC 无法增量抽取SQLServer数据

1.问题 因部署在WindowsServer服务器SQLServer发生过期后重启,Flink-CDC同步进行作业重启,启动后无报错信息,数据正常抽取。但是观察几天后发现当天数据计算指标无法展示 2.定位 因为没用进行任何修改,故初步判断不是因Flink-C…

多线程的学习1

多线程 线程是操作系统能够进入运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。 进程:是程序的基本执行实体。 并发:在同一个时刻,有多个指令在单个CPU上交替执行。 并行:在同一时刻&#xff0c…

成都正信晟锦:现在借了钱不还的人怎么处理

在金钱往来中,“借钱不还”的现象时有发生,这不仅损害了债权人的利益,也破坏了社会的信任基础。面对这种情形,我们应当采取何种措施予以解决? 预防胜于治疗。出借前应充分评估借款人的信用状况,必要时要求提供相应的担…

安科瑞智慧安全用电综合解决方案

概述 智慧用电管理云平台是智慧城市建设的延伸成果,将电力物联网技术与云平台的大数据分析功能相结合,实现用电信息的可视化管理,可帮助用户实现安全用电,节约用电,可靠用电。平台支持web,app,微…

Qt与编码

ASCII码:一个字节&#xff0c;256个字符。 Unicode:字母&#xff0c;汉字都占用两个字节。 utf-8:字母一个字节&#xff0c;汉字3个字节。 gbk:字母一个字节&#xff0c;汉字2个字节。 gb2312:可以表示汉字&#xff0c;gb2312<gbk。 编码查看&#xff1a; https://www.…

2024知乎广告推广怎么做,知乎推广教程!

随着社交媒体影响力的日益增强&#xff0c;知乎作为中国高质量知识分享社区的代表&#xff0c;已经成为品牌方精准触达目标受众的重要阵地。云衔科技凭借其专业的一站式广告服务能力&#xff0c;为企业提供知乎广告开户及代运营解决方案&#xff0c;助力企业在知乎平台上实现品…

双非二本找实习前的准备day12

学习目标&#xff1a; 每天复习代码随想录上的题目2-3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; 1&#xff09;科四没时间考了&#xff0c;等实习完回来再说咯 2&#xff09;这几天在忙收拾东西和…

K8S的mountPath和subPath

1 mountPath mountPath是容器内部文件系统的挂载点&#xff0c;它定义了容器内部将外部存储卷&#xff08;如 PersistentVolume、ConfigMap、Secret 等&#xff09;挂载到哪个路径下。通过 mountPath&#xff0c;容器可以访问这些挂载的数据或配置。 2 subPath subPath 是 m…

汽车信息安全 -- HSM是否可以作为信任根?(2)

目录 1.概述 2. 汽车中的硬件信任锚 3. HSM可以作为信任根吗? 1.概述 在上文,我们讲解了信任锚和信任根,本文继续讲解汽车中关于硬件信任锚点的内容,最终回归到问题:HSM是否可以作为信任根? <

跨域及解决办法

跨域及解决办法 一、什么是跨域 1.跨域&#xff1a;浏览器对于javascript的同源策略的限制 。 2.同源政策的目的&#xff0c;是为了保证用户信息的安全&#xff0c;防止恶意的网站窃取数据。 设想这样一种情况&#xff1a;A 网站是一家银行&#xff0c;用户登录以后&#xf…

树结构导入

Testpublic void testExcel1() {// 写法1&#xff1a;JDK8 ,不用额外写一个DemoDataListener// since: 3.0.0-beta1EasyExcelFactory.read(new File("C:\\Users\\Admin\\Desktop\\树导入.xlsx"), null, new ReadListener<Map>() {public static final int BATC…

Vue——案例01(查询用户)

一、案例实现页面 二、案例实现效果 1. 查询效果 2. 年龄升序 3. 年龄降序 4. 原顺序 三、案例实现思路 1. 定义界面所需标签样式 <div id"app"><h2>查询用户:</h2><input type"text" placeholder"请输入名字"/><b…

星闪BLE与蓝牙

蓝牙与低功耗蓝牙 蓝牙工作在2.4GHz的频段&#xff0c;在工作频段2402MHz-2480MHz上分为79个信道&#xff0c;低功耗蓝牙分为40个信道。一组设备通信的时候&#xff0c;短暂占用一个信道发包&#xff0c;由于其跳频技术&#xff0c;每次传输完数据包之后都会切换到另一个信道继…

001-从零学习设计模式-设计原则

写在最前 文档地址&#xff1a;Wiki - Gitee.com 设计模式 推荐浏览&#xff1a;软件设计模式 代表了代码的最佳实践&#xff0c;被有经验的开发人员所使用&#xff1b; 设计模式是很多被反复使用并知晓的&#xff0c;主要是对代码和经验的总结&#xff1b; 使用设计模式是…