keyCode对应表

keyCode 对应的键码表

阅读全文
call、apply、bind区别

定义

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}

阅读全文
let、const和var

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
阅读全文
判断是否在当前标签页

不支持 ie

阅读全文
引用类型

引用类型的值(对象)是引用类型的一个实例。在 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
};
阅读全文
setTimeout、Promise、Async Await 区别

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();
阅读全文
requestAnimationFrame

兼容低版本浏览器

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);
};
}
}
阅读全文
JavaScript中的数组与伪数组的区别

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

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

阅读全文
WebScoket 实现

npm 安装 websocket 包

服务端代码

  1. 新建一个 js 文件,如: ws_server.js
  2. 引入 websocket 包,并且 new 一个 websocket server

    1
    2
    var WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 9999});
  3. 定义一个数组用来存放连接的用户

    1
    2
    // 连接池
    var clients = [];
  4. 监听 wss ,当有用户加入时,把该用户加入连接池,当某个用户发送消息当时候,循环连接池,把消息推送给每一位用户,当用户退出时,将其移出连接池

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    wss.on('connection', function (ws) {
    // 将该连接加入连接池
    clients.push(ws);
    ws.on('message', function (message) {
    console.log(message);
    // 广播消息
    clients.forEach(function (ws1) {
    if (ws1 !== ws) {
    ws1.send(message);
    }
    })
    });

    ws.on('close', function (message) {
    // 连接关闭时,将其移出连接池
    clients = clients.filter(function (ws1) {
    return ws1 !== ws
    })
    });
    });
  5. 使用 node 启动该服务

    1
    node ws_server.js
阅读全文
Math方法

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