前端QA(一)- JavaScript

JavaScript相关QA整理

基本类型和引用类型

  • 基本类型: Number, Boolean, String, Null, Undefined
    • 也称值类型,交换时会开辟一块新的空间
  • 引用类型: Object, Array, Function
    • 修改值时同时改变引用值和原始值

实现once函数

  1. 匿名函数

    1
    2
    3
    (function(){
    console.log("hello");
    })();
  2. jquery的one函数

  3. 笨方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function test(){
    alert('hello');
    }
    var once = function (fn) {
    var isFirst = true;
    return function () {
    if (isFirst) {
    isFirst = !isFirst;
    fn();
    }
    };
    };
    once(test);
    once(test);

实现debounce和throttle函数

http://www.cnblogs.com/fsjohnhuang/p/4147810.html

  1. debounce函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var debounce = function(idle, action){
    var last
    return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
    action.apply(ctx, args)
    }, idle)
    }
    }
  2. throttle函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var throttle = function(delay, action){
    var last = 0
    return function(){
    var curr = +new Date()
    if (curr - last > delay){
    action.apply(this, arguments)
    last = curr
    }
    }
    }

拖拽功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function (){
var oBox = document.getElementById('box'), disX = 0, disY = 0;
oBox.onmousedown = function (e){
var e = e || window.event;
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
oBox.style.left = (e.clientX - disX) + 'px';
oBox.style.top = (e.clientY - disY) + 'px';
};
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
};

Generator,Promise,Set,Map

  1. Generator

    1
    2
    3
    4
    5
    6
    function* gen(x){
    var y = yield x + 2;
    return y;
    }
    gen.next();
    gen.next();
  2. Promise

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Parse.User.logIn("user","pass").then(function(user) {
    returnquery.find();
    }).then(function(results) {
    returnresults[0].save({ key: value });
    }).then(function(result) {
    // the object was saved.
    },function(error) {
    // there was some error.
    });
  3. Set&WeakSet(只用于存储object类型)

    1
    2
    3
    var a = [1,1,2,3];
    var b = new Set(a);
    console.log(b);
  4. Map&WeakMap(只接受object作为键值)

    1
    2
    3
    4
    5
    6
    7
    var map = new Map([[['name','sex'],'yrq'],['age','23']]);
    console.log(map);
    var map = new Map();
    var key = ['KEY'];
    map.set(key,5);
    var value = map.get(key);
    console.log(value);

异步加载

  • ajax
  • jquery
  • defer

解决文件缓存文件名添加md5戳

类继承

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
function Person(){
var name = "default";
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
};
var p = new Person();
p.setName("Tom");
alert(p.getName());
var Jack = function(){};
Jack.prototype = new Person();
Jack.prototype.Say = function(){
alert("Hello,my name is Jack");
};
var j = new Jack();
j.setName("Jack");
j.Say();
alert(j.getName());

数组去重

  1. Set

    1
    2
    3
    4
    var a = [1,1,2,3];
    var b = new Set(a);
    var c = Array.from(b)
    console.log(c);
  2. Array原型方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    Array.prototype.unique = function(){
    var res = [];
    var json = {};
    for(var i = 0; i < this.length; i++){
    if(!json[this[i]]){
    res.push(this[i]);
    json[this[i]] = 1;
    }
    }
    return res;
    }
    var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
    alert(arr.unique());

遍历对象属性

  1. for-in
    1
    2
    3
    4
    5
    6
    7
    var website = {
    'baidu':'www.baidu.com',
    'google':'www.google.com'
    };
    for (var key in website) {
    console.log(key + ": " + website[key]);
    }
  • for-of
    1
    2
    3
    4
    5
    6
    7
    var website = {
    'baidu':'www.baidu.com',
    'google':'www.google.com'
    };
    for (var key of Object.keys(website)) {
    console.log(key + ": " + website[key]);
    }

new关键字的过程

伪代码:

1
2
3
4
5
6
7
8
// 1.创建一个新的对象,这个对象的类型是object
var obj = {};
// 2.设置这个新的对象的内部、可访问性和[[prototype]]属性为构造函数(指prototype.construtor所指向的构造函数)中设置的
obj.__proto__ = Animal.prototype;
// 3.执行构造函数,当this关键字被提及的时候,使用新创建的对象的属性
var result = Animal.call(obj,"cat");
// 4.返回新创建的对象(除非构造方法中返回的是‘无原型’)
return typeof result === 'obj'? result : obj;

判断变量类型,如何判断变量是函数

  • 判断变量类型

    1
    2
    3
    4
    typeof value
    //特殊的
    typeof null //"object"
    typeof undefined //"undefined"
  • 判断是否为数组

    1
    2
    var arr = [1,2,3];
    console.log(a instanceof Array) //true
  • 判断是否为函数

    1
    2
    3
    4
    5
    var a = function(){};
    function isFunc(test){
    return typeof test == 'function';
    }
    isFunc(a);//true

手写jsonp实现,发送和回调接收

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

  1. ajax的核心是通过XmlHttpRequest获取非本页内容
  2. jsonp的核心则是动态添加

文章目录
  1. 1. 基本类型和引用类型
  2. 2. 实现once函数
  3. 3. 实现debounce和throttle函数
  4. 4. 拖拽功能
  5. 5. Generator,Promise,Set,Map
  6. 6. 异步加载
  7. 7. 解决文件缓存文件名添加md5戳
  8. 8. 类继承
  9. 9. 数组去重
  10. 10. 遍历对象属性
  11. 11. new关键字的过程
  12. 12. 判断变量类型,如何判断变量是函数
  13. 13. 手写jsonp实现,发送和回调接收
|