• ES6——ES6内置对象


    文章目录

    • 前言
    • 一、array 的扩展方法。
      • 1.  展开语法
      • 2.  Array.from()方法
      • 3.  array.find() 方法
      • 4. array.findindex()方法
      • 5. array.includes()方法
    • 二、String的扩展方法
      • 1. 模板字符串定义
      • 2. 模板字符串解析变量
      • 3.  startsWith()、endsWith()
      • 4.  repeat( )
    • 三、Set  Map 数据结构
      • 1. Set  数据结构
      • 2. Map 数据结构
    • 四、 DOM classList 属性
      • 1. add(class1,class2)
      • 2. contains(class)
      • 3. item(index)
      • 4. remove(class1,class2)
      • 5. toggle(*class,* true\|false)


    一、array 的扩展方法。

    1.  展开语法

    ...扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

    举例1:

    let ary = [1, 2, 3];

    console.log(...ary);    // 1 2 3,相当于下面的代码

    console.log(1,2,3);

    举例2:

    合并数组

    let arr1 = [1, 2, 3];

    let arr2 = [4,5,6];

    // let arr3 = [...arr1,...arr2];

     arr1.push(...arr2);

     console.log(arr1);

    举例3:

    类数组转为数组

    let eledivs = document.getElementsByTagName('div');

    eledivs = [...eledivs];//Array.prototype.slice.call(eledivs);


    2.  Array.from()方法——方法名为大写,意为Array 的属性

    将伪数组或可遍历对象转换为真正的数组。

    举例1:

    Array.from('12345') // [1,2,3,4,5]

    举例2:

    let  arr1 = {

                1:'a',

                2:'b',

                'length':3

    }

    console.log(Array.from(arr1));//undefined ,a,b.

    3.  array.find() 方法——写法为小写,意为当前数组的方法

    find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

    举例1

      let arr1 = [1,2,3,2];

    let target = arr1.find( item => item==2);

    console.log(target);//2,如果未找到,返回undefined

    举例2

    let person = [

                            {name:"张三",age:16},

                            {name:"李四",age:17},

                            {name:"王五",age:18},

                    ]

    let target = person.find((item,index)=>{return item.name=='张三'});

    console.log(target.name);

    4.  array.findindex()方法

    定义:用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1。

    举例1:

    let ary = [1, 5, 10, 15];

    let index = ary.findIndex((item, index) => item > 9);

    console.log(index); // 2

    5. array.includes()方法

    定义:判断某个数组是否包含给定的值,返回布尔值。

    举例1:

    let ary = [1, 5, 10, 15];

    console.log(ary.includes(5));//true


    二、String的扩展方法

    1. 模板字符串定义

    ES6新增的创建字符串的方式,使用反引号定义 let name = `张三`;

    2. 模板字符串解析变量

    -- 反引号定义模板

    let name = '张三';

    let sayHello = `hello,my name is ${name}`; // hello, my name is Lee

    -- 模板字符串换行

    let result = {

                         name: '张三',

                         age: 28,

                         sex: '男'

     }

    let html = `

            ${result.name}

            ${result.age}

            ${result.sex}

     

    `;

    console.log(html);

    -- 模板字符串中调用函数

    const sayName = function () {

        return '张三';

     };

     let greet = `${sayName('张三')} ,你好!`;

     console.log(greet);

    3.  startsWith()、endsWith()

    - startsWith():表示参数字符串是否在原字符串的头部,返回布尔值

    - endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值

    举例1:

    let str = 'Hello world!';

    str.startsWith('Hello'); // true

    str.endsWith('!');       // true

    str.endsWith('xx');       // false

    4.  repeat( )

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

    举例:

    console.log('hello'.repeat(2));//hellohello

    三、Set  Map 数据结构

    1. Set  数据结构

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

    定义:   const s = new Set();

    初始化:const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4};

    数据遍历:forEach方法,用于对每个成员执行某种操作,没有返回值。

    s.forEach( v => console.log(v));

    举例:

    const s = new Set();

    s.add(1).add(2);//添加值

    s.delete(2);//删除值,不是索引

    console.log(s.has(2));//set有无2,有返回true

    console.log(s.clear());//清除所有的值

    2. Map 数据结构

    JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制,map的键不限于字符串,对象也可以称为键。是一组一组的key valued 的值。 

    举例:

    let info = {age:18,height:173};

                            let person  = new Map();

                            person.set(info,'人的详细信息');

                            person.set('name','张三');  //添加值

                            console.log(person.get("name")); //得到值

                            console.log(person.size);//获得map的个数

                            person.delete('name');//删除元素

                            console.log(person.size);

                            console.log(person.get(info));//对象作为键

                            //person.clear();//清空所有的值

                            console.log(person);

    Person.keys()//获得所有的键

    Person.values()//获得所有的值

    Person.size//获得键的数量


    四、 DOM classList 属性

    1. add(class1,class2)

    添加一个类,如果类不存在则不添加。

    document.getElementById("mydiv").classList.add("demodiv","demodiv1");

    2. contains(class)

    判断元素中是否存在某个类。存在返回true,反之返回false。

    let x = document.getElementById("mydiv").classList.contains("demodiv");

    console.log(x);

    3. item(index)

    返回元素中索引值对应的类名。索引值从 0 开始。  如果索引值在区间范围外则返回 *null*

    document.getElementById("mydiv").classList.item(0);

    4. remove(class1,class2)

    移除元素中一个或多个类名,移除不存在的类名,不会报错。

    let mydom = document.getElementById("mydiv");

    mydom.classList.add("demodiv");

    console.log(mydom.classList.contains("demodiv")); // true

    mydom.classList.remove("demodiv");

    console.log(mydom.classList.contains("demodiv"));//false

    5. toggle(*class,* true\|false)

    在元素中切换类名。  第一个参数为要在元素中移除的类名,并返回 false。  如果该类名不存在则会在元素中添加类名,并返回 true。   第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。

    let mydom = document.getElementById("mydiv");

    mydom.classList.toggle("demodiv");

    console.log(mydom.classList.contains("demodiv"));

    mydom.classList.toggle("demodiv");

    console.log(mydom.classList.contains("demodiv"));

  • 相关阅读:
    Excel-lookup函数核对两个表格的数据匹配
    玩转微服务-GateWay
    如何帮助企业优化Office管理
    即时零售业态下如何实现自动做账?
    Chapter 函数
    Apache网页优化
    Linux命令行ssh远程登录携带密码的方法
    Ray tracing 光线追踪 之 embree ,从入门到精通 01 安装与体验
    将 JavaScript 源文件的全部内容包装在立即调用的函数中的原因是什么?
    Android kotlin内联函数(inline)的详解与原理
  • 原文地址:https://blog.csdn.net/Bonsoir777/article/details/126749879