JavaScript基础

JavaScript基础## 标题

JavaScript的组成

• ECMAScript - 简称es，JavaScript的基本语法。(js基础)—ES5
• DOM - 文档对象模型，用来操作页面上的标签。
• BOM - 浏览器对象模型，用来操作浏览器的部分功能。

js的书写方式

一、内嵌式：

在一个固定的标签 —— script , 写js代码

<script>
  alert('邮箱的名字不合理');
</script>

二、外联式：

在外部准备一个js文件，使用script标签引入

// 语法  <script src="js文件的路径" ></script>

<script src="./01.js"></script>

三、行内式：

写在标签的属性里面的，通常都是 onXXX 这些属性里面

<input type="button" value="按钮" onclick="alert('hello world');">

注释语法

多行注释
/* 多行注释，用于注释多行 */

单行注释
// 单行注释
// alert('123');

四个常用js方法

alert（）弹窗提示

// 弹窗提示
alert('不好意思，您的账号输入错误！');

prompt（）弹窗文本输入框

prompt("请输入你的银行卡密码"); // 同样使用引号包起来

console.log()

作用：这个方法可以在开发者工具的 Console选项，也就是我们所说的控制台里面输出消息

 // 在浏览器控制台窗口显示内容（后期主要用于调试代码）
console.log('测试一下~')

document.write()

作用：这是一个比较早期的时候，浏览器里面提供的一个在页面的body标签里面输出消息的方式，现在很少用了

//使用js把内容写入页面
document.write('今天天气真好');

变量

什么是变量

——变量就是存储数据的容器！！！

 var 变量名 = 数据;
 
 
 变量定义分为两个过程：**变量声明和变量赋值**
 
 // 变量声明
var a;
// 变量赋值
a = 10;

var可以同时声明多个变量名

变量命名规范

1. 能够使用那些字符 ： 数字、字母、下划线、$
2. 不能使用数字开头
3. 不能使用js里面具有特殊功能的单词 —— 关键字,也不建议使用保留字
4. 区分大小写
5. 命名语义化——建议使用驼峰命名（多个单词组成的一个变量名）
   • 大驼峰MyFirstName——所有单词首字母大写
   • 小驼峰myFirstName——第一个单词首字母小写，其他的单词的首字母大写

JavaScript 中最重要的保留字（按字母顺序）：

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

数据类型

五大简单的数据类型

简单数据类型（基本数据类型、值类型）：number、string、boolean、null、undefined

**复杂数据类型（引用数据类型）：**数组，对象，函数—— 后面会学习

数值类型number

其实就是数字，就是整数、小数、负数…

var num1 = 123;

可以做加减法

但是小数相加会有bug
console.log(0.1 + 0.2); // 不是0.3 , 是一个不准确的数字
这是由于二进制的缘故

字符串类型string

字符串主要作用就是用来表示文本的，单词、字母、汉字、文章、名字…

'字符'
"字符"

如果引号里面还要出现引号

// 1.嵌套引号
console.log('<div id="box"></div>');
// 2 转义字符
console.log("<div id=\"box\"></div>")

字符串拼接：

var name = "阿伟", age = "18";
var str = name+"今年"+age+"岁了";

布尔类型boolean

是在编程中专门为了表示条件结果的，只有两个值： true 和 false

true - 表示结果成立，为真

false - 表示结果不成立，为假

var result = 4 > 5;
console.log(result);// false ,因为 4 > 5 不成立
var res = 5 < 6;
console.log(res); // true 因为 5 < 6 成立

null和undefined

undefined —— 未定义 ，声明了变量但是没有赋值，就是undefined

null —— 空 , 什么都没有 ， 通常也是不会主动使用，而是得到的一个结果是null

prompt('输入框'); // 如果点击了取消，就是 null

返回数据类型关键字——typeof

typeof 数据;
typeof(数据);

数据类型转换

主要是三大类：转成数字、转成字符串、转成布尔

把其他转成数字： Number() 、 parseInt() 、 parseFloat()
把其他转成字符串：String() 、.toString()
把其他转成布尔: Boolean()

转成数字

Number(数据) // 把其他的类型转换为数字
parseInt(数据) // 把字符串转换为整数
parseFloat(数据) // 把字符串转换为小数

转换为字符串

例：
var res2 = String(true);

var res3 = (123).toString();

转换为布尔

Boolean(数据);
只有以下几个是false，其他都是true
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(false));
console.log(Boolean(NaN));

算术运算符

+操作符

数字相加

1. 字符串 + 其他 = 字符串
会把其他类型 转换为 字符串 ， 两个字符串连接到一起
2. 数字 + 数字 = 数字
会把其他类型 转换为 数字 ，再相加

-操作符

数字相减

都是优先把非数字的转换为数字，再运算
var res3 = '456' - 123; 
console.log(res3); // 输出 数字 333
var res4 = 'abc' - 123;
console.log(res4); // 输出NaN
这是因为，数字和字符串在相减的过程中，会把字符串隐式转换成数字，再相减。但是如果字符串在转换的过程中，无法转换成数字，就会转换成NaN，再计算就无法得到一个正确的数字结果

*操作符

作用是两个数字相乘

/操作符

作用是两个数字相除

%操作符

作用是两个数字求模(得到余数)

a % b  取模运算：
	a能不能被b整除  无法整除的部分就是余数
    取模就是 得到a除以b的余数  

    比如：奇偶数判断

隐式转换

隐式转换是指在数据在参与运算的过程中，数据根据操作符的运算规则自动进行的数据类型转换。

• 加法会发生字符串拼接的情况
• 减法、乘法、除法……默认都会调用Number

比较运算符

> <  >=  <= 
  以上都是和数学里面的比较是一样的规则

== 
  判断两个值是否相等（数字和字符串）
console.log(5 % 2 == 0);

!=
  判断两个值不相等
console.log(5 % 2 != 0);

===
  判断类型和值是否相等
console.log(undefined === null);
!==
  判断类型和值是否不相等


// 特殊的数字NaN，和谁都不相等
console.log(NaN == NaN); // false 
// 如何验证一个数据, 不是NaN
//  isNaN(数据) 判断一个数据是否是NaN
console.log(isNaN(NaN)) //  NaN是一个NaN, 所以得到的是true
console.log(isNaN(123)) //  123不是一个NaN, 所以得到的是false

补充算术操作符

++ 自增运算符

 数据++;  数据++ 先拿数据原本的值进行计算，计算完后，再自增
 ++数据;  ++数据 先自增，自增的结果来参与计算

var a = 10;
a++;  //  或者  ++a;
console.log(a);  //11   相当于 a = a + 1的结果，实现数据自增1

– 自减运算符

数据--；先拿数据原本的值进行计算，计算完后，再自减
--数据；先自减，自减的结果来参与计算

赋值操作符

  赋值运算符  =
  执行过程：
	 先执行 = 右边的代码，得到结果，再给 = 的左边

  var num = 30;
  // num = num + 20;
  // 简写方式
  num += 20;
  console.log(num); // 50

  // -= *= /= %=  

逻辑操作符

&& 与

&& 与：用在需要多个条件同时成立的时候；

// 用户在登录的时候要用户名和密码同时正确才能登录
var userName = prompt('请输入用户名');
var password = prompt('请输出密码');
console.log(userName === 'admin' && password === '123456');
// 只有 && 两边的 结果都是 true ，最终结果才是 true

|| 或

|| 或：用在只需要任意条件成立的时候

// 只要年龄小5岁或者身高小于120cm就可以免费乘坐
var age = parseInt(prompt('请输入你的年龄'));
var height = parseFloat(prompt('请输入你的身高'));
console.log(age < 5 || height < 120);
// 只要 || 两边的结果有一个是true，最终结果就是true

! 非

! 非：用于颠倒是非的时候；

var res = true;
console.log(!res);
console.log(!!res);// 转布尔值
// 这里暂时用不到，在后面做具体效果的时候都用，那个时候我们再学习具体的使用

操作符的优先级

1. 第一优先级： [] . ()
2. 第二优先级： ++ -- !
3. 第三优先级： *  /  %
4. 第四优先级： +  -
5. 第五优先级： >   >=   <   <=
6. 第六优先级： ==   !=    ===    !==  
7. 第七优先级： &&
8. 第八优先级： || 
9. 第九优先级： = += -= *= /= %=  


1. 括号先算
2. 其次算算术
3. 再次算比较
4. 然后算逻辑
5. 最后算赋值

分支结构

if/else结构

只有一个条件的判断：

if( 条件表达式 ){
   条件表达式的结果是true的时候要执行的代码
}

var gender = prompt('请问您的性别是男的吗');

if( gender === '男' ){
  alert('男厕所在二楼的最东边，请去吧');
}

两个条件的判断：

if( 条件表达式 ){
   条件表达式的结果是true的时候要执行的代码
}else {
  条件表达式的结果是false的时候要执行的代码
}

var gender = prompt('请告诉我你的性别');
if(gender === '男'){
  alert('男厕所在二楼的最东边，请去吧');
}else {
  alert('女厕所在3楼的西边');
}

多个条件的判断：

if( 条件表达式1 ){
   条件表达式1的结果是true的时候要执行的代码
}else if(条件表达式2){
  条件表达式2的结果是true的时候要执行的代码
}else if(){
         
}
// 如果还有更多的判断，继续写 else if ()

else {
  以上的条件都不为true，就会执行这里的代码
}


var num1 =  +prompt("请输入一个数字(1~7):");

if(num1 === 1){
    console.log("星期一");
}else if(num1 === 2){
    console.log("星期二");
}else if(num1 === 3){
    console.log("星期三");
}else if(num1 === 4){
    console.log("星期四");
}else if(num1 === 5){
    console.log("星期五");
}else if(num1 === 6){
    console.log("星期六");
}else if(num1 === 7){
    console.log("星期日");
}else{
    // 这里的代码,当上面所有条件都不成立, 就执行这里的代码
    console.log("请务必输入1-7");
}

switch结构

在js里面如果是比较固定值，推荐使用swtich-case结构

switch (变量){
  case 要比较的固定的值1:
    变量和 固定的值1  ===   的时候要执行的代码
    break;
  case 要比较的固定的值2:
    变量和 固定的值2  ===   的时候要执行的代码
    break;
  case 要比较的固定的值3:
    变量和 固定的值3  ===   的时候要执行的代码
    break;
  default:
    当以上所有的条件都不成立的时候，代码在这里执行
    break;
}

三元表达式(补充)

三元（三目）表达式的使用是简写if-else结构

表达式1 ? 表达式2 : 表达式3
// 如果表达式1 成立， 那么就执行表达式2
// 如果表达式1 不成立， 那么就执行表达式3
//例如： 求二个数字中谁更大
var a = 10; var b = 20;
var max = a > b ? a : b;
console.log(max);

if/else结构，多用于判断区间、不定值判断

switch-case 只能用于定值判断

循环结构

for循环

for(初始化表达式 ; 条件表达式 ; 递增或者递减表达式){
  循环体（需要重复执行的代码）
}

for(var count = 0;count < 6; count++){
  console.log('javascript天下无敌！！！');
}

执行过程：

1.先执行初始化表达式

2.判断条件是否成立

3.如果成立，执行循环体

4.执行递增表达式

重复2~4，直到第2步的条件为false，就结束循环

while循环

语法
while( 条件表达式 ){
  当表达式的结果是true的时候，这里面的代码会重复的执行，直到条件为false
  循环体（需要重复执行的代码）
}

当条件表达式永远为true时，形成死循环

执行过程：

1.先判断条件是否成立

2.如果成立，会执行循环体

3.重复1~2过程，直到条件为false为止

do-while循环

语法：

do {
  循环体（需要重复执行的代码）
}while (条件)


**执行过程：**

   1.先执行循环体1次

   2.再判断条件是否成立

   3.如果成立，就执行循环体

   4.重复2~3多次，直到条件是false为止

深入for循环使用

条件表达式会发生隐式转换

条件表达式, 会发生隐式转换(Boolean)

循环的结束语句

break关键字

作用：

1.阻止switch-case结构的继续判断

2.阻止循环的继续执行，然后break之后的代码就不会执行了

语法：

for(var i=1;i<=5;i++){
    if(i===3){
        break;
    }
    console.log(i);
}

continue关键字

作用

跳过当前这一次循环，继续执行下一次循环

for(var i=1;i<=5;i++){
    if(i===3){
        continue;
    }
    console.log(i);
}

循环总结

1. 当我们需要多次执行同样的代码的时候，就可以使用循环来实现。
2. while、do-while可以用于未知次数循环的，for可以用于已知次数循环的（最常用的）。
3. while、for循环可能一次循环都不执行， do-while循环至少执行一次。
4. 终止整个循环，使用break；跳过一次循环，使用continue。

数组

数组是一个有顺序、有长度的数据集合

定义数组

// 先定义一个数组
var arr = [];
console.log(arr); 

// 另一种定义方式
var arr = new Array();

数组存值

数组中的数据使用索引管理。索引就是序号，只不过数组中的数据从0开始

// 声明一个空数组
var arr = [];
// 或者  var arr = new Array();
//把成绩存储到数组中
arr[0] = 91;
arr[1] = 88;
arr[2] = 72;
arr[3] = 45;
arr[4] = 63;
console.log(arr); // 输出 [91,88,72,45,63] 就是一个数据集合

或

var arr = [91,88,72,45,63];
console.log(arr); // 输出的结果是一样的

数组取值（索引）

把数据存储在数组里面，是为了将来能使用的，所以要从里面把数据取出来。数据取值同样使用索引取。

语法
console.log(arr[0]);
var sum = arr[0] + arr[1] + arr[2] + arr[3] + arr[4];
console.log(sum); // 输出370

遍历数组

语法

var sum = 0;
for(var i = 0; i <= 4; i++){
  sum += arr[i];
}
console.log(sum); // 输出 370，和我们一个一个相加是一样的

数组长度

数组长度：就是数组中数据的个数

console.log(arr.length); // 数组.length 就是数组的长度

遍历的完善一下（简写）

for(var i = 0; i <= arr.lensgth - 1; i++){
  console.log(arr[i]);
}
// 简化一下
// 把 <= 的 = 号 去掉，会使循环的次数少一次，我们把上限次数+1，就变成了  i < arr.length - 1 + 1 ,最终：
for(var i = 0; i < arr.lensgth; i++){
  console.log(arr[i]);
}

prompt中转行

//  \ 转义符号   \r\n 换行
prompt("请选择: \r\n1.xxxxx \r\n2.xxxx \r\n3.xxxx");

字符串切割（掌握）

字符串.split(指定分隔符)

var str = '12,88,72,6';
// 以逗号为分隔符，分割字符串，得到一个数组
var arr = str.split(',');
console.log(arr); // 输出 ['12','88','72','6']

获取当前的日期和时间

创建Date对象：

var date = new Date();
console.log(data); // 系统时间不同，输出的结果也会不同，但是都是输出当前系统的时间

获取时间的各个部分：

var date = new Date();
// 获取年份
var year = date.getFullYear();
console.log(year);
// 获取月份 ， 得到的月份是从0开始的 ，使用 0-11 表示 1-12 月
var month = date.getMonth()+1;
console.log(month);
// 获取天 几号
var day = date.getDate();
console.log(day);
// 获取星期数
var d = date.getDay(); 
// 获取小时
var h = date.getHours();
console.log(h);
// 获取分钟
var m = date.getMinutes();
console.log(m);
// 获取秒数
var s = date.getSeconds();
console.log(s);

// 获取毫秒
var ms = date.getMilliseconds();
// 返回事件戳。1970年1月1日 0时0分0秒到现在的毫秒值
// 最初计算机操作系统是 32  位，而时间也是用  32  位表示。 
// 最长时间是  68  年
// 最早出现的  UNIX  操作系统考虑到计算机产生的年代和应用的时限
// 综合取了  1970  年  1  月  1  日作为  UNIX TIME  的纪元时间
var dateTime = date.getTime();

// 把需要补0的先补上
if (month < 10) {
    month = '0' + month;
}
if (day < 10) {
    day = '0' + day;
}
if (h < 10) {
    h = '0' + h;
}
if (m < 10) {
    m = '0' + m
}
if (s < 10) {
    s = '0' + s;
}

console.log("现在是: " + year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s + ",星期" + d);

随机功能

Math对象

获取随机数：

// 获取随机数
var r = Math.random();
console.log(r); // 输出一个在 [0,1) 之间的浮点数，可以得到0，但是无法得到1

*对浮点数取整：

取整才能得到10
r = Math.floor(r);
console.log(r); // 得到一个在 [0,10] 之间的整数

函数

函数的定义

函数就是一段可以重复执行的代码段。

语法

// 1. 定义函数（函数声明式）：
function 函数名(){
  函数体 - 需要重复时候用的代码
}

// 2. 调用函数（函数调用式）：
函数名();
tellStory(); //此时在控制台中就会输出一个故事

// 如果想输出多次，就可以调用多次这个函数
// 每调用一次，就会执行一次，做了代码的重复使用。

函数的参数

function 函数名(参数){
  函数体
}


总结：

函数的参数可以一个，也可以是多个，只要在重复的过程中，有多个会产生变化的数据，都可以使用参数的方式解决

在定义函数时写的占位用的参数，我们称为**形参**，在调用函数，实际参与函数执行的参数，我们称为**实参**

函数的返回值

函数执行完毕之后会有一个执行结果，该结果就叫 —— 返回值

function 函数名(参数){
  return 想要的数据
}

书写函数的步骤

1. 写出要实现的过程
2. 分析过程中哪些是会变化的，哪些是不会变化的
3. 把变化的作为参数，不变的作为函数体
4. 按照函数的语法把代码写来
5. 考虑是否需要修改函数的返回值

函数表达式

var 函数名 = function(参数){
  函数体
}

var getSum = function(a,b){
  return a + b;
}

匿名函数

没有名字的函数

function (参数){ 函数体 }

自调用函数

// 立即执行函数
(function({
  	// 写一些为了避免变量污染的代码
}))();

js中的作用域

函数和变量的有效范围就是作用域

作用域：

作用域就是指定一个变量或者一个函数的作用范围。

能在页面的任何位置都可以访问，称为 全局作用域

只能在局部（函数内）访问，称为为 局部作用域

在全局作用域下声明的变量，称为 全局变量

在局部作用域下声明的变量，称为 局部变量

上述代码中，a是全局变量，b是局部变量

ES5中只有函数才有作用域，所谓是局部作用域也可以叫函数作用域。

作用域的作用就是为了把数据进行保护，不让外部的数据对我们的数据进行污染

函数和变量声明的提升

JS是解释性语言，JS引擎对代码的处理分为两步：

**1、预解析处理：**在代码执行之前，对代码做全局扫描，对代码中出现的变量和函数提前声明处理；

var a;//变量提前声明，但不初始化
//函数提前声明
function f() {    }；

2、**调用执行：**然后自上而下的执行代码

声明提升的规则

1、变量和变量同名，解析之后只存在一个当前变量的声明。

2、**函数和函数同名，后面的声明将前面的覆盖

3、函数和变量同名，只有函数声明提升，忽略变量的声明。

4、如果是命名函数，则只将前面的变量声明提升，函数不动。（函数表达式 只会提升变量声明）

5、声明变量不适用var ----- 就是全局变量(语法不规范)

 a= 10;

// 不适用var 声明变量 不管在哪里都是全局变量

var a = b = c = 9;// 从右往左赋值

 函数参数是局部变量
         function fn(a){// 函数参数是局部变量
            // 相当于 var a = 20
            a = 10;}

虽然多个变量x同名，但是不同作用域内优先使用自己内部作用域的变量x。

函数b内部没有变量b，会向自己的外面的作用域查找x变量，函数a内的x变量离函数b最近，会优先得到函数a的变量x

函数b内部没有x变量，会向函数a的作用域查找，但是函数a内部也没有x变量，会向函数a的上一层作用域再查找，直到查找到了全局作用域。

函数b内部没有变量x，会顺着上层作用域一层一层地查找，直到全局作用域也没有，就会报错。

总结：

• 只有函数可以制造作用域链结构
• 只要是代码，就至少有一个作用域，即全局作用域。
• 凡是代码中有函数，那么这个函数就构成另一个作用域。
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
• 将这样的所有的作用域列出来，可以有一个结构：函数内指向函数外的链式结构——作用域链。
• 由内而外的访问规律，一直向外找，找不到，报错。

arguments

获取所有实参的对象：arguments

语法：

function fn(){
  console.log(arguments);
}
fn(1); // 输出 [1]
fn(1,2) // 输出 [1,2]
fn(1,2,3,4,5) // 输出 [1,2,3,4,5]

注意： arguments这个东西只能在函数内部使用，也不需要我们声明，只要我们在函数中直接使用就行

求和：

function getSum(){
  var sum = 0;
  for(var i = 0; i < arguments.length ; i++){
    sum += arguments[i];
  }
  return sum;
}

getSum(1,2,3);// 输出 6
getSum(1,2,3,4,5); // 输出15

短路运算

逻辑 && 且，一false全false。结果为true的时候，返回最后一个为true的值，结果为false，返回第一个为false的值；

console.log(2 && 3); // 3
console.log(0 && 3); // 0
console.log(0 && null); // 0
// 如果是true，得到右边，如果左边是false，得到左边
// 两边都为false，返回第一个为false


逻辑 || 或，一true全true。结果为true的时候，返回第一个为true的值，结果为false，返回最后一个为false的值；

console.log(2 || 3); // 2
console.log(0 || 3); // 3
console.log(0 || null); // 0
// 如果左边是true，得到左边，如果左边是false，得到右边
// 两边都为false，返回最后一个为false

短路运算在函数中的使用：

对象

创建对象

方法一：字面量创建对象

var obj = {}; // 这是一个空对象，什么内容都没有
里面用逗号隔开“，”
console.log(obj);


方法二：使用Object内置对象创建对象

var obj = new Object(); // 这是一个没有属性和方法的对象
用分号隔开“；”
console.log(obj);


方法三：工厂函数创建对象

为对象添加值

对象的值（对象成员）有两类：

1. 属性（变量，一般表示对象的静态属性）
2. 方法（函数，一般表示对象的动态行为）

添加属性的语法：对象.属性 = 值;

添加方法的语法：对象.方法名 = function(){}

var obj = {};
obj.name = '阿伟';// 名字是一个人的特征
obj.sayName = function(){  // 人会说出自己的名字，也就是人有自己的行为
	console.log('你好，我叫阿伟');
}

**字面量初始化对象：**

// 描述一个学生
var student = {
  name : '阿伟',
  age : 12,
  gender : '男',
  sayName : function(){
    console.log(student.name);
  }
}
// 属性和值之间使用分号分隔，一个属性和一个值叫一个键值对。多个键值之间使用逗号分隔

工厂函数创建对象

封装成函数

语法：

function createObj() {
	var obj = new Object(); 
    obj.name = '阿伟';
    obj.sayName = function(){
        console.log('你好，我叫阿伟');
    }
}

我们需要得到这个封装好的对象，那么就需要返回这个对象。

function createObj(name) {
    var obj = new Object();
    obj.name=name;
    obj.sayName = function(){
        console.log('你好，我叫'+name);
    }
    return obj;
}

工厂函数的优点：值是活的，可以批量操作，减少重复代码。

使用对象的属性和方法

语法：
// 得到对象的名字,属性可以当成变量使用
console.log(obj.name);
// 调用对象的方法，方法的本质是函数
obj.sayName();

键的方式访问对象的属性和有方法

语法：`对象[属性名]`

var obj = {};
obj['name'] = '狗蛋';
obj['sayName'] = function(){
  console.log('你好，我叫' + obj['name']);
}
obj['sayName']();

遍历对象

语法：

for(var key in obj){
    console.log(key);// 键名
    console.log(obj[key]); // 每个key对应的键值
}

渲染表格

 var datas = [
        { name: '狗蛋', age: 18, gender: '男' },
        { name: '翠花', age: 19, gender: '女' },
        { name: '来福', age: 17, gender: '男' }
    ]

    var str = `<table border="1">
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>`
    for (var i = 0; i <= datas.length; i++) {
        str += `<tr>`;
        var obj = datas[i]
        for (var key in obj) {
            str += `<td>${obj[key]}</td>`;
        }
        str += `</tr>`;
    }
    str += `</table>`;

    // 在页面中输出这个表格的字符串
    document.write(str);

内置对象

js里面的对象分成三大类：

1. 内置对象

   • Array Date Math
   • 所谓内置对象，就是JavaScript自带的一些功能对象，里面提供了很多常用、实用的属性和方法，我们需要做的就是学习这些属性和方法怎么使用，在需要用的时候直接用就行

2. 宿主对象

   • 浏览器提供的对象(如bom、dom等等)

3. 自定义对象

   • 开发人员自己定义的对象

数学对象——Math

Math.random()

生成一个 [0,1) 之间的随机浮点数**

var r = Math.random();
console.log(r);// 每次执行等到的数字都一样

Math.floor(x)

浮点数进行向下取整**

向下取整就是从这个数字开始，朝数轴的左边找到一个离它最近的整数

console.log(Math.floor(3.9));  // 3
console.log(Math.floor(-3.1)); // -4

Math.round(x)

浮点数四舍五入取整（正5入负5舍）

console.log(Math.round(3.2));// 3
console.log(Math.round(3.5));// 4
console.log(Math.round(-3.5));// -3
console.log(Math.round(-3.51));// -4

Math.ceil(x)

浮点数进行向上取整**

向上取整就是从这个数字开始，朝数轴的右边找到一个离它最近的整数

console.log(Math.ceil(3.1));//4
console.log(Math.ceil(3.5));//4
console.log(Math.ceil(-3.5));//-3
console.log(Math.ceil(-3.9));//-3

Math.abs(x)

求一个数的绝对值absolute**

console.log(Math.abs(3));  // 3
console.log(Math.abs(-3)); // 3

Math.max(x,y…)

求多个数字中的最大值

这个方法的参数个数是不限定的，想写几个就写几个

console.log(Math.max(10,20));  // 20
console.log(Math.max(8,4,5,7,3)); // 8

Math.min(x,y…)

求多个数字中的最小值**

这个方法的参数个数是不限定的，想写几个就写几个

console.log(Math.max(10,20));  // 10
console.log(Math.max(8,4,5,7,3)); // 3

数组 —Array对象

push()

从数组最后增加成员**

var aList = [1,2,3,4];
var res = aList.push(5); 
console.log(res);     //5             返回添加元素后，数组的长度
console.log(aList);   //[1,2,3,4,5]   原数组。改变

pop()

从数组最后删除成员

var aList = [1,2,3,4];
var res = aList.pop(); 
console.log(res);	    //4           返回被删除的元素
console.log(aList);   //[1,2,3]     原数组。改变

unshift()

从数组前面增加成员**

var aList = [1,2,3,4];
var res = aList.unshift(5); 
console.log(res);     //5             返回添加元素后，数组的长度
console.log(aList);   //[5,1,2,3,4]   原数组。改变

shift()

从数组前面删除成员

var aList = [1,2,3,4];
var res = aList.shift(); 
console.log(res);	    //1            返回删除的元素
console.log(aList);   //[2,3,4]      原数组。改变

reverse()

将数组反转**

var aList = [1,2,3,4];
var res = aList.reverse(); 
console.log(res);	    //[4,3,2,1]     返回翻转后的数组
console.log(aList);   //[4,3,2,1]     原数组。改变

splice(index,多少,项1,项2…)

从数组中添加或删除项目，返回删除的项目**

删除从 index 处开始的零个或多个元素,
并且用参数列表中声明的一个或多个项,来替换那些被删除的元素(如果没有,则不替换)

var aList = [1, 2, 3, 4];
var res = aList.splice(2, 1,'a','b');
console.log(res);       //[3]               返回切割掉的元素
console.log(aList);     //[1,2,'a','b',4]   原数组。改变

aList.splice(0);       // 清空数组

以下的方法不会改变原数组

slice(start,end)

切割数组，返回切割项目**

选取从数组 start位置 到数组的 end位置(不包含end位置) 所有元素,
如果没有end,选取从 start 到数组结尾的所有元素

var aList = [1,2,3,4];
var res = aList.slice(0,2);
console.log(res);    //[1,2]            返回切割掉的元素
console.log(aList);  //[1,2,3,4]        原数组。不变

indexOf()

返回数组中元素第一次出现的索引值

var aList = [3,2,"a",1,2,3,"a"];
var res = aList.indexOf("a"); 
console.log(res);	    //2 

var res2 = aList.indexOf("a",3); 
console.log(res2)

join()

将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
var res = aList.join('-');
console.log(res);     //1-2-3-4     返回合并后的字符串
console.log(aList);   //[1,2,3,4]   原数组。不变

forEach

遍历数据的方法**

// 作用： 遍历数组
arr.forEach(function(item,index){
  item 是数组里面的每个元素
  index 是数组的每个索引
})

filter

数组筛选之后返回新数组

// 作用： 把数组中满足条件的元素，放到一个新的数组里面
var result = arr.filter(function(item,index){
  return 条件
    // item就是当前遍历到的这个元素, index是这个元素索引 
     return item > 20
});

map

数据处理之后返回新数组

var newArr = arr.map(function(item,index){
    item+=3;
    return item;
})

concat

用于合并两个或多个数组**

var arr1 = [1,2,3],arr2=[5,6,7];
var arr3 = arr1.concat(10,20,arr2);
console.log(arr1,arr2,arr3)

String内置对象

字符串合并操作：“ + ”

var num1 = 123;
var str2 = 'def';
console.log(str1+str2) // 123def

split()

把一个字符串按某种方式分隔成字符串组成的数组

var str2 = 'a-b-c';
var arr2 = str4.split('-');
console.log(arr4) // ['a','b','c']

charAt()

获取字符串中的某一个字符

var str3 = 'hello word'
var res = str3.charAt(2)
console.log(res)//l

indexOf()

查找字符串是否含有某字符**(和数组一样的使用方式)

substring()

截取字符串 用法**： substring(start,end)（不包括end）截取从star开始,到end之间的字符串

如果只传一个值,表示从这个位置开始,一致截取到字符串末端

注意:  substring是以两个参数中较小一个作为起始位置，较大的参数作为结束位置 
var test = 'hello world';
alert(test.substring(7,4)); //o w

注意: 如果substring里面碰到负数,则干脆将负参数都直接转换为0
var test = 'hello world'
alert(test.substring(-3));     //hello world
alert(test.slice(3,-4));       //lo w

substr(index,n) :

从index索引位置开始截取,截取n个字符

如果只传一个值,表示从这个位置开始,一致截取到字符串末端

toUpperCase() 字符串转大写

toLowerCase() 字符串转小写

replace(旧字符, 新字符)

该方法会返回一个新字符串，原字符串不改变

var str9 = 'hello word'
var res = str.replace('word','hhhhhhhh')
console.log(res)// hello hhhhhhhh

Date内置对象

可以获取 时间+日期

var date = new Date(); // 当前的系统的时间和日期
console.log(date.getFullYear());// 年份
console.log(date.getMonth()); // 月份，从0开始
console.log(date.getDate()); // 当前天数
console.log(date.getHours()); // 小时，0-23
console.log(date.getMinutes()); // 分钟 ， 0-59
console.log(date.getSeconds()); // 秒数 ， 0-59
console.log(date.getMilliseconds()); //毫秒 0-999        1000毫秒=1秒


返回距 1970 年 1 月 1 日之间的毫秒数
date.getTime()
或者
+date  也可以获取距 1970 年 1 月 1 日之间的毫秒数

也可以生成一个指定的日期

1.传入不同的年月日时分秒
var d1 = new Date(2020,0,1,8,30,59); // 2020年1月1日 8:30:59

2.传入一个指定的字符串
var d2 = new Date('2020-01-01');

3.传入一个 大的数字 -- 从1970年1月1日开始到某个日期的总共的毫秒数
var d3 = new Date(1378594320999);