JavaScript基础知识

1.定义

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
面向（基于）对象、事件驱动式的页面脚本语言。

脚本调用策略小结：

• 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
• 如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

2.输出

• 弹窗警告框，含确定按钮：alert():可数字和字符串
  • 弹窗，含确定/取消按钮：confirm()：返回true或者false
• 弹出输入框，可以让用户输入的对话框。（一般接受变量）：prompt(‘’)
• 网页内容区域输出：document.wrote()
• 控制台输出：console.log/warn/error():字符串、数字、变量

3.常量和变量

1. 常量

   数字常量（不加引号）、字符串常量（加引号）、布尔常量（true或false）
   自定义常量：const 常量名称 = 常量取值；

2. 变量

   变量表示可以被修改的数据。我们通过「变量名」获取数据，甚至修改数据。
   定义： 定义变量是在告诉浏览器，我们需要一块内存空间
   声明：var name(ES6前)
   定义一个常量：const name;
   定义一个变量：let age;

   区别： let与var

一个变量如果没有进行初始化（只声明，不赋值），那么这个变量中存储的值是undefined.

1. 命名规则

   只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ )组成。

   不能以数字开头。必须以字母(A-Z、a-z)、下划线(_)或者美元符( $ )开头。变量名中不允许出现空格。尤其注意，变量名中不能出现中划线-，

2. 标识符

   在 JS 中所有的可以由我们自主命名的都可以称之为标识符。包括：变量名、函数名、属性名、参数名。

4.变量数据类型

静态数据是指一些永久性的数据。一般是以文件的形式存储在硬盘上，比如文档、照片、视频等文件。
动态数据是在程序运行过程中，动态产生的临时数据，这些数据可能随时发生变化。一般存储在内存中。

弱类型语句

JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的。而且，变量的数据类型是可以变化的。

var name = 'qianguyihao';

name = 123; // 强制将变量 name 修改为 数字类型

1. 八种类型

• 基本数据类型（值类型）：String 字符串、Number 数值、BigInt 大型数值、Boolean 布尔值、Null 空值、Undefined 未定义、Symbol。
• 引用数据类型（引用类型）：Object 对象。

注意：内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。即除了七种基本数据类型之外，其他的，都称之为 Object 类型。

• 区别 ：基本数据类型：参数赋值的时候，传数值。引用数据类型：参数赋值，传地址。

var obj1 = new Object();
obj1.name = 'smyh';

// 让 obj2 等于 obj1
var obj2 = obj1;

// 修改 obj1 的 name 属性
obj1.name = 'vae';

console.log(obj1.name); // 打印结果：vae
console.log(obj2.name); // 打印结果：vae

1. 堆内存和栈内存

   • 基本数据类型的值，直接保存在栈内存中。值与值之间是独立存在，修改一个变量不会影响其他的变量。
   • 对象是保存到堆内存中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间；而变量保存了对象的内存地址（对象的引用），保存在栈内存当中

   • String类型

2. 语法：‘’、“”

3. 字符串内转义字符 \

• \" 表示 " 双引号
• \' 表示 ' 单引号
• \\ 表示\
• \r 表示回车
• \n 表示换行。n 的意思是 newline。
• \t 表示缩进。t 的意思是 tab。
• \b 表示空格。b 的意思是 blank。

1. 获取字符串长度：strname.length（一个空格算一个字符）

2. 字符串拼接：字符串 + 任意类型 = 拼接后字符串

3. 字符串转换：

   let myNum = 123;
   let myString = myNum.toString();
   

模板字符串

var name = '一一';
var age = '4';
console.log('我是\'' + name + ',age:\\' + age);我是'一一,age:\4
console.log(`我是${name},age:${age}`); //ES6 写法。
console.log(`this is ${name+age}`);//this is 一一4
//倒数第二行用的符号是单引号，最后一行用的符号是反引号（在 tab 键的上方）

• 支持换行
• 可以调用函数， 字符串中调用函数的位置，将会显示函数执行后的返回值。

Boolean

1. true
   • 1
   • 2<6
   • 直接使用，不要加引号

Number

1. 只要是数，就是 Number 数值型的。包括整浮、浮点数（即小数）、无论大小、无论正负

2. 由于内存的限制，ECMAScript 并不能保存世界上所有的数值。

   • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
   • 最小值：Number.MIN_VALUE，这个值为： 5e-324

   如果使用 Number 表示的变量超过了最大值，则会返回 Infinity。

   • 无穷大（正无穷）：Infinity
   • 无穷小（负无穷）：-Infinity
     注意：typeof Infinity的返回结果是 number

3. NaN :是一个特殊的数字，表示 Not a Number，非数值
   ​ typeof NaN = number

4. 隐式转换

   "2"+1得到的结果其实是字符串，但是"2"-1得到的结果却是数值 1
   -、*、/、%这几个符号会自动进行隐式转换 。

Null：空对象

• 值只有一个：null
• typeof null = ==object ,==地址为空（空指针）

undefined:未定义类型

• 变量已声明，为赋值
• 变量未声明
• 函数无返回值（即return undefined)
• 调用函数未传参

null == undefined //true
null === undefined //false
typeof undefined = undefined

• 任何值和 null 运算，null 可看做 0 运算。
• 任何数据类型和 undefined 运算都是 NaN。

Array

数组是一个单个对象，其中包含很多值，方括号括起来，并用逗号分隔。

let arrayName = ['job',1,[0,1,2],a]

var arr = new Array(1,2,3)

对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

• var Objname = {name:‘小红’;age"23}
• 属性寻址：a = Objname.name = Objname[name]

当您声明新变量时，可以使用关键词 “new” 来声明其类型

数据类型转换

其他 --> String

1. 调用 toString()方法

   • null 和 undefined 这两个值没有 toString() 方法，所以它们不能用 toString()

   • 整数的Number类型转换：可指定进制

   • var a = 255;
     a = a.toString(2); // 转换为二进制，不指定则十进制
     console.log(a); // 11111111
     console.log(typeof a); // string
     

2. String() :string(变量)

   • 对于 Number、Boolean、Object 而言，本质上就是调用 toString()方法。
   • 但是对于 null 和 undefined，则不会调用 toString()方法。它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

3. prompt() ：输入内容全为字符串类型

其他 --> Number

1. Number()

   • ‘123’ -> 123
   • ‘’ -> 0
   • ‘含非数字内容’ -> NaN
   • null -> 0
   • undefined ->NaN

2. paraelnt()
   将传入的数据当作字符串来处理，从左至右提取数值, 一旦遇到非数值就立即停止；停止时如何还没有提取到数值, 那么就返回NaN。

   • ‘123只保留开始数字’->123
   • ‘开头不是数字’-> NaN
   • Boolean/Null/Undefined -> NaN
   • 注：取整；对非字符串先转化为字符型在操作。

var a = '5';
var num = parseInt(a, 2); // 将 a 当成 二进制 来看待，转换成 十进制 的 num
console.log(num); // 打印结果：NaN。因为 二进制中没有 5 这个数，转换失败。

转换为布尔

1. 情况一：数字 --> 布尔。 0 和 NaN是 false，其余的都是 true。比如 Boolean(NaN)的结果是 false。
2. 情况二：字符串 —> 布尔。空串是false，其余的都是 true。全是空格的字符串，转换结果也是 true。字符串'0'的转换结果也是 true。
3. 情况三：null 和 undefined 都会转换为 false。
4. 情况四：引用数据类型会转换为 true。注意，空数组[]和空对象{}，转换结果也是 true。

5.运算符

• %：取余
• 自增：a++、++a . a是变量，而a++和++a是表达式,则表达式结果不同
  逻辑运算符
• && 与（且）：两个都为真，结果才为真。
• || 或：只要有一个是真，结果就是真。
• ! 非：对一个布尔值进行取反。

非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，但返回结果是原值。

赋值

• = ,+= ,*= : a += 5 等价于 a = a + 5
  比较运算符

// 比较两个字符串时，比较的是字符串的字符编码，所以可能会得到不可预期的结果
console.log('56' > '123'); // true

• == 这个符号并不严谨，会做隐式转换，将不同的数据类型，转为相同类型进行比较

console.log(undefined == null); //打印结果：true。
console.log(NaN == NaN); //false
console.log(NaN === NaN); //false

• ===全等在比较时，不会做类型转换

对象（Object）

1.简介

面向对象

可以创建自定义的类型，很好的支持继承和多态。 特征：封装、继承、多态

1. 对象是一组无序的相关属性和方法的集合。 具有特征（属性）和行为（方法）

• 使用typeof检查一个对象时，会返回object

• 创建对象

  • 方式一：
    • var obj = new Object();
  • 方式二：
    • var obj = {};
      属性:
  • 对象.属性名 = 属性值;
  • delete 对象.属性名
  • 使用in检查对象中是否含有指定属性:“属性名” in 对象

• 比较
  比较两个变量时，对于基本数据类型，比较的就是值，
  对于引用数据类型比较的是地址，地址相同才相

对象分类

1.内置对象：

• 由ES标准中定义的对象，在任何的ES的实现中都可以使用
• 比如：Object、Math、Date、String、Array、Number、Boolean、Function等。
  2.宿主对象：
• 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象。
• 比如 BOM DOM。比如console、document。
  3.自定义对象：
• 由开发人员自己创建的对象
  通过 new 关键字创建出来的对象实例，都是属于对象类型，比如Object、Array、Date等。

2.包装对象

1. 原理
   基本数据类型不能田间属性和方法
   因为这两个方法的底层做了数据类型转换（临时将 string 字符串转换为 String 对象，然后再调用内置方法,最后销毁这个实例），即包装类。

   引用类型与基本包装类型的主要区别就是对象的生存期

var s1 = "some text"; 
s1.color = "red"; //第二行创建的 String 对象在执行第三行代码时已经被销毁
alert(s1.color); //undefined

1. 基本包装类型

• String()：将基本数据类型字符串，转换为 String 对象。
• Number()：将基本数据类型的数字，转换为 Number 对象。
• Boolean()：将基本数据类型的布尔值，转换为 Boolean 对象。

在底层，字符串以字符数组的形式保存

var str = 'smyhvae';
console.log(str.length); // 获取字符串的长度
console.log(str[2]); // 获取字符串中的第3个字符（下标为2的字符）

let obj = new String('name');
obj.age=12;
console.log(obj)

原型对象(prototype):对象属性，每一个函数都有一个原型属性，里面放置的是公有的属性和方法，里面的this依然指向实例对象。
_ proto_ :隐式原型，它的本质是一个指针,指向该对象的构造函数的原型对象 .

3.内置对象

自带对象:

内置对象	对象说明
Arguments	函数参数集合
Array	数组
Boolean	布尔对象
Math	数学对象
Date	日期时间
Error	异常对象
Function	函数构造器
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象

String(字符串)

1. 属性
   • str.length:长度
   • string.constructor : 对创建该对象的函数的引用
   • object.prototype.name=value : 属性允许您向对象添加属性和方法
2. 方法
   • indexOf(‘’,[]) :来定位字符串中某一个指定的字符首次出现的位置
   • lastindexOf():同上,从后往前
   • match(): 用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符
   • replace(‘被替换’,‘替换’): 方法在字符串中用某些字符替换另一些字符。
   • toUpperCase() / toLowerCase() :大小写转换
   • split(“分隔符号”):转换为数组
3. 更多方法和属性: JavaScript String 对象 | 菜鸟教程 (runoob.com)

Number

1. 方法

   • parseInt():转换为整型

     Number.isInteger()： 判断传递的参数是否为整数。

     语法：布尔值 = Number.isInteger(数字);

   • toExponential()：返回一个数字的指数形式的字符串，如：1.23e+2

   • toFixed()：返回指定小数位数的表示形式。返回结果为字符串
     valueOf() 返回一个 Number 对象的基本数字值。
     toPrecision(x) 把数字格式化为指定的长度。

2. 属性
   • constructor 返回对创建此对象的 Number 函数的引用。
     MAX_VALUE 可表示的最大的数。

Math

Math（算数）对象的作用是：执行常见的算数任务。

Math 和其他的对象不同，它不是一个构造函数，不需要创建对象。不需要 通过 new 来调用，而是直接使用里面的属性和方法即可。

var x = Math.PI; // 返回PI

1. 算数值

   • Math.PI
   • Math.E …

2. 算术方法

   • Math.round() 四舍五入取整（正数四舍五入，负数五舍六入）
     Math.abs() 返回绝对值
     可对字符串做隐式转换

   • Math.random() 生成0-1之间的随机浮点数 取值范围是 [0，1)

     生成[0,x)之间的随机数：Math.round(Math.random()*x)

     生成[x,y)之间的随机数： Math.round(Math.random()*(y-x)+x)

     Math.floor() 向下取整（往小取值）

     Math.ceil() 向上取整（往大取值）

     Math.round() 四舍五入取整（正数四舍五入，负数五舍六入）

     Math.max(x, y, z) 返回多个数中的最大值

     Math.min(x, y, z) 返回多个数中的最小值

     Math.pow(x,y) 乘方：返回 x 的 y 次幂

     var a = Math.pow(3, Math.pow(2, 2));
     console.log(a);3（二的二次方）次方
     

     Math.sqrt() 开方：对一个数进行开方运算

     Data

3. 创建日期对象

   var d = new Date();
   var d = new Date(milliseconds);
   var d = new Date(dateString);
   var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
   

4. 日期的格式化：方法

   • getFullYear() 获取年份
   • getMonth()：获取月：0-11
     getDate() 获取日：1-31 获取的是几号
     getDay() 获取星期：0-6 0代表周日，1代表周一
     getHours() 获取小时：0-23
   • getTime()：获取时间戳， 返回从 1970 年 1 月 1 日至今的毫秒数。

   // 方式一：获取 Date 对象的时间戳（最常用的写法）
   const timestamp1 = +new Date();
   console.log(timestamp1); // 打印结果举例：1589448165370
   // 方式二：获取 Date 对象的时间戳（较常用的写法）
   const timestamp2 = new Date().getTime();
   console.log(timestamp2); // 打印结果举例：1589448165370
   // 方式三：获取 Date 对象的时间戳
   const timestamp3 = new Date().valueOf();
   console.log(timestamp3); // 打印结果举例：1589448165370
   

数组

1. 建立
   var arr = [];
   let arr = new Array(参数);
   数组中可以存放任意类型的数据，例如字符串、数字、布尔值、对象等。
2. 操作
   • arr[index]: 索引是基于0的32位数值，最大的索引为(2^32 - 1) - 1
   • arr.length: 数组长度
   • 修改长度：
     如果修改的 length 大于原长度，则多出部分会空出来，置为 null。
     如果修改的 length 小于原长度，则多出的元素会被删除，数组将从后面删除元素。
   • 遍历： 就是把数组中的每个元素从头到尾都访问一次。

   var arr = [10, 20, 30, 40, 50];
   for (var i = 0; i < arr.length; i++) {
       console.log(arr[i]); // 打印出数组中的每一项
   }
   

3. 方法
   • arr.indexOf(‘value’):返回搜索值的索引值
   • concat():连接数组，并返回结果
   • JavaScript Array 对象 | 菜鸟教程 (runoob.com)
   • 千古前端

函数

1.介绍

将一些功能或语句进行封装，在需要的时候，通过调用的形式，执行这些语句。

typeof 函数 = function
1.声明
第一种：函数关键字function

function 函数名([形参1,形参2...形参N]){  // 备注：语法中的中括号，表示“可选”
	语句...
}

第二种：函数表达式（匿名函数）

var 变量名 = function([形参1,形参2...形参N]){
			语句...
		};

第三种：构造函数（不常用)

var 变量名/函数名  = new Function('形参1', '形参2', '函数体');
//参数必须为字符串格式
var fun3 = new Function('a', 'b', 'console.log("我是函数内部的内容");  console.log(a + b);');
fun3(1, 2); // 调用函数

2.调用

• 函数名()
  当函数没有被自身对象调用时this就会变成全局变量，在浏览器中全局变量是浏览器窗口（window）。
• 通过对象的方法调用：函数作为对象的一个属性保存，称为对象的方法
  objname.func()。这里this指向对象本身objname。
• 在函数定义内，立即执行

  (function() {
  	console.log('我是立即执行函数');
  })();
  

• 通过构造函数执行

  function myFunction(arg1, arg2) {   
      this.firstName = arg1;   
      this.lastName  = arg2; }  // This creates a new object 
  var x = new myFunction("John","Doe");
  x.firstName;  //this☞实例化对象x   
  

• call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。 this 指向指定的那个对象
• 绑定事件函数

函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数。

1. 参数

- 形参和实参
	- 形参：形式参数
		- 定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开
			定义形参就相当于在函数内声明了对应的变量但是并不赋值，
			形参会在调用时才赋值。
			
	- 实参：实际参数
		- 调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参,
			调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。
			如果实参的数量大于形参，多余实参将不会赋值，
			如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined

1. 返回值
   return，函数立即停止并返回指定的值。
   如果函数中不写return，则也会返回undefined

   • break ：结束当前的循环体（如 for、while）
   • continue ：跳出本次循环，继续执行下次循环（如 for、while）
   • return ：1、退出循环。2、返回 return 语句中的值，同时结束当前的函数体内的代码，退出当前函数。

2. 函数内部

   • 在函数内部声明变量为局部变量，只能在内部访问，函数运行完毕就销毁
   • 全局变量：网页上所有脚本和函数都可访问，在网页关闭后删除
   • xxx.fn()：方法调用
   • fn():调用函数。
   • fn:函数对象，获取整个函数对象

2.高级函数

事件

1.介绍

JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
事件的三要素：事件源、事件、事件驱动程序。

• 代码书写步骤如下：
  • （1）获取事件源：document.getElementById(“box”);
  • （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
  • （3）书写事件驱动程序：关于DOM的操作。

1. 获取事件源的方式（DOM节点的获取）
   获取事件源的常见方式如下：

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

2、绑定事件的方法

方式一：直接绑定匿名函数

 div1.onclick = function () {
  alert("我是弹出的内容");}

方式二：先单独定义函数，再绑定

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。

方式三：行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
    function fn() {
        alert("我是弹出的内容");
    }
</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 操作网页上的元素的API

1. 节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。 所有节点都是object

   文档节点（Document）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。

• 元素节点（Element）：HTML标签。
• 属性节点（Attribute）：元素的属性。
• 文本节点（Text）：HTML标签中的文本内容（包括标签之间的空格、换行）。

1. 解析过程： HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
2. Dom可以做什么

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

1. nodeType:节点类型； nodeName:节点名字； nodeValue:节点值

节点node	nodeType	nodeName	nodeValue
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
注释节点	8	#comment	注释内容
文档节点	9	#document	null
文档类型节点	10	doctype的名称	null
文档片段节点	11	#document-fragment	null

获取元素节点

var div1 = document.getElementById("id值"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var div2 = document.getElementsByName("name属性值");
//常用于表单属性
var arr1 = document.getElementsByTagName("div")[0]; //方式二：通过 标签名 获取 元素节点数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s

其他获取方法

• 获取html根标签的方法（document.documentElement）
• 获取body的方法（document.body）
• 通过选择器获取指定的一个元素（querySelector(选择器)）
• 通过选择器获取匹配的一组元素（querySelectorAll(选择器)）

节点的访问关系，以属性方式存在

常用：获取所有子节点

子节点数组 = 父节点.children; 

节点属性

1. nodeName 和 tagName 是获取 HTML 节点名称的属性。

   element.tagName:只适用于元素节点

   属性/注释/文本.nodeName:文档和元素节点不可用

元素节点的方法和属性

节点函数（方法）