javascript代码

Posted 2020-08-28 前端博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于javascript代码的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

Javascript代码片段在drupal中不起作用

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段

javascript代码

LazyMan

数据类型

数据类型检测

变量赋值时候的返回值：

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

数字的固定小数位数

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

矩阵的转置

冒泡排序方法

二分查找

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

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

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

对象

arguments

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

体会js的封装

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

继承

重载

闭包

数组长度