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 = ` <div>

        <span>${result.name}</span>

        <span>${result.age}</span>

        <span>${result.sex}</span>

 </div> `;

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"));