1. Javascript运行在客户端
2. 脚本语言：不需要编译逐行进行解释学习
3. 作用:

• 表单验证
• 网页特效
• 服务端开发
• 桌面程序
• APP
• 物联网-控制硬件
• 游戏开发

4. 浏览器执行JS：
   浏览器分成两个部分，渲染引擎和JS引擎

• 渲染引擎：用于解析HTML和CSS，俗称内核，比如谷歌浏览器的blink,老版本的webkit
• JS引擎：也称为JS解释器。用于读取网页之中的JS代码，对其处理后运行，比如Chrome浏览器的V8

5. JS组成：

   
   

   • ECMAscript： JS基础语法和基础核心知识
   • DOM ： 页面文档对象模型 元素隐藏，比如对页面元素进行移动、大小、添加删除等操作
   • BOM ：浏览器对象模型 提供独立于内容的、可以和浏览器进行交互的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

6. JS书写的位置

   • 行内式

     • 例子：

     • 特点：写在HTML标签的事件属性之中，时间属性一般是以on开头的，比如上面的onclick

     • 注意单双引号的使用：在HTML之中推荐使用双引号，在JS之中一般推荐使用单引号。

     • 可读性差，在HTML里面写了大量的JS代码，不方便阅读

     • 引号也容易出错，引号多层嵌套的时候非常容易混淆

     • 特殊情况下使用

   • 内嵌式

     • 例子:

   • 外部式

     • 例子：

     • 特点：利于HTML页面代码结构化，把大段的JS代码写在HTML之外，美观也方便复用

     • 注意点：script标签的中间不可以写代码

     • 适合于JS代码量比较大的时候

7. JS注释：

   • 单行注释： //单行注释 ctrl+/
   • 多行注释

1. alert(msg) 弹框警告
2. console.log（ms） 浏览器控制台打印输出信息
3. prompt(info) 浏览器弹出输入框，用户可以输入

• 申明变量：var age; let age；

  var申明变量可以在使用后申明，let申明变量必须先申明后使用

• 弱类型变量类型不固定，可以变

• 没有被赋值的变量：undefined

• 不申明也能用，像Python一样

• 规则：

  • 不能用关键字
  • 关键字：有特殊含义的字符，Javascript 内置的一些英语词汇。例如：let、var、if、for等
  • 只能用下划线、字母、数字、$组成，且数字不能开头
  • 字母严格区分大小写，如Age 和age 是不同的变量

• 规范：

  • 起名要有意义
  • 遵守小驼峰命名法
  • 第一个单词首字母小写，后面每个单词首字母大写。例：userName

（1）简单数据类型

• number数字型

  isNaN(变量)可以用来判断一个变量是不是数字类型

• string 字符串型

  • 单字符串里面有引号的时候，外单内双或者外双内单

  • str.length 获取长度

  • 字符串拼接：

    • 字符串拼接任何类型都能这样拼接

    • ${} 和 反引号（键盘上1旁边的那个）

      (点了才能看见)

• boolean布尔类型

  true当1看，false 0

• undefined未定义 申明未赋值

  undefined+数字为NaN

  undefined+str 为undefined+str内容

• null空类型

  null+str 为null+str内容

  null+数字=数字

  undefined和null的区别：undefined是没有赋值、null是赋值了但内容为空

  没想好放啥时用这个定义变量，对象类型

（2）有关数据类型的操作

• typeof 查看变量类型
• 数据类型转换：
  • 其他转为字符串：
    • 变量名.toString()
    • String(XX) 强制类型转换
    • 加号拼接字符串（隐式转换）
  • 其他转为数字型：
    • parseInt(XX)
    • parseFloat(XX)
    • Number(XX)
    • 利用算数运算 - * / eg: ‘12’-0 ‘123’-‘120’
  • 其他转为boolean类型：
    • Boolean(XX) 代表空、否定的值会被转换为false，如**‘ ’、0、NaN、null、undefined**（5个，其他全为TRUE）

（3）object类型

• 基本运算符： + - * / %
• 赋值运算符 ： = += -= *= /= %=
• 前置运算符： ++X --X 先变化后返回不一样的值
• 后置预算符：X++ X-- 先返回原值后变化
• 比较运算符：< > <= >= == != === !==

注意点：console.log(18==‘18’) 的值是TRUE，因为 == 默认类型转换，会把字符串转换为数字型。但 === 不会。

• 逻辑运算符： && || ！ ||优先级高于&&

（1）if

if(条件){

………………

（2）三元表达式

条件？表达式1:表达式2

（3）switch语句

switch(表达式){

​ case 值1：语句1；break；

​ case 值2：语句2；break；

​ …………

​ default：最后的语句；

（4）for循环

continue break

（5）while循环

（6）do……while循环

（1）创建数组：

• 创建空数组：var arr = new Array();
• 用[]创建：var arr = [1,2,3,‘4’,true];
• var arr = new Array(2) 长度为2空数组
• var arr = new Array（2,3）等价于[2,3]

（2）数组长度：arr.length

数组过滤器：arr.filter((item)=>{

if(XXX) return true;

XXX;

return false;

过滤剩下使得filter里面的函数为true的item。

（1）第一种：普通函数定义，这种方式较多

function 函数名(形式参数列表){

function sum(a, b){

（2）第二种：如果是把函数的声明当做类进行定义这种方式较多

函数名 = function(形式参数列表){

sum = function(a, b){

数组类型

只有函数才有，所有函数内置好的

• 全局作用域-----全局变量
• 局部作用域-----局部变量

1、变量的申明和函数的定义都会被预解析，所以放在后面 声明定义 都可以

2、 注意点：如果执行下面的代码

会打印undefined，因为只是将申明预解析，赋值没有预解析。它相当有执行下面的代码：

3、连写

调用对象属性： obj1.name 或者 obj1[‘name’]
调用对象的方法： obj1.sayHi();

1、new构造函数在内存中创建一个空的对象

2、this指向创建出来的对象

3、置信构造函数里面的代码，给空对象添加属性和方法

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

1、for(var 变量 in 对象){

console.log(变量)；//得到属性名

console.log(对象[变量]); //得到属性值

2、for(var 变量 of 对象)

• 自定义对象
• 内置对象
• 浏览器对象

前两种属于ECMAscript，是JS基础对象；第三个是JS独有的浏览器对象

（1）MDN

不是构造函数，不用new，直接用

需要创建的

var date = new Date();

1、创建

• 没有参数：创建了当前的时间的date

• 有参数：

  • 数字型：var date2 = new Date(2022,9,14,8,45,23);

    log出的时间是10月的

  • 字符串型：var date3 = new Date(‘2022-9-14 8:8’); 最常用！！！！

2、格式化日期

3、获取毫秒数

• valueOf()
• getTime()
• +new Date() 常用
  • 没参数，返回当前的时间戳
  • 有date参数，返回date参数时间戳
• Date.now() H5新增

4、倒计时—时间戳变成"天时分秒"：

1、创建

2、判断是否是数组

方法1：

方法2：

3、操作

1、改变字符串会新开辟内存

2、字符串创建的 var str=‘123’; 和 var arr=new String(‘123’); 一样

3、返回字符串中字符的位置：str.indexOf(‘2’)

str.indexOf(‘2’,4);从索引号4开始查找

4、根据位置返回字符

5、str.charCodeAt(index) 返回str相应索引号的字符的ASCII码值

可以用于判断用户按下了哪一个键

6、字符串操作

替换字符串 str.replace(‘a’,‘b’) (只会替换第一个字符)

字符变数组 str.split(‘,’)

• 简单数据类型：

  存在栈里面，直接开辟一个空间存放

• 复杂数据类型：

  存在堆里面，首先在栈里面放地址，真正的数据放在地址对应的堆里的内存

• 简单数据类型：

  形参和实参指向不同地址

• 复杂数据类型：

  形参和实参变量名指向不同地址的栈内地址，但两个站内地址都存放同个堆内地址，因此形参和实参实际上指向的是同个对象。

  所以函数操作过后的对象会跟着改变。

var a=10;

if(true){var a=9;return 9}

console.log(a) //结果为9

关键词指的是它所属的对象

它拥有不同的值，具体取决于它的使用位置：

• 在方法中， 指的是所有者对象。
• 单独的情况下， 指的是全局对象。浏览器窗口中全局对象是window
• 在函数中，函数的拥有者默认绑定 。
• 在函数中，严格模式下， 是 undefined。
• 在事件中， 指的是接收事件的HTML元素。

在构造器函数中， 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。

（1）在函数中

this指向函数的拥有者

请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 Javascript 变量，则该变量会被创建为对象：

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

(1)srt.length

(2)检索（3个方法）

• indexOf()

  方法返回字符串中指定文本首次出现的索引（位置）

• lastIndexOf()

  方法返回指定文本在字符串中最后一次出现的索引

上面两个都能接受第二个参数作为检索起始位置。

• 方法搜索特定值的字符串，并返回匹配的位置：

• match()

  match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。

• includes(substr) 包含子串返回true

• String.startsWith()

  如果字符串以指定值开头，则 方法返回 ，否则返回 ：

• String.endsWith()

  如果字符串以指定值结尾，则 方法返回 ，否则返回 ：

(3)提取部分字符串（3个方法）

• slice(start, end)

  省略end，将裁到最后

  注意可以接受负数索引值

• substring(start, end)

  类似slice()，不能接受负数索引值

• substr(start, length)

（4）替换字符串内容

方法用另一个值替换在字符串中指定的值：

方法不会改变调用它的字符串。它返回的是新字符串。

默认地， 只替换首个匹配：

用 / /i 设置大小写不敏感的替换。

（5）转换大小写

toUpperCase()

toLowerCase()

(6)concat()

(7)trim()

(8)提取字符串字符

• charAt(pos) pos指定索引值
• charCodeAt(pos)

（9）转换为数组 split()

（1）NaN

用于指示某个数不合法

数字和NaN进行数值运算时结果都是NaN

但 NaN+‘5’ 这种值为 ‘NaN5’

（2）Infinity

除以 0（零）也会生成 ：

（3）十六进制0x

0x

进制转换：

num.toString(参数) 参数可以是 2 8 16 10

（1）toString() 返回字符串

（2）toExponential() 方法 小数四舍五入！！！！

返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：

没有参数不对数字舍入

（3）toFixed() 方法 保留几位小数

返回字符串值，它包含了指定位数小数的数字：

（4）toPrecision() 方法

返回字符串值，它包含了指定长度的数字：

（5）valueOf() 方法 好像没啥用

以数值返回数值：

（6）变量变数值

这三种 Javascript 方法可用于将变量转换为数字：

• Number() 方法

• parseInt() 方法

• parseFloat() 方法

这些方法并非数字方法，而是全局 Javascript 方法。

如果无法转换数字，则返回 。

（7）数值属性

（1）length()

（2）遍历数组

简单的方法是用for循环

• Array.foreach() 接受的参数

arr.foreach((value,index)=>{

（3）添加数组元素

向数组最后添加元素：

• push()
• arr[lenth]=‘XXX’

(4)Array.isArray(XXXX) 可用于判断XXXX是不是数组，返回true或者false

(5)数组变字符串

• toString() 方法 把数组变成字符串，逗号分隔

• join( )

  没有参数时默认逗号连接，有参数时用参数连接。

（6）pop() push() 在数组最后元素进行处理

（7）shift() unshift() 对数组头部进行处理

push unshift 方法的返回值为新数组长度。

（8）splice() 拼接数组

可以向数组添加新项

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

方法返回一个包含已删除项的数组：

注意：可以使用splice删除元素

比如：arr.splice(0,1) 就是删除第一个元素，而且不会留下空洞undefined

（9）合并（连接）数组 concat()

使用方法： a.concat(b[,c,d…])

concat不会更改现有数组，它返回一个新数组

（10）slice() 剪裁数组 使用方法和字符串的slice()方法差不多

（11）数组排序

sort() 以字母顺序进行排序 改变原数组：

reverse() 翻转数组 与sort()配合可以实现降序排序

sort()+比值函数 实现按照数值大小排序：

给sort传一个比值函数作为参数。

比值函数应该返回一个负数、0、正数

返回负值时 JS 将a 排的更低

（12）数组找最大、最小值

查找最高、最低的数组值 JS不提供找最大最小，通过排序可以获取最大值最小值。

通过调用Math对象的方法

最快的方法是遍历查找

（13）数组迭代 ！！！！重要！！！！！！9个

1、forEach(回调函数) 作用相当于for循环

为每个数组元素调用一次函数（回调函数）。

**注释：**该回调函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

2、Array.map() 返回值为新数组

方法通过对每个数组元素执行函数来创建新数组。

方法不会对没有值的数组元素执行函数。

方法不会更改原始数组。

3、Array.filter() 返回值为使得回调函数return true的元素的集合

方法创建一个包含通过测试的数组元素的新数组。

4、Array.reduce(回调函数[,初值值])

方法在数组中从左到右工作。另请参阅 reduceRight()。

请注意此回调函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

5、Array.reduceRight()

方法在数组中从右到左工作。另请参阅 reduce()。

6、Array.every() 每个元素在回调函数里都返回true才为true

方法检查所有数组值是否通过测试。

7、Array.some() 至少一个元素在回调里返回true就true

方法检查某些数组值是否通过了测试。

8、Array.find() 找第一个符合条件的元素

方法返回通过测试函数的第一个数组元素的值。

方法在数组中搜索元素值并返回其位置。

与 类似，但是从数组结尾开始搜索。

9、Array.findIndex() 找第一个符合条件的元素的索引值

方法返回通过测试函数的第一个数组元素的索引。

总结：

查找有：filter、find、findIndex，

判断整体是否符合有every、some，

通用遍历有forEach，

累加操作有reduce，

生成新数组有map

（1）创建Date对象

有 4 种方法创建新的日期对象：

• new Date() 创建当前时间

• new Date(year, month, day, hours, minutes, seconds, milliseconds)

  注意JS中月份从0-11

• new Date(milliseconds)

• new Date(date string)

（2）日期输入格式

（3）日期获取

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

（4）日期设置

（5）比较日期

日期可以很容易地进行比较。a>b这样就行

（1）Math.round() 返回四舍五入接近的整数

的返回值是 x 四舍五入为最接近的整数：

的返回值是 x 上舍入最接近的整数：

的返回值是 x 下舍入最接近的整数：

（2）Math.pow()

的返回值是 x 的 y 次幂

（3）Math.sqrt()

返回 x 的平方根：

（4）Math.abs()

返回 x 的绝对（正）值：

Math.sin()

返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）

Math.cos()

返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。

Math.min() 和 Math.max()

和 可用于查找参数列表中的最低或最高值：

Math.random()

返回介于 0（包括） 与 1（不包括） 之间的随机数：

Math 属性（常量）

Javascript 提供了可由 Math 对象访问的 8 个数学常量：

遍历对象属性

遍历数组

当顺序很重要时，最好使用 for 循环、for of 循环或 Array.forEach()。

Javascript 语句循环遍历可迭代对象的值。

转换数值， 转换字符串， 转换布尔值。

一元的 运算符可用于把变量转换为数字：

实例

语句使您能够测试代码块中的错误。

语句允许您处理错误。

语句允许您创建自定义错误。

使您能够执行代码，在 try 和 catch 之后，无论结果如何。

Javascript 拥有当错误发生时提供错误信息的内置 error 对象。

error 对象提供两个有用的属性： 和 。

Hoisting 是 Javascript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）。

用 或 声明的变量和常量不会被提升！

定义 Javascript 代码应该以“严格模式”执行。

指令只能在脚本或函数的开头被识别。

严格模式不允许：

• 不声明就使用变量
• 删除变量 delete x; 这种
• 重复参数名
• 八进制数值
• 转义字符
• 。。。

JSON.parse() 字符串=》JSON

JSON.stringify()

所有 Javascript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

Object.prototype 位于原型继承链的顶端：

日期对象、数组对象和 Person 对象都继承自 Object.prototype。

（1）使用 属性

Javascript prototype 属性允许您为对象构造器添加新属性或者方法：

Map与object比较：

共同点：键值对动态集合，支持增加和删除键值对。

不同点：

• 构造方式不同