JavaScript

内容都是上pink老师的课参考他的PPT和自己总结的：JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

JavaScript

• JavaScript 数组
  • 数组的概念
    • 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
  • 创建数组
    • 数组的创建方式
      • 利用 new 创建数组
        • var 数组名 = new Array() ； var arr = new Array(); // 创建一个新的空数组
      • 利用数组字面量创建数组
        • //1. 使用数组字面量方式创建空的数组 var 数组名 = []； //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇'];
      • 数组元素的类型
        • 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
        • var arrStus = ['小白',12,true,28.9];
  • 获取数组中的元素
    • 数组的索引
      • 索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）
      • 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。
  • 遍历数组
    • 遍历: 就是把数组中的每个元素从头到尾都访问一次
    • 数组的长度
      • 使用“数组名.length”可以访问数组元素的数量（数组长度）。
      • var arrStus = [1,2,3]; alert(arrStus.length); // 3
  • 数组中新增元素
    • 通过修改 length 长度新增数组元素
      • var arr = ['red', 'green', 'blue']; console.log(arr.length); arr.length = 5; // 把我们数组的长度修改为了 5 里面应该有5个元素 ，新增元素为undefined console.log(arr); console.log(arr[3]); // undefined console.log(arr[4]); // undefined
    • 通过修改数组索引新增数组元素
      • var arr = ['red', 'green', 'blue', 'pink']; arr[4] = 'hotpink'; console.log(arr);
• JavaScript 作用域
  • 作用域
    • 全局作用域
      • 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
    • 局部作用域（函数作用域）
      • 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
    • JS 没有块级作用域
      • 块作用域由 { } 包括。
      • Js中没有块级作用域（在ES6之前）。
  • 变量的作用域
    • 变量作用域的分类
      • 全局变量
        • 在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
        • 全局变量在代码的任何位置都可以使用
        • 在全局作用域下 var 声明的变量 是全局变量
        • 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
      • 局部变量
        • 在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
        • 局部变量只能在该函数内部使用
        • 在函数内部 var 声明的变量是局部变量
        • 函数的形参实际上就是局部变量
      • 全局变量和局部变量的区别
        • 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
        • 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
  • 作用域链
    • 只要是代码，就至少有一个作用域
    • 写在函数内部的局部作用域
    • 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
    • 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
    • 采取就近原则的方式来查找变量最终的值。
• JavaScript 预解析
  • 预解析
    • JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。 JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
    • 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
    • 代码执行： 从上到下执行JS语句。
  • 变量预解析和函数预解析
    • 变量预解析（变量提升）
      • 预解析也叫做变量、函数提升。
      • 变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
    • 函数预解析（函数提升）
      • 函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
• JavaScript 对象
  • 对象
    • 什么是对象
      • 概念
        • 对象是一个具体的事物，看得见摸得着的实物。 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。
      • 组成
        • 属性：事物的特征，在对象中用属性来表示（常用名词）
        • 方法：事物的行为，在对象中用方法来表示（常用动词）
    • 为什么需要对象
      • 保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。
  • 创建对象的三种方式
    • 利用字面量创建对象
      • 概念
        • 对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
        • { } 里面采取键值对的形式表示
          • 键：相当于属性名
          • 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
        • 举例
          • var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } };
    • 利用 new Object 创建对象
      • 对象的调用
        • 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
          • console.log(star.name) // 调用名字属性
        • 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
          • console.log(star['name']) // 调用名字属性
        • 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
          • star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
      • 变量、属性、函数、方法总结
        • 变量：单独声明赋值，单独存在
        • 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
        • 函数：单独存在的，通过“函数名()”的方式就可以调用
        • 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。
      • 举例
        • var andy = new Obect(); andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); }
      • 注意
        • Object() ：第一个字母大写
        • new Object() ：需要 new 关键字
        • 使用的格式：对象.属性 = 值;
    • 利用构造函数创建对象
      • 构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
      • 注意
        • 构造函数约定首字母大写。
        • 2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
        • 3. 构造函数中不需要 return 返回结果。
        • 4. 当我们创建对象的时候，必须用 new 来调用构造函数。
      • 举例
        • function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sayHi = function() { alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex); } } var bigbai = new Person('大白', 100, '男'); var smallbai = new Person('小白', 21, '男'); console.log(bigbai.name); console.log(smallbai.name);
      • 构造函数和对象
        • 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
        • 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化
  • new关键字
    • new 在执行时会做四件事情：
      • 1. 在内存中创建一个新的空对象。
      • 2. 让 this 指向这个新的对象。
      • 3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
      • 4. 返回这个新对象（所以构造函数里面不需要return）。
  • 遍历对象属性
    • for...in 语句用于对数组或者对象的属性进行循环操作。
    • 写法
      • for (变量 in 对象名字) { // 在此执行代码 }
    • 举例
      • for (var k in obj) { console.log(k); // 这里的 k 是属性名 console.log(obj[k]); // 这里的 obj[k] 是属性值 }
• JavaScript 函数
  • 函数的概念
    • 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
  • 函数的使用
    • 声明函数
      • function 函数名() { //函数体代码 }
      • 注意
        • function 是声明函数的关键字,必须小写
        • 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum
    • 调用函数
      • 函数名(); // 通过调用函数名来执行函数体代码
      • 注意
        • 调用的时候千万不要忘记添加小括号
        • 口诀：函数不调用，自己不执行。
        • 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
    • 函数的封装
      • 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
      • 简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
  • 函数的参数
    • 形参和实参
      • 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
      • function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔 // 函数体 }
      • 函数名(实参1, 实参2, 实参3...);
    • 函数参数的传递过程
      • 调用的时候实参值是传递给形参的
      • 形参简单理解为：不用声明的变量
      • 实参和形参的多个参数之间用逗号（,）分隔
    • 函数形参和实参个数不匹配问题
  • 函数的返回值
    • return 语句
      • 有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。
      • // 声明函数 function 函数名（）{ ... return 需要返回的值； } // 调用函数 函数名(); // 此时调用函数就可以得到函数体内return 后面的值
      • 注意
        • 在使用 return 语句时，函数会停止执行，并返回指定的值
        • 如果函数没有 return ，返回的值是 undefined
    • return 终止函数
      • return 语句之后的代码不被执行。
    • return 的返回值
      • return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。
    • 函数没有 return 返回 undefined
      • 函数都是有返回值的
        • 如果有return 则返回 return 后面的值
        • 如果没有return 则返回 undefined
    • break ,continue ,return 的区别
      • break ：结束当前的循环体（如 for、while）
      • continue ：跳出本次循环，继续执行下次循环（如 for、while）
      • return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
  • arguments的使用
    • 概念
      • 当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。 在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。 所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。 arguments展示形式是一个伪数组，因此可以进行遍历。
    • 伪数组特点
      • 具有 length 属性
      • 按索引方式储存数据
      • 不具有数组的 push , pop 等方法
  • 函数的两种声明方式
    • 自定义函数方式(命名函数)
      • 利用函数关键字 function 自定义函数方式。
      • 写法
        • function fn() {...}
      • 特点
        • 因为有名字，所以也被称为命名函数
        • 调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
    • 函数表达式方式(匿名函数）
      • 写法
        • var fn = function(){...}；
      • 特点
        • 因为函数没有名字，所以也被称为匿名函数
        • 这个fn 里面存储的是一个函数
        • 函数表达式方式原理跟声明变量方式是一致的
        • 函数调用的代码必须写到函数体后面
• JavaScript 内置对象
  • 内置对象
    • 概念
      • 指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发
    • 分类
      • 自定义对象
        • JS 基础 内容，属于 ECMAScript
      • 内置对象
        • JS 基础 内容，属于 ECMAScript
      • 浏览器对象
        • JS 独有的
  • 查文档
    • Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
    • MDN: https://developer.mozilla.org/zh-CN/
    • 如何学习对象中的方法
      • 查阅该方法的功能
      • 查看里面参数的意义和类型
      • 查看返回值的意义和类型
      • 通过 demo 进行测试
  • Math对象
    • Math 概述
      • Math 对象不是构造函数，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
    • 随机数方法 random()
      • random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1 ，得到一个两数之间的随机整数，包括两个数在内
    • Math.PI // 圆周率
      • console.log(Math.PI); // 一个属性 圆周率
    • Math.floor() // 向下取整
      • console.log(Math.floor(1.1)); // 1
      • console.log(Math.floor(1.9)); // 1
    • Math.ceil() // 向上取整
      • console.log(Math.ceil(1.1)); // 2
      • console.log(Math.ceil(1.9)); // 2
    • Math.round() // 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
      • console.log(Math.round(1.5)); // 2
      • console.log(Math.round(-1.1)); // -1
      • console.log(Math.round(-1.5)); // 这个结果是 -1
    • Math.abs() // 绝对值
      • console.log(Math.abs(-1)); // 1
      • console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
    • Math.abs() // 绝对值
  • 日期对象
    • Date 概述
      • Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用，实例用来处理日期和时间
    • Date()方法的使用
      • 实例化
        • var now = new Date(); console.log(now);
      • Date() 构造函数的参数
        • 如果Date()不写参数，就返回当前时间
        • 如果Date()里面写参数，就返回括号里面输入的时间
    • 日期格式化
      • var date = new Date();// 以下代码都实例化此对象
      • console.log(date.getFullYear()); // 返回当前日期的年 2019
      • console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1
      • console.log(date.getDate()); // 返回的是 几号
      • console.log(date.getDay()); // 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
      • console.log(date.getHours()); // 时
      • console.log(date.getMinutes()); // 分
      • console.log(date.getSeconds()); // 秒
    • 获取日期的总的毫秒形式
      • 我们经常利用总的毫秒数来计算时间，因为它更精确
  • 数组对象
    • 数组对象的创建
      • 字面量方式
        • var arr = [1, 2, 3];
      • new Array()
        • var arr1 = new Array(2, 3);
    • 检测是否为数组
      • instanceof 运算符 它可以用来检测是否为数组
        • console.log(arr instanceof Array);
      • Array.isArray(参数); H5新增的方法 ie9以上版本支持
    • 添加删除数组元素的方法
      • 1. push() 在我们数组的末尾 添加一个或者多个数组元素
        • (1) push 是可以给数组追加新的元素
        • (2) push() 参数直接写 数组元素就可以了
        • push完毕之后，返回的结果是 新数组的长度
        • (4) 原数组也会发生变化
      • 2. unshift 在我们数组的开头 添加一个或者多个数组元素
        • (1) unshift是可以给数组前面追加新的元素
        • (2) unshift() 参数直接写 数组元素就可以了
        • (3) unshift完毕之后，返回的结果是 新数组的长度
        • (4) 原数组也会发生变化
      • 3. pop() 它可以删除数组的最后一个元素
        • (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
        • (2) pop() 没有参数
        • (3) pop完毕之后，返回的结果是 删除的那个元素
        • (4) 原数组也会发生变化
      • 4. shift() 它可以删除数组的第一个元素
        • (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
        • (2) shift() 没有参数
        • (3) shift完毕之后，返回的结果是 删除的那个元素
        • (4) 原数组也会发生变化
    • 数组排序
    • 数组索引方法
      • indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找，如果在该数组里面找不到元素，则返回的是 -1
        • var arr = ['red', 'green', 'pink']; console.log(arr.indexOf('blue'));//-1
      • 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
        • var arr = ['red', 'green', 'blue', 'pink', 'blue']; console.log(arr.lastIndexOf('blue')); // 4
    • 数组转换为字符串
      • toString() 将我们的数组转换为字符串
        • var arr = [1, 2, 3]; console.log(arr.toString()); // 1,2,3
      • join(分隔符)
        • var arr1 = ['green', 'blue', 'pink']; console.log(arr1.join()); // green,blue,pink console.log(arr1.join('-')); // green-blue-pink console.log(arr1.join('&')); // green&blue&pink
    • 其他方法
  • 字符串对象
    • 基本包装类型
      • 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
      • 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
        • var temp = new String('andy');//(1) 把简单数据类型包装为复杂数据类型 str = temp;// (2) 把临时变量的值 给 str temp = null;// (3) 销毁这个临时变量
    • 字符串的不可变
      • 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
      • 当重新给 对象 再赋值的时候，常量不会被修改，依然在内存中，由于字符串的不可变，在大量拼接字符串的时候会有效率问题
    • 根据字符返回位置
      • 字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
      • indexOf('要查找的字符', [起始的位置])
        • var str = '改革春风吹满地，春天来了'; console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找
    • 根据位置返回字符（重点）
      • charAt(index) 根据位置返回字符
        • var str = 'andy'; console.log(str.charAt(3));//y
      • charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键
        • var str = 'andy'; console.log(str.charCodeAt(0)); // 97,a对应ASCII码为97
      • str[index] H5 新增的
        • var str = 'andy'; console.log(str[0]); // a
    • 字符串操作方法（重点）
      • concat('字符串1','字符串2'....)
        • var str = 'andy'; console.log(str.concat('red'));//andyred
      • substr('截取的起始位置', '截取几个字符');
        • var str1 = '改革春风吹满地'; console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符
    • replace() 方法
      • 用于在字符串中用一些字符替换另一些字符。
      • 使用格式
        • replace(被替换的字符串， 要替换为的字符串)；
    • split()方法
      • 用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
      • 例如下面代码：
        • var str = 'a,b,c,d'; console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
• JavaScript 简单类型与复杂类型
  • 简单类型与复杂类型
    • 简单类型（又叫做基本数据类型或者值类型）
      • 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
      • 是存放在栈里面 里面直接开辟一个空间存放的是值
    • 复杂类型（又叫做引用类型）
      • 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型 通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
      • 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
  • 堆和栈
    • 栈（操作系统）
      • 由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈； 简单数据类型存放到栈里面
    • 堆（操作系统）
      • 存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 复杂数据类型存放到堆里面
    • 注意
      • JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。
  • 简单类型的内存分配
    • 值类型（简单数据类型）： string ，number，boolean，undefined，null
    • 值类型变量的数据直接存放在变量（栈空间）中
  • 复杂类型的内存分配
    • 引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
    • 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中
  • 简单类型传参
    • 函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
    • function fn(a) { a++; console.log(a); } var x = 10; fn(x); console.log(x)；//11
  • 复杂类型传参
    • 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
    • function Person(name) { this.name = name; } function f1(x) { // x = p console.log(x.name); // 刘德华 x.name = "张学友"; console.log(x.name); // 张学友 } var p = new Person("刘德华"); console.log(p.name); // 刘德华 f1(p); console.log(p.name); // 张学友