ES6新增方法

字符串

includes()

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

第二参数-开始搜索位置，默认为0

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

应用-网址添加参数

https://www.imooc.com/
https://coding.imooc.com/?c=javascript&sort=1

let url = 'https://www.imooc.com/';
const addURLParam = (url, name, value) => {
    // 功能：若不存在?则拼接?若已经存在?则拼接&
    // 三元运算符
    url += url.includes('?') ? '&' : '?';
    // 功能：拼接键值对
    // 模板字符串
    url += `${name}=${value}`;
    return url;
};
url = addURLParam(url, 'c', 'javascript');
console.log(url);
url = addURLParam(url, 'sort', '1');
console.log(url);

padStart()&padEnd()-填充

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

参数
1）原字符串长度>=最大长度
不会削减字符串，补充不生效

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

2）原字符串长度+填充的字符串长度>最大长度
截去超出位数的补全字符串，原字符串不动

console.log('abc'.padStart(6, '01234'));//012abc
console.log('abc'.padEnd(6, '01234'));//abc012

3）省略第二参数，默认空格填充

console.log('abc'.padStart(6));//   abc
console.log('abc'.padEnd(6));//abc

应用-显示日期格式，保证两位数

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

trim()-清除空格

两端清除空格trim ()
头部清除空格trimStart()
尾部清除空格trimEnd()
中间空格不会清除

<input id='username' type="text">
<button id='btn'>提交</button>
<script>
    const usernameInput = document.getElementById('username');
    const btn = document.getElementById('btn');
    btn
    btn.addEventListener('click', () => {
        // 先清除首尾空格，再验证输入框内容不为空
        if (usernameInput.value.trim() !== '') {
            console.log('可提交');
        } else {
            console.log('不可提交');
        }
    }, false);
</script>

数组

includes()

遵循严格相等===，特别地，认为NaN自等

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

第二参数-开始搜索位置，默认为0

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

应用-去重

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

Array.from()

转换成数组

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

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

console.log(Array.from('12', value => value * 2));//[2, 4]
console.log(Array.from('12').map(value => value * 2));//[2, 4]
console.log([1, 2].map(value => {
    return value * 2
})
);//[2, 4]

使用场合

1）原生可遍历
数组、字符串、类数组（arguments、Nodelist）、Set、Map等

console.log(Array.from(new Set([1, 2, 1])));//[1, 2]
console.log([...new Set([1, 2, 1])]);//[1, 2]

2）非原生可遍历
有length和索引属性的对象

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

find()

找到满足条件的一个返回

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

findIndex()

找到满足条件的一个返回其索引

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

应用-返回满足属性值的对象

const students = [
    {
        name: '张三',
        sex: '男'
    }, {
        name: '李四',
        sex: '女'
    }, {
        name: '王五',
        sex: '男'
    }
];
console.log(students.find(value => value.sex === '女'));
//{name: '李四', sex: '女'}
console.log(students.findIndex(value => value.sex === '女'));
//1

对象

Object.assign()-合并对象

Object.assign(目标对象，源对象1，源对象2，…)
参数非对象，则默认转为对象再合并

const apple = {
     color: '红色',
     shape: '球形',
     taste: '甜'
 };
 const pen = {
     color: '黑色',
     shape: '圆柱形',
     use: '写字'
 };

1)合并到了第一个参数（对象）中，返回的就是合并后的对象
2）同名属性后面覆盖前面的

console.log(Object.assign(apple, pen));
//{color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
console.log(apple); //同上
console.log({ ...apple, ...pen });//同上 
console.log(Object.assign(apple, pen) === apple);//true

3)可合并多个对象

  console.log(Object.assign({}, apple, pen));

应用-合并默认参数和用户参数

const Loguser = userOptions => {
    const DEFAULTS = {
        username: 'ZhangSan',
        age: 0,
        sex: 'male'
    };
    const options = Object.assign({}, DEFAULTS, userOptions);
    console.log(options);
};
Loguser();
//{username: 'ZhangSan', age: 0, sex: 'male'}
Loguser({});//同上
Loguser({ username: 'Alex' });
//{username: 'Alex', age: 0, sex: 'male'}

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

是构造函数方法，返回数组

const person = {
    username: 'ZhangSan',
    age: 0,
    sex: 'male'
};
console.log(Object.keys(person));//['username', 'age', 'sex']
console.log(Object.values(person));//['ZhangSan', 0, 'male']
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

数组的keys()、value()、entries()是实例方法，返回Iterator

console.log([1, 2].keys());//Array Iterator {}
 console.log([1, 2].values());//Array Iterator {}
 console.log([1, 2].entries());//Array Iterator {}

for…of

和for…in一样
不能保证顺序是我们看到的

const person = {
    username: 'ZhangSan',
    age: 0,
    sex: 'male'
};
for (const key of Object.keys(person)) {
    console.log(key);
}
for (const value of Object.values(person)) {
    console.log(value);
} for (const entrie of Object.entries(person)) {
    console.log(entrie);
}
for (const [key, value] of Object.entries(person)) {
    console.log(key, value);
}