ES6 学习(二)-- 字符串/数组/对象/函数扩展

news2024/11/27 14:54:23

文章目录

  • 1. 模板字符串
    • 1.1 ${} 使用
    • 1.2 字符串扩展
      • (1) ! includes() / startsWith() / endsWith()
      • (2) repeat()
  • 2. 数值扩展
    • 2.1 二进制 八进制写法
    • 2.2 ! Number.isFinite() / Number.isNaN()
    • 2.3 inInteger()
    • 2.4 ! 极小常量值Number.EPSILON
    • 2.5 Math.trunc()
    • 2.6 Math.sign()
  • 3. 数组扩展
    • 3.1 扩展运算符
    • 3.2 Array.from()
    • 3.3 Array.of()
    • 3.4 find() / findIndex()
    • 3.5 fill()
    • 3.6 ! flat() / flatMap()
  • 4. 对象扩展
    • 4.1 对象简写
    • 4.2 对象属性 表达式
    • 4.3 扩展运算符 ...
    • 4.4 Object.assign()
    • 4.5 Object.is()
  • 5. 函数扩展
    • 5.1 参数默认值
    • 5.2 rest 参数
    • 5.3 name 属性
    • 5.4 ! 箭头函数

1. 模板字符串

之前字符串的痛点写法:

本来是 let oli = “

  • kerwin
  • ”; 如果字符串中间换行,那么字符串会断开: 在这里插入图片描述
    只有加上 \ 才可以: 在这里插入图片描述
    标签中间的内容如果想要是可变的,还需要将kerwin 换成变量,使用字符串拼接的方法进行书写,这种写法实在是很麻烦,现在可以采用一种新方法。(反引号:Tab键)

    在这里插入图片描述
    数组中数据可以使用遍历来获取,也可以通过使用数组的map 映射方法来获取。

    在这里插入图片描述
    在这里插入图片描述
    数组上传到页面中会强行的转换成字符串的形式,数据会被 “,” 隔开;
    在这里插入图片描述
    可以写为newlist.join(“”) 利用空字符串连接

    1.1 ${} 使用

    1. ${ 变量 } 替换了之前字符串拼接方式(引引加加);
    2. ${ 表达式 }
      在这里插入图片描述
    3. ${ 函数 }
      在这里插入图片描述

    1.2 字符串扩展

    (1) ! includes() / startsWith() / endsWith()

    1. includes()
      – 判断字符串中是否存在指定字符(串)
      在这里插入图片描述
      // true
      在这里插入图片描述
      // false
      在这里插入图片描述
      // true
      表示从字符串的索引 1 处开始查找

    2. startsWith()
      在这里插入图片描述
      // true
      startsWith() 同时也可以添加参数,与includes() 函数参数表示含义相同。

    3. endsWith()
      在这里插入图片描述
      // true
      在这里插入图片描述
      // true
      注意:endsWith() 在该处的含义是w 之前的部分是不是以r 结尾的。

    (2) repeat()

    let myname = kerwin

    在这里插入图片描述
    // kerwinkerwin
    //
    // kerwinkerwin
    //

    2. 数值扩展

    2.1 二进制 八进制写法

    在这里插入图片描述

    2.2 ! Number.isFinite() / Number.isNaN()

    减少全局性方法,使得语言逐步模块化

    1. Number.isFinite()
      在这里插入图片描述
    2. Number.isNaN()
      在这里插入图片描述
      它们与传统的全局方法isFinite() 和isNaN() 的区别在于,传统方法先调用Number(0将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,Number.isFinite() 对于非数值一律返回false ,Number.isNaN() 只有对于NaN才返回true ,非NaN一律返回false 。

    2.3 inInteger()

    inInteger() – 判断是否是整数
    在这里插入图片描述

    2.4 ! 极小常量值Number.EPSILON

    它表示1与大于1的最小浮点数之间的差,2.220446049250313e-16。

    function isEqual(a,b){
    return Math.abs (a-b)<Number.EPSILON
    3
    console.log(isEqual(0.1+0.2,0.3))//true
    conso1e.1og(0.1+0.2===0.3)//fa1se
    

    2.5 Math.trunc()

    将小数抹掉,返回一个整数

    console.log(Math.trunc(1.2))//1
    console.log(Math.trunc(1.8))//1
    console.log(Math.trunc(-1.8))//-1
    console.log(Math.trunc (-1.2))//-1
    

    2.6 Math.sign()

    Math.sign 方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

    Math.sign(-100)//-1
    Math.sign(100)//+1
    Math.sign(0)//+0
    
    Math.sign(-0)//-0
    Math.sign("kerwin")/NaN
    

    3. 数组扩展

    3.1 扩展运算符

    之前复制数组写法:在这里插入图片描述
    … 展开符写法:
    在这里插入图片描述
    利用解构赋值和… 展开符复制数组(浅复制):
    在这里插入图片描述

    3.2 Array.from()

    之前所说的arguments 是类数组结构,不能使用filter() 等方法,但是现在可以使用Array.from() 将类数组结构转换成真数组,就可以使用相关数组方法来。
    在这里插入图片描述

    3.3 Array.of()

    可以将一组值转换成数组,
    在这里插入图片描述
    // [ ] (一个长度为3 的空数组)
    // [ 3 ]

    3.4 find() / findIndex()

    1. find() / findIndex() – 正着寻找
      在这里插入图片描述
      // 14
      // 3
    2. findLast() / findLastIndex()
      这两个方法在ES13出现。

    // 15
    // 4

    3.5 fill()

    在这里插入图片描述
    // [‘kerwin’,‘kerwin’,‘kerwin’]
    // [11,‘kerwin’,33]

    3.6 ! flat() / flatMap()

    在这里插入图片描述
    // [1,2,3,Array(3)] [1,2,3,4,5,6]

    数组数据为对象时使用flat() :
    在这里插入图片描述
    // {…}, {…}

    使用flatMap() :
    // [‘安庆’,‘安阳’,‘鞍山’,‘北京’,·‘保定’,‘包头’]

    4. 对象扩展

    4.1 对象简写

    1. 函数简写:
      在这里插入图片描述
      在这里插入图片描述

    在这里插入图片描述
    简写为
    let obj = {
    name,

    }

    4.2 对象属性 表达式

    在这里插入图片描述
    // {a: ‘kerwin’}
    [ ]也可以进行字符串拼接:[name+‘bc’]等

    4.3 扩展运算符 …

    对象扩展运算符 … ES9才出现
    在这里插入图片描述
    // {name: “tiechui”, age: “100”, }
    对象展开合并遇到同名属性后者回复该前者的属性值!

    4.4 Object.assign()

    在这里插入图片描述
    // {name: “tiechui”, age: “100”}

    此处与对象扩展符不同的是,对象扩展符例子中obj1 的name 属性值在对象合并展开时不会发生改变;而此处则会发生改变。

    如果不想要obj1 的属性值发生改变,可以使用以下方法:
    在这里插入图片描述

    4.5 Object.is()

    判断两个数是否相等

    1. 判断NaN 和NaN 是否相等
      之前使用== 和 === 判断NaN==/===NaN结果都为false ;
      在这里插入图片描述

    // true
    // false
    // false
    // true

    1. 判断+0 和-0 是否相等
      在这里插入图片描述
      // false
      // true

    5. 函数扩展

    5.1 参数默认值

    在这里插入图片描述
    // aaa get true
    // bbb get true

    5.2 rest 参数

    rest 参数 形式是“… 变量名”

    function test(data){
            console.log(data);
        }
        test(1, 2, 3, 4, 5)
    

    // 1

    function test(...data){
            console.log(data);
        }
        test(1, 2, 3, 4, 5)
    

    // Array(5)

    5.3 name 属性

    在这里插入图片描述
    // test

    5.4 ! 箭头函数

    箭头函数写法简洁!
    语法格式:
    在这里插入图片描述

    1. 函数{ }中只有return 语句,写法更加简洁:
      在这里插入图片描述
      在这里插入图片描述

    2. 如果返回对象时需要注意: 使用( ) 将返回的对象括起来
      在这里插入图片描述
      // {name:‘kerwin’,age:100}

    3. 只有一个参数可以省略( )
      在这里插入图片描述

    4. 无法访问arguments,无法new
      在这里插入图片描述

    5. !没有this(也有说法说是指向了它的父作用域)
      普通函数的痛点:
      在函数内部定义定时器,定时器中的this 指向window
      在这里插入图片描述
      // window
      // 发送undefined到后端,获取列表数据

    在这里插入图片描述
    使用箭头函数:
    在这里插入图片描述

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

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

相关文章

C++11 shared_from_this学习

最近学习网络变成发现一些C源码库中封装对象时会公有继承enable_shared_from_this&#xff1b; 用一个案例进行说明&#xff0c;案例代码如下&#xff1a; #include <iostream> #include <memory> #include <stdio.h>using namespace std;class C : public…

【NFS】NFS使用汇总

1. NFS介绍 NFS(Network File System)&#xff0c;网络文件系统&#xff0c;它可以让不同主机能够通过 TCP/IP 网络共享资源。它从宏观主体上简化来看&#xff0c;就是两部分&#xff1a;服务端和客户端。 服务端&#xff0c;可以认为它就是来存东西的&#xff0c;这个东西对…

jupyter 设置工作目录

本博客主要介绍&#xff1a; 如何为jupyter设置工作目录 1.打开 anaconda prompt , 执行 jupyter notebook --generate-config 执行这个命令后会生成一个配置文件 2. 打开jupyter_notebook_config.py文件编辑 搜索notebook_dir&#xff0c;把这行代码的注释取消&#xff0c;…

Pillow教程03:图像处理的基本步骤+分离split+合并merge+混合blend+composite遮罩

--------------Pillow教程集合--------------- Python项目18&#xff1a;使用Pillow模块&#xff0c;随机生成4位数的图片验证码 Python教程93&#xff1a;初识Pillow模块&#xff08;创建Image对象查看属性图片的保存与缩放&#xff09; Pillow教程02&#xff1a;图片的裁剪…

vue3使用富文本编辑器 Editor.js

一、安装 Editor.js npm i editorjs/editorjs --save 二、在页面中引入并使用 样式就不发了&#xff0c;自己按自己的来 三、转换语言&#xff0c;默认是英文 editor new EditorJS({holder: this.$refs.editor,// 自动聚焦autofocus: true,// 其他配置... tools: {},i18…

第十四届蓝桥杯第十题:蜗牛分享

问题描述 输入格式 输出格式 输出共一行&#xff0c;一个浮点数表示答案&#xff08;四舍五入保留两位小数&#xff09;。 样例输入 3 1 10 11 1 1 2 1样例输出 4.20样例说明 蜗牛路线&#xff1a;(0,0)→(1,0)→(1,1)→(10,1)→(10,0)→(11,0)(0,0)→(1,0)→(1,1)→(10,1…

浏览器工作原理与实践--栈空间和堆空间:数据是如何存储的

对于前端开发者来说&#xff0c;JavaScript的内存机制是一个不被经常提及的概念 &#xff0c;因此很容易被忽视。特别是一些非计算机专业的同学&#xff0c;对内存机制可能没有非常清晰的认识&#xff0c;甚至有些同学根本就不知道JavaScript的内存机制是什么。 但是如果你想成…

【aws】架构图工具推荐

碎碎念 以前以为日本冰箱论是个梗&#xff0c;结果居然是真的。用光盘传真其实还能理解&#xff08;毕竟我也喜欢电子古董2333&#xff09;&#xff0c;但是画架构图居然用的是excel&#xff0b;截图&#xff01;啊苍天呐&#xff0c;然后看到隔壁工位用excel画web原型又感觉释…

【力扣】300. 最长递增子序列(DFS+DP两种方法实现)

目录 题目传送最长递增子序列[DFS 方法]DFS方法思路图思路简述代码大家可以自行考虑有没有优化的方法 最长递增子序列[DP]方法DP方法思路图思路简述代码方案 题目传送 原题目链接 最长递增子序列[DFS 方法] DFS方法思路图 思路简述 对于序列中的每一个数字只有选择和不选择两…

Echarts地图之——如何给地图添加外边框轮廓

有时候我们希望给地图外围加一圈边框来增加美感 但实际情况中&#xff0c;我们需要把国界的边框和各个省份属于国界的边框相吻合&#xff0c;否则就会造成两者看起来是错位的感觉 这就需要我们把echarts registerMap的全国省份json和国界边框json的坐标相一致。 这个json我们可…

Java项目实战笔记--基于SpringBoot3.0开发仿12306高并发售票系统--(二)项目实现-第五篇-核心功能车票预定开发及nacos集成

本文参考自 Springboot3微服务实战12306高性能售票系统 - 慕课网 (imooc.com) 本文是仿12306项目实战第&#xff08;二&#xff09;章——项目实现 的第五篇&#xff0c;本篇讲解该项目的核心功能——余票查询、车票预定功能的基础版开发&#xff0c;以及讲解项目与Nacos的集成…

图的基础和图的遍历(--蓝桥云)

图的基础概念 度数&#xff1a;出边入边的条数 有向边&#xff1a;有箭头 图的存储方式 //邻接表 List<int []> list[N] list<x>//存放x的所有出点的信息 list[i][j]{first,second}//其中first表示从i出发的某个出点的编号&#xff08;这个出点是i的第j个出点&…

【Entity Framework】EF中DbSet类详解

【Entity Framework】EF中DbSet类详解 文章目录 【Entity Framework】EF中DbSet类详解一、概述二、定义DbSet2.1 具有DbSet属性的DbContext2.2 具有 IDbSet 属性的 DbContext 2.3 具有 IDbSet 属性的 DbContext三、DbSet属性四、DbSet方法五、DbContext动态生成DbSet 一、概述 …

【JavaSE】java刷题--数组练习

前言 本篇讲解了一些数组相关题目&#xff08;主要以代码的形式呈现&#xff09;&#xff0c;主要目的在于巩固数组相关知识。 上一篇 数组 讲解了一维数组和二维数组的基础知识~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎…

JavaEE 初阶篇-深入了解多线程安全问题(出现线程不安全的原因与解决线程不安全的方法)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 多线程安全问题概述 1.1 线程不安全的实际例子 2.0 出现线程不安全的原因 2.1 线程在系统中是随机调度且抢占式执行的模式 2.2 多个线程同时修改同一个变量 2.3 线…

C++基础之虚函数(十七)

一.什么是多态 多态是在有继承关系的类中&#xff0c;调用同一个指令&#xff08;函数&#xff09;&#xff0c;不同对象会有不同行为。 二.什么是虚函数 概念&#xff1a;首先虚函数是存在于类的成员函数中&#xff0c;通过virtual关键字修饰的成员函数叫虚函数。 性质&am…

c语言:用do-while输出前40项的斐波那契数值

求Fibonacci数列的前40个元素。该数列的特点是第1、2两个数为1、1。从第3个数开始&#xff0c;每数是其前两个数之和。 分析&#xff1a;从题意可以用如下等式来表示斐波那契数列&#xff1a; 1&#xff0c; 1&#xff0c; 2&#xff0c; 3&#xff0c; 5&#xff0c; 8&#x…

如何确保实物档案的安全

确保实物档案的安全有以下几个关键点&#xff1a; 1. 建立完善的安全措施&#xff1a;为实物档案建立专门的存储区域&#xff0c;控制进出口&#xff0c;限制访问权限&#xff0c;并使用安全锁和监控设备等物理安保措施。 2. 规范档案管理制度&#xff1a;建立档案管理制度&…

深度学习入门简单实现一个神经网络

实现一个三层神经网络 引言测试数据 代码 引言 今天我们实现一个简单的神经网络 俩个输入神经元 隐藏层两个神经元 一个输出神经元 激活函数我们使用sigmoid 优化方法使用梯度下降 我们前期准备是需要把这些神经元的关系理清楚 x1&#xff1a;第一个输入 x2&#xff1a;第二个…

Android ImageView 的scaleType 属性图解

目录 前言测试素材测试布局xmlscaleType前言 一、ScaleType.FIT_CENTER 默认二、ScaleType.FIT_START三、ScaleType.FIT_END四、ScaleType.FIT_XY五、ScaleType.CENTER六、ScaleType.CENTER_CROP七、ScaleType.CENTER_INSIDE八、ScaleType.MATRIX 前言 原文链接&#xff1a; A…