常用JavaScript技巧

1、函数绑定this方法

• apply(this, [1, 2])
• 参数1：传入的this
  • 参数2：需要传入的参数（数组形式）
• call(this, 1, 2)
  • 参数1：需要传入的this
  • 参数2：需要传入的参数

2、apply应用：

• 获取数组的最大值

Math.max.apply(null, [3, 5, 4]) // 5

• 重写默认方法

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数
};

3、数组去重

• Array.from和new Set数组去重

let testArr = [1, 2, 2, 3]
let resultArr = []
resultArr = Array.from(new Set(testArr)) // resultArr： [1, 2, 3]

• 利用filter进行数组去重

let arr = [1, 2, 2, 3]
r = arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
}); // 打印[1, 2, 3]

4、通用判定数据类型

function checkType (val) {
	return Object.prototype.toString.call(val).slice(8, -1)
}
checkType('hmk') // String
checkType([]) // Array
checkType({}) // Object
checkType(true) // Boolean
checkType(123) // Number
checkType(Function) // Function
checkType(null) // Null
checkType(undefined) // Undefined
checkType(new Date()) // Date
checkType(Symbol()) // Symbol

5、字符串类型转数字类型
let str = ‘123’
let number = +str
let number1 = parseInt(str)

6、Date时间获取日期的值

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

7、构造函数，尽可能将公共方法发到prototype上（节省内存）：

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
let zhangsan = new Student('zhangsan')
let lisi = new Student('lisi')
zhangsan.hello === lisi.hello // 打印true

8、class（Es6）实现继承

  class Animal {
    constructor (name) {
      this.name = name
    }
    hello () {
      console.log(`Hello,${this.name}!!!`)
    }
  }
  class Cat extends Animal {
    constructor (name, age) {
      super(name) // 调用父类的构造方法!
      this.age = age
    }
    introduce () {
      console.log(`${this.name} is ${this.age} years old!!`)
    }
  }
  let cat = new Cat('大肥猫', 2)
  console.log(cat.name) // 大肥猫
  console.log(cat.age) // 2
  cat.hello() // Hello,大肥猫!!!
  cat.introduce() // 大肥猫 is 2 years old!!

9、location对象表示当前页面的URL信息

// 一个完整的URL：
// http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'