JS-基础笔记二次总结（B站跟过黑马的同学看过来）

这里都是基于我在B站跟过的黑马教学视频上的PPT进行二次总结的笔记，结合了自己平时的加注和记录。欢迎跟过黑马视频的小伙伴们一起来复习Pink老师授予我们的快乐知识，在此也非常感谢黑马机构，让我有系统的资料对前端技术有了整体性的学习。这里也非常适合新手对JS有一个非常系统的了解与整体认识。那么，开始吧。

一、初识JavaScript

1、JavaScript的作用

1. 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
2. 网页特效
3. 服务端开发(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物联网(Ruff)
7. 游戏开发(cocos2d-js)

2、HTML/CSS/JS 的关系

（1）HTML/CSS 标记语言--描述类语言

1. HTML 决定网页结构和内容( 决定看到什么 )，相当 于人的身体
2. CSS 决定网页呈现给用户的模样( 决定好不好看 )， 相当于给人穿衣服、化妆

（2）JS 脚本语言--编程类语言

实现业务逻辑和页面控制( 决定功能 )，相当 于人的各种动作

3、浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

1. 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
2. JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释

每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

4、JS的组成

（1）ECMAScript

ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

（2）DOM ——文档对象模型

文档对象模型 （Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的 标准编程接口 。

通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

（3）BOM ——浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行

互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

5、JavaScript输入输出语句

注意： alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

二、变量

1、变量在使用时分为两步： 1. 声明变量 2. 赋值。变量是内存里的一块空间，用来存储数据。

2.声明一个变量并赋值， 我们称之为变量的初始化。声明变量本质是去内存申请空间。

3.同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 10, name = 'zs', sex = 2;

4.声明变量特殊情况

5.变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成；严格区分大小写；不能 以数字开头；不能 是关键字、保留字；变量名必须有意义；遵守驼峰命名法。

三、数据类型

1、为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利

用存储空间，于是定义了不同的数据类型。

2、变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的

内存中。 JavaScript 是一种弱类型或者说动态语言。 这意味着不用提前声明变量的类型，在程序运行过程中，类型会

被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。 JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

var x = 6; // x 为数字
var x = "Bill"; // x 为字符串

3、数据类型的分类

（1）JS 把数据类型分为两类：

1.简单数据类型 ：Number,String,Boolean,Undefined,Null

2.复杂数据类型 ：object

（2）数字型 Number

1.数字型范围：

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

最小值：Number.MIN_VALUE，这个值为：5e-32

 

2.数字型三个特殊值

Infinity ，代表无穷大，大于任何数值 ；-Infinity ，代表无穷小，小于任何数值 ；NaN ，Not a number，代表一个非数值。

 

3.isNaN()：用来判断一个变量是否为非数字的类型，返回 true 或者 false

（3）字符串型 String

字符串型 可以是引号中的任意文本，其语法为 双引号 "" 和 单引号'' 。 因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更 推荐使用单引号。

1. 字符串引号嵌套： 外双内单，外单内双

2. 字符串转义符

3. 字符串长度： 通过字符串的 length 属性可以获取整个字符 串的长度。

4. 字符串拼接 ： 字符串 + 任何类型 = 拼接之后的新字符串 ； 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串 。 + 号总结口诀：数值相加 ，字符相连。

 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值

 变量是不能添加引号的，因为加引号的变量会变成字符串

 如果变量两侧都有字符串拼接，口诀“ 引引加加 ”，删掉数字，变量写加中间

（4）布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

（5）Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ，一个声明变量给 null 值，里面存的值为空。

4、获取检测变量的数据类型

（1）typeof 可用来获取检测变量的数据类型

（2）字面量：源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

 数字字面量：8, 9, 10

 字符串字面量：'程序员', "大前端"

 布尔字面量：true，false

5、数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变

量的数据类型。通俗来说，就是 把一种数据类型的变量转换成另外一种数据类型 。

我们通常会实现3种方式的转换：

（1） 转换为字符串类型

toString() 和 String() 使用方式不一样。

推荐用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

（2）转换为数字型

注意 parseInt 和 parseFloat 单词的大小写 ，这2个是重点

隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

（3）转换为布尔型

Boolean()函数： 代表 空 、 否定的值 会被转换为 false ，如 ''、0、NaN、null、undefined ；其余值都会被转换为 true
 

 

扩展：解释型语言和编译型语言

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行

程序。程序语言翻译成机器语言的工具，被称为翻译器。

翻译器翻译的方式有两种：一个是 编译 ，另外一个是 解释 。两种方式之间的区别在于 翻译的时间点不同

1. 编译器是在 代码执行之前进行编译 ，生成中间代码文件

2.解释器是在 运行时进行及时解释 ，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

四、运算符

1、短路运算（逻辑中断）

短路运算的原理： 当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

（1）逻辑与

 语法： 表达式1 && 表达式2

 如果第一个表达式的值为真，则返回表达式2 ；如果第一个表达式的值为假，则返回表达式1

（2）逻辑或

 语法： 表达式1 || 表达式2

 如果第一个表达式的值为真，则返回表达式1 ；如果第一个表达式的值为假，则返回表达式2

 

 

五、流程控制

1、三元表达式

1. 语法结构

表达式1 ? 表达式2 : 表达式3;

2. 执行思路

 如果表达式1为 true ，则返回表达式2的 值 ，如果表达式1为 false，则返回表达式3的 值

 简单理解： 就类似于 if else （双分支） 的简写

2、分支流程控制 switch 语句

1.语法结构

switch( 表达式 ){ 
 case value1:
 // 表达式 等于 value1 时要执行的代码
 break;
 case value2:
 // 表达式 等于 value2 时要执行的代码
 break;
 default:
 // 表达式 不等于任何一个 value 时要执行的代码
}

 switch ：开关 转换 ， case ：小例子 选项

 关键字 switch 后面 括号内 可以是 表达式 或 值 ， 通常是一个 变量

 关键字 case , 后跟一个选项的表达式或值， 后面跟一个冒号

 switch 表达式的值会与结构中的 case 的值做比较

 如果存在匹配 全等 (===) ，则与该 case 关联的代码块会被执行，并在遇 到 break 时停止 ，整个 switch 语句代码

执行结束

 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

 

3、switch 语句和 if else if 语句的区别

① 一般情况下，它们两个语句可以相互替换

② switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、

等于某个范围)

③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多

少次。

④ 当分支比较少时，if… else语句的执行效率比 switch语句高。

⑤ 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

六、循环

1.使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
2.先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码
3.break 关键字用于立即跳出整个循环（循环结束）。

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
   }

for 里面的 i 是计数器

4.断点调试流程：

    1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
    2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
    3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

七、数组

1、数组的概念

数组是指 一组数据的集合 ，其中的每个数据被称作 元素 ，在数组中可以 存放任意类型的元素 。数组是一

种将 一组数据存储在单个变量名下 的优雅方式。

2、创建数组

（1）利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组

注意 Array () ，A 要大写

（2） 利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];

 

数组的字面量是方括号 [ ] ，声明数组并赋值称为数组的初始化 。这种字面量方式也是我们以后 最多使用的方式

3、遍历数组

（1）遍历: 就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

我们可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
 console.log(arrStus[i]);
}

（2）数组的长度：使用“数组名.length”可以访问数组元素的数量（数组长度）。

注意： 此处数组的长度是 数组元素的个数 ，不要和数组的 索引号 混淆。

 

4、数组中新增元素

（1）通过修改 length 长度新增数组元素

（2）通过修改数组索引新增数组元素

5、数组案例

（1）删除指定数组元素

要求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。

① 需要一个新数组用于存放筛选之后的数据。

② 遍历原来的数组，把不是 0 的数据添加到新数组里面( 此时要注意采用 数组名+索引 的格式接收数据)。

③ 新数组里面的个数，用 length 不断累加。

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = []; // 空数组的默认的长度为 0 
// 定义一个变量 i 用来计算新数组的索引号
for (var i = 0; i < arr.length; i++) {
 // 找出大于 0 的数
 if (arr[i] != 0) {
 // 给新数组
 // 每次存入一个值，newArr长度都会 +1 
 newArr[newArr.length] = arr[i];
 } }
console.log(newArr);

（2）翻转数组

要求: 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放。

var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
 // newArr 是接收方，arr 是输送方
 newArr[i] = arr[arr.length - i - 1];
}
console.log(newArr);

（3）冒泡排序

把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。

例如，我们可以将数组 [5, 4, 3, 2, 1]中的元素按照从小到大的顺序排序，输出： 1，2，3，4，5

 var arr = [5, 4, 3, 2, 1];
     for (var i = 0; i < arr.length - 1; i++) {
         for (var j = 0; j < arr.length - i - 1; j++) {
             if (arr[j] > arr[j + 1]) {
                 var temp = arr[j];
                 arr[j] = arr[j + 1];
                 arr[j + 1] = temp;
             }
         }
     }
console.log(arr);

八、函数

1、概念

函数： 就是封装了一段 可被重复调用执行的 代码块

2、函数的使用

函数在使用时分为两步：声明函数 和调用函数。

（1）声明函数

function 是声明函数的关键字, 必须小写。

由于函数一般是为了实现某个功能才定义的， 所以通常我们将 函数名 命名为 动词 ，比如 getSum

1. 自定义函数方式(命名函数)

因为有名字，所以也被称为命名函数 。调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

// 声明定义方式
function fn() {...}
// 调用 
fn();

2. 函数表达式方式（匿名函数）

函数调用的代码必须写到函数体后面

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

（2）调用函数

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

调用的时候千万 不要忘记添加小括号

注意： 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

 

（3）函数的封装

 

把一个或者多个功能通过 函数的方式封装起来 ，对外只提供一个简单的函数接口

/* 
 计算1-100之间值的函数
*/
// 声明函数
function getSum(){
 var sumNum = 0;// 准备一个变量，保存数字和
 for (var i = 1; i <= 100; i++) {
 sumNum += i;// 把每个数值 都累加 到变量中
 }
 alert(sumNum);
}
// 调用函数
getSum();

3、函数的参数

（1）形参和实参

在 声明函数时 ，可以在函数名称后面的小括号中添加一些参数，这些参数被称为 形参 ，而在 调用该函数时 ，

同样也需要传递相应的参数，这些参数被称为 实参 。

 

参数的作用 : 在 函数内部 某些值不能固定，我们可以通过参数在 调用函数时传递 不同的值进去。

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
 // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

（2）函数形参和实参个数不匹配问题

注意： 在JavaScript中，形参的默认值是 undefined。

 

（3）小结

 函数可以带参数也可以不带参数

 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined

 调用函数的时候，函数名括号里面的是实参

 多个参数中间用逗号分隔

 形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

4、函数的返回值

（1）return 语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

// 声明函数
function 函数名（）{
 ...
 return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

在使用 return 语句时，函数会停止执行，并返回指定的值 。函数都是有返回值的 ，如果有return 则返回 return 后面的值，如果函数 没有 return ，返回的值是 undefined。

return 只能返回一个值 。如果用逗号隔开多个值，以最后一个为准。

 

（2）利用函数求任意一个数组中的最大值

//定义一个获取数组中最大数的函数
function getMaxFromArr(numArray){
 var maxNum = 0;
 for(var i =0;i < numArray.length;i++){
 if(numArray[i] > maxNum){
 maxNum = numArray[i];
 }
 }
 return maxNum;
}
var arrNum = [5,2,99,101,67,77];
var maxN = getMaxFromArr(arrNum); // 这个实参是个数组
alert('最大值为：'+ maxN);

（3）break ,continue ,return 的区别

 break ：结束当前的循环体（如 for、while）

 continue ：跳出本次循环，继续执行下次循环（如 for、while）

 

 return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

 

5、arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上

它是当前函数的一个 内置对象 。所有函数都内置了一个 arguments 对象，arguments 对象中 存储了传递的

所有实参 。

arguments展示形式是一个伪数组 ，因此可以进行遍历。伪数组具有以下特点：

 具有 length 属性

 按索引方式储存数据

 不具有数组的 push , pop 等方法

 

案例：利用函数求任意个数的最大值

function maxValue() {
 var max = arguments[0];
 for (var i = 0; i < arguments.length; i++) {
 if (max < arguments[i]) {
 max = arguments[i];
 }
 }
 return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

6、函数案例

（1）利用函数封装方式，翻转任意一个数组

function reverse(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);

（2）利用函数封装方式，对数组排序 -- 冒泡排序

function sort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

（3）函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。

function fn1() {
 console.log(111);
 fn2();
 console.log('fn1');
}
function fn2() {
 console.log(222);
 console.log('fn2');
}
fn1();

九、作用域

1、全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

2、局部作用域 （函数作用域）

作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。

3、全局变量和局部变量的区别

 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被 销毁，因此更节省内存空间；函数的 形参 实际上就是局部变量

4、作用域链

只要是代码，就至少有一个作用域 ；写在函数内部的局部作用域 ；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

作用域链：采取 就近原则 的方式 来查找变量最终的值。

 

十、预解析

1、概念

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的 时候分为两步：预解析和代码执行。

 

 预解析： 在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中 进行提前声明或者定义。

 代码执行： 从上到下执行JS语句。

 

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前 2、访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

 

预解析也叫做变量、函数提升。

2、变量预解析（变量提升）

变量提升： 变量的声明会被提升到 当前作用域 的最上面，变量的赋值不会提升。

 

3、函数预解析（函数提升）

函数提升： 函数的声明会被提升到 当前作用域的 最上面，但是不会调用函数。

 

十一、对象

1、什么是对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、

函数等。

对象是由 属性 和 方法 组成的。

 属性：事物的 特征， 在对象中用 属性 来表示（常用名词）

 方法：事物的 行为， 在对象中用 方法 来表示（常用动词）

 

2、为什么需要对象

保存一个值时，可以使用 变量， 保存多个值（一组值）时，可以使用 数组。 如果要保存一个人的完整信息呢？

JS 中的对象表达结构更清晰，更强大。

3、创建对象的三种方式

（1）利用字面量创建对象

1.对象字面量： 就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取 键值对 的形式表示

 键：相当于属性名

 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

 

var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};

2.对象的调用

 对象里面的属性调用 : 对象.属性名 ， 这个小点 . 就理解为“ 的 ”

 对象里面属性的另一种调用方式 : 对象[‘属性名’] ， 注意方括号里面的属性 必须加引号 ，我们后面会用

 对象里面的方法调用： 对象.方法名() ， 注意这个方法名字后面 一定加括号

 

3. 变量、属性、函数、方法总结

 变量：单独声明赋值，单独存在

 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

 函数：单独存在的，通过“函数名()”的方式就可以调用

 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象 的行为和功能。

（2）利用new Object创建对象

 Object() ：第一个字母大写

 new Object() ：需要 new 关键字

 使用的格式： 对象.属性 = 值;

（3）利用构造函数创建对象

构造函数 ： 是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起

使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

 构造函数用于创建某一类对象，其 首字母要大写

 构造函数要 和 new 一起使用 才有意义

注意

1. 构造函数约定 首字母大写 。

2. 函数内的 属性和方法前 面需要添加 this ，表示当前对象的属性和方法。

3. 构造函数中 不需要 return 返回结果。

4. 当我们创建对象的时候， 必须用 new 来调用构造函数。

（4）构造函数和对象

 构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）

 创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

 

4、new关键字

new 在执行时会做四件事情：

1. 在内存中创建一个新的空对象。

2. 让 this 指向这个新的对象。

3. 执行构造函数里面的代码，给这个新对象添加属性和方法。

4. 返回这个新对象（所以构造函数里面不需要return）。

5、遍历对象属性

for...in 语句 用于对数组或者对象的属性进行循环操作。

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key 。

 

for (变量 in 对象名字) {
// 在此执行代码
}


for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}

6、小结

1. 对象可以让代码结构更清晰

2. 对象复杂数据类型object。

3. 本质：对象就是一组无序的相关属性和方法的集合。

4. 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。

5. 对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。

6. for...in 语句用于对对象的属性进行循环操作。

十二、内置对象

1、内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象

 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解

 内置对象 就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

 内置对象最大的优点就是帮助我们快速开发

 JavaScript 提供了多个内置对象： Math 、 Date 、 Array 、 String 等

详细可查看 MDN: https://developer.mozilla.org/zh-CN/

 

2、Math

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。 跟数学相关的运算（求绝对值，取整、最大值

等）可以使用 Math 中的成员。

Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值

注意：上面的 方法必须带括号

随机数方法 random()：可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

得到一个两数之间的随机整数，包括两个数在内

function getRandom(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min; 
}

3、Date

是一个构造函数，所以我们需要实例化后才能使用

 

（1） Date()方法的使用

1. 获取当前时间必须实例化

var now = new Date();
console.log(now);

2. Date() 构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2020-6-1’，可以写成new Date('2020-6-1')

或者 new Date('2020/6/1')

 如果Date()不写参数，就返回当前时间

 如果Date()里面写参数，就返回括号里面输入的时间

（2） 日期格式化

我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？

需要获取日期指定的部分，所以我们要手动的得到这种格式。

4、数组对象

（1）检测是否为数组

 instanceof 运算符，可以判断一个对象是否属于某种类型

 Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

（2） 添加删除数组元素的方法

 

（3）数组排序

 

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
 return b - a; // 降a序
 // return a - b; // 升序
});
console.log(arr);

（4）数组索引方法

 

（5）数组转换为字符串

（6）补充

5、字符串对象

（1）基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型 就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把
基本数据类型包装为复杂数据类型，其执行过程如下 ：

// 下面代码有什么问题？
var str = 'andy';
console.log(str.length);


// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

（2）字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
 str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

（3）根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

（4）根据位置返回字符（重点）

（5）字符串操作方法（重点）

（6）replace()方法

replace() 方法用于在字符串中用一些字符 替换 另一些字符。

其使用格式如下：

replace(被替换的字符串， 要替换为的字符串)；

（7）split()方法

 

split() 方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

例如下面代码：

var str = 'a,b,c,d';

console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]

（8）补充

 toUpperCase() //转换大写

 toLowerCase() //转换小写

 

 

 

 

 

 

 

end