当前位置: 首页 > news >正文

ES6新特性。对象、数组新增方法

ES6新特性

ES6(ECMAScript 2015)是 JavaScript 的一个重要版本,引入了许多新的语法和功能,增强了语言的表达能力和开发体验。以下是 ES6 中一些重要的新特性的全面总结:

  1. let 和 const 声明:
    letconst 是新的变量声明关键字,用于定义块级作用域的变量。let 允许变量被重新赋值,而 const 则定义一个不可变的常量。

  2. 箭头函数:
    箭头函数使用更简洁的语法定义函数,并自动绑定外部作用域的 this 值。适用于简短的函数和回调函数。

  3. 模板字符串:
    模板字符串使用反引号 `` 定义字符串,可以在其中插入变量和表达式,使字符串拼接更加方便。

  4. 解构赋值:
    解构赋值允许从数组或对象中提取值并赋给变量,使得变量的赋值更加简洁。

  5. 默认参数:
    可以在函数参数中为参数设置默认值,使得调用函数时可以省略一些参数。

  6. 展开运算符:
    展开运算符 ... 可以将数组或对象展开为单独的元素或属性,方便进行数组合并、函数参数传递等操作。

  7. 类和继承:
    引入了类和面向对象编程的语法,更易于创建和继承对象。

  8. 模块化:
    引入了 importexport 关键字,支持模块化编程,让代码更结构化和可维护。

  9. 迭代器和生成器:
    迭代器和生成器提供了更强大的迭代和异步编程方式,可以简化异步操作的处理。

  10. Promise:
    Promise 提供了更便捷的处理异步操作的方式,避免了回调地狱,改善了代码的可读性。

  11. Symbol 和 Map/Set:
    Symbol 是一种新的数据类型,用于创建唯一的属性键。MapSet 是新的数据结构,分别用于键值对和集合。

  • Symbol:
    Symbol 是 ES6 中引入的一种新的原始数据类型,用于创建独一无二的值。每个通过 Symbol() 创建的值都是唯一的,不会与其他值相等。Symbol 可以用作对象属性的键,用于避免命名冲突。

    const uniqueSymbol = Symbol('description'); // 创建一个带有描述的 Symbol
    const obj = {[uniqueSymbol]: 'some value'
    };
    
  • Map:
    Map 是一种新的数据结构,它是一种键值对的集合,与对象不同,Map 的键可以是任何类型的值,包括对象、函数等,而不仅仅是字符串。Map 的键值对在插入顺序上保持有序。

    const map = new Map();
    map.set('key1', 'value1');
    map.set('key2', 'value2');console.log(map.get('key1')); // 输出 'value1'
    console.log(map.size); // 输出 2
    
  • Set:
    Set 是一种类似于数组的数据结构,但它的值是唯一的,不允许重复。它提供了一种存储无重复值的集合的方式。

    const set = new Set();
    set.add('value1');
    set.add('value2');
    set.add('value1'); // 重复的值不会被添加console.log(set.has('value1')); // 输出 true
    console.log(set.size); // 输出 2
    
  1. 模块化的 Math 和 Number 方法:
    MathNumber 对象的方法现在以模块化的方式提供,可以通过 Math.xxxNumber.xxx 来访问。

数组

ES6在数组上新增了以下几种方法:

  1. Array.from()
    从类数组对象中创建数组,可传入map函数。
js
let arrayLike = {0: 'a', 1: 'b', length: 2}
let arr = Array.from(arrayLike, x => x.toUpperCase())
// ['A', 'B']
  1. Array.of()
    创建数组实例,参数为数组元素。
js 
let arr = Array.of(1, 2, 3)
// [1, 2, 3]
  1. find()
    找到第一个符合条件的元素
js
let arr = [1, 2, 3] 
let found = arr.find(x => x > 1) // 2
  1. findIndex()
    找到第一个符合条件元素的下标
js
let arr = [1, 2, 3]
let index = arr.findIndex(x => x > 1) // 1
  1. fill()
    使用指定值填充数组
js
let arr = new Array(3).fill(0) // [0, 0, 0]
  1. copyWithin()
    选择源数据,拷贝到指定位置
js
let arr = [1, 2, 3, 4] 
arr.copyWithin(2, 0, 2) // [1, 2, 1, 2]
  1. entries()/keys()/values()
    遍历数组
  2. includes()
    检查数组是否包含某个值,返回布尔值。
js
let arr = [1, 2, 3]
arr.includes(2) // true
  1. flat()
    将多维数组转为低一级的数组。
js 
let arr = [1, [2, 3]]
arr.flat() // [1, 2, 3]
  1. flatMap()
    先对数组元素执行map,再flat。
js
let arr = [1, 2, 3]
arr.flatMap(x => [x * 2]) // [2, 4, 6] 
  1. at()
    取得给定索引处的元素,支持负索引。
js
let arr = [1, 2, 3]
arr.at(-1) // 3
  1. sort()优化
    内置了对数字的正确排序。

对象

ES6 在对象的语法和 API 上也引入了一些重要的改进。以下是 ES6 在对象上新增的一些语法和 API 的详细总结:

  1. 对象字面量增强:
    ES6 允许在对象字面量中使用变量作为属性名,而不必显式声明属性名。例如:

    const key = 'name';
    const person = {[key]: 'John',age: 30
    };
    
  2. 对象的方法缩写:
    在对象字面量中,如果一个属性的值是一个函数,可以将函数的 function 关键字省略。

    const person = {name: 'John',sayHello() {console.log(`Hello, ${this.name}!`);}
    };
    
  3. Object.assign(target, ...sources)
    这个静态方法用于将一个或多个源对象的属性复制到目标对象,可以用于对象的合并。

    const obj1 = { a: 1, b: 2 };
    const obj2 = { b: 3, c: 4 };
    const mergedObj = Object.assign({}, obj1, obj2);
    
  4. Object.keys(obj)Object.values(obj)Object.entries(obj)
    这些静态方法分别返回一个数组,用于遍历对象的键、值和键值对(键和值组成的数组)。

  5. Object.getOwnPropertyDescriptor(obj, prop)Object.defineProperty(obj, prop, descriptor)
    getOwnPropertyDescriptor 方法获取对象属性的描述符,defineProperty 方法用于修改或定义对象属性的描述符。

  6. Object.setPrototypeOf(obj, prototype)Object.getPrototypeOf(obj)
    setPrototypeOf 方法设置对象的原型,getPrototypeOf 方法获取对象的原型。

  7. Object.is(value1, value2)
    这个静态方法用于比较两个值是否严格相等,类似于 === 运算符,但对于 NaN 和 +0/-0 有不同的结果。

  8. Object.getOwnPropertySymbols(obj)
    这个静态方法返回一个数组,包含对象中的所有符号属性。

  9. Object.freeze(obj)Object.seal(obj)Object.preventExtensions(obj)
    这些静态方法用于分别冻结对象、密封对象(阻止添加和删除属性)、阻止对象扩展(阻止添加属性)。

  10. Object.fromEntries(iterable)
    这个静态方法用于将键值对的可迭代对象转换为一个对象。

相关文章:

ES6新特性。对象、数组新增方法

ES6新特性 ES6(ECMAScript 2015)是 JavaScript 的一个重要版本,引入了许多新的语法和功能,增强了语言的表达能力和开发体验。以下是 ES6 中一些重要的新特性的全面总结: let 和 const 声明: let 和 const …...

request发送http请求

今天正式开始为大家介绍接口自动化,相信很多做测试的朋友,都用过一些工具,比如jmeter,loadrunner,postman等等,所以今天先给那些基础不太好的同学,先讲讲postman如何来测接口以及如何用pthon代码…...

leaflet实现MARK指向的方向随机

效果图: npm install leaflet-rotatedmarkerL.marker([48.8631169, 2.3708919], {rotationAngle: Math.random() * 180, // 旋转角度,以度为单位,顺时针方向。rotationOrigin: "center center", // 旋转中心 }).addTo(map);...

如何使用Python编写小游戏?

大家好,我是沐尘而生,如果你是一个热爱编程的小伙伴,又想尝试游戏开发,那么这篇文章一定能满足你的好奇心。不废话,让我们马上进入Python游戏开发的精彩世界吧! Python游戏开发的魅力 编写小游戏不仅仅是锻…...

【Leetcode】84.柱状图中最大的矩形(Hard)

一、题目 1、题目描述 给定 n n n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例1: 输入:heights = [2,1,5,6,2,3] 输出:10 解释:最大的矩形为图中红色区域,面积为 10示例2:…...

Arraylist集合

保存数据会经常使用到数组,但数组存在以下几个缺陷: 长度固定;保存的必须为同一类型的元素,(基本数据类型,或引用数据类型);使用数组进行增加元素的步骤比较麻烦; 这个时候就需要用一…...

https的原理和方案

文章目录 https原理为什么要加密常见的加密方式对称加密非对称加密数据摘要&&数据指纹数据签名 https的几种工作方案方案一:只使用对称加密方案二:只使用非对称加密方案三:两端都使用非对称加密方案四:非对称加密 对称加…...

VTK 判断一个 点 是否在一个模型 stl 内部 vtk 点是否在内部 表面 寻找最近点

判断 一个点 ,判断是否在风格 stl 模型内部,或表面: 目录 1.方案一:使用vtkCellLocator FindClosestPoint 找到模型上距离给定点最近的一点,计算两点的距离 ,小于某一阈值 则认为此点在模型上; 2.方案二…...

【数据结构OJ题】链表的回文结构

原题链接:https://www.nowcoder.com/practice/d281619e4b3e4a60a2cc66ea32855bfa?tpId49&&tqId29370&rp1&ru/activity/oj&qru/ta/2016test/question-ranking 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 在做这道…...

Nginx常见的三个漏洞

目录 $uri导致的CRLF注入漏洞 两种常见场景 表示uri的三个变量 案例 目录穿越漏洞 案例 Http Header被覆盖的问题 案例 $uri导致的CRLF注入漏洞 两种常见场景 用户访问http://example.com/aabbcc,自动跳转到https://example.com/aabbcc 用户访问http://exa…...

爬虫逆向实战(十六)--某建筑市场平台

一、数据接口分析 主页地址:某建筑市场平台 1、抓包 通过抓包可以发现数据接口是list 2、判断是否有加密参数 请求参数是否加密? 无请求头是否加密? 无响应是否加密? 通过查看“响应”模块可以发现,返回的响应是…...

用Python做一个滑雪小游戏

游戏是让人娱乐和放松的好方式,而编写和玩自己的游戏则是一种特别有趣的体验。在本文中,我们将使用Python和pygame库来创建一个简单的滑雪小游戏。通过这个小游戏项目,我们将学习如何使用Python编程语言来制作自己的游戏,并且享受…...

EXCEL按列查找,最终返回该列所需查询序列所对应的值,VLOOKUP函数

EXCEL按列查找,最终返回该列所需查询序列所对应的值 示例:国标行业分类汉字,匹配id 使用VLOOKUP函数 第一参数:拿去查询的值。 第二参数:匹配的数据。 Ps:Sheet1!$C 21 : 21: 21:E 117 ,需要…...

java编译报错,get方法报错

java编译报错,get方法报错 处理方式: 在空间中,将 buid 文件夹删除 再不行的话,重启电脑,删除各种缓存 试试...

可以降低CPU负载的网络传输技术——LSO

LSO 是个啥? Large Send Offload(LSO)是一种网络传输协议技术,旨在提高网络传输的性能和效率。它通过将大型数据包拆分成小型数据包,降低网络传输负载,提高传输速度。 在传统的网络传输协议中&#xff0c…...

[管理与领导-25]:IT基层管理者 - 团队管理 - 如何留人, 如何留住关键人才

目录 一、离职前的五大信号,你读懂了吗? 二、员工为什么会离职 三、如何留住关键人才 一、离职前的五大信号,你读懂了吗? 离职前的信号是指员工可能在准备离职之前表现出的一些迹象或行为。 这些信号可以帮助雇主或同事们察觉…...

【Redis】Redis 的学习教程(二)之 Jedis

仅仅知道 Redis 服务端的操作知识,还是远远不够的,如果想要真正在项目中得到应用,我们还需要一个 Redis 的客户端,然后将其集成到项目中,让程序自动根据我们的业务需要自动处理。 基于 Redis 开放的通信协议&#xff…...

VB+SQL银行设备管理系统设计与实现

摘要 随着银行卡的普及,很多地方安装了大量的存款机、取款机和POS机等银行自助设备。银行设备管理系统可以有效的记录银行设备的安装和使用情况,规范对自助设备的管理,从而为用户提供更加稳定和优质的服务。 本文介绍了银行设备管理系统的设计和开发过程,详细阐述了整个应…...

Python系统学习1-9-类一之类语法

一、类之初印象 1、类就是空表格,将变量(列名)和函数(行为)结合起来 2、创建对象,表达具体行 3、创建类就是创建数据的模板 --操作数据时有提示 --还能再组合数据的行为 --结构更加清晰 4、类的内存分配…...

PHP“深入浅出”淘宝商品详情数据接口获取方法,淘宝API申请指南

获取淘宝商品详情数据的方法如下: 确定监控对象,通常是与自己店铺的商品相似的竞品,通过在淘宝商品详情页的URL中获取商品ID,进而获取商品的详情数据。通过API接口获取商品详情数据,申请开发者账号并获取授权访问&…...

线性代数再回顾

最近,在深度学习线性代数,之前大一的时候学过线性代数,但那纯属于是应试用的,考试一考完,啥都忘了,也说出不出个所以然,所以,在B站的MIT的线性代数以及3blue1brown线性代数的本质中去…...

(白帽黑客)自学笔记

一、前言: 1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发. 3.有时多 google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答. 4.遇到实在搞不懂的,可以先放放,以…...

基于长短期神经网络的客流量预测,基于长短期神经网络的超短期客流量预测,lstm详细原理

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的客流量预测 完整代码: 基于长短期神经网络LSTM的公交站客流量预测资源-CSDN文库 https://download.csdn.net/download/abc991835105/88184734 效果图 结果分析 展望 参考论文 背影 碳排放越来越受到重…...

前端文件下载通用方法

zip文件和xlsx文件 import axios from axios import { getToken } from /utils/authconst mimeMap {xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,zip: application/zip }const baseUrl process.env.VUE_APP_BASE_API // zip下载 export functi…...

htmlCSS-----案例展示

目录 前言 作品效果 html代码 CSS代码 图片资源 前言 在学习html过程中我们要试着去写写一些案例,通过这些案例让我们更加熟悉代码以及丰富我们的经验,下面是我个人写的一个案例,代码和图片也给出了大家,你们可以参考参考。…...

Android进阶之路 - 去除EditText内边距

正如题名,在Android中的EditText是自带内边距的,常规而言设置背景为null即可,但是因为使用了并不熟悉的声明式框架,本是几分钟解决的事儿,却花费了小半天~ 其实这只是一个很简单的小需求,不想却遇到了一些小…...

ModStartCMS v7.0.0 多语言开发优化,多个常用组件升级

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。 系统完全开源,基于 Apache 2.0 开源协议,免费且不限制商业使用。 功能特性 丰富的模块市…...

一百五十八、Kettle——Kettle各版本及其相关安装包分享(网盘链接,不需积分、不需验证码) 持续更新、持续分享

一、目的 最近因为kettle9.3的shim问题看了好多博客,都没有网盘分享。后来有一位博主分享了kettle9.2的shim安装包,已经很感谢他,但是是博客分享,下载还需要搞验证码下载码之类的。 kettle9.2的shim安装包下载好后,一…...

【通俗易懂】如何使用GitHub上传文件,如何用git在github上传文件

目录 创建 GitHub 仓库 使用 Git 进行操作 步骤 1:初始化本地仓库 步骤 2:切换默认分支 步骤 3:连接到远程仓库 步骤 4:获取远程更改 步骤 5:添加文件到暂存区 步骤 6:提交更改 步骤 7&#xff1a…...

计算机视觉之三维重建(二)(摄像机标定)

标定示意图 标定目标 P ′ M P w K [ R T ] P w P^{}MP_wK[R \space T]P_w P′MPw​K[R T]Pw​ 其中 K K K为内参数, [ R T ] [R \space T] [R T]为外参数。该式子需要使用至少六对内外点对进行求解内外参数(11个未知参数)。 其中 R 3 3 …...