js简洁方法

时间:2019-03-21
本文章向大家介绍js简洁方法,主要包括js简洁方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  • 类型检测 Object.propotype.toString
Object.prototype.toString.call('string');       //"[object String]"
Object.prototype.toString.call(1111);           //"[object Number]"
Object.prototype.toString.call(true);           //"[object Boolean]"
Object.prototype.toString.call(null);           //"[object Null]"
Object.prototype.toString.call(undefined);      //"[object Undefined]"
Object.prototype.toString.call(Symbol('111'));  //"[object Symbol]"
Object.prototype.toString.call({});             //"[object Object]"
  • 交换两个值 使用ES6解构赋值
let a = 1;
let b = 2;

[b, a] = [a, b];

console.log(a, b);
  • 数字金额千分位格式化 Number.prototype.toLocaleString()
var num = 123455678;
var num1 = 123455678.12345;

var formatNum = num.toLocaleString('en-US');
var formatNum1 = num1.toLocaleString('en-US');

console.log(formatNum); // 123,455,678
console.log(formatNum1); // 123,455,678.123
  • 遍历对象自身可枚举属性,不包括原型链属性
// for in 会遍历原型链中的属性
//  Object.entries(obj) => 返回的是自身可枚举属性的键值对数组
function A() {
    this.a = 1
    this.b = 1
}

A.prototype = {
    c: 1,
    d: 2
}

var a = new A()
var et = Object.entries(a)
console.log(et)  //  [['a',1],['b',1]]


//  Object.keys, Object.values 返回一个给定对象自身可枚举属性数组
function A() {
    this.a = 1
    this.b = 1
}

A.prototype = {
    c: 1,
    d: 2
}

var a = new A()
var keys = Object.keys(a)
var values = Object.values(a)
console.log(keys, values)
// ['a','b'] ['1','1']
  • 数组去重 Set方法
var arr = [1,2,1,1,22,4,5,6];
arr1 = [...new Set(arr)];
  • 多维数组一行代码实现一维转换
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

var resultArr = arr.toString().split(',').map(Number);

console.log(resultArr); // [1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
  • 一行代码实现获取一个网页使用了多少种标签
[...new Set([...document.querySelectorAll('*')].map(node => node.tagName))].length;
  • 统计字符串中相同字符出现的次数
var str = 'aaabbbccc66aabbc6';

var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});

console.log(strInfo); // {6: 3, a: 5, b: 5, c: 4}

// 这行代码推导过程,需要注意的reduce函数的使用,p是下一次循环的初始值
var str = 'aaabbbccc66aabbc6';
var strInfo = str.split('').reduce(function(p, c) {
    if (p[c]) {
        p[c]++;
    } else {
        p[c] = 1;
    }
    return p;
}, {});

var strInfo = str.split('').reduce(function(p, c) {
    p[c]++ || (p[c] = 1);
    return p;
}, {})

var strInfo = str.split('').reduce(function(p, c) {
    return p[c]++ || (p[c] = 1), p;
}, {})

var strInfo = str.split('').reduce((p, c) => {
    return  p[c]++ || (p[c] = 1), p;
    }, {});
    
// 如果箭头函数直接返回一个对象,必须在对象外面加上括号
var strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});

console.log(strInfo);

  • 将类数组转成对象 Array.prototype.slice || [].slice.call(likeArrObj) || Array.from
var likeArrObj = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
}

var arr1 = Array.prototype.slice.call(likeArrObj); // 或者使用[].slice.call(likeArrObj);
console.log(arr1); // [1, 2, 3]

// Array.from
var likeArrObj = {
    0: 1,
    1: 2,
    2: 3,
    length: 3
}

var arr = Array.from(likeArrObj);
console.log(arr); // [1, 2, 3]