ES6基础2

news/2024/5/30 3:17:51/文章来源:https://blog.csdn.net/g841805/article/details/136607049
  1. 字符串的扩展
    1. 字符的Unicode表示法
      1. ES6使用大括号表示法表示字符
        "\u{20BB7}"
        // "𠮷""\u{41}\u{42}\u{43}"
        // "ABC"let hello = 123;
        hell\u{6F} // 123'\u{1F680}' === '\uD83D\uDE80'
        // true
      2. JavaScript共有6种方法可以表示一个字符。个人感觉大括号表示法综合最好用。
        '\z' === 'z'  // true
        '\172' === 'z' // true
        '\x7A' === 'z' // true
        '\u007A' === 'z' // true
        '\u{7A}' === 'z' // true
    2. at()
      1. ES5对字符串对象提供charAt方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
        'abc'.charAt(0) // "a"
        '𠮷'.charAt(0) // "\uD842"
      2. 目前,有一个提案,提出字符串实例的at方法,可以识别Unicode编号大于0xFFFF的字符,返回正确的字符。
        'abc'.at(0) // "a"
        '𠮷'.at(0) // "𠮷"
    3. includes(), startsWith(), endsWith()
      1. 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
      2. includes():返回布尔值,表示是否找到了参数字符串。用法和indexOf方法类似
      3. startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
      4. endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
      5. 示例:
        var s = 'Hello world!';s.startsWith('Hello') // true
        s.endsWith('!') // true
        s.includes('o') // truevar t = 'Hello world!';
        t.includes('Hello', 6) // false
        t.startsWith('world', 6) // true
        t.endsWith('Hello', 5) // true
        
      6. 注意(searchString, position)
        //startsWith和includes:从前向后position索引从0开始可以包括position处信息//endsWith:从前向后position索引从0开始不包括position处信息
    4. repeat()
      1. repeat方法返回一个新字符串,表示将原字符串重复n次。
        'x'.repeat(3) // "xxx"
        'hello'.repeat(2) // "hellohello"
        'na'.repeat(0) // ""
      2. 参数如果是小数,会被取整。
        'na'.repeat(2.9) // "nana"
      3. 如果repeat的参数是负数或者Infinity,会报错。
        'na'.repeat(Infinity)
        // RangeError
        'na'.repeat(-1)
        // RangeError
      4. 但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0repeat视同为0。
        'na'.repeat(-0.9) // ""
      5. 参数NaN等同于0。
        'na'.repeat(NaN) // ""
      6. 如果repeat的参数是字符串,则会先转换成数字。

        'na'.repeat('na') // ""
        'na'.repeat('3') // "nanana"
    5. padStart(),padEnd()
      1. ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。
        'x'.padStart(5, 'ab') // 'ababx'
        'x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab'
        'x'.padEnd(4, 'ab') // 'xaba'
      2. 上面代码中,padStartpadEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

        'xxx'.padStart(2, 'ab') // 'xxx'
        'xxx'.padEnd(2, 'ab') // 'xxx'
      3. 如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

        'abc'.padStart(10, '0123456789')
        // '0123456abc'
      4. 如果省略第二个参数,则会用空格补全长度。

        'x'.padStart(4) // '   x'
        'x'.padEnd(4) // 'x   '
      5. padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

        '1'.padStart(10, '0') // "0000000001"
        '12'.padStart(10, '0') // "0000000012"
        '123456'.padStart(10, '0') // "0000123456"
      6. 另一个用途是提示字符串格式。

        '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
        '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
    6. 模板字符串
      1. 模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
        // 普通字符串
        `In JavaScript '\n' is a line-feed.`// 多行字符串
        `In JavaScript this isnot legal.`console.log(`string text line 1
        string text line 2`);// 字符串中嵌入变量
        var name = "Bob", time = "today";
        `Hello ${name}, how are you ${time}?`
      2. 上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
        义。var greeting = `\`Yo\` World!`;
      3. 模板字符串中嵌入变量,需要将变量名写在${}之中。
        function authorize(user, action) {if (!user.hasPrivilege(action)) {throw new Error(// 传统写法为// 'User '// + user.name// + ' is not authorized to do '// + action// + '.'`User ${user.name} is not authorized to do ${action}.`);}
        }

        大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。

        var x = 1;
        var y = 2;`${x} + ${y} = ${x + y}`
        // "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`
        // "1 + 4 = 5"var obj = {x: 1, y: 2};
        `${obj.x + obj.y}`
        // 3

        模板字符串之中还能调用函数。

        function fn() {return "Hello World";
        }`foo ${fn()} bar`
        // foo Hello World bar

    7. String.raw()
      1. String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。
        String.raw`Hi\n${2+3}!`;
        // "Hi\\n5!"String.raw`Hi\u000A!`;
        // 'Hi\\u000A!'
      2. 如果原字符串的斜杠已经转义,那么String.raw不会做任何处理。
        String.raw`Hi\\n`
        // "Hi\\n"
  2. 数组的扩展
    1. Array.from()
      1. Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
        let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3
        };// ES5的写法
        var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']// ES6的写法
        let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

        实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

        // NodeList对象
        let ps = document.querySelectorAll('p');
        Array.from(ps).forEach(function (p) {console.log(p);
        });// arguments对象
        function foo() {var args = Array.from(arguments);// ...
        }

        上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。

      2. 只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。
        Array.from('hello')
        // ['h', 'e', 'l', 'l', 'o']let namesSet = new Set(['a', 'b'])
        Array.from(namesSet) // ['a', 'b']
      3. 扩展运算符(...)也可以将某些数据结构转为数组。(不全面)
        // arguments对象
        function foo() {var args = [...arguments];
        }// NodeList对象
        [...document.querySelectorAll('div')]

        扩展运算符背后调用的是遍历器接口Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

      4. Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
        Array.from(arrayLike, x => x * x);
        // 等同于
        Array.from(arrayLike).map(x => x * x);Array.from([1, 2, 3], (x) => x * x)
        // [1, 4, 9]
      5. Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种Unicode字符,可以避免JavaScript将大于\uFFFF的Unicode字符,算作两个字符的bug。
        function countSymbols(string) {return Array.from(string).length;
        }
    2. Array.of()
      1. Array.of方法用于将一组值,转换为数组。
        Array.of(3, 11, 8) // [3,11,8]
        Array.of(3) // [3]
        Array.of(3).length // 1

        这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。

        Array() // []
        Array(3) // [, , ,]
        Array(3, 11, 8) // [3, 11, 8]

        上面代码中,Array方法没有参数一个参数三个参数时,返回结果都不一样。只有当参数个数不少于2个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。

        Array.of基本上可以用来替代Array()new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

    3. copyWithin()
      1. 数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
        Array.prototype.copyWithin(target, start = 0, end = this.length)

        它接受三个参数。

        1. target(必需):从该位置开始替换数据。

        2. start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。

        3. end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

        4. 这三个参数都应该是数值,如果不是,会自动转为数值。

          [1, 2, 3, 4, 5].copyWithin(0, 3)
          // [4, 5, 3, 4, 5]

          上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。下面是更多例子。

          // 将3号位复制到0号位
          [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
          // [4, 2, 3, 4, 5]// -2相当于3号位,-1相当于4号位
          [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
          // [4, 2, 3, 4, 5]// 将3号位复制到0号位
          [].copyWithin.call({length: 5, 3: 1}, 0, 3)
          // {0: 1, 3: 1, length: 5}// 将2号位到数组结束,复制到0号位
          var i32a = new Int32Array([1, 2, 3, 4, 5]);
          i32a.copyWithin(0, 2);
          // Int32Array [3, 4, 5, 4, 5]// 对于没有部署TypedArray的copyWithin方法的平台
          // 需要采用下面的写法
          [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
          // Int32Array [4, 2, 3, 4, 5]
    4. find()和findIndex()
      1. 数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
        [1, 5, 10, 15].find(function(value, index, arr) {return value > 9;
        }) // 10

        上面代码中,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。

      2. 数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
        [1, 5, 10, 15].findIndex(function(value, index, arr) {return value > 9;
        }) // 2
    5. fill()
      1. fill方法使用给定值,填充一个数组。
        ['a', 'b', 'c'].fill(7)
        // [7, 7, 7]new Array(3).fill(7)
        // [7, 7, 7]

        上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

        fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

        ['a', 'b', 'c'].fill(7, 1, 2)
        // ['a', 7, 'c']
    6. entries(),keys()和values()
      1. ES6提供三个新的方法——entries()keys()values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
        for (let index of ['a', 'b'].keys()) {console.log(index);
        }
        // 0
        // 1for (let elem of ['a', 'b'].values()) {console.log(elem);
        }
        // 'a'
        // 'b'for (let [index, elem] of ['a', 'b'].entries()) {console.log(index, elem);
        }
        // 0 "a"
        // 1 "b"

    7. includes()
      1. Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于ES7,但Babel转码器已经支持。
        [1, 2, 3].includes(2);     // true
        [1, 2, 3].includes(4);     // false
        [1, 2, NaN].includes(NaN); // true

        该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

        [1, 2, 3].includes(3, 3);  // false
        [1, 2, 3].includes(3, -1); // true

        没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相当运算符(===)进行判断,这会导致对NaN的误判。

    8. 空位
      1. 由于空位的处理规则非常不统一,所以建议避免出现空位。

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

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

相关文章

SpringAMQP创建交换机和队列

SpringAMQP提供的Exchange接口 一基于bean注解: 一.Fanout交换机 package com.itheima.consumer.config;import org.springframework.amqp.core.Binding; import org.springframework.amqp.core.BindingBuilder; import org.springframework.amqp.core.FanoutExchang…

汇编课设——秒表2

1. 设计要求 基于 51 开发板,利用键盘作为按键输入,将数码管作为显示输出,实现电子秒表。 功能要求: (1)计时精度达到百分之一秒; (2)能按键记录下5次时间并通过按键回看 (3)设置时间,实现倒计时,时间到,数码管闪烁 10 次,并激发蜂鸣器,可通过按键解除。 2. 设计思…

基于恒功率PQ控制的三电平并网逆变器MATLAB仿真模型

微❤关注“电气仔推送”获得资料(专享优惠) 模型简介 三相 T 型三电平逆变器电路如图所示,逆变器主回路由三个单相 T 型逆变器组成。 直流侧输入电压为 UPV,直流侧中点电位 O 设为零电位,交流侧输出侧是三相三线制连…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Select)

提供下拉选择菜单&#xff0c;可以让用户在多个选项之间选择。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Select(options: Array<SelectOption>) 参数&#xff1a;…

媒体单位专用小记者报名及各类活动报名系统介绍

媒体单位专用小记者报名及各类活动报名系统介绍 小记者活动鼓励孩子们关注生活和社会&#xff0c;丰富成长体验&#xff0c;开启心智&#xff0c;淬砺思想。这不仅有助于提高他们的理性思辨力&#xff0c;还能培养他们的社会责任感和公民意识。小记者活动为学生提供了一个全新…

docker ENTRYPOINT [“sh“,“-c“,“java“,“-jar“,“Hello.jar“] 启动失败问题分析

因为没系统的学过linux语法&#xff0c;所以才会产生如下疑问。大佬请跳过。 问题&#xff1a;当在dockerfile里面配置 ENTRYPOINT ["sh","-c","java","-jar","Hello.jar"] &#xff0c;启动对应容器时会无法正常运行&…

web项目的搭建

使用Webstorm并创建Next.js文件 1、配置nodejs环境、安装webstorm【配置node.js可以使用nvm去管理nodejs的版本】 2、需要破解webstorm&#xff0c;可能会导致原本的idea失效&#xff0c;注册码过期 3、taobao的npm过期&#xff0c;导致npm is sass执行不成功&#xff0c;需…

【leetcode热题】寻找旋转排序数组中的最小值 II

难度&#xff1a; 困难通过率&#xff1a; 38.7%题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转。 ( 例如&#xff0c;数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] )。 请找出其中最小的…

xss.pwnfunction.com靶机 Warmups

通关要求弹出警告框alert(1337) 没有用户交互 不能使用外链接 在chrome中测试 Ma Spaghet! 通过分析代码我们可以看到它直接用innerHTML将接收的内容赋值 但是我们不能使用<script>标签因为&#xff1a;HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。 所…

★【二叉搜索树】【修剪二叉搜素树】Leetcode 669. 修剪二叉搜索树

★【二叉搜索树】【修剪二叉搜素树】Leetcode 669. 修剪二叉搜索树 解法1 递归 反复做吧 ---------------&#x1f388;&#x1f388;669. 修剪二叉搜索树 题目链接&#x1f388;&#x1f388;------------------- 解法1 递归 反复做吧 /*** Definition for a binary tree no…

Python逆向:pyc字节码转py文件

一、 工具准备 反编译工具&#xff1a;pycdc.exe 十六进制编辑器&#xff1a;010editor 二、字节码文件转换 在CTF中&#xff0c;有时候会得到一串十六进制文件&#xff0c;通过010editor使用查看后&#xff0c;怀疑可能是python的字节码文件。 三、逆向反编译 将010editor得到…

Pytest测试中的临时目录与文件管理!

在Pytest测试框架中&#xff0c;使用临时目录与文件是一种有效的测试管理方式&#xff0c;它能够确保测试的独立性和可重复性。在本文中&#xff0c;我们将深入探讨如何在Pytest中利用临时目录与文件进行测试&#xff0c;并通过案例演示实际应用。 为什么需要临时目录与文件&a…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Stepper)

步骤导航器组件&#xff0c;适用于引导用户按照步骤完成任务的导航场景。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅能包含子组件StepperItem。 接口 Stepper(value?: { index?…

前端请求到 SpringMVC 的处理流程

1. 发起请求 客户端通过 HTTP 协议向服务器发起请求。 2. 前端控制器&#xff08;DispatcherServlet&#xff09; 这个请求会先到前端控制器 DispatcherServlet&#xff0c;它是整个流程的入口点&#xff0c;负责接收请求并将其分发给相应的处理器。 3. 处理器映射&#xf…

第十四届蓝桥杯蜗牛

蜗牛 线性dp 目录 蜗牛 线性dp 先求到达竹竿底部的状态转移方程 求蜗牛到达第i根竹竿的传送门入口的最短时间​编辑 题目链接&#xff1a;蓝桥杯2023年第十四届省赛真题-蜗牛 - C语言网 关键在于建立数组将竹竿上的每个状态量表示出来&#xff0c;并分析出状态转移方程 in…

三、HarmonyOS 应用开发入门之运行Hello World

目录 1、课程对象 1.1、有移动端开发经验 1.2、无移动端开发经验 1.3、对 HarmonyOS 感兴趣 2、DevEco Studio 的使用 2.1、DevEco Studio 的关键特性 智能代码编辑 低代码开发 多段双向实时预览 多端模拟仿真 2.2、安装配置 DevEco Studio 2.2.1、官网开发工具下载地…

光网络:SONET、SDH、DWDM的区别

SONET&#xff08;Synchronous Optical Network&#xff09;、SDH&#xff08;Synchronous Digital Hierarchy&#xff09;和DWDM&#xff08;Dense Wavelength Division Multiplexing&#xff09;都是在光纤通信领域中使用的关键技术。它们在提供高容量、高效率、可靠性等方面…

IO复用之select

目录 一.select方法介绍 2.1 select 系统调用的原型 2.2 集合的数据结构 2.2.1 fd_set 结构如下: 2.2.2 关于集合fd_set的解析 2.3 select第一个参数 2.4 select方法之超时时间timeout 2.5 select方法的用法简述及返回值 2.6 如何检测集合中有哪些描述符有事件就绪 三…

基于Yolo5模型的动态口罩佩戴识别安卓Android程序设计

禁止完全抄袭&#xff0c;引用注明出处。 下载地址 前排提醒&#xff1a;文件还没过CSDN审核&#xff0c;GitHub也没上传完毕&#xff0c;目前只有模型的.pt文件可以下载。我会尽快更新。 所使用.ptl文件 基于Yolo5的动态口罩佩戴识别模型的pt文件资源-CSDN文库 项目完整文…

(C语言)strcpy与strcpy详解,与模拟实现

目录 1. strcpy strcpy模拟实现&#xff1a; 实现方法1&#xff1a; 实现方法2&#xff1a; 2. strcat strcat模拟实现&#xff1a; 1. strcpy 作用&#xff1a;完成字符串的复制。 头文件&#xff1a;<string.h> destination是字符串要复制到的地点&#xff0c;s…