es6(三)——常用es6(函数、数组、对象的扩展)

news2024/11/17 7:31:49

ES6的系列文章目录

第一章 Python 机器学习入门之pandas的使用


文章目录

  • ES6的系列文章目录
  • 0、数值的扩展
  • 一、函数的扩展
    • 1、函数的默认值
    • 2、函数的reset参数
  • 二、数组的扩展
    • 1. 将对象转成数组的Array.from()
    • 2. 将对象转成数组的Array.from()
    • 3. 实例方法 find(),findIndex(),findLast(),findLastIndex()
  • 三、对象的扩展
    • 1.判断两个对象是否相等 Object.is()
    • 2.对象的合并方法 Object.assign()

0、数值的扩展

其实数值的方法有很多,但大部分都是稍加了解即可,这里着重讲下Number.EPSILON,它是 JavaScript 能够表示的最小精度。误差如果小于这个值,就可以认为已经没有意义了,即不存在误差了。

经典面试题:0.1 + 0.2 === 0.3 吗? 为什么

答案: 不等于
原因:对于 64 位浮点数来说,大于 1 的最小浮点数相当于二进制的1.00..001,小数点后面有连续 51 个零。 这个值减去 1 之后,就等于 2 的 -52 次方。

// 经典面试题:0.1 + 0.2 === 0.3 吗? 为什么  

// 1:答案: 不等于。
console.log(0.1 + 0.2 === 0.3) // false
console.log(0.1 + 0.2) // 0.30000000000000004
// 2:原因:对于 64 位浮点数来说,大于 1 的最小浮点数相当于二进制的1.00..001,小数点后面有连续 51 个零。 这个值减去 1 之后,就等于 2 的 -52 次方。
console.log(0.1 + 0.2 - 0.3) // 5.551115123125783e-17
console.log(5.551115123125783e-17.toFixed(20)) // '0.00000000000000005551'

// 3:如何解决
function equal(a, b) {
    if(Math.abs(a-b) < Number.EPSILON) {
        return true;
    } else {
        return false;
    }
}
console.log(0.1 + 0.2 === 0.3) // false
console.log(equal(0.1 + 0.2, 0.3)) // true

在这里插入图片描述

一、函数的扩展

1、函数的默认值

简单概况: 允许给函数的参数设置默认值。相当于是为函数的参数加了一层保险(如果你没有给对应形参数量的实参的保险),同时为了更好辨别,一般将要设置默认值的放在最后面。

function add (a, b, c=10) {
  return a + b + c;
}
let a1 = add(1,2,3);
let a2 = add(1,2);
console.log(a1); // 6  1+2+3
console.log(a2); // 13 1+2+10

2、函数的reset参数

es6引入rest参数用于获取函数的实参(用来替代arguments)

以下为es5和es6的对比及其效果

// es5
function getUser(){
    console.log(...arguments);
}
getUser('张三','李四','王五');

// es6 的 rest参数
function getAge (a, b, ...c) {
    console.log(a);
    console.log(b);
    console.log(c);  // rest 参数可以是任意名字(符合命名规范)
}
getAge(1,2,3,4,5,6);

在这里插入图片描述

二、数组的扩展

1. 将对象转成数组的Array.from()

// 1:将对象转成数组  Array.from()
letarrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// 1.1:ES5 的写法
var arr1 = [].slice.call(arrayLike);
console.log(arr1); // ['a', 'b', 'c']
// 1.2:ES6 的写法
let arr2 = Array.from(arrayLike);
console.log(arr2); // ['a', 'b', 'c']

// 1.3:arguments 对象
function foo() {
    var args = Array.from(arguments);
    console.log(args)
}
foo(1,2,3,4,5,6,7); // [,2,3,4,5,6,7]

在这里插入图片描述

2. 将对象转成数组的Array.from()

// 2:将一组值转换为数组  Array.of()
// 2.1: 错误示范(参数为1个和两个都错误)
console.log(Array()) // []
console.log(Array(3)); // [空属性 × 3]
// 2.2: 正确示范     
console.log(Array.of(1, 2, 3)) // [1,2,3]
console.log(Array.of(3)) // [3]
console.log(Array.of(3).length) // 1

在这里插入图片描述

3. 实例方法 find(),findIndex(),findLast(),findLastIndex()

// 3:实例方法 find(),findIndex(),findLast(),findLastIndex() 
// 3.1find和findIndex共同点:找出第一个符合条件的数组成员。参数是一个回调函数,所有数组成员依次执行该回调函数。
// (1)find() 找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
let a1 = [1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) // 10
console.log('3.1:', a1);
let a2 = [1, 5].find(function(value, index, arr) {
    return value > 9;
}) // undefined
console.log('3.1:', a2);
// (2) findIndex() 找出返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
let a3 = [1, 5, 10, 15].findIndex(function(value, index, arr) {
    return value > 9;
}) // 2
console.log('3.2:', a3);
let a4 = [1, 5].findIndex(function(value, index, arr) {
    return value > 9;
}) // -1
console.log('3.2:', a4);
// 3.2:findLast和findLastIndex共同点:找出最后一个符合条件的数组成员。参数是一个回调函数,所有数组成员依次执行该回调函数。
// findLast() “从结尾开始”找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
// findLastIndex() “从结尾开始”找出返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

// 3.3注意点:indexOf()方法无法识别数组的NaN成员,但是findIndex()方法可以借助Object.is()方法做到。
console.log([NaN].indexOf(NaN))// -1
console.log([NaN].findIndex(y => Object.is(NaN, y)))// 0

在这里插入图片描述

三、对象的扩展

1.判断两个对象是否相等 Object.is()

// 1: Object.is  判断两个数值是否完全相等
console.log(Object.is('张三', '张三')) // true
 console.log(Object.is(18, 18)) // true
 console.log(Object.is(NaN, NaN)) // true

 // 注意点:严格运算符(===)和 Object.is()的区别:+0不等于-0,NaN等于自身。
 console.log(+0 === -0) // true
 console.log(NaN === NaN) // false
 console.log(Object.is(+0, -0)) // false
 console.log(Object.is(NaN, NaN)) // true

在这里插入图片描述

2.对象的合并方法 Object.assign()

// 2: Object.assign() 对象的合并方法
//2.1: 合并过程中后面覆盖前面的
let obj = {
   name: '张三',
   age: 18,
   sex: '男'
}
let obj1 = {
   name: '李四',
   age: 19,
}
console.log(Object.assign(obj, obj1));

// 2.2 对象的浅拷贝 (复制的对象拷贝得到的是这个对象的引用)
let obj2 = Object.assign({}, obj1);
console.log(obj2, obj === obj2); //{name:'李四',age:19} false

在这里插入图片描述

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

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

相关文章

24.项目开发之量化交易抓取数据QuantTradeData(三)

后端业务&#xff1a;分页查询股票列表基础信息 需求说明 将来股票列表基础信息会在前端页面进行展示&#xff0c;成千上万条数据是不会一次性展示在页面的&#xff0c;而是分页展示。 环境搭建 pom.xml导入依赖 <dependency><groupId>com.github.pagehelper<…

文心大模型4.0开启测试申请,百度智能云为大模型落地五大需求提供最优解

写在前面 面向企业客户启动文心大模型4.0 API调用服务测试申请&#xff0c;服务超过17000家客户&#xff0c;在各行各业的近500个场景中进行大模型应用落地探索……自今年3月面世以来&#xff0c;百度智能云千帆大模型平台作为全球首个一站式企业级大模型平台&#xff0c;为业…

PS修改背景色,线框底图

1、打开图片&#xff0c;ctrlj复制一层 2、图像-调整-反相 3、ctrll调整色阶&#xff0c;将中间的色块向右移&#xff0c;灰色线和字体的会变黑

移动端签名组件封装 借用插件 vue-esign

目录 需求实现讲解工具 - 图片旋转、base64 转换为 file 对象组件封装组件全局注册组件使用效果展示 需求 移动端需要实现手机横屏手写签名并上传签名图片功能。 实现讲解 vue-esign 插件文档地址 https://www.npmjs.com/package/vue-esign SignCanvas 组件封装原理&#xff1a…

【数据结构】830+848真题易错题汇总(自用)

【数据结构】830848易错题汇总(10-23) 文章目录 【数据结构】830848易错题汇总(10-23)选择题填空题判断题简答题&#xff1a;应用题&#xff1a;算法填空题&#xff1a;算法设计题&#xff1a;(待补) 选择题 1、顺序栈 S 的 Pop(S, e)操作弹出元素 e&#xff0c;则下列(C )是正…

虹科分享 | 选择SAS还是NVMe?虹科网络基础带您一探究竟!

存储架构师需要通过确保他们选择的存储解决方案提供支持其生态系统所需的安全性、稳定性、可扩展性和管理特性来应对当今的业务挑战。当他们考虑采用新的存储技术时&#xff0c;在采用新技术之前&#xff0c;他们应该权衡和审查一些基本的考虑因素。新的存储协议不断进入市场&a…

Postman for Mac - 轻松进行API测试的利器

在当今的数字化时代&#xff0c;应用程序编程接口(API)已成为推动软件创新和互操作性的核心动力。API测试作为确保服务质量的重要一环&#xff0c;也越来越受到开发者的重视。其中&#xff0c;Postman作为一款极其流行的API测试工具&#xff0c;其简洁易用的界面和强大的功能&a…

美妆品牌如何有效利用软文推广引流获客

近年来随着美妆品牌的转型升级和居民消费观念的转变&#xff0c;美妆行业取得了更大发展空间&#xff0c;新产品不断涌现&#xff0c;消费者拥有更多选择&#xff0c;那么在竞争激烈的市场中美妆品牌如何才能突破重围&#xff0c;找出新的价值增长点呢&#xff1f; 一、 细分消…

NewStarCTF2023week3-阳光开朗大男孩

下载附件解压得到两个txt文本 secret.txt一看很明显是核心价值观编码 解码得到 this_password_is_s000_h4rd_p4sssw0rdddd flag.txt最开始没看出来是什么&#xff0c;主要是之前没遇到过 题目提示&#xff1a;我是阳光开朗大男孩&#xff5e;阳光开朗大男孩&#xff5e; 我…

线程池工作原理

1&#xff1a;处理Runnable 任务的方法 package ThreadPooITest;import java.util.concurrent.*;//目标&#xff1a;线程池创建 public class ThreadPoolTest {public static void main(String[] args) {//1:通过ThreadPoolExectorExecutorService pool new ThreadPoolExecuto…

数据模型设计必读方法论!很实用

数据架构的重要构件之一是数据模型&#xff0c;当然从数据架构的视角来说的数据模型是指企业级数据模型。本篇文章更多是讨论如何设计和管理数据模型&#xff0c;此处的数据模型是泛指在组织中通过数据建模的过程&#xff0c;来发现、分析和确定数据需求范围&#xff0c;并用于…

6.(vue3.x+vite)路由传参query与params区别

前端技术社区总目录(订阅之前请先查看该博客) 效果截图 一:路由传参有两种方式:params与query params与query区别 1:param,路由带“/”,query带“?” 2:query传过来的参数会显示到地址栏中 而params传过来的参数可以显示参数或隐藏参数到地址栏中(vue-router 4.1.4不…

MSVCR80.DLL 丢失修复方法:完美解决你的问题!

MSVCR80.DLL 是 Microsoft Visual C Redistributable Package 中的一个动态链接库文件&#xff0c;它扮演着非常重要的角色。然而&#xff0c;当你在运行某些应用程序时&#xff0c;可能会遇到“MSVCR80.DLL 丢失”错误。这时候你就需要采取一些措施来解决这个问题了&#xff0…

待办任务清单app哪个软件好用?

手机成了我们生活的延伸&#xff0c;而对于繁忙的工作节奏&#xff0c;一款好用的任务提醒软件就如同一位贴心的助手&#xff0c;时刻提醒我们的待办任务。在众多软件中&#xff0c;敬业签是一款比较不错的记录待办任务清单的工具。 在手机上&#xff0c;打开敬业签&#xff0…

swagger gin 文档接口排序,写了一个小工具,自定义接口排序

起因没找到swagger 自定义接口排序 代码原理就是替换 swag init 生成的docs.go paths 部分 &#xff0c;取到swagger.json paths 部分排序&#xff0c;正则匹配docs.go paths 部分&#xff0c;然后通过自定义排序&#xff0c;替换paths部分&#xff0c;这个根据自定义的需求来…

Stable Diffusion WebUI报错RuntimeError: Torch is not able to use GPU解决办法

新手在安装玩Stable Diffusion WebUI之后会遇到各种问题&#xff0c; 接下来会慢慢和你讲解如何解决这些问题。 在我们打开Stable Diffusion WebUI时会报错如下&#xff1a; RuntimeError: Torch is not able to use GPU&#xff1b;add --skip-torch-cuda-test to COMMANDL…

操作系统面试常问问题--保研及考研复试

前言&#xff1a; Hello大家好&#xff0c;我是Dream。今年保研上岸山东大学人工智能专业 &#xff08;经验贴&#xff09;&#xff0c;现在将我自己的专业课备考知识点整理出来&#xff0c;分享给大家&#xff0c;希望可以帮助到大家&#xff01;这是重点知识总结&#xff0c;…

基于Pix4D使用无人机光学影像制作正射影像(DOM)和数字表面模型(DSM) 操作步骤

基于Pix4D使用无人机光学影像制作正射影像&#xff08;DOM&#xff09;和数字表面模型&#xff08;DSM&#xff09; 操作步骤 0. 前言1.获取无人机光学影像2.DOM和DSM3.操作步骤3.1 初始界面3.2 新建项目3.3查看处理过程报告3.4查看处理进度和成果 4.在ArcMap中打开DSM和DOM 0.…

Linux高性能服务器编程——ch1笔记

第1章 TCP/IP 协议族 1.1 TCP/IP 协议族体系结构以及主要协议 数据链路层 网卡接口的网络驱动程序&#xff0c;以处理数据在物理媒介&#xff08;比如以太网、令牌环等&#xff09;上的传输。 协议&#xff1a;ARP、RARP&#xff0c;实现IP地址和机器物理地址之间的转换。 网络…

适用于小型企业的远程控制软件分享!

远程控制软件对小型企业的好处 远程控制软件允许用户从远程位置连接到计算机&#xff0c;然后访问和使用远程计算机上的资源。这对于需要为客户提供远程技术支持的企业来说&#xff0c;是一个非常重要的工具。 借助远程控制软件&#xff0c;小型企业人员在远程工…