这里都是基于我在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

JS-基础笔记二次总结(B站跟过黑马的同学看过来)相关推荐

  1. Node.js基础笔记

    Node.js基础笔记 1. NodeJS入门基础 1.1 NodeJS 介绍 1.1.1 NodeJS 是什么 1.1.2 NodeJS 的优势 1.1.3 NodeJS 的技术特性 1.1.4 N ...

  2. (五)JS基础知识二(通过图理解原型和原型链)【三座大山之一,必考!!!】

    JS基础知识二(原型和原型链) 提问 class 继承 类型判断(instanceof) 原型 原型关系 基于原型的执行规则 原型链 说明 提问 如何准确判断一个变量是不是数组 class的原型本质 ...

  3. auto.js基础笔记

    auto.js基础笔记 控件的描述查找与点击 找控件的方法 text("文字") ==> 找"文字" 控件 textContains("文字&q ...

  4. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  5. Vue.js 学习笔记 二,一些输出指令

    Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...

  6. MATLAB 基础笔记(二):常用矩阵的生成

    笔记二是简单介绍常用矩阵的生成 目录 笔记二是简单介绍常用矩阵的生成 1.零矩阵的生成 2.单位矩阵的生成 3.全1矩阵的生成 4.随机整数向量生成 5.生成指定对角线元素矩阵 6.生成对角矩阵 7. ...

  7. JS学习笔记二——JavaScript 基础知识

    JavaScript 基础知识 一.JavaScript 变量 二.JavaScript 的输出 三.JavaScript 运算符 四.结语 一.JavaScript 变量 变量是指在程序运行过程中, ...

  8. HTML/css/js 基础笔记

    网站的建站流程 页面图例 网页的结构 WEB标准 WEB标准是网页制作的标准,它不是一个标准,它是根据网页的不同组成部分生成的一系列标准.这些标准大部分由W3C起草发布,也有部分标准由ECMA起草发布 ...

  9. 面向对象编程(OOP)----BLUE大师JS课堂笔记(二)

    一,把面向过程的程序改写成面向对象的程序 1.前提   所有的程序都在onload里面 2.改写   不能函数嵌套,可以全局变量 3.onload-------------------->构造函 ...

最新文章

  1. 时间复杂度的计算方法
  2. 对于flat_interface与public_interface的理解
  3. AnyHand——普通摄像头静态手势识别库
  4. 统一代码风格工具 editorConfig
  5. java如何记录查看记录_Java如何检查消息是否可记录?
  6. Loj#6039-「雅礼集训 2017 Day5」珠宝【四边形不等式,dp】
  7. jQuery表单验证的几种方法
  8. T-SQL LIKE子句 模糊查询
  9. 异步、多线程、任务、并行编程之一:选择合适的多线程模型
  10. mysql设置user权限允许远程_mysql 用户及权限管理 允许远程连接
  11. uniapp小程序webSocket封装、断线重连、心跳检测
  12. fdfs手动上传下载
  13. Linux文件编辑常用命令
  14. matlab 隐函数求偏导数,隐函数求偏导数的方法.PDF
  15. 基于51单片机——60秒倒计时时钟
  16. 你的计算机无法启动怎么回事,电脑无法正常启动如何做系统-“你的电脑未能正确启动”的解决方法...
  17. 《宏观经济学》 学习笔记
  18. 半导体封装行业晶圆划片机的切割良率如何把控?
  19. 同时收到多家公司offer,怎样选择?
  20. Android 仿微信语音录音小控件

热门文章

  1. html反编译pug,学html5不得不说的html5shiv.js和pug
  2. git linux 文件名乱码,git 中文文件名乱码
  3. GoEXP规则变更通知 l 信创额外奖励活动
  4. FreeBSD的优缺点分析(转载)
  5. matlab stract结构_科学网—[MATLAB]方便快捷读取结构体里数个结构体内的数据 - 胡振东的博文...
  6. oracle11完全卸载
  7. 2018-4-18《给孩子讲量子力学》
  8. 数学建模 --- 绘制三维图
  9. houdini视图切换快捷键
  10. 福建省计算机会考题目,福建信息技术会考历年试题(——).pdf