ES6介绍

news2024/11/19 14:40:09

1：ES6声明变量

1.变量var声明变量的问题 ES5

  1. 可以重复声明变量
  2. 可以先使用再声明
  3. 造成全局变量污染

2.let声明变量特点 ES6

  1. 不能先使用再说明
  2. 不能重复定义一个变量
  3. 具有块级作用域

3.const声明变量特点 ES6

  1. 不能先使用再说明
  2. 一旦声明必须赋值
  3. 赋值之后不能修改
  4. 具有块级作用域
  5. 声明变量，可以修改变量
  6. 声明常量不可修改恒改不变

注意：const声明一个常量，这个常量是引用数据类型（对象，数组，函数....）,一旦赋值（引用地址不能修改），改的是值。

2：Symbol（）

用于表示一个独一无二的值，不能与其他数据类型进行运算

3：模板字符串

var name="lzj"
console.log(`我是${name}`)

用法：`${}`

4：解构

var obj={
  name:"ljz";
  age:12;
}
const {name,age}=obj

对象解构语法： let {变量，变量，变量}=对象，要和变量同名才可以解构。

let arr=[10,11,23]
let [a,b,c]=arr

数组解构语法：let[变量，变量...]=arr。将数组中的值赋值给变量

5：扩展运算符

let arr =[10,11,12]
console.log(...arr)

扩展运算符：将数组或对象中的值一个一个拿出来。

6：箭头函数

function fn（a，b）{
  return a+b
}
console.log(fn(1,3))
var fn =function(){
  console.log("我也很普通")
}
（function() {
  console.log('1111')
}
）()
let fn =()=>{ console.log('1111') }

箭头函数中，this指向外层作用域。

7：promise对象

一个promise对象有以下几种状态：

  1. pending:初始化状态
  2. fullfilled:成功状态
  3. rejected:失败状态。

promise对象有以下两个特点：

1.对象的状态不受外界影响。

2.一旦状态改变，就不会再变。

解决问题：回调地狱、ajax 请求和响应需要时间 顺序不可控 。目的 控制顺序。

// 假装flag是状态
let flag=false
let p= new promise((resolve,reject)=>{
  if(flag){
    resolve("返回数据")
  }else{
    reject("抛出异常")
  }
}
                   // .then()处理成功的回调   也就是resolve打包的数据
                   // .catch()处理失败的回调   也就是reject暴露的异常
 p.then(data=>{
  console.log(data);
}).catch(error=>{
  
    console.log(error);
  })

promise本身是同步的，.then()和.catch()是异步的

promise的all和race方法

let p1= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功"）
   },3000)
})
let p2= new promise((resolve,reject)=>{
   setTimeout(()=>{
     // resolve("成功"）
     reject("失败二")
   },2000)
})
let p3= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功"）
   },1000)
})
let p=Promise.all([p1,p2,p3]);
 p.then(data=>{
  console.log(data);
}).catch(error=>{
  
    console.log(error);
  })

Promise.all([多个Promise对象]) 统一处理多个异步程序（定时器，时间可控）

1：如果多个异步程序都是成功的状态，p的状态就是成功，多个异步程序的成功结果会打包成一个数组统一返回。

2：但凡发现一个失败，最快得到的失败结果的直接返回

let p1= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功"）
   },3000)
})
let p2= new promise((resolve,reject)=>{
   setTimeout(()=>{
     // resolve("成功"）
     reject("失败二")
   },2000)
})
let p3= new promise((resolve,reject)=>{
   setTimeout(()=>{
     resolve("成功"）
   },1000)
})
let p=Promise.all([p1,p2,p3]);
 p.then(data=>{
  console.log(data);
}).catch(error=>{
  
    console.log(error);
  })

Promise.race()谁快返回谁。

8：async和await

  1. async用来修饰函数，表示这是一个异步函数
  2. await 在异步函数中使用，表示同步代码（异步程序变成同步程序）
async function getVal（）{

await p1.then(res=>console.log(res)）；
  await p1.then(res=>console.log(res)）；
  await p1.then(res=>console.log(res)）；
}

async/awiat的使用规则:

async 表示这是一个async函数， await只能用在async函数里面，不能单独使用

async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行

await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

9：新增数组方法

ES6新增了许多有用的数组方法，下面是其中一些常用的方法：

  1. Array.from(): 将类数组对象或可迭代对象转换为真正的数组。
  2. Array.of(): 根据传入的参数创建一个新的数组。
  3. Array.prototype.find(): 返回满足条件的第一个元素。
  4. Array.prototype.findIndex(): 返回满足条件的第一个元素的索引。
  5. Array.prototype.includes(): 判断数组是否包含某个元素。
  6. Array.prototype.fill(): 用指定的值填充数组。
  7. Array.prototype.flat(): 将嵌套的数组扁平化。
  8. Array.prototype.flatMap(): 对数组中的每个元素执行映射函数后，再将结果扁平化为一个新数组。
  9. Array.prototype.keys(): 返回包含数组索引的新迭代器对象。
  10. Array.prototype.values(): 返回包含数组值的新迭代器对象。
1.Array.from() 可接受3个参数（后两个参数可以没有）

Array.from(arraylLike, MapFn, thisArg)

  1. arrayLike：第一个参数，指定一个类数组对象or可迭代对象（如果只有一个参数就是把形参转变成数组）
  2. MapFn(可选)：第二个参数，新数组中的每一个元素执行该回调函数
  3. thisArg(可选)：第三个参数，执行回调函数MapFn时的this对象
  4. 返回值：一个新数组实例

2：includes()方法 查看数组某个元素是否存在

3.Array.of构建数组

4:forEach不改变原数组，若要改变需要配合index

传入一个函数，函数参数依次为 value、index、arr

  • value：数组当前项的值（必填）
  • index：数组当前项的索引（可选）
  • arr：数组对象本身（可选，一般不选）

5.map 一般用于取数组中某个值返回出来

map() 和 forEach() 的区别就是 map() 会返回一个新数组

6.filter 筛选数组，返回筛选后的数组

新方法中的元素是通过指定数组中符合条件的所有元素

  • value：数组当前的值
  • index ：数组当前的索引
  • arr：数组对象本身（一般省略不写）

7:every()依据判断条件，数组的元素是否全满足，若满足则返回ture

callback的参数：

value --当前索引的值
index --索引

8:some() 方法用于检测数组中的元素是否满足指定条件，通俗一点 查找数组中是否有满足条件的元素

10：新增对象方法

ES6新增了很多对象方法，这些方法使得对象的操作更加方便和灵活。以下是一些常用的ES6新增的对象方法：

  1. Object.assign()：用于将源对象的属性复制到目标对象中。
  2. Object.keys()：返回一个包含所有可枚举属性名称的数组。
  3. Object.values()：返回一个包含所有可枚举属性值的数组。
  4. Object.entries()：返回一个包含所有可枚举属性键值对的数组。
  5. Object.getOwnPropertyDescriptors()：返回一个对象的所有自身属性的描述符。
  6. Object.freeze()：冻结一个对象，使其属性不可修改。
  7. Object.seal()：密封一个对象，使其属性不可删除，但可修改。
  8. Object.is()：比较两个值是否相同，类似于严格相等运算符（===）。
  9. Object.setPrototypeOf()：设置一个对象的原型。
  10. Object.getOwnPropertySymbols()：返回一个包含所有Symbol类型属性的数组。
1.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign(target, ...sources)

参数：target--->目标对象

source--->源对象

返回值：target，即目标对象

有多个源对象情况也是和一个源对象一样的。没有同名的属性会直接复制到目标对象上，同名的属性后面的属性值会覆盖前面的同名属性值。

2：Object.keys()：返回一个包含所有可枚举属性名称的数组。

作用：遍历对象
返回结果：返回对象中每一项key的数组

3：Object.values()：返回一个包含所有可枚举属性值的数组。

4:Object.entries()：返回一个包含所有可枚举属性键值对的数组。

11.Set和map

Set

add()

delete()

has()判断指定值是否存在

clear（）清除所有值

for ...of由于Set只有键值没有键名，所以说keys和values返回值相同

entries实现键值对

利用Set实现数组去重

set实现交集 A∩B

实现并集A∪B

实现差集A-B

// 主要用于数组去重，字符串去重
// let set = new Set()
// 1:add添加
// set.add('ljz')
// set.add('xzq')
// set.add('hzd').add('plf')
// console.log(set);
// 2：delete删除
// set.delete('plf')
// console.log(set);
//3:判断指定值是否存在has
// console.log(set.has('plf'));
// console.log(set.has('hzd'))
// 4clear 清除所有值
// set.clear()
// console.log(set);
// 遍历for...of
// for (let i of set.keys()) {

//     console.log(i);
// }
// for (let i of set.values()) {

//     console.log(i);
// }
// 实现键值对
// for (let i of set.entries()) {

//     console.log(i);
// }

// Set实现数组去重
// let arr = [1, 2, 3, 4, 2, 3, 1, 3, 6]
// let set = new Set(arr);
// let result = [...set]
// console.log(result);
// set实现交集
let arr1 = [1, 2, 3, 4, 5, 6, 7]
let arr2 = [2, 3, 4, 7]
let set1 = new Set(arr1)
let set2 = new Set(arr2)
console.log(...set1);
// let result = [...new Set(arr1)].filter(item => set.has(item))
// console.log(result);
// 实现并集
// let result1 = [...new Set([...arr1, ...arr2])]
// console.log(result1);
// 实现差集A-B
let result = [...set1].filter(item => !set2.has(item))
console.log(result);

Map集合

类似于对象，也是键值对的集合，但是键的范围不局限于字符串，各种类型的值都可以当做键

1.set（）给Map添加数据

2：get()获取某个key的值，返回key的值

3：has监测是否存在某个key，返回布尔值存在：true；不存在：false

4：delete（）删除某个key及其对应的value，返回布尔值

5：clear（）清除所有值

6：for...of遍历

7：keys():获取Map的所有key、

8：values（）获取Map的所有值

9：entries（）：获取Map所有成员

10：转为数组

11：forEach遍历

// 1:set()添加数据
// let map = new Map()
// map.set('name', '小王').set('age', 18);
// console.log(map);
// 2：get()获取某个key的值，返回key的值
// console.log(map.get('name'));
// 3:has监测是否存在某个key，返回布尔值存在：true；不存在：false
// console.log(map.has('age'));
// 4:delete（）删除某个key及其对应的value，返回布尔值
// console.log(map.delete('age'));
// console.log(map);
// 5:clear（）清除所有值
// console.log(map.clear());
// console.log(map);
// for...of遍历
// map.set('syudy', function () {
//     console.log('有在好好学习');
// })
// console.log(map);

// keys():获取Map的所有key、
// for (let key of map.keys()) {
//     console.log(key);
// }
// values（）获取Map的所有值
// for (let value of map.values()) {
//     console.log(value);
// }
// entries（）：获取Map所有成员
// for (let item of map.entries()) {
//     console.log(item);
// }

// 转为数组
const map = new Map([[1, 'one'], [2, 'tow'], [3, 'three']])
// console.log([...map.keys()]);
// console.log([...map.values()]);
// console.log([...map.entries()]);
// console.log([...map]);

// forEach遍历
console.log(map);
map.forEach((value, key, map) => {
    console.log(value, key, map);
})

set和map是es6新增的集合类型。

Set

创建：可以用new set()进行创建。

方法：add,添加一个集合到末尾；has判断集合中是否存在对应的数据。clear清空集合。set也可以用于去重，new set([]),原理主要根据Object.is进行判断。

循环：for…of 或者 集合也可以用forEach进行循环，和循环数组的组别在于，forEach的第二个参数，因为set中不存在下标，所以第二个参数也是集合的元素。

map:

创建：new Map()

用于存储多个键值对数据。在map出现之前使用对象存储键值对，但是有几个问题，键名只能是字符串，获取数据的数量不方便。键名容易和原型上的名称冲突。

当描述一个整体，且属性不能随意添加删除时，适合用对象，当存储一些数据可以随意添加删除时可以用map。

方法：可以用size或者键的数量。可以用set设置一个键值对，如果存在就修改它的值，不存在就添加。判断方法和set一样。delete用于删除指定的键值。

遍历：遍历也可以用forEach和for of

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

0144 文件管理

0144 文件管理

目录 4.文件管理 4.1文件系统基础 4.2目录 4.3文件系统 部分习题 4.文件管理 4.1文件系统基础 4.2目录 4.3文件系统 部分习题 1.UNIX操作系统忠，输入/输出设备视为（） A.普通文件 B.目录文件 C.索引文件 D.特殊文…
阅读更多...
cesium 地图蒙版遮罩效果

cesium 地图蒙版遮罩效果

示例代码 <!DOCTYPE html> <html lang"en"><head><!-- Use correct character set. --><meta charset"utf-8" /><!-- Tell IE to use the latest, best version. --><meta http-equiv"X-UA-Compatible"…
阅读更多...
快速排序 ← PPT

快速排序 ← PPT

【算法代码】https://blog.csdn.net/hnjzsyjyj/article/details/127825125
阅读更多...
JavaScript （下）

JavaScript （下）

1.面向对象 在 Java 中我们学习过面向对象&#xff0c;核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。 把相关的数据和方法组织为一个整体来看待&#xff0c;从更高的层次来进行系统建模&#xff0c;更贴近事物的自然运行模式 1.类的定义和使用 格式…
阅读更多...
Java二叉树超详解(常用方法介绍)（2）

Java二叉树超详解(常用方法介绍)（2）

二叉树中的常用方法 静态二叉树的手动创建 这里我们先给出二叉树结点的信息(这里是内部类)&#xff1a; static class TreeNode {public char val;public TreeNode left;//左孩子的引用public TreeNode right;//右孩子的引用public TreeNode(char val) {this.val val;}} 手动…
阅读更多...
嵌入式系统开发【深入浅出】 UART 与 USART

嵌入式系统开发【深入浅出】 UART 与 USART

目录 UART: 通用串行异步收发器 串行通信的时序 8N1&#xff1a;8位数据位 N没有校验位 1停止位1位 中断控制 编程重点 引言&#xff1a; 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;并且大部分电子设备都支持该通讯方式&#xff0c;也…
阅读更多...
TensorFlow入门(二十一、softmax算法与损失函数)

TensorFlow入门(二十一、softmax算法与损失函数)

在实际使用softmax计算loss时,有一些关键地方与具体用法需要注意: 交叉熵是十分常用的,且在TensorFlow中被封装成了多个版本。多版本中,有的公式里直接带了交叉熵,有的需要自己单独手写公式求出。如果区分不清楚,在构建模型时,一旦出现问题将很难分析是模型的问题还是交叉熵的使…
阅读更多...
【 数据结构：堆（Heap）】大根堆、小根堆、堆的向上调整算法、向下调整算法 及 堆的功能实现！

【 数据结构：堆（Heap）】大根堆、小根堆、堆的向上调整算法、向下调整算法 及 堆的功能实现！

前言 本系列文章【数据结构】默认会使用 C/C 进行设计实现&#xff01;其他语言的实现方式请参照分析设计思路自行实现&#xff01; 注[1]&#xff1a;文章属于学习总结&#xff0c;相对于课本教材而言&#xff0c;不具有相应顺序性&#xff01;&#xff08;可在合集中自行查看…
阅读更多...
C++: 继承

C++: 继承

学习目标 1.继承的概念及定义 2.基类和派生类对象赋值转换(切片) 3.继承中的作用域(隐藏/重定义) 4.派生类的默认成员函数 5.继承与友元 6.继承与静态成员 7.菱形继承与菱形虚拟继承 8.总结 1.继承的概念及定义 1.1概念 继承: 它允许你创建一个新的类&#xff08;称为子类或派…
阅读更多...
小程序uView2.X框架upload组件上传方法总结+避坑

小程序uView2.X框架upload组件上传方法总结+避坑

呈现效果: 1.1单图片上传 1.2多图片上传 前言:相信很多人写小程序会用到uView框架,总体感觉还算OK吧,只能这么说,肯定也会遇到图片视频上传,如果用到这个upload组件相信你,肯定遇到各种各样的问题,这是我个人总结的单图片和多图片上传方法. uView2.X框架:uView 2.0 - 全面兼容…
阅读更多...
JavaSE学习值之--String类

JavaSE学习值之--String类

&#x1f495;"不要同情自己&#xff0c;同情自己是卑劣懦夫的勾当&#xff01;"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;JavaSE学习值之--String类 目录 前言&#xff1a; 一.String类 1.String类的属性 2.字符串的构造 注意&#xf…
阅读更多...
基于YOLOv8模型的塑料瓶目标检测系统（PyTorch+Pyside6+YOLOv8模型）

基于YOLOv8模型的塑料瓶目标检测系统（PyTorch+Pyside6+YOLOv8模型）

摘要&#xff1a;基于YOLOv8模型的塑料瓶目标检测系统可用于日常生活中检测与定位塑料瓶目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数…
阅读更多...
翻译docker官方文档（残缺版）

翻译docker官方文档（残缺版）

Build with docker(使用 Docker 技术构建应用程序或系统镜像) Overview (概述) 介绍&#xff08;instruction&#xff09; 层次结构&#xff08;Layers&#xff09; The order of Dockerfile instructions matters. A Docker build consists of a series of ordered build ins…
阅读更多...
“高级Vue状态管理 - Vuex的魅力与应用“

“高级Vue状态管理 - Vuex的魅力与应用“

目录 引言1. Vuex的简介1.1 什么是Vuex&#xff1f;1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. Vuex的异步请求总结 引言 在现代Web开发中&#xff0c;前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加&#xff0c;有效地管理应用的状态成为了一项…
阅读更多...
Android---Synchronized 和 ReentrantLock

Android---Synchronized 和 ReentrantLock

Synchronized 基本使用 1. 修饰实例方法 public class SynchronizedMethods{private int sum 0;public synchronized void calculate(){sum sum 1;} } 这种情况下的锁对象是当前实例对象&#xff0c;因此只有同一个实例对象调用此方法才会产生互斥效果&#xff1b;不同的…
阅读更多...
APP测试常见功能测试点汇总

APP测试常见功能测试点汇总

1、安装和卸载 安装和卸载是任何一款APP中都属于最基本功能。一旦出错&#xff0c;就属于优先级为紧要的BUG。因此APP的安装和卸载应作为一个测试点多加重视。 1 应用是否可以正常安装&#xff08;命令行安装&#xff1b;豌豆荚&#xff0f;手机助手等第三方软件安装&#xff…
阅读更多...
B树、B+树详解

B树、B+树详解

B树 前言　　 首先&#xff0c;为什么要总结B树、B树的知识呢&#xff1f;最近在学习数据库索引调优相关知识&#xff0c;数据库系统普遍采用B-/Tree作为索引结构&#xff08;例如mysql的InnoDB引擎使用的B树&#xff09;&#xff0c;理解不透彻B树&#xff0c;则无法理解数据…
阅读更多...
【通信系列 1 -- GSM 和 LTE】

【通信系列 1 -- GSM 和 LTE】

文章目录 1. LTE(Long Term Evolution)1.1 FDD&TDD简介1.1.1 3G与4G差异1.1.2 频点与band关系1.1.3 band 与运营商的关系 1.2 TDD&FDD区别1.2.1 FDD帧结构1.2.2 TDD帧结构1.2.3 TDD&FDD优势对比1.2.4 TDD缺点 1.3 VoLTE1.3.1 VoLTE 优点11.3.2 VoLTE 优点21.3.3 Vo…
阅读更多...
redis-6.2.7 集群安装3主3从

redis-6.2.7 集群安装3主3从

因为资源有限准备了3 台 服务器&#xff0c;先查看防火墙的端口是否开放&#xff0c;如果没有开放先开放端口我使用的 6379 和 6380 这两个端口 所以将这两个端口放开。去redis 官网下载redis 安装包。下载地址 &#xff1a; redis 安装包下载 3. 安装redis 上传上去之后 3 台…
阅读更多...
【Java 进阶篇】JavaScript 数据类型详解

【Java 进阶篇】JavaScript 数据类型详解

JavaScript是一种弱类型脚本语言&#xff0c;具有动态类型。这意味着JavaScript中的变量可以容纳不同类型的数据&#xff0c;并且它们的类型可以在运行时更改。在本文中&#xff0c;我们将深入探讨JavaScript中的数据类型&#xff0c;包括原始数据类型和引用数据类型&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023