ES5~ES6常用方法(自用,持续更新)

412 阅读6分钟

ES6常用方法

字符串方法

1.随机字符串

//方法一:
const randomString=()=>Math.random().toString(36).slice(2)
randomString()

2.includes查找

str.includes('xx')

3.翻转字符串

var str="hello-zhangsan"
//将字符串转换为字符串数组,然后进行反转,再拼接成字符串
var str1=str.split("").reverse().join("")
console.log(str1);

//方法二:
const reverseStr = str=>[...str].reduce((a,v)=>v+a)
reverseStr(str)

//方法三:
 [...str].reverse().join('')

4.日期对象转时间戳

第一种:
// var time=new Date().getTime()
第二种:
// var time=+new Date()
第三种:
var time =Date.now()      //推荐使用
console.log(time);

5.replace全局替换

var str1="你好,我的南京,全局替换逗号"
var str2=str1.replace(/,/g,";")
console.log(str1,str2);

//方法二 replaceAll() 
let str2=str1.replaceAll(',',';') 
或者:let str2=str1.replaceAll(/,/g,';')
console.log(str2)

数组方法

1.遍历

// arr.forEach(function(item,index,arr){})  数组遍历 无返回值  
    //item 为当前数组元素
    // index 为当前索引
    // arr 为数组名字
    var arr = [1, 2, 3, 4, 5];
    arr.forEach(function (item, index, a) {
      // console.log(item + '|' + index + '|' + (a === arr));
    });


    // arr.map() 
    // 数组的遍历,用来接收一个返回值,创建一个新数组,不改变原数组。
    var arr1 = [1, 2, 3, 4, 5];
    var arr2 = arr1.map(function (item) {
      return item * item;
    });
    console.log(arr2);

    // arr.filter()  返回满足过滤条件组成的新数组。
    var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var arr3 = arr.filter(function (x, index) {
      return index % 3 === 0 || x >= 8;
    });
    console.log(arr3); //[1, 4, 7, 8, 9, 10]

    // arr.some()   检测数组中是否含有某一个值,返回一个布尔值
    var ages = [3, 10, 18, 20]
    var xx = ages.some(function (item, i, ages) {
      return item > 30
    })
    console.log(xx); //false

    // every( ) 方法:方法用于检测数组所有元素是否都符合指定条件(通过函数提供),返回一个布尔值,结果为 true或false。
    var age = [3, 10, 18, 20]
    var xxx = age.every(function (item, i, age) {
      return item > 2
    })
    console.log(xxx); //false

2.数组增删

  // push( )方法:可以将一个或者更多的参数添加在数组的尾部;返回添加后的数组的长度,原数组发生改变。
    var arr4 = [1, 2, 3, 4]
    var a = arr4.push(9, 8, 7)
    console.log(a, arr4);

    // unshift( )方法:可以将一个或者更多的参数添加在数组的头部;返回添加后的数组的长度,原数组发生改变。
    var arr5 = [1, 2, 3, 4]
    var b = arr5.unshift(9, 8, 7)
    console.log(b, arr5);

    // pop( )方法:从数组尾部删除一个元素,返回这个被删除的元素,原数组发生改变。
    var arr6 = [1, 2, 3, 5]
    var c = arr6.pop()
    console.log(c, arr6); //5;  1,2,3

    // shift()   从数组头部删除一个元素,返回这个被删除的元素,原数组发生改变。
    var arr7 = [1, 2, 3, 4];
    var d = arr7.shift();
    console.log(d, arr7) //1; 2,3,4,

  // array.slice(start, end) 从哪截取(包含),到哪里结束(不含) 返回截取得数组
    var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
    var citrus = fruits.slice(1, 3);
    console.log(citrus); //Orange,Lemon
   🔺注意:如果不指定选取位置,则拷贝整个数组

    // splice(i,howmany,item,...,itemx ) 方法:
    // 没有参数,返回空数组,原数组不变;
    // 第一个参数 表示删除位置(包含)
    // 第二个参数表示删除得数量,返回删除后得数组
    // 第三个参数表示添加得新元素
    var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
    fruits2.splice(3, 1, 99);
    console.log(fruits2) //Banana,Orange,Apple,99

3.伪数组转化真正数组

// 类数组转化为真正的数组
    // //  第一种:Array.from()
    var arr = Array.from(arguments);

    // //第二种 使用工具函数slice
    function foo() {
     var arr = Array.prototype.slice.call(arguments);
     arr.push("bam");
      console.log(arr);
  }
   foo("bar", "baz"); // ["bar","baz","bam"]

4.数组排序

// array.sort(sortfunction)  数组排序  
    // sortfunction	可选。规定排序顺序。必须是函数。
    var Array = [1, 2, 3, 4, 5];
    Array.sort((a, b) => {
      // return a-b  //从小到大
      return b - a //从大到小
    })
    console.log(Array);


// 对字母进行排序
const arr = ['b', 'c', 'a', 'e', 'd']
arr.sort((a, b) => {
  if (a > b) return 1
  else if (a < b) return -1
  else return 0
})
console.log(arr) // ['a', 'b', 'c', 'd', 'e']

5.数组元素查找与索引查找

// find( ) 方法:查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素
    arr10 = [2, 3, 4, 8]
    console.log(arr10.find(item => item > 4)); //8
 
// 查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
    console.log(arr10.findIndex(item => item > 4)); //3

   // includes( ) 方法:检测数组中是否包含一个值。
    var k = [1, 2, 3].includes(1);
    console.log(k); //true


    // indexOf( ) 方法:字符串的方法,数组也可适用  找不到返回-1  找到返回该项元素索引
    console.log(arr9.indexOf(5));

6.数组转对象

//第一种:
var arr3=[['x', 23], ['y', 24]]
console.log(Object.fromEntries(arr3));

//第二种:
 function arr2obj(arr, keyName, valueName) {
    const obj = {};
    for (const item of arr) {
        obj[item[keyName]] = item[valueName];
    }
    return obj;
}

7.数组去重

/**
 * 数组去重
 * @param {*} arr
 */
export function uniqueArray(arr) {
    if (!Array.isArray(arr)) {
        throw new Error('The first parameter must be an array')
    }
    if (arr.length == 1) {
        return arr
    }
    return [...new Set(arr)]
}
使用方式:
uniqueArray([1,1,1,1,1])//[1]

//简洁版:
const newArr = [...new Set(arr)] 
const newArr = Array.from(new Set(arr))
-----------------------------------------------------
数组对象 & 基本数据类型都适用的去重:
/**
 *
 * @desc 数组去重arrRmDuplicates(arr, key)
 * @param {Array} arr:需要去重的数组
 * @param {String} key:去重关键字
 * @return {Array} 返回一个数组
 */
function arrRmDuplicates(arr, key) {
    let obj = {};
    return arr.reduce((newArr, item) => (key ? (obj[item[key]] ? '' : obj[item[key]] = 1 && newArr.push(item)) : newArr = Array.from(new Set(arr)), newArr), [])
}

8.数组降维flat

// flat( ) 嵌套数组转一维数组
    console.log([1, [2, 3]].flat()); // [1, 2, 3] 
    // 例2
    const deps = {
      '采购部': [1, 2, 3],
      '人事部': [5, 8, 12],
      '运输部': [5, 14, 79],
      '行政部': [3, 64, 105]
    }
    let member = Object.values(deps).flat(Infinity) //使用infinity  无需知道扁平化的数组的维度

9.数组比较(查看是否相等)

//注意:对象值都是引用(reference),对象的比较均是引用的比较:当且仅当它们引用同一个基对象时,它们才相等。
var x=[]
var z=[]
var y=x
console.log(x===y);  //true
console.log(x==z);   //false


//由于数组是引用类型,是不能直接使用==或者===比较是否相等得
//思路:将数组先排序,然后转为字符串进行比较
var a = [1,{h:0],5]
var b = [5,1,{h:0},]
console.log(JSON.stringify(a.sort())==JSON.stringify(b.sort()))   //true

10.数组填充fill(会改变数组本身)

array.fill(value, start, end)
|*value* | 必需。填充的值。                       
| *start* | 可选。开始填充位置。                     
| *end*   | 可选。停止填充位置 (默认为array.length)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4); //Banana,Orange,Runoob,Runoob
//举例:
[1, 2, 3].fill(4)   //[4,4,4]
[1, 2, 3].fill(4, 1) //[1,4,4]
[1, 2, 3].fill(4, 1, 2) //[1,4,3]
[1, 2, 3].fill(4, 1, 1) //[1,2,3]
[1, 2, 3].fill(4, 3, 3) //[1,2,3]
[1, 2, 3].fill(4, -3, -2) //[4,2,3]
[1, 2, 3].fill(4, NaN, NaN) //[1,2,3]
[1, 2, 3].fill(4, 3, 5) //[1,2,3]
Array(3).fill(4)  //[4,4,4]
[].fill.call({ length: 3 }, 4) //{ '0': 4, '1': 4, '2': 4, length: 3 }
Array(3).fill({})  //[{},{},{}]
//重点:数组填充尽量不要填充引用类型数据,填充基本数据即可,否则如下:
//如果设置对象填充,保存的是对象的引用。修改一项值 数组所有值都变为同一个
var arr = Array(3).fill({})
console.log(arr[0] === arr[1])   //true
arr[0].hi = "hi"
console.log(arr)    //[ { hi: 'hi' }, { hi: 'hi' }, { hi: 'hi' }]

对象方法

1.对象遍历

var obj = {
            "0": 'a',
            "1": 'b',
            "2": 'c',
        }
        // for 循环遍历 
        for (var i in obj){
            console.log(i,obj[i]);
        }
        //遍历对象的key       Object.keys()
        console.log(Object.keys(obj));
        //遍历对象的value     Object.values()
        console.log(Object.values(obj));
        //遍历对象的key  
        console.log(Object.getOwnPropertyNames(obj));
        console.log(Reflect.ownKeys(obj));

2.对象转数组

var obj={a:"1",b:"2"} console.log(Object.entries(obj));

3.对象合并

//1. ...扩展符  谁在后面覆盖前面的
let obj1 ={a:1,b:2}
let obj2 ={b:3,c:4}
let obj={...obj1,...obj2}
console.log(obj) //{a: 1, b: 3, c: 4}

//2.Object.assign(target,) 把 后面的合并到目标对象中 浅拷贝
let obj=Object.assign(obj1,obj2)