一、js浏览器发展史

1.浏览器组成：

1. shell部分：

   Shell是指浏览器的外壳：例如菜单，工具栏等。

   功能：主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。

2. 内核部分： 内核是基于标记语言显示内容的程序或模块。

   • 渲染引擎(layout engineer或者Rendering Engine)

   • JS引擎

     JS引擎是解析Javascript语言，执行javascript语言来实现网页的动态效果。

2.浏览器的结构

1. 用户界面。包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
2. 浏览器引擎。在用户界面和呈现引擎之间传送指令。
3. 渲染引擎。负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络。用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端。用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

3.主流浏览器及其内核

1. IE浏览器内核：Trident内核，也是俗称的IE内核；
2. Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核
3. Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4. Safari浏览器内核：Webkit内核；
5. Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6. 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7. 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8. 百度浏览器、世界之窗内核：IE内核；
9. 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

3.1浏览器内核主要指的是浏览器的渲染引擎。

2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

二、js介绍

1.js是什么

• Javascript（JS）是一种脚本语言，是由浏览器解释执行的, 简称js。

它能够让网页和用户有交互功能, 增加良好的用户体验效果。主要用于Web，它用于增强HTML页面，通常可以嵌入HTML代码中。

• js程序可以称为脚本

1.1 JavaScript并非java

JavaScript可以控制浏览器的行为和内容，但是却不能绘图和执行连网。

而Java虽然不能在总体上控制浏览器，但是却java可以进行绘图、执行连网和多线程。

客户端的JavaScript可以与嵌入网页的Java applet进行交互，并且能够对它进行控制，从这一意义上说，JavaScript真的可以脚本化Java。

2.JS的特点

1. **解释性：**javascript是一种解释语言，源代码不需要经过编译，直接在浏览器上运行时被解释。
2. 跨平台：JavaScript依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。
3. 安全性：JavaScript是一种安全性语言。它不允许访问本地的磁盘，并不能将数据存入服务器上；不允许对网络文本进行修改和删除，只能通过浏览器实现信息浏览或动态交互。可有效的防止数据丢失。
4. 简单性：JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
5. 单线程，事件驱动：JavaScript对用户的响应，是以事件驱动的方式进行的。在网页（Web Page）中执行了某种操作所产生的动作，被称为“事件”（Event）。例如按下鼠标、移动窗口、选择菜单等都可以被视为事件。当事件发生后，可能会引起相应的事件响应，执行某些对应的脚本，这种机制被称为“事件驱动”。

3.js的应用场景

1.网页特效

2.服务端开发(Node.js)

3.命令行工具(Node.js)

4.桌面程序(Electron)

5.APP(cordova)

6.控制硬件–物联网(Ruff)

7.游戏开发(cocos2d-js)

4.js的组成

1.ECS—ECMAScript-------JS的标准，js的基础语法

2.Dom–Document object model----文档对象模型，和程序交互

3.Bom–Browser object model-----浏览器对象模型，和浏览器交互

5.客户端JavaScript

• 当把一个JavaScript解释器嵌人Web浏览器时，就形成了客户端JavaScript。

  这是迄今为止最普通的JavaScript变体。当人们提到JavaScript时，通常所指的是客户端JavaScript。

5.1 客户端JavaScript的特性

1.控制文档的外观和内容

JavaScript的 Document对象使用write()方法，可以在浏览器解析文档时把任何HTML文本写入文档中。

也可以使用Document对象从头开始生成一个完整文档。Document对象的属性允许你指定文档的背景颜色、文本颜色以及文档中的超文本链接颜色。

其实这就是生成动态的、有条件的HTML文档的能力，这种技术在多框架的文档中更加适用。实际上，在某些情况下，JavaScript程序还可以利用动态生成框架内容这一技术完全地替换一个传统的服务器端脚本。

2.对浏览器的控制

**windows对象：**支持弹出对话框以向用户显示简单消息的方法，还支持从用户那里获取简单输入信息的方法。此外.

**Location对象：**可以在浏览器的任·个框架或窗口中装载并显示出任意的URL所指的文档

History对象：则可以在用户的浏览历史中前后移动，模拟浏览器的Forward按钮和Back 按钮的动作

3.与html表单的交互

这种能力是由Form对象以及它含有的表单元素对象(即Button对象、Checkbox对象、Hidden对象、Password对象、Radio对象、Reset对象、Select对象、Submit对象、Text对象和Textarea对象）提供的。这些元素对象使得你能够对文档中某个表单的输入心素的值进行读写操作。

• 在提交表单之前对表单数据进行验证：如果客户端的JavaScript代码能够对用户的输入进行所有必要的错误检查，那么服务器端就没有必要再大费周折地检测并通知用户琐碎的输入错误了。

• 能够对输入的数据进行预处理，这就大大减少了要发送给服务器的数据量。在某些情况下，客户端JavaScript甚至可以消除对服务器上的脚

  例题：计算借贷支出（如图）

  

4.与用户的交互

• 能够定义事件处理器，即在特定的事件发生时要执行的代码段。这些事件通常都是用户触发的，例如把鼠标移到一个超文本链接、在表单中输入了一个值或者点击了表单中的Submit按钮。这种处理事件的能力是至关重要的，因为具有图形界面(如HTML表单)的程序设计内在地要求一种事件驱动的模型
• JavaScript可以触发任意一种类型的动作来响应用户事件。

三、js基础语法

1. JavaScript(es6)

1.块级作用域

let实际上为 JavaScript 新增了块级作用域。

ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域

2. 声明变量的6种方法

var(es5)、function(es5)、class/全局变量 let、const、import

var、let、const的区别

var ——ES5 变量声明方式

1. 在变量未赋值时，变量undefined（为使用声明变量时也为undefined）
2. 作用域——var的作用域为方法作用域；只要在方法内定义了，整个方法内的定义变量后的代码都可以使用

let——ES6变量声明方式

1. 在变量未声明前直接使用会报错
2. 作用域——let为块作用域——通常let比var 范围要小
3. let禁止重复声明变量，否则会报错；var可以重复声明

const——ES6变量声明方式

1. const为常量声明方式；声明变量时必须初始化，在后面出现的代码中不能再修改该常量的值

2. const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动

• let只在块级作用域内有效果,var在全局范围内都有效果
• let解决了var“变量提升”的现象,不能在未声明变量前使用变量,这在语法上称为“暂时性死区”
• const声明一个只读的常量,只在块级作用域内有效果。一旦声明，常量的值就不能改变,只声明不赋值，就会报错。

2.变量

1.概念

变量是程序在内存中申请的一块用来存放数据的空间。

变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。

tip：

如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个特殊的值，表示“无定义”。

var a;
a // undefined

如果变量赋值的时候，忘了写var命令，这条语句也是有效的。

var a = 1;
// 基本等同
a = 1;

但是，不写var的做法，不利于表达意图，而且容易不知不觉地创建全局变量，所以建议总是使用var命令声明变量。

例题：变量的使用：

弹出一个输入框，提示用户输入姓名。弹出一个对话框，输出用户刚才输入的姓名。

    var name = prompt('请输入你的姓名');alert(name);

2变量命名规范

• 由字母(A-Za-z)、数字(0-9)、下划候线(_)、美元符号($)组成，如: usrAge, num01,_name
  公

• 严格区分大小写。var app;和var App;是两个变量

• 不能以数字开头。18age是错误的

• 不能是关键字、保留字。例如: var、for、while变量名必须有意义。MMD BBDnl-age

• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

3.数据类型

js是一种弱类型或者说动态语言，变量的数据类型是由js引擎 根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

3.1数据类型分类：

1.基本数据类型（Number,String,Boolean,undefine,null，symbol（ES6 新增的），BigInt（ES2020））

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCSTmjMY-1634198163210)(D:\web\note\img\4.png)]

Number型：

var num = 10;//数字型
var pi  = 10.22; //数字型
//1.八进制 0~7 在程序数字前面加0 表示八进制
var num1 = 010;
console.log(num1);//表示8
//2.十六进制 0~9 a~f #ffffff 在数字前面加0x 表示十六进制
var num2 = 0x9;
console.log(num2);
//3.数字型的最大值最小值
alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);
console.log(Infinity);//无穷大
console.log(-Infinity);//无穷小
console.log(NaN);//代表一个非数值
//4.isNaN（）这个方法用来判断非数字，返回一个值,是就是false不是就是true
console.log(isNaN(12));
console.log(isNaN("哈哈哈"));

字符串型String：

   //1.字符串型可以使引号中的任意字符var str1 = '我爱你';var str2 = ""hahah;

1.字符串转义字符：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-STkfOhSZ-1634198163212)(D:\web\note\img\5.png)]

2.字符串长度

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

   var str1 = '';var str2 = "hahah lalala";console.log(str1.length);console.log(str2.length);

3.字符串拼接

多个字符串之间可以使用**“+”**进行拼接，形成新的字符串

  var str1 = '';var str2 = "hahah lalala";console.log(str1+str2);

例题：

   var age1 = prompt('请输入你的年龄');alert("你的年龄是"+age1+"岁");

布尔型、undefined

 //布尔型Booleanconsole.log(true+1);console.log(false-1);
//undefined var str;console.log(str);

2.复杂数据类型

引用数据类型：

object，function

object：普通对象，数组对象，正则对象，日期对象，Math数学函数对象。

3.2 数据类型的存储方式

1. 两种数据存储方式：

基本数据类型是直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用的数据。栈是存储基本类型值和执行代码的空间。

引用数据类型是存储在堆内存中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会检索其在栈中的地址，取得地址后从堆中获得实体。

1. 两种数据存储的区别：

• 堆比栈空间大，栈比堆运行速度快。
• 堆内存是无序存储，可以根据引用直接获取。
• 基础数据类型比较稳定，而且相对来说占用的内存小。
• 引用数据类型大小是动态的，而且是无限的。

3.3 获取变量数据类型

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

  //undefined var str;console.log(str);//null空值var space = null;console.log(space+11);console.log(space+'1');console.log(typeof(str));console.log(typeof(space));//是object类型
//prompt取过来的值是 字符型的var age1 = prompt('请输入你的年龄');alert("你的年龄是"+age1+"岁");

3.4数据类型转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MIH8KC8b-1634198163214)(D:\web\note\img\6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjmWDwGM-1634198163218)(D:\web\note\img\7.png)]

  //利用数运算，转换数字类型 - * /var str1='123';console.log(str1+123);//加法不行还是字符串console.log(str1-12);//111console.log(str1*2);//246console.log(str1/2);//61.5

例题：计算年龄

        function isLeap(year){return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);}//1.根据出生年月日，计算年龄function getAge(year, month, day) {//得到当前日期var nowTime = new Date();var age = nowTime.getFullYear() - year;//粗略计算出年龄//若生日是2月29日，且今年不是闰年，则今年生日日期按28日计算if(month === 2 && day === 29 && !isLeap(nowTime.getFullYear())){day = 28;}//得到今年的生日日期var nowBirthday = new Date(nowTime.getFullYear(), month - 1, day);console.log(nowBirthday, nowTime);if(nowBirthday > nowTime){//若今年的生日没有过，则减一岁age--;}return age;}alert("输入出生年月为2000,2,29");// var birthday=prompt("请输入出生年月日，例如2000,2,29");alert(getAge(2000,2,29));

3.标识符

**标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。**JavaScript 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

标识符有一套命名规则，不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符，就会报错。

简单说，标识符命名规则如下。

• 第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
• 第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9。

下面这些都是合法的标识符。

arg0
_tmp
$elem
π

下面这些则是不合法的标识符。

1a  // 第一个字符不能是数字
***  // 标识符不能包含星号
a+b  // 标识符不能包含加号
-d  // 标识符不能包含减号或连词线

中文是合法的标识符，可以用作变量名。

var 临时变量 = 1;

JavaScript 有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

4.注释

源码中被 JavaScript 引擎忽略的部分就叫做注释，它的作用是对代码进行解释。

JavaScript 提供两种注释的写法：

一种是单行注释，用//起头；另一种是多行注释，放在/*和*/之间。

// 这是单行注释
/*这是多行注释
*/

此外，由于历史上 JavaScript 可以兼容 HTML 代码的注释，所以<!--和-->也被视为合法的单行注释。

x = 1;
<!-- x = 2;-->
x = 3;

上面代码中，只有x = 1会执行，其他的部分都被注释掉了。

需要注意的是，-->只有在行首，才会被当成单行注释，否则会当作正常的运算。

function countdown(n) {while (n --> 0) console.log(n);
}
countdown(3)
// 2
// 1
// 0

上面代码中，n --> 0实际上会当作n-- > 0，因此输出2、1、0。

5.运算符号

JavaScript中常用的运算符有:

1.算数运算符：避免用浮点数，精度缺失

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ypDHyYOK-1634198163221)(D:\web\note\img\13.png)]

表达式：是由数字、运算符、变量等组成的式子

返回值：比如console.loge(age++);

2.递增和递减运算符

++n n=n+1；先自加1，后返回值。

n++；–n；n–；先返回值，后加1.

3.比较运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JT158yAO-1634198163223)(D:\web\note\img\14.png)]

4.逻辑运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEpHm5In-1634198163224)(D:\web\note\img\15.png)]

        // 1. 用我们的布尔值参与的逻辑运算  true && false  == false // 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？ // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1console.log(123 && 456); // 456console.log(0 && 456); //  0console.log(0 && 1 + 2 && 456 * 56789); // 0console.log('' && 1 + 2 && 456 * 56789); // ''// 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN// 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2console.log(123 || 456); // 123console.log(123 || 456 || 456 + 123); // 123console.log(0 || 456 || 456 + 123); // 456

5.赋值运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7C1fXalH-1634198163226)(D:\web\note\img\17.png)]

5.1 运算符优先级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUIFsMdX-1634198163228)(D:\web\note\img\16.png)]

6.输入输出语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRHktjC7-1634198163230)(D:\web\note\img\3.png)]

<script type="text/javascript">prompt('请输入你的账户');var a=1;alert(a);console.log('lalala');
</script>

7. 区块

JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。

对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）。

{var a = 1;
}a // 1

上面代码在区块内部，使用var命令声明并赋值了变量a，然后在区块外部，变量a依然有效，区块对于var命令不构成单独的作用域，与不使用区块的情况没有任何区别。在 JavaScript 语言中，单独使用区块并不常见，区块往往用来构成其他更复杂的语法结构，比如for、if、while、function等。

三.流程控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bcBJVipW-1634198163232)(D:\web\note\img\18.png)]

1.顺序结构

2.分支结构

一、条件语句

JavaScript 提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。

(1). if 结构

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

if (布尔值-条件表达式){// 执行语句;
}

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等比较运算符（==）。尤其是赋值表达式不具有比较作用。

if (m === 3) {  m += 1;  console.log(m);}

var x = 1;
var y = 2;
if (x = y) {console.log(x);
}
// "2"

上面代码的原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量x，再判断变量x的值（等于2）的布尔值（结果为true）。

这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

if (x = 2) { // 不报错
if (2 = x) { // 报错

至于为什么优先采用“严格相等运算符”（===），而不是“相等运算符”（==），请参考《运算符》章节。

1. if else双分支语句

       // 1. 语法结构  if 如果  else 否则if (条件表达式) {// 执行语句1} else {// 执行语句2 }// 2. 执行思路 如果表达式结果为真 那么执行语句1  否则  执行语句2

案例：判断闰年

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>//    算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年// 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中// 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句// 一定要注意里面的且 &&  还有或者 || 的写法，同时注意判断整除的方法是取余为 0var year = prompt('请您输入年份：');if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {alert('您输入的年份是闰年');} else {alert('您输入的年份是平年');}</script>
</head>
<body>
</body>
</html>

2 if else if 多分支语句

如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句

        // 1. 多分支语句   就是利用多个条件来选择不同的语句执行 得到不同的结果  多选1 的过程        // 2. if else if语句是多分支语句        // 3. 语法规范        if (条件表达式1) {            // 语句1;        } else if (条件表达式2) {            // 语句2;        } else if (条件表达式3) {            // 语句3;        } else {            // 最后的语句;        }        // 4. 执行思路        // 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句          // 如果条件表达式1 不满足，则判断条件表达式2  满足的话，执行语句2 以此类推        // 如果上面的所有条件表达式都不成立，则执行else 里面的语句        // 5. 注意点        // (1) 多分支语句还是多选1 最后只能有一个语句执行        // (2) else if 里面的条件理论上是可以任意多个的        // (3) else if 中间有个空格了

案例：判断成绩

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script>        //  伪代码       按照从大到小判断的思路        // 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中        // 使用多分支 if else if 语句来分别判断输出不同的值        var score = prompt('请您输入分数:');        if (score >= 90) {            alert('宝贝，你是我的骄傲');        } else if (score >= 80) {            alert('宝贝，你已经很出色了');        } else if (score >= 70) {            alert('你要继续加油喽');        } else if (score >= 60) {            alert('孩子，你很危险');        } else {            alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');        }    </script></head><body></body></html>

(2). 三元表达式

JavaScript 还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2var msg = '数字' + n + '是' + (n % 2 === 0 ? '偶数' : '奇数');

上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。

案例：数字补零

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script>        //         用户输入0~59之间的一个数字        // 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则  不做操作        // 用一个变量接受这个返回值，输出        var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');        // 三元表达式   表达式 ？ 表达式1 ：表达式2         var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量        alert(result);    </script></head><body></body></html>

(3).switch 语句

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

     // 1. switch 语句也是多分支语句 也可以实现多选1        // 2. 语法结构 switch 转换、开关  case 小例子或者选项的意思        switch (表达式) {           case value1:                执行语句1;                  break;            case value2:                 执行语句2;                 break;                 ...               default:                   执行最后的语句;         }        // 3. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句        // 4. 代码验证

tip:

1. 每个case代码块内部的**break语句不能少**，否则会接下去执行下一个case代码块，而不是跳出switch结构。
2. 开发的时候表达式通常写变量n
3. 如果变量n=1，case的值和数据类型一致才行

案例：查询水果价格

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script>        //         弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。        // 将这个变量作为 switch 括号里面的表达式。        // case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配（数据类型为字符串）。        // 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。        // 将 default 设置为没有此水果。        var fruit = prompt('请您输入查询的水果:');        switch (fruit) {            case '苹果':                alert('苹果的价格是 3.5/斤');                break;            case '榴莲':                alert('榴莲的价格是 35/斤');                break;            default:                alert('没有此水果');        }    </script></head><body></body></html>

3.循环结构

1.for循环

 // 1. for 重复执行某些代码， 通常跟计数有关系        // 2. for 语法结构     for (初始化变量; 条件表达式; 操作表达式) {        // 循环体    }        // 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用         // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件        // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）

for 循环的执行过程

   for (var i = 1; i <= 100; i++) {            console.log('你好吗');        }        // 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index        // 2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环         // 3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束         // 4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮

断电调试：

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程

• 浏览器中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点

• Watch:监视，通过watch可以监视变量的值的变化，非常的常用。

• F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vOo4nB8-1634198163234)(D:\web\note\img\19.png)]

练习题：

    //1. 求 1~100 之间的整数累加和// 需要循环100次，我们需要一个计数器  i  // 我们需要一个存储结果的变量 sum ，但是初始值一定是 0// 核心算法：1 + 2 + 3 + 4 ....   ，sum  =  sum + i;var sum = 0; // 求和 的变量for (var i = 1; i <= 100; i++) {// sum = sum + i;sum += i;}console.log(sum);// 2. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量var sum = 0;var average = 0;for (var i = 1; i <= 100; i++) {sum = sum + i;}average = sum / 100;console.log(average);// 2. 求1-100之间所有偶数和奇数的和   我们需要一个偶数的和变量 even  还需要一个奇数 oddvar even = 0;var odd = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {even = even + i;} else {odd = odd + i;}}console.log('1~100 之间所有的偶数和是' + even);console.log('1~100 之间所有的奇数和是' + odd);// 3. 求1-100之间所有能被3整除的数字的和   var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 == 0) {// result = result + i;result += i;}}console.log('1~100之间能够被3整数的数字的和是：' + result);

案例：

1.求学生成绩

        // 弹出输入框输入总的班级人数(num)// 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到// for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num// 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）// 弹出结果var num = prompt('请输入班级的总人数:'); // num 总的班级人数var sum = 0; // 求和的变量var average = 0; // 求平均值的变量for (var i = 1; i <= num; i++) {var score = prompt('请您输入第' + i + '个学生成绩');// 因为从prompt取过来的数据是 字符串型的需要转换为数字型sum = sum + parseFloat(score);}average = sum / num;alert('班级总的成绩是' + sum);alert('班级平均分是：' + average);

2.打印n行n列星星

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">//打印n行n列的星星var rows = prompt("请输入行数");var cols = prompt("请输入列数");var str = '';for (var i = 0; i < rows; i++) {for (var j = 0; j<cols; j++) {str = str+'★';}str+='\n';}console.log(str);
</script>
</html>

3.打印三角形

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body></body><script>        // 打印倒三角形        /* ***************        */        var str = '';        for (var i = 1; i <= 5; i++) { // 外层循环控制行数            for (var j = i; j <= 5; j++) { // 里层循环打印的个数不一样  j = i                str = str + '*';            }            str += '\n';        }        console.log(str);//直角三角形/*****************/        var str1 = '';        for (var i = 1; i <= 5; i++) { // 外层循环控制行数            for (var j = 1; j <= i; j++) { // 里层循环打印的个数不一样  j = i                str1 = str1 + '*';            }            str1 += '\n';        }        console.log(str1);        //另类直角三角形    /*    *   **  *** *********    */        var str4 = '';        for (var i = 1; i <= 5; i++) { // 外层循环控制行数            //打印空格i=1  打印4个空格            for(var j = 0; j<5-i;j++){                str4 = str4 + ' ';            }            for (var j = 1; j <= i; j++) { // 里层循环打印的个数不一样  j = i                str4 = str4 + '*';            }            str4 += '\n';        }        console.log(str4);/*       *          3个空格    1个星        ***         2个空格    3个星       *****        1个空格    5个星      *******       0个空格    7个星      等腰三角形*/ var str2='';   for (i = 0; i < 4; i++)//行数     {       //打印空格  第一行先打印3个空格         for (j = 1; j <4-i; j++)         {            str2= str2+' ';         }         //打印* i=0,j=0           for ( var j = 0; j <= 2 * i; j++)         {             str2=str2+'*';         }         str2+='\n';     }     console.log(str2);     //倒等腰三角形     /******** *****  ***   *     */    var str3='';   for (i = 0; i < 4; i++)//行数     {       //打印空格 i=1,j=0           for ( var j = 0; j < i; j++)         {             str3=str3+' ';         }        //打印*  第一行先打印7个*         for (j = 2*4; j > 2*i+1; j--)         {            str3= str3+'*';         }         str3+='\n';     }     console.log(str3);    </script></html>

2.while循环

  // 1. while 循环语法结构  while 当...的时候         while (条件表达式) {             // 循环体         }        // 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环        // 3. 代码验证

练习：

         // 2. 计算 1 ~ 100 之间所有整数的和        var sum = 0;        var j = 1;        while (j <= 100) {            sum += j;            j++        }        console.log(sum);        // 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。        var message = prompt('你爱我吗?');        while (message !== '我爱你') {            message = prompt('你爱我吗?');        }        alert('我也爱你啊！');

3.do…while循环

       // 1.do while 循环 语法结构        do {            // 循环体        } while (条件表达式)        // 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环        // 3. 代码验证        var i = 1;        do {            console.log('how are you?');            i++;        } while (i <= 100)        // 4. 我们的do while 循环体至少执行一次

continue关键字：

        // continue 关键字   退出本次（当前次的循环）  继续执行剩余次数循环        for (var i = 1; i <= 5; i++) {            if (i == 3) {                continue; // 只要遇见 continue就退出本次循环 直接跳到 i++            }            console.log('我正在吃第' + i + '个包子');        }        // 1. 求1~100 之间， 除了能被7整除之外的整数和         var sum = 0;        for (var i = 1; i <= 100; i++) {            if (i % 7 == 0) {                continue;            }            sum += i;        }        console.log(sum);

break关键字：

    // break 退出整个循环    for (var i = 1; i <= 5; i++) {        if (i == 3) {            break;        }        console.log('我正在吃第' + i + '个包子');    }

四、数组

1.数组的概念

数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式

获取数组元素

索引（下标）：用来访问数组元素的序号（索引号从 0开始 ）。

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。

      //  利用new 创建数组        var arr = new Array(); // 创建了一个空的数组        // 3. 利用数组字面量创建数组 []        var arr = []; // 创建了一个空的数组        var arr1 = [1, 2, 'pink老师', true];        // 4. 我们数组里面的数据一定用逗号分隔        // 5. 数组里面的数据 比如1,2， 我们称为数组元素        // 6. 获取数组元素  格式 数组名[索引号]  索引号从 0开始         console.log(arr1);        console.log(arr1[2]); // pink老师        console.log(arr1[3]); // true        var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫'];        console.log(arr2[0]);        console.log(arr2[1]);        console.log(arr2[2]);        console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined

1.遍历数组

  // 遍历数组：就是把数组的元素从头到尾访问一次var arr = ['red', 'green', 'blue'];for (var i = 0; i < 3; i++) {console.log(arr[i]);}// 1. 因为我们的数组索引号从0开始 ，所以 i 必须从 0开始  i < 3// 2. 输出的时候 arr[i]  i 计数器当索引号来用// 存放100个整数（ 1~100）// 核心原理：使用循环来追加数组。// 1、声明一个空数组 arr。// 2、循环中的计数器 i  可以作为数组元素存入。// 3、由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+1。var arr = [];for (var i = 0; i < 100; i++) {// arr = i; 不要直接给数组名赋值 否则以前的元素都没了arr[i] = i + 1;}console.log(arr);

数组长度length

        // 数组长度 数组名.lengthvar arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];for (var i = 0; i < 7; i++) {console.log(arr[i]);//输出7个数}console.log(arr.length);//最最最靠谱遍历数组for (var i = 0; i < arr.length; i++) {console.log(arr[i]);}// 1. 数组的长度是元素个数  不要跟索引号混淆// 2. arr.length 动态监测数组元素的个数

数组转换为字符串

        // 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割// 1.需要一个新变量用于存放转换完的字符串 str。// 2.遍历原来的数组，分别把里面数据取出来，加到字符串里面。// 3.同时在后面多加一个分隔符var arr = ['red', 'green', 'blue', 'pink'];var str = '';var sep = '*';for (var i = 0; i < arr.length; i++) {str += arr[i] + sep;}console.log(str);

练习：

    //1.求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。// (1)声明一个求和变量 sum。// (2)遍历这个数组，把里面每个数组元素加到 sum 里面。// (3)用求和变量 sum 除以数组的长度就可以得到数组的平均值。var arr = [2, 6, 1, 7, 4];var sum = 0;var average = 0;//遍历数组for (var i = 0; i < arr.length; i++) {sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i}average = sum / arr.length;console.log(sum, average); // 想要输出多个变量，用逗号分隔即可//2.求数组[2,6,1,77,52,25,7]中的最大值//声明一个保存最大元素的变量 max// 默认最大值可以取数组中的第一个元素。// 遍历这个数组，把里面每个数组元素和 max 相比较。// 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。var arr1 = [2,6,1,77,52,25,7];var max = arr1[0];for(var i = 1;i<arr1.length;i++){if(arr1[i]>max){max = arr1[i];}}console.log(max); //3.将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];// 1、声明一个新的数组用于存放新数据newArr，新数组里面的个数， 用 length 不断累加// 2、遍历原来的旧数组， 找出大于等于 10 的元素。// 3、依次追加给新数组 newArr。var newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// 新数组索引号应该从0开始 依次递增  可以设一个下标变量newArr[newArr.length] = arr[i];}
}console.log(newArr);//4.删除数组元素  删除指定元素// 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。// 1、需要一个新数组用于存放筛选之后的数据。// 2、遍历原来的数组， 把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。// 3、新数组里面的个数， 用 length 不断累加。var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];var newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] != 0) {newArr[newArr.length] = arr[i];}}console.log(newArr);//5.数组翻转 （递减）// 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放// 1、声明一个新数组 newArr// 2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)// 3、我们采取 递减的方式  i--var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i]}console.log(newArr);

2.排序

冒泡排序

• 原理：从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大(小)，那么就交换位置，重复操作直到比较到最后一个元素
• 优点：稳定，快；
• 缺点：比较次数不一定，比较次数越少，插入点后的数据移动越多，特别是当数据总量庞大的时候，但用链表可以解决这个问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1mKCMmlZ-1634198163235)(D:\web\note\img\23)]

     // 冒泡排序
//从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素
function sort(arr){for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 数组长度减for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数  数组长度减去趟数  从0开始所以-1// 内部交换2个变量的值 前一个和后面一个数组元素相比较if (arr[j] < arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}
}var arr = [4, 1, 2, 3, 5];sort(arr);console.log(arr);

冒泡排序优化：

• 优化方案：当一次遍历前后数组不产生变化时，说明该数组已经有序，结束排序。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCShZ0t9-1634198163237)(D:\web\note\img\23.png)]

// 如果在某次的排序中没有出现交换的情况，
// 那么说明在无序的元素现在已经是有序了，就可以直接返回了。
function sort(arr) {var i, j, tmp, exchange, result;for (var i = 0; i <= arr.length - 1; i++) {//外层循环管趟数exchange = 0;//计数器：交换次数for (var j = 0; j <= arr.length - i - 1; j++) { //里面的循环管 每一趟的交换次数 if (result[j] < result[j + 1]) {tmp = result[j];result[j] = result[j + 1];result[j + 1] = tmp;exchange = 1;}}// 如果在某次的排序中没有出现交换的情况，if (!exchange) return result;}return result;
}

五、JavaScript对象

1.Array对象

https://www.runoob.com/jsref/jsref-obj-array.html

属性

constructor	返回创建数组对象的构造函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

其返回值是对函数的引用，而不是函数的名称：

对于 JavaScript 数组，constructor 属性返回：
function Array() { [native code] }

对于 JavaScript 对象，constructor 属性返回：
function Object() { [native code] }

方法:数组的常用方法

2.存储对象

关于JavaScript的存储对象

介绍

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

存储对象属性

属性	描述
length	返回存储对象中包含多少条数据。

存储对象方法

方法	描述
key(n)	返回存储对象中第 n 个键的名称
getItem(keyname)	返回指定键的值
setItem(keyname, value)	添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)	移除键
clear()	清除存储对象中所有的键

localstorage案例:

// 负责操作localstorage
class DataHelper{dataKey!: stringprimaryKey!: stringconstructor(dataKey: string, primaryKey:string){this.dataKey = dataKeythis.primaryKey = primaryKey}// 读取操作readData(): any{let strData:string | null = localStorage.getItem(this.dataKey)let arrData: any =[]// 判断返回的是不是空if(strData!=null){// 使用 JSON.parse() 方法将数据转换为 JavaScript 对象arrData = JSON.parse(strData)}}// 添加操作addData(newData:any): any{let dataArry = this.readData();// 如果读取的data为空if(dataArry === null){dataArry = []}else if(dataArry.length>0){// 如果读取的data不为空 将读取的最后一个数取出来+1 作为新元素的idlet newId = dataArry[dataArry.length-1][this.primaryKey]+1;dataArry.push(newData)//保存在localstorage里头this.saveData(dataArry)return newId;}}// 保存saveData(arrData: Array<Object>): void{//JSON.stringify() 方法将 JavaScript 对象转换为字符串let str:string = JSON.stringify(arrData)localStorage.setItem(this.dataKey,str)}// 删除 根据id值进行删除deleteData(id: string | number):boolean{let arr =this.readData()// 找下标 number类型let index = arr.findIndex((ele:any)=>{return ele[this.primaryKey] == id})// 如果数组不为空if(index > -1){//删除下标index下的数据arr.splice(index, 1),this.saveData(arr)}else{return false}return true}
}

3.math对象

Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可

        console.log(Math.PI); // 一个属性 圆周率console.log(Math.max(1, 99, 3)); // 99console.log(Math.max(-1, -10)); // -1console.log(Math.max(1, 99, 'pink老师')); // NaNconsole.log(Math.max()); // -Infinity

1. 利用对象封装自己的数学对象 里面有 PI 最大值和最小值

2. 生成随机数

    // 1.Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
   console.log(Math.random());
   

 // 2. 我们想要得到两个数之间的随机整数 并且 包含这2个整数// Math.floor(Math.random() * (max - min + 1)) + min;function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}console.log(getRandom(1, 10));

 // 3. 随机点名  var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];// console.log(arr[0]);console.log(arr[getRandom(0, arr.length - 1)]);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ODvbaxtT-1634198163238)(/Users/shulun-001/Library/Application Support/typora-user-images/image-20210922145512348.png)]

//4. 猜数字游戏,用循环和判断写
var random = getRandom(4, 10);
while (true) { // 死循环var num = prompt('你来猜？ 输入1~10之间的一个数字');if (num > random) {alert('你猜大了');} else if (num < random) {alert('你猜小了');} else {alert('你好帅哦，猜对了');break; // 退出整个循环结束程序}}

4.Date对象

Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象

这个建议把日期的算法都封装好

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fRXymLUO-1634198163239)(/Users/shulun-001/Library/Application Support/typora-user-images/image-20210922151754354.png)]

六、函数(方法)

函数有return返回return,没有就返回undefined

1. argument的使用:

(不确定参数个数时使用,存储传递的所有实参数)

fiction fn() {
console.log(argument)
}
fn(1,2,3);
//伪数组 不是真正意义上的数组1.具有数组length属性2.按照索引的方式进行存储3.但是没有数组的方法

案例:求任意个参数的最大值

function getMax() {//argument存储传递的所有实参数var max = arguments[0]for(var i =0;i<arguments.length;i++){if(arguments[i]>max){max=arguments[i]}}return max
}
console.log(getMax(1,10,29,99,21))

2.构造函数

构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

创建多个对象时里面很多的属性和方法是大量相同的 ,可以利用构造函数的方法,重复这些相同的代码

 function 构造函数名() {       //     this.属性 = 值;       //     this.方法 = function() {}        // }       // new 构造函数名();       // 1. 构造函数名字首字母要大写       // 2. 我们构造函数不需要return 就可以返回结果       // 3. 我们调用构造函数 必须使用 new        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}       // 5. 我们的属性和方法前面必须添加 this    // new关键字执行过程        // 1. new 构造函数可以在内存中创建了一个空的对象         // 2. this 就会指向刚才创建的空对象        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法        // 4. 返回这个对象

3. 遍历数组的方法

1. forEach遍历

2. for…in…遍历

3. for-of遍历

   // 遍历数组console.log('遍历数组 for in')var arr3= ['1',2,4,'kjkc','ee',0]for(var i in arr3){    console.log(i,arr3[i])}console.log('遍历数组 for of ,定义一个i直接读到值')for(var i of arr3){    console.log(i);}console.log('forEach遍历数组 先打印值,然后是下标')arr3.forEach(function(e,index){    console.log(e,index);});
   

4.改变原数组的方法

• push() 此方法是在数组的后面添加新加元素
• pop() 此方法在数组后面删除最后一个元素，并返回数组
• shift() 此方法在数组后面删除第一个元素，并返回数组
• unshift() 此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度
• splice() 从数组中添加或删除元素
• sort()
• reverse()

1. sort() 方法用于对数组的元素进行排序

   大佬笔记

//sort排序是按照首字母的大小排序this.arry.sort()//数组数字排序sortItems:function() {  //sort排序是按照首字母的大小排  return this.items.sort(sortNumber)}function sortNumber(a,b){    return a-b;}//数组对象方法排序sortStudents:function(){  return sortByKey(this.students,'age')}function sortByKey(arry,key){    return arry.sort(function(a,b){        var x=a[key];        var y=b[key];        return ((x<y)?-1:((x>y)?1:0));    })}

1. splice() 从数组中添加或删除元素

array.splice(index,howmany,item1,…,itemX)

参数	描述
index	必需。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

5.遍历对象常用方法

都能拿到key值

https://www.cnblogs.com/yuer20180726/p/11377897.html

1. for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性Symbol属性不可

//4.遍历对象的方式
//4.1
for...invar obj={    'Mj3YS9xOhwoDX5BEtYT':{        id: 1,       Node:{           "handbook": "# 弟弟经常看到就开除党籍\n大喊大叫都觉得亟待解决",            "resource": "原创",            "title": "这是第二个测试",            "value": "nodejs"        }    }}
var list=[];
for(var i in obj)
{   this.list.push(obj[i])
}
console.log(list);

1. Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性,Symbol不可
2. Object.getOwnPropertyNames(obj) 返回一个数组,包含对象自身的所有属性,Symbol,枚举不可

//4.2 Object.keys()遍历
Object.keys(obj).forEach(function(key){    console.log(key,obj[key]);
})
//4.3
Object.getOwnPropertyNames(obj) Object.getOwnPropertyNames(obj).forEach(function(key){    console.log(key,obj[key])})

1. Reflect.ownKeys(obj)遍历 返回一个数组,包含对象自身的所有属性, Symbol,枚举都可.

javascript学习笔记最全相关推荐

1. JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】

   Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

2. Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）

   计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

3. JavaScript 学习笔记（1）

   1.     何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1)        不能使用该语言来编写独立运行的应用程序 2)        没有对读写文件的内置 ...

4. 前端获取div里面的标签_web前端教程JavaScript学习笔记DOM

   web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型 其实就是操作 html 中的标签的一些能力 我们可以操作哪些内容 获取一个元素 ...

5. JavaScript学习笔记06【高级——JavaScript中的事件】

   w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

6. JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】

   w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...

7. JavaScript学习笔记（三）--操作运算符

   JavaScript中的运算符有很多,主要分为算术运算符,比较运算符,逻辑运算符,三目运算符.一元运算符.位运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的 ...

8. JavaScript学习笔记一

   JavaScript学习笔记 1. 介绍 2. 基础语法 输入输出 变量 数据类型 简单数据类型 复杂数据类型 类型转换 3. 运算 算术运算符 递增递减运算符 比较运算符 逻辑运算符 赋值运算符 运 ...

9. 千锋JavaScript学习笔记

   千锋JavaScript学习笔记 文章目录 千锋JavaScript学习笔记 写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...

10. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

最新文章

1. lvs+keepalived+nginx+tomcat
2. 初识python评课稿_开平方函数 python
3. html页面加载转圈,纯CSS实现加载转圈样式
4. 一个牛人给JAVA初学者的建议。虽然岁月漫长,但仍值得等待
5. 啦啦啦-我又来了！！！
6. u3d中如何添加avatar和状态机
7. Superset集成到iframe 跨域 无需账号登录
8. svm 10折交叉验证 matlab,怎么用10折交叉验证程序？
9. PS分形图、人脸更换、蒙版技巧分享
10. 下载VS（visualstudio）2019官方网站详解
11. mysql frm怎么打开_frm 文件怎么打开？
12. 脱离低级趣味- Python ‘\r‘, ‘\n‘, ‘\r\n‘ 的彻底理解
13. 企业微信三方开发(五)：扫码登录
14. 1600802088
15. SpringCloud-3-Ribbon
16. MATLAB的汽车操纵稳定性仿真分析
17. 近世代数 笔记与题型连载 第八章（置换群）
18. 命令行模拟post请求
19. 如何借助问答平台上做好网络营销？
20. java输出到txt 换行_java输出到TXT文件时肿么加换行?

热门文章

1. 电驴让分享继续 服务器不稳定,电驴快快跑—分流教程
2. android factorymode下回路测试无声音问题解析
3. 使用Linux常见问题及其解决办法
4. android 桌面操作系统,Android主题美化: Win7桌面完成版Android Seven Pro V2
5. 你的MP3中不能缺少的231首歌
6. 90后的青春，定格在被淡忘的QQ空间里
7. 搭建VC2010 开发环境，创建《C语言实现俄罗斯方块游戏》教程
8. CH340芯片选型----包括串口并口芯片
9. 如何安装Chrome OS系统
10. 基于单片机的智能温度监测系统设计（电路图+程序）