ES6的内置对象扩展

目录

一、String的扩展方法

1.模板字符串

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

 3.实例方法：repeat()

4. Set 数据结构

1.实例方法

2.遍历

---

 

一、String的扩展方法

1.模板字符串

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

let name = `zhangsan`;

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

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

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

<script type="text/javascript">
		let name = `张三`;
		let sayHello = `你好，我的名字是${name}`;
		console.log(sayHello);  //你好，我的名字是张三

	</script>

• 模板字符串可以换行（普通字符串是不能换行的，只能一行显示）

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

 

let result = {
			name: '张三',
			age: 20
		};
		let html = `
			<div>
				<span>${result.name}</span>
				<span>${result.age}</span>
			</div>
		`;
		console.log(html);

• 在模板字符串中可以调用函数（在调用函数的位置将会显示函数执行后的返回值）

const sayHello = function() {
    return '我没事就吃溜溜梅你别管我了';
};
let greet = `${sayHello()}嘻嘻嘻`;
console.log(greet); //我没事就吃溜溜梅你别管我了嘻嘻嘻

	const fn = () => {
			return '我是fn函数';
		}
		let html = `我是模板字符串 ${fn()}`;
		console.log(html);  //我是模板字符串 我是fn函数

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

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

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

 3.实例方法：repeat()

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

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

4. Set 数据结构

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

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

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

const s = new Set();

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

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

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

const s3 = new Set(['a','a','b','b']);
const ary = [...s3];
console.log(ary);

	console.log(set.size);
	const ary = [...set];
	console.log(ary); // [1,2,3,4]

1.实例方法

• add(value)：添加某个值，返回Set结构本身
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
• has(value)：返回一个布尔值，表示该值是否为Set的成员
• clear(value)：清除所有成员，没有返回值

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结构中的所有值

 

	const s = new Set();
	s.add('a').add(1);
	//let r1 = s.delete('a');
	let r2 = s.has(1);
	console.log(r2);
	s.clear();
	console.log(s.size);

2.遍历

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

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

	const set = new Set(['a', 'b', 'c']);
		set.forEach((v) => {
			console.log(v);
		});