万字图解JavaScript笔记总结

console.log(a);   // 先使用变量var a = 12;     // 后定义变量

typeof 5;          // numbertypeof 'niubi';   // string

// 字符串 --> 数字Number('123');        // 123Number('123.4');      // 123.4Number('123年');       // NaNNumber('2e3');         // 2000Number('');            // 0Number('1 + 1');       // NaN// 布尔值 --> 数字Number(true);         // 1Number(false);        // 0// undefined 和 null --> 数字Number(undefined);    // NaNNumber(null);         // 0

parseInt('3.14');       // 3parseInt('3.14是圆周率');   // 3parseInt('圆周率是3.14');    // NaNparseInt('3.99');           // 3

parseFloat('3.14');         // 3.14parseFloat('3.14是圆周率');   // 3.14parseFloat('圆周率是3.14');   // NaNparseFloat('3.99');          // 3.99// 会自动将true和false转为字符串，结果为NaN

String(123);       // '123'String(123.4);     // '123.4'String(2e3);       // '2000'String(NaN);       // 'NaN'String(Infinity);  // 'Infinity'String(0xf);       // '15'String(true);      // 'true'String(false);     // 'false'String(undefined);   // 'undefined'String(null);        // 'null'

// 数字 --> 布尔值    0和NaN转为false，其他转为trueBoolean(123);    // trueBoolean(0);      // falseBoolean(NaN);    // falseBoolean(Infinity);    // trueBoolean(-Infinity);    // true// 布尔值 --> 布尔值     空串转为false，其他转为true;Boolean('');     // falseBoolean('abc');    // trueBoolean('false');  // true// undefined 和 null --> 布尔值      转为falseBoolean(undefined);      // falseBoolean(null);           // false

var num = prompt('请输入第一个数字');    // 返回值为string

3 * '4' 	 // 12true + true    // 2false + 2     // 23 * '2天'     // NaN

Math.pow(2, 3)      // 2^3Math.sqrt(81)      // 9Math.ceil()        // 向上取整Math.floor()       // 向下取整

===     // 全等于!==     // 不全等于// 两个等号 == 运算符不比较值的类型，它会进行隐式转换后比较值是否相等1 == true      // true1===true       // false0 == false     // true0 === false    // false0 == undefined  // false0 === undefined   // falseundefined == null  // trueundefined === null    // false

var arr = ['A', 'B', 'C', 'D']; var arr = new Array('A', 'B', 'C', 'D');var arr = new Array(4);     长度为4的数组，每一项都是undefined

// 常规function fun() {
    // 函数体语句}// 匿名函数var fun = function () {
    // 函数体语句}

fun();function fun() {    // 在预解析阶段会被提升
    alert("函数被执行");}// 如果函数时用函数表达式的写法定义的，则没有提升特性fun();     // 引发错误var fun = function () {
    alert("函数被执行");}

// 函数优先提升// 函数表达式后提升； 变量声明提升，无法覆盖提升的函数fun();    // 弹出Bvar fun = function () {
    alert('A');}function fun() {
    alert('B');}fun();     // 弹出A

function sum(a, b) {
    return a + b;}var result = sum(3, 5);    // 返回值可被变量接收

var arr = [33, 22, 11, 55];arr.sort(function (a, b) {
    if (a > b) {
        return 1;
    }
    return -1;});

var arr1 = [1, 2, 3, [4, 5]];function deepClone(arr) {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            result.push(deepClone(arr[i]));
        } else {
            result.push(arr[i]);
        }
    }
    return result;}

function fun() {
    function inner() {
        console.log('你好');
    }
    inner();   // 调用inner函数}fun();

var a = 10;var b = 20;function fun() {
    var c = 30;
    function inner() {
        var a = 40;
        var d = 50;
        console.log(a, b, c, d);   // 使用变量时，js会从当前层开始，逐层向外寻找定义
    }
    inner();}fun();

(function () {       // 通过圆括号将函数变为表达式
    // statements})();+function() {
    alert(1);}();-function() {
    alert(1);}();

var arr = [];for (var i = 0; i < 5; i++) {
    arr.push(function () {
        alert(i);     
    });}arr[2]();    // 弹出5

var arr = [];for (var i = 0; i < 5; i++) {
    (function (i)  {
        arr.push(function() {
            alert(i);
        });
    })(i);}arr[2]();   // 弹出2

<p id = "box">我是一个盒子</p><p id = "para">我是一个段落</p>

var box = document.getElementById('box');var para = document.getElementById('para');

<p>段落</p><p>段落</p><p>段落</p><p>段落</p>

var ps = document.getElementsByTagName('p');

<p class = "spec">盒子</p><p class = "spec">盒子</p><p class = "spec">盒子</p><p class = "spec">盒子</p>

var spec_ps = document.getElementsByClassName('spec');

<p id = "box1">
    <p>段落</p>
    <p class = "spec">段落</p>
    <p>段落</p>
    <p>段落</p></p>

var the_p = document.querySelector('#box1 .spec');

<body>
    <p id = "box1">
        <p>段落</p>
        <p class = "spec">段落</p>
        <p>段落</p>
        <p>段落</p>
	</p>
    <script>
        var box = document.getElementById('box1');
        var spec = document.getElementsByClassName('spec');
        // 封装一个函数，返回元素的所有子元素节点，类似children的功能
        function getChildren(node) {
            var children = [];
            // 遍历node这个节点的所有子节点，判断每一个字节的nodeType属性是不是1
            // 如果是1， 就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i] == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }
       
        // 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点，类似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            while (o.previousSibling != null) {
                if (o.prebiousSibling.nodeType == 1) {
                    // 结束循环，找到了
                    return o.previousSibling;
                }
                o = o.previousSibling;
            }
            return null;
        }
        
        // 封装一个函数，该函数可以返回元素的所有元素兄弟节点
        function getAllElementSibling(node) {
            var prevs = [];
            var nexts = [];
            var o = node;
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }
            o = node;
            while (o.nextSibling != null) {
                if (o.nextSibling.nodeType == 1) {
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }
            return prevs.concat(nexts);
        }
    </script></body>

<body>
    <p id = "box"></p>
    <script>
        var oBox = document.getElementById('box');
        oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';    // 可以解析HTML语法
        // oBox.innerText = 'niub';    // 里面只能是纯文本
    </script></body>

oBox.style.backgroundColor = 'red';     // CSS 属性要写成驼峰形式oBox.style.backgroundImage = 'url(images/1.jpg)';oBox.style.fontSize = '32px';

oImg.src = 'images/2.jpg';

<body>
    <p id = "box"></p>
    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10);    // 添加data-n属性，值为10
        var n = box.getAttribute('date-n');
        alert(n);
    </script></body>

var op = document.createElement('p');

新父节点.appendChild(已经有父亲的节点);新父节点.insertBefore(已经有父亲的节点, 标杆子节点);// 这意味着一个节点不能同时位于DOM树的两个位置

父节点.removeChild(要删除子节点);

var 孤儿节点 = 老节点.cloneNode();var 孤儿节点 = 老节点.cloneNode(true);

<p id = "box1">
    <p id = "box2">
        <p id = "box3"></p>
    </p></p><script>
    var oBox1 = document.getElementById('box1');
    var oBox2 = document.getElementById('box2');
    var oBox3 = document.getElementById('box3');
    
    oBox1.onclick = function () {
        console.log('box1');
    };
    
    oBox2.onclick = function () {
        console.log('box2');
    };
    
    oBox3.onclick = function () {
        console.log('box3');
    };
    // 点击最里面的盒子，传播方向是从内到外</script>

setInterval(function () {
    // 这个函数将自动被以固定间隔时间调用}, 2000);    // 第二个参数为间隔时间，单位为毫秒// 该函数可以接收第3、4……个参数，他们将按顺序传入函数setInterval(function (a, b) {
    // 形式参数 a 的值是88，形参b的值是66}, 2000, 88, 66);     // 从第三个参数开始，表示传入函数内的参数// 具名函数也可以传入setIntervalvar a = 0;function fun() {
    console.log(++a);};setInterval(fun, 1000);

// 设置定时器，并用timer变量接收这个定时器var timer = setInterval(function () {
    }, 2000);// 点击按钮时，清除定时器oBtn.onclick = function () {
    clearInterval(timer);    };

var timer = setTimeout(function () {
    // 这个函数会在 2 秒后执行一次}, 2000);clearTimeout(timer);    // 清除延时器

setTimeout(function () {
    console.log('A');}, 2000);  // 异步语句console.log('B');    // 异步语句不会阻塞程序的正常执行// 运行结果BA

var lock = true;function 需要节流的函数() {
    // 如果锁时关闭状态，则不执行
    if(!lock) return;
    // 函数核心语句
    
    // 关锁
    lock = false;
    
    // 指定毫秒数后将锁打开
    setTimeout(function () {
        lock = true;
    }, 2000);}

history.back();       // 等同于点击浏览器的回退按钮history.go(-1);       // 等同于 history.back();

window.location = 'http://www.baidu.com';window.location.href = 'http://www.baidu.com';

var obj = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbies: ['足球', '编程']};     // js中 花括号表示对象

var obj = {
    a: 10};obj.b = 40;

var obj = {
    a: 1,
    b: 2};delete obj.a;

var xiaoming = {
    name: '小明',
    age: 12,
    sex: '男',
    hobbys: ['足球','游泳','编程'],
    'favorite-book': '舒克和贝塔',
    sayHello: function () {
        console.log('hello');
    }};

for (var k in obj) {
    console.log('属性' + k + '的值是' + obj[k]);}

var obj1 = {
    a: 1, 
    b: 2, 
    c: [33, 44, {
        m: 55,
        n: 66,
        p: [77, 88]
    }]};function DeepClone(o) {
    if (Array.isArray(o)) {
        var result = [];
        for (var i = 0; i < o.length; i++) {
            result.push(DeepClone(o[i]));
        }
    } else if(typeof o == 'object') {
        var result = {};
        for (var k in o) {
            result[k] = DeepClone(o[k]);
        }
    } else {
        var result = o;
    }
    return result;}

函数.call(上下文);函数.apply(上下文);

function sum(b1, b2) {
    alert(this.c + this.m + this.e + b1 + b2);}sum.call(xiaoming, 5, 3);    // call要用逗号罗列参数sum.apply(xiaoming, [5, 3]);  // apply要把参数写到数组中

new 函数()

function fun() {   // {}   this指向这个空对象
    this.a = 3;
    this.b = 5;    // {a: 3, b: 5}
    // 自动补充return this;}var obj = new fun();console.log(obj);

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}var xiaoming = new People('小明', 12, '男');var xiaoming = new People('小红', 10, '女');var xiaogang = new People('小刚', 13, '男');

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHello = function () {
        console.log('我是' + this.name);
    };}var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}People.prototype.nationality = '中国';     // 在构造函数的prototype上添加nationality属性var xiaoming = new People('小明', 12, '男');console.log(xiaoming.nationality);

xiaoming.hasOwnProperty('name');    // truexiaoming.hasOwnProperty('age');     // truexiaoming.hasOwnProperty('sex');     // truexiaoming.hasOwnProperty('nationality');    // false

'name' in xiaoming     // true'age' in xiaoming      // true'sex' in xiaoming      // true'nationality' in xiaoming    // true

function People(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;}People.prototype.sayHello = function () {
    console.log('我是' + this.name);};var xiaoming = new People('小明', 12, '男');xiaoming.sayHello();

function People(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.arr = [1, 2, 3];}function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school';
    this.sid = sid;}var xiaoming = new Student('小明', '男', 12, '学校', 123456);

var obj2 = Object.create(obj1);// 写法2var obj2 = Object.create(obj1, {    // 第二个参数为一个对象，将要补充的属性写在里面
    d: {    // 属性的值仍然是一个对象
        value : 99     // 值为99
    }     // 可以遮蔽原型上的同名属性});

// 道格拉斯·克罗克福德写的一个函数// 函数功能就是以 o 为原型，创建新对象function object(o) {
    // 创建一个临时构造函数
    function F() {}
    // 让这个临时构造函数的prototype指向o, 这样它new出来的对象，__proto__指向了o
    F.prototype = o;
    return new F();}

function f(o) {
    var p = Object.create(o);
    p.display = function () {
        console.log(111);
    }
    return p;}

function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype);
    subType.prototype = prototype;
}

// 父类
function People(name, sex, age) {
    this.name = name;
    this.sex = sex;
    this.age = age;
}

People.prototype.sayHello = function() {
    console.log("hello");
}
People.prototype.sleep = function () {
    console.log("sleep");
}

// 子类
function Student(name, sex, age, school, sid) {
    People.call(this, name, sex, age);
    this.school = school;
    this.sid = sid;
}

inheritPrototype(Student, People);   // 让Student类的Prototype指向以People.prototype为原型的一个新对象

Student.prototype.exam = function () {
    console.log("exam");
};

var xiaoming = new Student('小明', '男', 12, '学校', 123456);

xiaoming instanceof Student// 底层机理：检查Student.prototype属性是否在xiaoming的原型链上（多少层都行，只要在就行）

Math.pow()
Math.sqrt()
Math.ceil()      // 向上取整
Math.floor()     // 向下取整
Math.round()     // 四舍五入
Math.max()      // 参数列表的最大值
Math.min()

// 计算arr数组的最大值
var arr = [3, 6, 9, 2];
var max = Math.max.apply(null, arr);

new Date()     // 得到当前时间的日期对象
newDate(2020, 11, 1)     // 第二个参数从0开始算
new Date('2020-12-01')

var d = new Date();var timestamp1 = d.getTime();var timestamp2 = Date.parse(d);

var str = '123456';var regxp = /^d{6}$/;if (regxp.text(str)) {
	alert('符合规则');} else {
	alert('不符合规则');}

var regxp2 = new RegExp('^\d{6}$')

/^[by]d{7}$/

var re = /m/gi;var re = new RegExp('m', 'gi');

var str = 'abc123def4567ghi89';
     
// search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
var result1 = str.search(/d+/g);
var result2 = str.search(/m/g);
console.log(result1);       // 3
console.log(result2);       // -1

// match()方法，返回查找到的数组，找不到就是null
var result3 = str.match(/d+/g);
console.log(result3);       // ["123", "4567", "89"]

// replace()方法，进行替换
var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示贪婪的，尽可能多的连续匹配小写字母
console.log(result4);       // *123*4567*89

// split()方法，进行字符串拆为数组
var result5 = str.split(/d+/g);
console.log(result5);       // ["abc", "def", "ghi", ""]