字符串新增方法

includes()

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

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

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

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

padStart() 和 padEnd()

在字符串开头或结尾补充字符串，得到一个指定长度的新字符串。

const str1 = 'x'.padStart(5, 'ab');  // ababx
const str1 = 'x'.padEnd(5, 'ab');    // xabab
const str1 = 'x'.padEnd(4, 'ab');    // xaba

原字符串的长度，等于或大于最大长度，不会消减原字符串，字符串补全不生效，返回原字符串。

const str = 'xxx'.padStart(2, 'ab');  // xxx

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

const str1 = 'x'.padEnd(3);  // "x  "

trimStart() 和 trimEnd()

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

const s = '  a b c  ';

// 清左边空格
const str1 = s.trimStart();
const str1 = s.trimLeft();

// 清右边空格
const str1 = s.trimStart();
const str1 = s.trimRight();

// 清两边空格
const str1 = s.trim();

数组新增方法

includes()

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

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

第二个参数表示搜索的起始位置，默认值是 0。

console.log([1, 2, 3].includes(2, 2)); // false

基本遵循严格相等 ===，对于 NaN 的判断不同。

console.log(NaN === NaN); // false
console.log([1, 2, NaN].includes(NaN)); // true

Array.from()

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

const arr = Array.from('str');  // ['s', 't', 'r']

哪些可以通过 Array.from() 转换成数组。

// 1.所有可遍历的
数组、字符串、Set、Map、NodeList、arguments
console.log(Array.from(new Set([1, 2, 1])));
console.log([...new Set([1, 2, 1])]);

// 2.拥有 length 属性的任意对象
const obj = {
  '0': 'a',
  '1': 'b',
  name: 'Alex',
  length: 3
};
console.log(Array.from(obj));  // ['a', 'b', undefined]

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

let arr1 = Array.from('12', value => value * 2);  // [2, 4]

// 相当于
let arr2 = Array.from('12')
  .map(value => value * 2)；

第三个参数，用来修改回调函数的 this 指向。

Array.from(
  '12',
  value => {
    console.log(this);  // Window
  },
  document
);

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

find() 和 findIndex()

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

[1, 5, 10, 15].find((value, index, arr) => {
    // console.log(value, index, arr);
    console.log(this);
    return value > 9;
}, document)
// 10

[1, 5, 10, 15].findIndex((value, index, arr) => {
    // console.log(value, index, arr);
    return value > 9;
}, document)
// 2

对象新增方法

Object.assign()

用来合并对象。

 Object.assign(目标对象, 源对象1, 源对象2, ...)

这里有点像之前介绍的展开运算符合并对象类似，不同点是：

• Object.assign() 不产生新对象，是把后面对象参数的属性合并到第一个对象参数中。
• 展开运算符合并对象会产生一个新对象。

const apple = {
  color: '红色',
  shape: '圆形',
  taste: '甜'
};

const pen = {
  color: '黑色',
  shape: '圆柱形',
  use: '写字'
};

// 展开运算符合并，产生了新对象
const applePen = { ...apple, ...pen };

// Object.assign 直接合并到了第一个参数中，返回的就是合并后的对象
console.log(Object.assign(apple, pen) === apple);  // true

// 可以合并多个对象
const newObj = Object.assign({}, apple, pen);

基本数据类型作为源对象，与对象的展开类似，先转换成对象，再合并。

// 得到的都是空对象 {}
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'}

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

与数组类似方法的区别。

• 数组的 keys()、values()、entries() 等方法是实例方法，返回的都是 Iterator。
• 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法，返回的是数组。

const person = {
  name: 'Alex',
  age: 18
};

const keys = Object.keys(person);  // ['name', 'age']
const values = Object.values(person);  // ['Alex', 18]
const entries = Object.entries(person);  // [['name', 'age'], ['Alex', 18]]


for (const key of Object.keys(person)) {
  console.log(key);
}

for (const value of Object.values(person)) {
  console.log(value);
}

for (const entries of Object.entries(person)) {
  console.log(entries);
}

for (const [key, value] of Object.entries(person)) {
  console.log(key, value);
}