call、apply、bind区别
前端资料JavaScript
JavaScript

定义

call()、apply()、bind()这三者都是用来重新定义this这个对象的

从下面的代码中可以看出，默认obj.myFun()和shows()中的this分别指向obj对象和Window对象。通过call()、apply()、bind()将this指向了db；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var name = '小往', age = 17;
var obj = {
    name: '小组',
    objAge: this.age,
    myFun: function () {
        console.log(this);
        //console.log(this.name + '；obj年龄：' + this.objAge + 'age 年龄：' + this.age);
    }
}

function shows() {
    console.log(this);
}

var db = {
    name: '笑笑',
    age: 22,
};

obj.myFun();
shows();

obj.myFun.call(db);
obj.myFun.apply(db);
obj.myFun.bind(db)();

// {name: "小组", objAge: 17, myFun: ƒ}name: "小组"objAge: 17myFun: ƒ ()__proto__: Object
// Window {parent: Window, opener: n ... ... ()__proto__: Window
// {name: "笑笑", age: 22}
// {name: "笑笑", age: 22}
// {name: "笑笑", age: 22}
阅读全文
class 类
前端资料JavaScript
JavaScript

定义

类声明

使用带有class关键字的类名

提升
函数声明会提升，类声明不会。你首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个 ReferenceError：

1
2
3
let p = new Rectangle(); // ReferenceError

class Rectangle {}

类表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 匿名类
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 具名类
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 输出: "Rectangle2"
阅读全文
keyCode对应表
前端资料JavaScript
JavaScript

keyCode 对应的键码表

阅读全文
let、const和var
前端资料JavaScript
JavaScript

let 和 const 新增了块级作用域

1
2
3
4
5
6
7
8
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[0]();//10
a[6](); // 10
阅读全文
requestAnimationFrame
前端资料JavaScript
JavaScript

兼容低版本浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
isRequestAnimationFrame() {
        let lastTime = 0;
        let vendors = ['webkit', 'moz'];
        for (let i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
            window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];
        }
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function (callback, element) {
                let currTime = new Date().getTime();
                let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                let id = window.setTimeout(function () {
                    callback(currTime + timeToCall);
                }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            }
        }
        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = function (id) {
                clearTimeout(id);
            };
        }
    }
阅读全文
setTimeout、Promise、Async Await 区别
前端资料JavaScript
JavaScript

setTimeout

1
2
3
4
5
6
7
8
9
10
// start-end-setTimeout
function f() {
    console.log('start');
    setTimeout(() => {
        console.log('setTimeout');
    });
    console.log('end');
}

f();

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// start-promise1-promise2-end-then-setTimeout
function f1() {
    console.log('start');
    new Promise((resolve, reject) => {
        console.log('promise1');
        resolve();
        console.log('promise2');
    }).then(() => {
        console.log('then')
    });
    setTimeout(() => {
        console.log('setTimeout')
    });
    console.log('end');
}

f1();

Async/Await

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// start async2-1-1 async2-2-1 end async2-1-2
function f2() {
    console.log('start');
    async function f2_1() {
        console.log('async2-1-1');
        await f2_2();
        console.log('async2-1-2')
    }
    async function f2_2() {
        console.log('async2-2-1');
    }
    f2_1();
    console.log('end');
}

f2();
阅读全文
判断是否在当前标签页
前端资料JavaScript
JavaScript

不支持 ie

阅读全文
引用类型
前端资料JavaScript
JavaScript

引用类型的值（对象）是引用类型的一个实例。在 ECMAScript 中，引用类型是一种数据结构，用于将数据和功能组织在一起。

Object 类型

创建 Object 的两种方式。第一种是使用 new 操作符后跟 Object 构造函数，第二种是对象字面量表示法

1
2
3
4
5
6
7
8
9
10
// 第一种方法
var person = new Object();
person.name = "jack";
person.age = 22;

// 第二种方法
var person = {
  name: "jack",
  age: 22
};
阅读全文
JavaScript中的数组与伪数组的区别
前端资料JavaScript
JavaScript

在 JavaScript 中，除了 5 种原始数据类型之外，其他所有的都是对象，包括函数（Function）。

基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)

阅读全文
Math方法
前端资料JavaScript
JavaScript

Math 属性

常用属性

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159.

Math.PI 运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Math.PI; //Expected 3.141592653589793, got 3.141592653589793

Math.sin(0); //Expected 0, got 0
Math.sin(Math.PI / 2); //Expected 1, got 1
Math.sin(Math.PI); //Expected 0, got 1.2246063538223773e-16
Math.sin((Math.PI * 3) / 2); //Expected -1, got -1
Math.sin(Math.PI * 2); //Expected 0, got -2.4492127076447545e-16

Math.cos(0); //Expected 1, got 1
Math.cos(Math.PI / 2); //Expected 0, got 6.123031769111886e-17
Math.cos(Math.PI); //Expected -1, got -1
Math.cos((Math.PI * 3) / 2); //Expected 0, got -1.836909530733566e-16
Math.cos(Math.PI * 2); //Expected 1, got 1

Math.sqrt(x); //平方根
Math.pow(x, y); //x的y次方
Math.round(x); //四舍五入为整数
阅读全文
Algolia