ES6内置对象

ES6 的内置对象

1.Array的扩展方法

1.1扩展运算符

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

let arr = [1,2,3];
...arr   //1,2,3
console.log(...arr);   /相当于console.log(1,2,3)

扩展运算符应用于合并数组

//方法1
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
//方法2
arr1.push(...arr2);

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

let divs = document.getElementsByTagName('div');
divs = [...divs];

1.2构造函数方法Array.from()

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

//定义一个对象
let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
}
//转换为数组
let arr = Array.from(arrayLike);// ['a','b','c']
//------------------------------------------------
//方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
let arrLike = {
    '0':1,
    '1':2,
     "length":2
}
let arr = Array.from(arrLike,item => item*3) //[3,6]

类数组的习题

var obj = {
            '0': 'a',
            '1': 'b',
            length: 2,
            'push': Array.prototype.push
        }
        obj.push('c');
        obj.push('d');
        console.log(obj)
//{0: "a", 1: "b", 2: "c", 3: "d", length: 4, push: ƒ}
//--------------------------------------------
//2.
var obj ={
    '2':'a',
    '3':'b',
    length :2,
    'push':Array.prototype.push
}
obj.push('c');
obj.push('d');
//console.log(obj)
//{2: "c", 3: "d", length: 4, push: ƒ}
//--------------------------------------------
//3.
var obj = {
    '1':'a',
    '2':'b',
    '3':'c',
    length:3,
    push:Array.prototype.push
}
obj.push('m');
console.log(obj);
//{1: "a", 2: "b", 3: "m", length: 4, push: ƒ}
//---------------------------------------------
 var obj = {
            '0': 'a',
            '1': 'b',
            length: 5,
            'push': Array.prototype.push
        }
        obj.push('c');
        obj.push('d');
        console.log(obj)
//{0: "a", 1: "b", 5: "c", 6: "d", length: 7, push: ƒ}

总结:类数组添加数据是从数组长度的位置开始添加数据

1.3实例方法:find()

用于找到第一个符合条件的数组成员,如果没有,就返回undefined

let arr=[{
    id:1,
    name:'zs'
},{
    id:2,
    name:'ls'
}];
let target = arr.find((item,indx) => item.id ==2);//找数组里面符合条件的值,当数组中元素id等于2就查找出来,只会匹配第一个

1.4实例方法:findIndex()

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

let arr = [1,3,5,7,9];
let index = arr.findIndex((value,index) => value > 5);
console.log(index);//3

1.5实例方法:includes()

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

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

2.String 的扩展方法

模板字符串

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

let name = `zhangsan`;

模板字符串中可以解析变量

let name = '张三'; 
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行

 let result = { 
     name: 'zhangsan', 
     age: 20,
     sex: '男' 
 } 
 let html = ` <div>
     <span>${result.name}</span>
     <span>${result.age}</span>
     <span>${result.sex}</span>
 </div> `;

在模板字符串中可以调用函数

const sayHello = function () { 
    return '哈哈哈哈 追不到我吧 我就是这么强大';
 }; 
 let greet = `${sayHello()} 哈哈哈哈`;
 console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

实例方法：startsWith() 和 endsWith()

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

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

let str = 'hello world!';
str.startWith('hell0');//true
str.endsWith('!');//true

实例方法:repeat()

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

'x'.repeat(5);//'xxxxx'
'hello'.repeat(2);//'hellohello'

3.Set数据解构

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

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

const s = new Set()

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

const set = new Set([1,2,3,4,5,5,5,5]);//{1,2,3,4,5}

实例方法

1.add(value):添加某个值,返回Set结构本身;

2.delete(value):删除某个值,返回一个布尔值,表示删除是否成功;

3has(value):返回一个布尔值,表示该值是否为Set的成员;

4.clear():清除所有成员,没有返回值;

const s = new Set();
s.add(1).add(2).add(3); //向数据结构中添加值
s.delete(2);            //删除set结构中的2
s.has(1);               //表示set结构中是否有1这个值,返回布尔值
s.clear();              //清除set结构中的所有值
//删除的是元素的值,不代表的索引

遍历

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

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

转载：https://blog.csdn.net/weixin_44976833/article/details/101905896