世界要闻：万字图解JavaScript笔记总结

【相关推荐：javascript视频教程、web前端】

【资料图】

变量

变量声明的提升

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

数据类型

基本数据类型

Number

String

Boolean

Undefined

Null

复杂数据类型

Typeof运算符

可以用来检测值或变量的类型

typeof 5;          // numbertypeof "niubi";   // string

数据类型转换

使用**Number()**函数

// 字符串 --> 数字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()**函数将字符串转为整数

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

**parseFloat()**函数将字符串转为浮点数

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

**String()**函数

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"

**Boolean()**函数

// 数字 --> 布尔值    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

**prompt()**函数函数弹出输入框

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

表达式与运算符

隐式类型转换

如果参与数学运算的某操作数不是数字型，那么JavaScript会自动将此操作数转换位数字型

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

toFixed(a)方法保留a位小数

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

**isNaN()**函数判断变量值是否为NaN

短路求值

逻辑运算优先级：非 --> 与 --> 或

综合运算运算顺序：非 --> 数学运算 --> 关系运算 --> 逻辑运算

流程控制语句

随机数函数Math.random()

数组

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

实参与形参个数不同

arguments类数组对象

var声明与省略

返回值

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

若函数没有返回值，则对它打印的结果是undefined

sort(a, b)方法

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();

闭包

立即调用函数IIFE

特殊写法，一旦被定义，就立即被调用

函数必须转为函数表达式才能被调用

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

可以用来给变量赋值

var age = 12;var sex = "男";var title = (function () {    if (age < 18) {        return "小朋友";    } else {        if (sex == "男") {            return "先生";        } else {            return "女士";        }    }})();

在一些场合（如for循环中）将全局变量变为局部变量，语法更紧凑

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

DOM

nodeType常用属性值

节点的nodeType属性可以显示这个节点具体的类型

document对象

访问元素节点的常用方法

document.getElementById()

我是一个盒子
我是一个段落

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

getElementsByTagName()

段落
段落
段落
段落

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

getElementsByClassName()

盒子
盒子
盒子
盒子

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

querySelector()

    
段落
    
段落
    
段落
    
段落

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

querySelectAll()

延迟运行

使用window.onload = function() {}事件（给window对象添加事件监听，onload表示页面都加载完毕了），使页面加载完毕后，再执行指定的代码

节点的关系

注意：文本节点也属于节点，所以我们一般情况下会排除文本节点的干扰（用只考虑元素节点）

书写常见节点关系函数

    
        
段落
        
段落
        
段落
        
段落
    <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>

改变元素节点中的内容

改变元素节点中的内容可以使用两个相关属性

innerHTML

innerText

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

改变元素节点的CSS样式

相当于在设置行内style属性

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

改变元素节点的HTML属性

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

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

节点的创建

document.createElement()方法用于创建一个指定tagname的HTML元素

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

移动节点

如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动

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

删除节点

removeChild() 方法从DOM中删除一个子节点

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

克隆节点

cloneNode()方法可以克隆节点，克隆出的节点是”孤儿节点“

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

事件

onmouseenter不冒泡，onmouseover冒泡

当盒子嵌套时事件监听的执行顺序

    
        
    
<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>

事件传播

事件对象

对象相关属性

阻止默认事件

e.preventDefault()方法用来阻止事件产生的“默认动作”

e.stopPropagation()方法用来阻止事件继续传播

批量添加事件监听性能问题

事件委托

相关属性

定时器

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);

清除定时器

clearInterval() 函数可以清除一个定时器

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

延时器

setTimeout() 函数可以设置一个延时器，当指定时间到了之后，会执行函数一次，不再重复执行

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

异步

setInterval() 和 setTimeout() 是两个异步语句

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

函数节流

一个函数执行一次后，只有大于设定的执行周期后才允许执行第二次

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

BOM

ｗindow对象

全局变量会成为window对象的属性

var a = 10;console.log(window.a == a);   // true

这意味着多个js文件之间是共享全局作用域的，即js文件没有作用域隔离功能

内置函数普遍是window的方法

如setInterval()、alert()等内置函数，普遍是window的方法

窗口尺寸相关属性

获得不包含滚动条的窗口宽度，要用document.documentElement.clientWidth

resize事件

在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener(‘resize’)来绑定事件处理函数

已卷动高度

window.scrollY属性表示在垂直方向已滚动的像素值

document.documentElement.scrollTop属性也表示窗口卷动高度

scroll事件

在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或者window.addEventListener(‘scroll’)来绑定事件处理函数

Navigator对象

window.navigator属性可以检索navigator对象，它内部含有用户此次活动的浏览器的相关属性和标识

History对象

window.history 对象提供了操作浏览器会话历史的接口

常用的操作就是模拟浏览器回退按钮

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

Location对象

window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转

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

重新加载当前页面

可以调用location的reload方法以重新加载当前页面，参数true表示从服务器强制加载

window.location.reload(true);

GET 请求查询参数

window.location.search 属性即为当前浏览器的 GET 请求查询参数

offsetTops属性

该属性表示此元素到定位祖先元素的垂直距离

定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素

面向对象

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

注意：

如果对象的属性键名不符合js标识符命名规范，则这个键名必须用引号包裹

如果属性名不符合js标识符命名规范，则必须用方括号的写法来访问

如果属性名以变量形式存储，则必须使用方括号形式

var obj = {    a: 1,    b: 2,    c: 3};var key = "b";console.log(obj.key);    // undefinedconsole.log(obj[key]);   // 2

对象的创建

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

删除属性

使用delete操作符删除某个对象的属性

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

对象的方法

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

对象的遍历

对象的遍历需要使用for…in…循环，可是遍历对象的每个键

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;}

函数的上下文

函数中可以使用this关键字，它表示函数的上下文

同一个函数，用不同的形式调用它，则函数的上下文不同

函数只有被调用，他的上下文才能被确定

相关规则

函数.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操作符调用函数

new 函数()

js规定，使用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();

prototype

任何函数都有prototype属性，prototype是英语”原型“的意思，prototype属性值是个对象，它默认拥有constructor属性指回函数

构造函数的prototype是实例的原型

原型链查找

实例可以打点访问它的原型的属性和方法，这被成为”原型链查找“

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);

hasOwnProperty()

该方法可以检查对象是否真正”自己拥有“某属性或者方法

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

in

in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法

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

在prototype上添加方法

将方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费，可以通过将方法写道prototype上来解决。

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();

原型链的终点

数组的原型链

继承

让Student的prototype属性指向父类的实例，然后给Student的prototype添加Student的方法

通过原型链实现继承的问题

在子类构造函数的内部调用超类的构造函数，但要注意使用call()绑定上下文

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);

将借用原型链和借用构造函数的技术组合到一起，叫做组合继承，也叫做伪经典继承

缺点：

原型式继承

Object.create()方法，可以根据指定的对象为原型创建出新对象(IE9)

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

在没有必要 “兴师动众” 的创建构造函数，而只是想让新对象与现有对象 “类似” 的情况下，使用Object.create() 即可胜任，称为原型式继承

Object.create() 的兼容性写法

在低版本浏览器中实现Object.create()

// 道格拉斯·克罗克福德写的一个函数// 函数功能就是以 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);

instanceof运算符

用来检测 ”某对象是不是某个类的实例“

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

内置构造函数

JavaScript有很多内置构造函数，比如Array就是数组类型的构造函数，Function就是函数类型的构造函数，Object就是对象类型的构造函数

内置构造函数非常有用，所有该类型的方法都是定义在它的内置构造函数的prototype上的，我们可以给这个对象添加新的方法，从而拓展某些类型的功能

内置构造函数的关系

Object.prototype是万物原型链的终点，JavaScript中函数数组皆为对象。

包装类

Math对象

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);

Date对象

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}$/

使用短横-来指定一个字符范围，^表示否定

量词

修饰符

也叫标志（flags），用于使用正则表达式实现高级搜索

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

正则表达式相关方法

字符串的相关正则方法

var str = "abc123def4567ghi89";     // search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1var result1 = str.search(/\d+/g);var result2 = str.search(/m/g);console.log(result1);       // 3console.log(result2);       // -1// match()方法，返回查找到的数组，找不到就是nullvar 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", ""]

【相关推荐：javascript视频教程、web前端】

以上就是万字图解JavaScript笔记总结的详细内容，更多请关注php中文网其它相关文章！

关键词： 构造函数 正则表达式 事件监听