ES6 的新增方法

字符串的新增方法

includes()

判断字符串中是否含有某些字符

1. 基本用法

console.log('abc'.includes('a'));		// true
console.log('abc'.includes('ab'));		// true
console.log('abc'.includes('ac'));		// false

2. 第二个参数
   表示开始搜索的位置，默认是 0

console.log('abc'.includes('a'));		// true
console.log('abc'.includes('a', 0));	// true
console.log('abc'.includes('a', 1));	// false

3. 应用

let url = 'https://www.imooc.com/course/list';
const addUrlParam = (url, name, value) => {
	url += url.includes('?') ? '&' : '?';
	url += `${name}=${value}`;
	return url;
}
url = addUrlParam(url, 'c', 'fe');
console.log(url);

padStart() 和 padEnd()

补全字符串长度

1. 基本用法

console.log('x'.padStart(5, 'ab'));			// ababx
console.log('x'.padEnd(5, 'ab'));			// xabab
console.log('x'.padEnd(4, 'ab'));			// xaba

2. 注意事项
   原字符串的长度，等于或大于最大长度，不会消减原字符串，字符串补全不生效，返回原字符串

console.log('xxx'.padStart(2, 'ab'));		// xxx
console.log('xxx'.padEnd(2, 'ab'));			// xxx

用来补全的字符串与原字符串长度之和超过了最大长度，截去超出位数的补全字符串，原字符串不动

console.log('abc'.padStart(10, '0123456789'));		// 0123456abc
console.log('abc'.padEnd(10, '0123456789'));		// abc0123456

如果省略第二个参数，默认使用空格补全长度

console.log('x'.padStart(4));		//    x
console.log('x'.padEnd(4));			// x   

3. 应用
   显示日期格式

console.log('10'.padStart(2, 0));
console.log('01'.padStart(2, 0));

trimStart() 和 trimEnd()

清除字符串的首或尾的空格，中间的空格不会清除

1. 基本用法

const s = '  a b c  ';
console.log(s.trimStart());		// 去除字符串首部的空格
console.log(s.trimEnd());		// 去除字符串尾部的空格
console.log(s.trim());			// 去除首部和尾部的空格

别名
trimStart() => trimLeft()
trimEnd() => trimRight()

2. 应用
   表单提交时的过滤操作

数组的新增方法

includes()

判断数组中是否含有某个成员

console.log([1, 2, 3].oncludes('2'));	// false
console.log([1, 2, 3].oncludes(2));		// true

基本遵循严格相等(===) ，但是对于 NaN 的判断与 === 不同， includes 认为 NaN === NaN

console.log([1, 2, NaN].includes(NaN));

2. 应用
   去重

const arr = [];
for (const item of [1, 2, 1]) {
	if (!arr.includes(item)) {
		arr.push(item);
	}
}
console.log(arr);

Array.from()

将其他数据类型转换成数组

1. 基本用法

console.log(Array.from('str'));

2. 哪些可以通过 Array.from() 转换成数组
   2.1 所有可遍历的
   数组、字符串、Set、Map、NodeList、arguments
   2.2 拥有 length 属性的任意对象

const obj = {
	'0': 'a',
	'1': 'b',
	name: 'tom',
	length: 3
}
console.log(Array.from(obj));	// {"a", "b", undefined}

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

// map 方法
console.log([1, 2].map(value => 2 * value));
// Array.from() 的第二个参数
console.log(Array.from('12', value => 2 * value));
// map 方法
console.log(Array.from('12').map(value => 2 * value))

4. 第三个参数
   修改第二个参数的 this 指向

Array.from('12', function () {
	console.log(this);
}, document);

find() 和 findIndex()

find()：找到满足条件的一个立即返回
findIndex()：找到满足条件的一个，立即返回其索引

console.log([1, 5, 10, 15].find(function (value, index, arr) {	// 值，索引，原数组
	return value > 9;
}), document);		// document 是第二个参数的函数 this 指向		// 9
console.log([1, 5, 10, 15].findIndex(function (value, index, arr) {		// 值，索引，原数组
	return value > 9;
}), document);		// document 是第二个参数的函数 this 指向		// 2

2. 应用

const students = [
	{
		name: '张三',
		sex: '男',
		age: 16
	},
	{
		name: '李四',
		sex: '女',
		age: 22
	},
	{
		name: '王二',
		sex: '男',
		age: 32
	}
];
console.log(students.find(value => value.sex === '女'));
console.log(students.findIndex(value => value.sex === '女'));

对象的新增方法

Object.assign()

1. 基本用法
   Object.assign(目标对象, 源对象1, 源对象2,…)
   Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象

const app = {
	color: '红色',
	shape: '圆形',
	taste: '甜'
}
const pen = {
	color: '黑色',
	shape: '圆柱形',
	use: '写字'
}
// 因为第一个对象会被修改，所以我们通常用这种方法来合并
console.log({}, apple, pen);

2. 注意事项
   2.1 基本数据类型作为源对象
   与对象的展开类似，先转换为对象，再合并

console.log(Object.assign({}, undefined));		// {}
console.log(Object.assign({}, null));			// {}
console.log(Object.assign({}, 1));				// {}
console.log(Object.assign({}, true));			// {}
console.log(Object.assign({}, 'str'));			// {0: "s", 1: "t", 2: "r"}

2.2 同名属性的替换
后面的直接覆盖前面的

3. 应用
   合并默认参数和用户参数

const logUser = userOptions => {
	const DEFALUTS = {
		username: 'ZhangSan',
		age: 0,
		sex: 'male'
	}
	const options = Object.assign({}, DEFAULTS, userOptions);
	console.log(options);
}
logUser({username: 'LiLin'});

Object.keys()、Object.values() 和 Object.entries()

1. 基本用法

const person = {
	name: 'Tom',
	age: 18
}
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

2. 与数组类似方法的区别
   数组的 keys()、values() 、entries() 等方法是实例方法，返回的都是 Iterator
   对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数的方法，返回的是数组

// 数组的方法
console.log([1, 2].keys());
console.log([1, 2].values());
console.log([1, 2].entries());

3. 使用 for…of 循环遍历对象

const person = {
	name: 'Tom',
	age: 18
}
for (const key of Object.keys(person)) {
	console.log(key);
}
for (const value of Object.values(person)) {
	console.log(value);
}
for (const [key, value] of Object.entries(person)) {
	console.log(key, value);
}

Object.keys|()/values()/entries() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的