JS高级之ES6的内置对象扩展

ES6的内置对象扩展

引言：本文主要讲的是ES6对数组Array和String字符类型的扩展方法。其中模板字符串是个重点，模板字符串的功能十分强大，用起来也很…爽。还有一个set函数，用来写数组去重功能不要太舒服，hahah

Array的扩展方法

扩展运算符（展开语法)

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

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

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

// 方法一   
let ary1 = [1, 2, 3];  
let ary2 = [3, 4, 5];  
let ary3 = [...ary1, ...ary2];  
// 方法二   
ary1.push(...ary2);

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

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

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

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

//定义一个集合 
let arrayLike = {     
    '0': 'a',     
    '1': 'b',     
    '2': 'c',     
    length: 3 
};  
//转成数组 
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理， 将处理后的值放入返回的数组。

let arrayLike = {       
    "0": 1,      
    "1": 2,      
    "length": 2  
};
let newAry = Array.from(arrayLike, item => item *2); //[2,4]
//注意：如果是对象，那么属性需要写对应的索引

实例方法：find()

用于找出第一个符合要求的数组成员，如果没有找到就返回undefined

let ary = [{      
	id: 1,      
	name: '张三'  
}, {       
	id: 2,      
	name: '李四'  
}];   
let target = ary.find((item, index) => item.id == 2); //找数组里面符合条件的值，当数组中元素id等于2的查找出来，注意：只会匹配第一个

实例方法：findIndex()

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

let ary = [1,2,15,32];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); //2 输出的是数组中值对应的索引号(位置)

实例方法：includes()

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

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

String的扩展方法

模板字符串(``)

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

let name = `Lindan`;

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

let name = 'superdan';
let sayHello = `Yeah,I am ${name}.`;//Yeah,I am superdan.

模板字符串中可以换行

let result = {       
    name: 'zhangsan',       
    age: 20,      
    sex: '男'   
}   
let html = ` 
      
	${result.name}     
	${result.age}     
	${result.sex}  
	
 `;

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

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

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

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

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

let str = 'Hello world!'; 
str.startsWith('Hello') // true  
str.endsWith('!')       // true

实例方法：repeat()

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

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

Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();

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

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

实例方法

-add(value)：清除所有成员，没有返回值：添加某个值，返回 Set 结构本身

-delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

-has(value)：清除所有成员，没有返回值：返回一个布尔值，表示该值是否为 Set 的成员

-clear()：清除所有成员，没有返回值：清除所有成员，没有返回值

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

遍历

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

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

扩展：数组去重

<script>
        var arr = [10, 11, 12, 12, 11, 25, 54, 10, 32, 22, 54];
        function unique(arr) {
            // if (!Array.isArray(arr)) {
            //     console.log('type error!')
            //     return
            // }
            return [...new Set(arr)];
        }
        console.log(unique(arr));
    </script>

就是一句代码搞定，是不是很香。