js重点与难点（转）

javascript

  • LazyMan

    • 实现LazyMan（什么是LazyMan？请自行google）
    function _LazyMan(_name) {
    var _this = this;
    _this.tasks = [];
    _this.tasks.push(function() {
        console.log('Hi! This is ' + _name + '!');
        // 这里的this是window，所以要缓存this
        _this.next();
    });
    setTimeout(function() {
        _this.next();
    }, 0);
}

// push函数里面的this和setTimeout函数里面的this都指向全局作用域，所以要缓存当前this指向
_LazyMan.prototype.next = function() {
    var _fn = this.tasks.shift();
    _fn && _fn();
}
_LazyMan.prototype.sleep = function(_time) {
    var _this = this;
    _this.tasks.push(function() {
        setTimeout(function() {
            console.log('Wake up after ' + _time);
            _this.next();
        }, _time);
    });
    return _this;
}
_LazyMan.prototype.sleepFirst = function(_time) {
    var _this = this;
    _this.tasks.unshift(function() {
        setTimeout(function() {
            console.log('Wake up after ' + _time);
            _this.next();
        }, _time);
    });
    return _this;
}
_LazyMan.prototype.eat = function(_eat) {
    var _this = this;
    _this.tasks.push(function() {
        console.log('Eat ' + _eat);
        _this.next();
    });
    return _this;
}

// 封装对象
var LazyMan = function(_name) {
    return new _LazyMan(_name);
}

  • 数据类型

    • 6种原始值（不可变。“除非重置当前变量，否则不能改变元素值。”）
      1. Null(只有一个值： null)
      2. Undefined(一个没有被赋值的变量会有个默认值 undefined)
      3. Number
      4. Boolean(两个值：true 和 false)
      5. String
      6. Symbol
    • 和Object(对象指内存中的可以被标识符引用的一块区域)

  • 数据类型检测

    • typeof(对变量或值调用 typeof 运算符将返回(字符串)下列值之一)
      1. undefined - Undefined类型
      2. number - Number类型
      3. boolean - Boolean类型
      4. string - String类型
      5. symbol - Symbol类型(ECMAScript6新增)
      6. function - 函数对象([[Call]]在ECMA-262条款中实现了)
      7. object - 引用类型 或 Null类型
    typeof(Function) // function (Function是函数对象)
typeof(new Function) // function (new Function也是是函数对象，同等：var func = function(){})
typeof(Array) // function (Array是函数对象)
typeof(new Array) // object（实例化的Array就是object）

  • 变量赋值时候的返回值：

    var name = 123; // 返回undefined
name = 456; // 返回456

    结语：定义变量的时候赋值返回:undefined
    给已声明变量赋值时候返回当前赋值。

  • 获取元素距离页面的top、left

    function getRec(ele) {
    var _t = document.documentElement.clientTop,
        _l = document.documentElement.clientLeft,
        rect = ele.getBoundingClientRect();
    return {
        top: rect.top - _t,
        right: rect.right - _l,
        bottom: rect.bottom - _t,
        left: rect.left - _l
    }
}

    注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

  • 数字的固定小数位数

    var a=8.88888,
    b=8;
console.log(a.toFixed(2)); // 8.89 或者 8.88
console.log(b.toFixed(2)); // 8.00

  • js是编译语言，数组长度是随时程序变化而变化的

    var arr = [0, 1];
arr[3] = 3;
console.log(arr[2]); // undefined
console.log(arr.length); // 4

  • 矩阵的转置

    var arr = [ // 定义一个矩阵（二维数据）
    [1, 2, 3, 4],
    [5, 6, 6, 6],
    [7, 6, 7, 8],
    [8, 5, 3, 3]
];

function changeArr(arr) { // 矩阵转置函数
    var c;
    for (var i = 1; i < arr.length; i++) {
        for (var j = 0; j < i; j++) {
            c = arr[i][j];
            arr[i][j] = arr[j][i];
            arr[j][i] = c;
        }
    }
}
changeArr(arr);
console.table(arr);

  • 冒泡排序方法

    // 第一轮是对n-1的位置定位
// 第二轮是 每一个位置的数的 确定
var arr = [1, 4, 5, 6, 99, 111, 112, 113, 133],
    temp = 0,
    flag = false;
for (var i = 0; i < arr.length - 1; i++) {
    document.writeln('come');
    for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
            flag = true;
        }
    }
    if (flag) {
        flag = false;
    } else {
        break;
    }
}
for (var i = 0; i < arr.length; i++) {
    document.writeln(arr[i]);
};

  • 二分查找

    var arr = [41, 55, 76, 87, 88, 99, 123, 432, 546, 577, 688, 786];

function twoFind(arr, wantVal, leftIndex, rightIndex) {
    if (leftIndex > rightIndex) {
        document.writeln('SORRY: 找不到 ' + wantVal + ' ！');
        return;
    }
    var minIndex = Math.floor((leftIndex + rightIndex) / 2);
    if (arr[minIndex] > wantVal) {
        twoFind(arr, wantVal, leftIndex, minIndex - 1);
    } else if (arr[minIndex] < wantVal) {
        twoFind(arr, wantVal, minIndex + 1, rightIndex);
    } else {
        document.writeln('找到了 ' + wantVal + ' ,下表为' + minIndex);
    }
}
twoFind(arr, 9, 0, arr.length - 1);

  • js对象访问属性的二种方式

    function Person () {};
var new1 = new Person ();
new1.name='冯杰';
new1.age=21;
window.alert(new1.name);
window.alert(new1["age"]);

  • js之delete只能删除对象的属性

    function Person () {};
var me = new Person();
me.name='冯杰';
console.log(me.name);
delete me.name;
console.log(me.name);

  • 在js中对象的方法不是通用的，如果生成n个对象，那么就有n个内存堆栈

    // js 中 一切类 继承自 Object 而Object 有propotype
// 下面是解决办法 prototype 获得类的static性质
function God() {}
God.prototype.shout = function() {
    window.alert('小狗叫');
}
var dog1 = new God();
var dog2 = new God();
dog1.shout();
dog2.shout();

  • 对象

    // js里要想创建对象 除了一般的创建方式 还有 通过Object 方式创建类
// Object 类是所有js类的基类 Object 就表示对象（一切的对象）
var p1 = new Object();
p1.name = 'fj';
window.alert(p1.name);
window.alert(p1.constructor);

// 原型链上新增默认对象方法
var num = new Number(1);
var num2 = 10;
window.alert(num.constructor);
window.alert(num2.constructor);
// 上面2个弹出是一样的
Number.prototype.add = function(a) { //prototype是属于类的
    return this + a;
}
window.alert(num.add(1).add(2));

// 小实验 为Array 添加 find(val) 方法
Array.prototype.find = function(a) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == a) {
            return i;
        }
    }
    return 'find fail.';
}
var arr = [0, 1, 2, 77, 4, 5];
window.alert(arr.find(77));

  • arguments

    function abc() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
window.alert(abc(1, 2, 3));

  • call函数目的就是改变对象的this指向

    var Person = {
    name: 'fjj'
};

function test() {
    window.alert(this.name);
}
test.call(Person);

  • 体会js的封装

    function Person() {
    var name = 'fj'; //私有
    this.age = 21; //共有
}
var p1 = new Person();
window.alert(p1.name); //undefined
window.alert(p1.age); //21

  • prototype的方法不能访问私有属性和方法

    function Person() {
    var name = 'fj'; //私有
    this.age = 21;
}
Person.prototype.showName = function() {
    window.alert(this.name);
}
Person.prototype.showAge = function() {
    window.alert(this.age);
}
var p1 = new Person();
p1.showName();
p1.showAge();

  • 继承

    // js 里面是对象冒充来继承的 不算是真正的继承 通过对象冒充 js可以实现多重继承和继承的效果 但是没有Extends关键字
function Father(name, age) {
    this.name = name;
    this.age = age;
    this.show = function() {
        window.alert(this.name + '---' + this.age);
    }
}

function Son(name, age) {
    this.Father = Father;
    this.Father(name, age); //通过对象冒充 实现继承 这一句非常重要 js是动态语言 不是编译语言 要执行才会分配空间
}
var me = new Son('fj', 21);
window.alert(me.name);
me.show();

  • 重载

    // js从常理来说是不支持重载的 但是又可以说是天然支持重载 因为js天然支持可变参数 而且我们可以通过arguments[]数组的长度判断 而做出相应的处理

  • 闭包

    // 闭包实际上设计一个对象的属性，何时被gc处理的问题 闭包和gc是相关联的

  • 数组长度

    // 数组的长度是根据下标的最大而确定的
var arr = new Array();
arr['a'] = 1;
arr['b'] = 2;
window.alert(arr.length); // 打出0
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容

  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,717评论 2赞 17
  • js高级
    第一章： JS简介 从当初简单的语言，变成了现在能够处理复杂计算和交互，拥有闭包、匿名函数， 甚至元编程等...
    LaBaby_阅读 1,638评论 0赞 6
  • js面向对象
    title: js面向对象date: 2017年8月17日 18:58:05updated: 2017年8月27日...
    lu900618阅读 559评论 0赞 2
  • js学习内容总结（2）
    1.语言基础2.严格模式3.js组成（ECMAScript DOM BOM）4.各种(DOM BOM)例子5.组件...
    蒲公英_前端开发者阅读 1,542评论 0赞 3
  • 灰没
    在意的到底是少了 是否 分得清 甘于平庸 或是 看清人生 我想要成为什么 到底是个难题 为何要追逐 为何要继续 为...
    咸朦阅读 186评论 0赞 0