ES6 - ES6的新增方法

2024-03-04 21:33:24

1.对象inclues()的用法

基本用法
判断字符串中是否含有某些字符

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

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

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

includes的应用

  		//https://juejin.cn
        //https://juejin.cn/?sort=newest
        let url = 'https://juejin.cn?';
        const num = url.length;
        const check = url.substring(num - 1);
        const addURLparam = (url, name, value) => {
            if (check === '?') {
                url = url.substring(0, num - 1);
            }
            url += url.includes('?') ? '&' : '?';
            url += `${name}=${value}`;
            return url;
        }
        url = addURLparam(url, 'sort', 'newest');
        console.log(url); //https://juejin.cn?sort=newest
        // url = addURLparam(url, 'sort', 'newest');
        // console.log(url);

2.padStart()和padEnd()

基本用法

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

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

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

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

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

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

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

应用
显示日期格式

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

3.trimStart()和trimEnd()

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

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

应用

      const username = document.querySelector('#username');
        const btn = document.querySelector('#btn');
        btn.addEventListener('click', () => {
            console.log(username.value);
            if (username.value.trim() !== '') {
                console.log('提交！');
            } else {
                console.log('不能提交！');
            }
        })

4.数组includes()的用法

基本用法
判断数组中是否含有某个成员

console.log([1, 2, 3].includes('2')); //false
console.log([1, 2, 3].includes(2)); //true
//第二个参数表示搜索的起始位置，默认值是0
console.log([1, 2, 3].includes(2, 2)); //false
        
//基本遵循严格相等（===），但是杜宇NaN的判断与===不同，includes认为NaN===NaN
console.log(NaN === NaN); //false
console.log([1, 2, NaN].includes(NaN)); //true

应用
去重

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

5.Array.from()方法

基本用法
将其他数据类型转化为数组

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

哪些可以通过Array.from()转化为数组
2.1所有可遍历的
数组，字符串，Set, Map, NodeList, arguments

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

2.2拥有length属性的任意对象

const obj = {'0': 'a','1': 'b',name: 'ajax',length: 3}
console.log([...obj]); //obj is not iterable
console.log(Array.from(obj)); //(3) ["a", "b", undefined]

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

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

第四个参数
修改this指向

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

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

6.find()和findIndex()

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

基本用法第二个参数是修改this指向

console.log([1, 2, 3, 4, 5].find((value, index, arr) => {
     console.log(value, index, arr); 
     //1.2.3.4.5   0.1.2.3.4   (5) [1, 2, 3, 4, 5]
     console.log(value, index, arr); 
     //1.2.3  0.1.2   (5) [1, 2, 3, 4, 5]
        return value > 2; //3
}));


console.log([1, 2, 3, 4, 5].find(function(value, index, arr) {
            console.log(this); //document
            return value > 2; //3
        }, document));


console.log([1, 2, 3, 4, 5].findIndex((value, index, arr) => {
            console.log(value, index, arr); 
            //1.2.3  0.1.2  (5) [1, 2, 3, 4, 5]
            console.log(value, index, arr); 
            //1.2.3  0.1.2   (5) [1, 2, 3, 4, 5]
            return value > 2; //2
 }));

应用

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

7.Object.assign()

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

const apple = {color: 'red',shape: '长方形',teate: '甜'};
const pen = {color: '黑色', shape: '原型',teate: '取色无味',use: '写字'};
console.log(Object.assign(apple, pen));
//{color: "黑色", shape: "原型", teate: "取色无味", use: "写字"}
console.log(apple);
console.log(Object.assign(apple, pen) === apple) //true
//不会改变一个对象的结构
console.log(Object.assign({}, apple, pen)) 
//{color: "黑色", shape: "原型", teate: "取色无味", use: "写字"}
 console.log({...apple,...pen});
//{color: "黑色", shape: "原型", teate: "取色无味", use: "写字"}
console.log({...apple,...pen } === apple);//false

注意事项
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({}, 'true')); 
//{0: "t", 1: "r", 2: "u", 3: "e"}

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

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

 const logUser = userOptions => {
       const DEFAULTS = {
             username: 'zhangsan',
             age: 18,
             sex: 'nan'
        }
const options = Object.assign({}, DEFAULTS, userOptions);
         console.log(options); //{username: "ajxs", age: 18, sex: "nan"}
         console.log(userOptions); //{username: "ajxs"}
   };
logUser({ username: 'ajxs' });

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

基本用法

    const person = { name: 'ajax', age: 18 }
    console.log(Object.keys(person)); //(2) ["name", "age"]
    console.log(Object.values(person)); //(2) ["ajax", 18]
    console.log(Object.entries(person)); //[Array(2), Array(2)]

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

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

使用for…of循环遍历对象

  const person = { name: 'ajax', age: 18 };
  
   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); //(2) ["name", "ajax"]  ["age", 18]
   }

9.小结

字符串的新增方法
includes(要查找的字符[, 开始查找的位置=0]): 布尔值

trimStart/trimEnd(): 最终字符串
padStart() 和 padEnd()
padStart/padEnd(目标长度[, 要填充的字符串=空格]): 最终字符串

原字符串的长度等于或大于目标长度，返回原字符串

补全字符串与原字符串长度之和超过了目标长度，截去超出位数的
补全字符串，原字符串不动

数组的新增方法
includes(要查找的值[, 开始查找的位置=0]): 布尔值

find(回调函数[, this 指向]): 满足条件的第一个值或 undefined

findIndex(回调函数[, this 指向]): 满足条件的第一个值的索引或 -1
Array.from()
Array.from(要转换成数组的[, mapFn[, this 指向]]): 数组

可遍历对象可以通过 Array.from 转换成数组
拥有 length 属性的对象可以通过 Array.from 转换成数组
对象的新增方法
Object.keys(对象): key 数组

Object.values(对象): value 数组

Object.entries(对象): key,value 二维数组
Object.assign()
Object.assign(目标对象[, 源对象…]): 目标对象

基本数据类型作为源对象，先转换成对象，再合并
合并对象时，对于同名属性，后面的覆盖前面的