• ES6的内置对象扩展


    目录

    一、String的扩展方法

    1.模板字符串

     2. 实例方法:startsWith()和endsWith()

     3.实例方法:repeat()

    4. Set 数据结构

    1.实例方法

    2.遍历


     

    一、String的扩展方法

    1.模板字符串

    ES6新增的创建字符串的方式,使用反引号定义

    let name = `zhangsan`;
    • 模板字符串中可以解析变量
    1. let name = `张三`;
    2. let sayHello = `hello,my name is ${name}`; // hello,my name is zhangsan

     模板字符串可以直接将变量的数据解析出来(按照传统的方法,应该用+字符串拼接)

    1. <script type="text/javascript">
    2. let name = `张三`;
    3. let sayHello = `你好,我的名字是${name}`;
    4. console.log(sayHello); //你好,我的名字是张三
    5. </script>
    • 模板字符串可以换行(普通字符串是不能换行的,只能一行显示)
    1. let result = {
    2. name: 'zhangsan',
    3. age: 20,
    4. sex:'男'
    5. }
    6. let html = ` <div>
    7. <span>${result.name}</span>
    8. <span>${result.age}</span>
    9. <span>${result.sex}</span>
    10. </div>`'

     

    1. let result = {
    2. name: '张三',
    3. age: 20
    4. };
    5. let html = `
    6. <div>
    7. <span>${result.name}</span>
    8. <span>${result.age}</span>
    9. </div>
    10. `;
    11. console.log(html);

    • 在模板字符串中可以调用函数(在调用函数的位置将会显示函数执行后的返回值)
    1. const sayHello = function() {
    2. return '我没事就吃溜溜梅你别管我了';
    3. };
    4. let greet = `${sayHello()}嘻嘻嘻`;
    5. console.log(greet); //我没事就吃溜溜梅你别管我了嘻嘻嘻
    1. const fn = () => {
    2. return '我是fn函数';
    3. }
    4. let html = `我是模板字符串 ${fn()}`;
    5. console.log(html); //我是模板字符串 我是fn函数

     2. 实例方法:startsWith()和endsWith()

    • startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
    • endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值
    1. let str = `hello world!`;
    2. str.startsWith('hello'); //true
    3. str.endsWith('!'); //true

     3.实例方法:repeat()

    repeat方法表示将原字符串重复n次,返回一个新字符串

    1. 'x'.repeat(3); //"xxx"
    2. 'hello'.repeat(2); //"hellohello"

    4. Set 数据结构

    ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值

    可以用于商城的历史搜索数据的存放 

    Set本身是一个构造函数,用来生成Set数据结构

    const s = new Set();

    Set函数可以接受一个数组作为参数,用来初始化

    1. const set = new Set([1,2,3,4,4]);
    2. console.log(set); //[1,2,3,4]
    3. console.log(set.size); //4 size表示Set中元素的数量

    可以将Set数组通过扩展运算符转换成用“,”分隔的数组

    1. const s3 = new Set(['a','a','b','b']);
    2. const ary = [...s3];
    3. console.log(ary);
    1. console.log(set.size);
    2. const ary = [...set];
    3. console.log(ary); // [1,2,3,4]

    1.实例方法

    • add(value):添加某个值,返回Set结构本身
    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功
    • has(value):返回一个布尔值,表示该值是否为Set的成员
    • clear(value):清除所有成员,没有返回值
    1. const s = new Set();
    2. s.add(1).add(2).add(3); //向Set结构中添加值
    3. s.delete(2); //删除Set结构中的2值
    4. s.has(1); //表示Set结构中是否有1这个值,返回布尔值
    5. s.clear(); //清除Set结构中的所有值

     

    1. const s = new Set();
    2. s.add('a').add(1);
    3. //let r1 = s.delete('a');
    4. let r2 = s.has(1);
    5. console.log(r2);
    6. s.clear();
    7. console.log(s.size);

    2.遍历

    Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值

    s.forEach(value => console.log(value));
    1. const set = new Set(['a', 'b', 'c']);
    2. set.forEach((v) => {
    3. console.log(v);
    4. });

     

  • 相关阅读:
    基于Springboot+vue的玩具销售商城网站 elementui
    新手快速上手IDEA【常用快捷键】
    python+django网吧会员管理系统
    Linux虚拟机部署运行OSU Micro Benchmark
    langchain中的LLM模型使用介绍
    HTML+CSS+JS制作一个迅雷看看电影网页设计实例 ,排版整洁,内容丰富,主题鲜明,简单的网页制作期末作业
    一文读懂为什么需要跨链?跨链是什么?跨链实现技术?
    Spring Boot Admin,贼好使!
    coredump-X: 构造函数未作成员指针的初始化复合多线程导致
    linux centos7 docker 安装xxl-job-admin
  • 原文地址:https://blog.csdn.net/m0_45659764/article/details/125576485