字符串的新增方法

includes 判斷字符串中是否含有某些字符

（1）基本用法

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

（2）參數(shù)

/*
第一個(gè)參數(shù)，必需，要查找的字符串痒筒。
第二個(gè)參數(shù)啃奴，可選淆衷，設(shè)置從那個(gè)位置開始查找调煎，默認(rèn)為 0
*/
console.log('abc'.includes('a'));  //true
console.log('abc'.includes('a', 0)); //true
console.log('abc'.includes('a', 1)); // false

（3）應(yīng)用 拼接url地址

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);
    url = addURLParam(url, 'sort', 'pop');
    console.log(url);

padStart和padEnd 補(bǔ)全字符串

（1）基本用法

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

（2）注意事項(xiàng)
原字符串的長(zhǎng)度五慈，等于或大于最大長(zhǎng)度蔫磨，不會(huì)消減原字符串淘讥，字符串補(bǔ)全不生效，返回原字符串

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

用來(lái)補(bǔ)全的字符串與原字符串長(zhǎng)度之和超過(guò)了最大長(zhǎng)度堤如，截去超出位數(shù)的補(bǔ)全字符串蒲列，原字符串不動(dòng)

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

如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長(zhǎng)度

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

（3）應(yīng)用
padStart 顯示日期

 // 2020-10-10
console.log('10'.padStart(2, 0)); // 10
console.log('1'.padStart(2, 0)); // 01

trimStart和trimEnd方法搀罢，清除字符串的首或尾空格蝗岖，中間的空格不會(huì)清除

（1）基本用法

const s = '  a b c  ';
console.log(s.trimStart());
console.log(s.trimLeft());
console.log(s.trimEnd());
console.log(s.trimRight());

（2）應(yīng)用: 提交數(shù)據(jù)時(shí)，去掉首尾空格

<input type="text" id="username" />
<input type="submit" value="提交" id="btn" />
<script>
const usernameInput = document.getElementById('username');
const btn = document.getElementById('btn');
btn.addEventListener(
  'click',
  () => {
    console.log(usernameInput.value);
    // 驗(yàn)證
    console.log(usernameInput.value.trim());
    if (usernameInput.value.trim() !== '') {
      // 可以提交
      console.log('可以提交');
    } else {
      // 不能提交
      console.log('不能提交');
    }
    // 手動(dòng)提交
  },
  false
);
</script>

數(shù)組的新增方法

includes 判斷數(shù)組中是否含有某個(gè)成員

（1）基本用法

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

（2）參數(shù)

  /*
第一個(gè)參數(shù)榔至，必須抵赢，需要查找的元素值。
第二個(gè)參數(shù)，可選瓣俯，從該索引處開始查找 searchElement杰标。如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開始搜索彩匕。默認(rèn)為 0腔剂。
*/
console.log([1, 2, 3].includes(2, 2)); // false
console.log([1, 2, 3].includes(2, -2)); //true
console.log([1, 2, 3].includes(3)); // false

（3）注意事項(xiàng)：基本遵循嚴(yán)格相等（===）,但是對(duì)于 NaN 的判斷與 === 不同，includes 認(rèn)為 NaN === NaN

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

（4）應(yīng)用 數(shù)組去重

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

Array.from 將其他數(shù)據(jù)類型轉(zhuǎn)換成數(shù)組

（1）基本用法

console.log(Array.from('str')); //  ["s", "t", "r"]

（2）可以通過(guò) Array.from() 轉(zhuǎn)換成數(shù)組

所有可遍歷的 數(shù)組驼仪、字符串掸犬、Set、Map绪爸、NodeList湾碎、arguments

console.log(Array.from(new Set([1, 2, 1]))); //  [1, 2]
// 等價(jià)于
console.log([...new Set([1, 2, 1])]);

擁有 length 屬性的任意對(duì)象

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

（3）參數(shù)

// 3.第二個(gè)參數(shù) : 數(shù)組中每個(gè)元素要調(diào)用的函數(shù)
// 作用類似于數(shù)組的 map 方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理奠货，將處理后的值放入返回的數(shù)組
console.log(
[1, 2].map(value => {
  return value * 2;
})
);
console.log(Array.from('12', value => value * 2));
console.log(Array.from('12').map(value => value * 2));
// 4.第三個(gè)參數(shù) 映射函數(shù)(mapFunction)中的 this 對(duì)象
Array.from(
'12',
value => {
console.log(this);
},
document
);
Array.from(
'12',
function () {
console.log(this);
},
document
);

find()：找到滿足條件的一個(gè)立即返回值

findIndex()：找到滿足條件的一個(gè)介褥，立即返回其索引

（1）參數(shù)

參數(shù)  描述
function(currentValue, index,arr)   必須。數(shù)組每個(gè)元素需要執(zhí)行的函數(shù)递惋。
1柔滔、currentValue 必需，當(dāng)前元素萍虽。
2睛廊、index，可選杉编，當(dāng)前元素的索引超全。
3、arr邓馒，可選嘶朱。當(dāng)前元素所屬的數(shù)組對(duì)象
thisValue   可選。 傳遞給函數(shù)的值一般用 "this" 值绒净。如果這個(gè)參數(shù)為空见咒， "undefined" 會(huì)傳遞給 "this" 值

（2）代碼示例

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

（3）應(yīng)用 從獲取到數(shù)據(jù)中篩選數(shù)據(jù)

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 === '女'));

3、對(duì)象的新增方法

Object.assign 合并對(duì)象挂疆，相當(dāng)于將后面的對(duì)象合并到第一個(gè)對(duì)象中
（1）基本使用

// Object.assign(目標(biāo)對(duì)象, 源對(duì)象1,源對(duì)象2,...): 目標(biāo)對(duì)象

    const apple = {
      color: '紅色',
      shape: '圓形',
      taste: '甜'
    };
    const pen = {
      color: '黑色',
      shape: '圓柱形',
      use: '寫字'
    };
    console.log(Object.assign(apple, pen));
    // console.log(Object.assign(apple, pen) === apple); true

（2）注意事項(xiàng)
基本數(shù)據(jù)類型作為源對(duì)象 與對(duì)象的展開類似改览，先轉(zhuǎn)換成對(duì)象，再合并

  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'));

同名屬性的替換 , 后面的直接覆蓋前面的

const apple = {
    color: ['紅色', '黃色'],
    shape: '圓形',
    taste: '甜'
  };
  const pen = {
    color: ['黑色', '銀色'],
    shape: '圓柱形',
    use: '寫字'
  };
  console.log(Object.assign({}, apple, pen));

（3）應(yīng)用 合并默認(rèn)參數(shù)和用戶參數(shù)

    const logUser = userOptions => {
    const DEFAULTS = {
      username: 'ZhangSan',
      age: 0,
      sex: 'male'
    };

    const options = Object.assign({}, DEFAULTS, userOptions);
    // const options = Object.assign({}, DEFAULTS, undefined);
    console.log(options);
  };
  logUser();
  // logUser({});
  // logUser({ username: 'Alex' });

Object.keys 獲取對(duì)象中屬性名的集合
Object.value 獲取對(duì)象中屬性值值的集合
Object.entries 獲取對(duì)象中屬性和值的集合
（1）基本用戶

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

（2）與數(shù)組類似方法的區(qū)別
數(shù)組的 keys()缤言、values()宝当、entries() 等方法是實(shí)例方法，返回的都是 Iterator
對(duì)象的 Object.keys()胆萧、Object.values()庆揩、Object.entries() 等方法是構(gòu)造函數(shù)方法俐东，返回的是數(shù)組

const person = {
        name: 'Alex',
        age: 18
    };
    console.log([1, 2].keys());
    console.log([1, 2].values());
    console.log([1, 2].entries());
    console.log(person.keys);

（2）使用 for...of 循環(huán)遍歷對(duì)象

  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);
    }