JavaScript基础总结

JavaScript包括以下三部分：

1. ECMAScript（标准）
2. DOM
3. BOM

输入输出语句

 // 这是一个输入框
 prompt('请输入您的年龄');
 // alert 弹出警示框 输出的 展示给用户的
 alert('计算的结果是');
 // console 控制台输出 给程序员测试用的  
 console.log('我是程序员能看到的');

数据类型

基本类型：(数据是存放在栈内存) Number Boolean String undefined null BigInt symbol
引用类型：(数据是存放在堆内存的复制变量值) Object Function

typeof 操作符
typeof可以来确定任意变量的数据类型

let message = "some string"; 
console.log(typeof message); // "string" 
console.log(typeof(message)); // "string" 
console.log(typeof 95); // "number"

1. String字符串：需要使用引号引起来（单引号、双引号、双引号嵌套单引号、\转义字符【 \n 换行 \\斜杠 \'单引号 \" 双引号 \t 缩进 \b空格 】）

//  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春'));    //2
        console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找    //8
//  根据位置返回字符    charAt(index)     charCodeAt(index)
        // 1. charAt(index) 根据位置返回字符   
        var str = 'andy';
        console.log(str.charAt(3));
        // 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
        console.log(str.charCodeAt(0)); // 97
        // 3. str[index] H5 新增的
        console.log(str[0]); // a
//  concat('字符串1','字符串2'....)
      var str = "andy";
      console.log(str.concat("red")); // andyred
//  substr('截取的起始位置', '截取几个字符');
      var str1 = "改革春风吹满地";
      console.log(str1.substr(2, 3)); // 第一个2 是索引号的2 从第几个开始  第二个3 是取几个字符
//  替换字符 replace('被替换的字符', '替换为的字符')  
        // replace('被替换的字符', '替换为的字符')    它只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a', 'b'));   // bndyandy
        // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o', '*');
        }
        console.log(str1);
//   把字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
      var str2 = "red, pink, blue";
      console.log(str2.split(","));
      var str3 = "red&pink&blue";
      console.log(str3.split("&"));

2. Number数字型：
   Number.MAX_VALUE表示数字最大值
   Number.MIN_VALUE表示数字最小值
   Infinity 表示正无穷（用typeof检查返回Number）
   -Infinity 表示负无穷

3. Boolean布尔值：用来做逻辑判断

4. null：表示一个为空的对象（用typeof检查返回object）

5. undefined：未定义，即声明了一个变量，但是没有给变量赋值（用typeof检查返回undefined）

数据类型转换

把数字型转换为字符串型

1.变量.toString() 【只适应Number、Boolean、String类型】

2.String(变量)【除Number、Boolean、String类型，还适应于undefined、null类型】

// 1. 把数字型转换为字符串型 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
// 2. 我们利用 String(变量)   
        console.log(String(num));
// 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
        console.log(num + '');

把其他类型转换为数字型

【parseInt()、parseFloat() 、Number()为强制类型转换】
【==、！！为隐式类型转换】

1.使用Number(变量) 函数
字符串—>数字型：（纯数字直接转换为数字、字符串里有非数字的内容转换为NaN、字符串是空串或者全是空格转换为0）
布尔—>数字型：（true转成1、flase转成0）
null—>数字型：（转成数字0）
undefined—>数字型：（数字 NaN）

2.使用parseInt(变量) （把字符串转换成整数）

3.使用parseFloat(变量) （把字符串转换成浮点数）

// 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
      // console.log(parseInt(age));
      console.log(parseInt("3.14")); // 3 取整
      console.log(parseInt("3.94")); // 3 取整
      console.log(parseInt("120px")); // 120 会去到这个px单位
      console.log(parseInt("rem120px")); // NaN
// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
      console.log(parseFloat("3.14")); // 3.14
      console.log(parseFloat("120.567px")); // 120.567 会去掉这个px单位
      console.log(parseFloat("rem120px")); // NaN
// 3. 利用 Number(变量)
      var str = "123";
      console.log(Number(str));  // 123
      console.log(Number("12"));  // 12
// 4. 利用了算数运算 -  *  /  隐式转换
      console.log("12" - 0); // 12
      console.log("123" - "120");  // 3
      console.log("123" * 1);  // 123

把其他类型转换为布尔型
字符串—>布尔型：（除了空串为flase外，其他都是true）
数字型—>布尔型：（除了0和NaN为flase外，其他都是true）
null—>布尔型：（转换为flase）
undefined—>布尔型：（转换为flase）
对象—>布尔型：（转换为true）

console.log(Boolean("")); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean("123")); // true
console.log(Boolean("你好吗")); // true

自增、自减

（++a）前置递增：先加1 后返回值，是新值

//前置递增运算符  ++ 写在变量的前面
      var age = 10;
      ++age; // 类似于 age = age + 1
      console.log(age); // 11
//  先加1  后返回值
      var p = 10;
      console.log(++p + 10); // 21

（a++）后置递增：先返回原值 后自加1，是原值

// 1. 前置自增和后置自增如果单独使用 效果是一样的
// 2. 后置自增 口诀：先返回原值 后自加1
      var age = 10;
      console.log(age++ + 10); // 20
      console.log(age); // 11

var d = 20;
//  先返回原值 d++ =20,后自加1 d=21
//  d=21; 先加1 ++d =22,后返回值  d=22
//  d=22
//  20 + 22 +22
var result = d++ + ++d + d ;
console.log(result );   // 64

算数运算符（+ - * / %）

逻辑运算符( && || !)

// 1. 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false 
        console.log(3 > 5 && 3 > 2); // false
        console.log(3 < 5 && 3 > 2); // true
// 2. 逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true
        console.log(3 > 5 || 3 > 2); // true 
        console.log(3 > 5 || 3 < 2); // false
// 3. 逻辑非  not  ！ 
        console.log(!true); // false

赋值运算符(=)

var num = 10;
num += 5;
console.log(num);  // 15
var age = 2;
age *= 3;
console.log(age);  // 6

关系运算符

关系操作符执行比较两个值的操作，包括小于（<）、大于（>）、小于等于（<=）和大于等于（>=），用法跟数学课上学的一样。这几个操作符都返回布尔值。

相等运算符

== 和=== 的不同
前者会自动转换类型
后者不会

//1. 程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 值相等就可以
        console.log(3 == 5); // false
        console.log('pink老师' == '刘德华'); // flase
        console.log(18 == 18); // true
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
// 2. 程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
        console.log(18 === 18); // true
        console.log(18 === '18'); // false

运算符的优先级

三元表达式

// 1. 有三元运算符组成的式子我们称为三元表达式
// 2. ++num     3 + 5     ? :
// 3. 语法结构    条件表达式 ？ 表达式1 ： 表达式2
// 4. 执行思路
// 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量
alert(result);

if语句

// 1. if 的语法结构   如果if
// if (条件表达式) {
//     // 执行语句
// }
// 2. 执行思路  如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句 
// 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
if (3 < 5) {
 alert('沙漠骆驼');
 }

if else 分支语句

// 1. 语法结构  if 如果  else 否则
// if (条件表达式) {
//     // 执行语句1
// } else {
//     // 执行语句2 
// }
// 2. 执行思路 如果表达式结果为真 那么执行语句1  否则  执行语句2
// 3. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行  2选1
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
     alert('您输入的年份是闰年');
} else {
     alert('您输入的年份是平年');
}

if else 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 中间有个空格了
var score = prompt('请您输入分数:');
if (score >= 90) {
    alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
    alert('宝贝，你已经很出色了');
} else if (score >= 70) {
    alert('你要继续加油喽');
} else if (score >= 60) {
    alert('孩子，你很危险');
} else {
    alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}

switch 多分支选择语句

// 1. switch 语句也是多分支语句 可实现多选1  switch 转换、开关  case 小例子或者选项 
// switch (表达式) {
//     case 表达式:
//         执行语句1;
//         break;
//     case 表达式
//         执行语句2;
//         break;
//         ...
//         default:
//             执行最后的语句;
// }
// 2. 执行思路  利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句  如果都没有匹配上，那么执行 default里面的语句
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
     case '苹果':
          alert('苹果的价格是 3.5/斤');
          break;
    case '榴莲':
          alert('榴莲的价格是 35/斤');
          break;
    default:
          alert('没有此水果');
        }

while 循环

// 1. while 循环语法结构  while 当...的时候
// while (条件表达式) {
//     // 循环体
// }
// 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环
// .计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
while (j <= 100) {
    sum += j;
    j++
}
console.log(sum);

do while 循环

/ 1.do while 循环 语法结构
do {
// 循环体
} while (条件表达式)
// 2.执行思路  do while 先执行一次循环体 再判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 100)
console.log(sum);
// 3. 我们的do while 循环体至少执行一次

for 循环(遍历数组)

// 1. for 重复执行某些代码， 通常跟计数有关系
// 2. for 语法结构
// for (初始化变量; 条件表达式; 操作表达式) {
//     // 循环体
// }
// 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用 
// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
// 1.让用户控制输出的次数
 var num = prompt('请您输入次数');
 for (var i = 1; i <= num; i++) {
     console.log('媳妇我错了');
 }
// 2. 求1-100之间所有偶数和奇数的和   偶数的和变量 even    奇数 odd
var even = 0;
var odd = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 == 0) {
        even = even + i;
    } else {
        odd = odd + i;
    }
}

双重for循环

// 1. 双重for循环 语法结构
// for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
//     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
//         // 执行语句;
//     }
// }
// 2. 我们可以把里面的循环看做是外层循环的语句
// 3. 外层循环循环一次， 里面的循环执行全部
// 打印五行五列星星
var str = "";
for (var i = 1; i <= 6; i++) {
// 外层循环负责打印五行
for (var j = 1; j <= 5; j++) {
// 里层循环负责一行打印五个星星
str = str + "★";
}
// 如果一行打印完毕5个星星就要另起一行 加 \n
str = str + "\n";
}
console.log(str);

continue

// continue 关键字   退出本次（当前次的循环）  继续执行剩余次数循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
}
console.log("我正在吃第" + i + "个包子");
}

break

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

对象

javascript 的本地对象，内置对象和宿主对象
本地对象为 array obj regexp 等可以 new 实例化
内置对象为 gload Math 等不可以实例化的
宿主为浏览器自带的 document,window 等

BOM对象有哪些，列举window对象?
1、window 对象 ，是 JS 的最顶层对象，其他的 BOM 对象都是window 对象的禹 性;
2、document 对象，文档对象;
3、location 对象，浏览器当前 URL 信息;
4、navigator 对象，浏览器本身信息;
5、screen 对象，客户端屏幕信息;
6、history 对象，浏览器访问历史信息;

1.内建对象

• 由ES标准中定义的对象，在任何的ES的实现中都可以使用
• 比如: Math string Number Boolean Function Object

2.宿主对象

• 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
• 比如 BOM DOM
• 浏览器提供 console.log() document.write(）

3.自定义对象

• 由开发人员自己创建的对象

//  创建对象
//使用new关键字调用的函数是*构造函数*
//构造函数是专门用来创建对象的函数
var obj = new Object();
//  向obj中添加属性    语法：对象.属性名 = 属性值;
obj.name = "张三";
obj.sex = "男"
obj.age = 18;
//  更新对象中的属性    语法：对象.属性名 = 新值;
obj.age = 20;
//  读取对象中的属性    语法：对象.属性名
console.log(obj.name);
//  删除对象中的属性    语法：delete.对象.属性名
delete.obj.sex;

//  使用对象字面量创建对象
var obj = {};
obj.name = "张三";
obj.age = 18;
console.log(obj.name);
//  使用对象字面量创建对象时，直接指定对象中的属性
//语法：{属性名:属性值,属性名:属性值,•••}
var obj2 = {
name: "张三",
age:18
};
console.log(obj2);

函数

函数就是封装了一段可以被重复执行调用的代码块
目的： 就是让大量代码重复使用

// 函数使用分为两步： 声明函数 和 调用函数
// 1. 声明函数
// function 函数名([形参1，形参2，•••]) {
//     // 函数体
// }
// (1) function 声明函数的关键字 全部小写
// (2) 函数是做某件事情，函数名一般是动词 sayHi 
// (3) 函数不调用自己不执行
// 2. 调用函数   // 调用函数的时候千万不要忘记加小括号
// 函数名(实参1，实参2，•••);    
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 1. 如果实参的个数和形参的个数一致 则正常输出结果
getSum(1, 2);
// 2. 如果实参的个数多于形参的个数  会取到形参的个数 
getSum(1, 2, 3);
// 3. 如果实参的个数小于形参的个数  多于的形参定义为undefined  最终的结果就是 NaN
// 形参可以看做是不用声明的变量  num2 是一个变量但是没有接受值  结果就是undefined 
getSum(1); // NaN

// 函数的返回值格式
// function 函数名() {
//     return 需要返回的结果;
// }
// 函数名();
// (1) 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的
// (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者  函数名() = return后面的结果
// 利用函数 求两个数的最大值
function getMax(num1, num2) {
// if (num1 > num2) {
//     return num1;
// } else {
//     return num2;
// }
return num1 > num2 ? num1 : num2;
}
console.log(getMax(1, 3));

for-in(遍历数组/非数组对象)

枚举对象中的属性 【for-in语句】

// 枚举对象中的属性
// for‥‥in语句 对象中有几个属性，循环就执行几次 
// 每次执行时，会将对象中的属性的名字赋值给变量
// 语法  for（var 变量 in 对象）{
// }
var obj = {
    name: "张三",
    age:18
};
for（var n in obj）{
    console.log(obj[n]);
}

JS作用域

JavaScript作用域 ：就是代码名字（变量）在某个范围内起作用和效果
目的是为了提高程序的可靠性更重要的是减少命名冲突

// 1. 全局作用域： 整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);
// 2. 局部作用域（函数作用域） 这个代码的名字只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);
        }
        fn();

变量作用域

从执行效率来看全局变量和局部变量
(1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
(2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源

// 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
// 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);
        function fn() {
            console.log(num);
        }
        fn();
        // console.log(aru);
// 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
// 注意： 函数的形参也可以看做是局部变量
        function fun(aru) {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        // console.log(num2);

this

1.以函数的形式调用时，this指的是windows
2.以方法的形式调用时，this指的是调用方法的那个对象
3.以构造函数的形式调用时，this指的是新创建的那个对象

构造函数

(加new就是构造函数)
构造函数的执行流程
1.创建一个新的对象
2.将新创建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3.执行函数中的代码，给这个空对象添加属性和方法
4.将新建的对象作为返回值返回

function Person（name,age,sex）{
this.name =name;
this age = age;
this sex = sex;
this.sayName = function（）{
     alert（this.name）;
}
function Dog（）{
}
var per = new Person（"李四",17, "男"）;
var dog = new Dog（）;
console.log(per instanceof Person);

【使用 instanceof 可以检查一个对象是否是一个类的实例，如果是返回true,否则返回flase】
【语法：对象 instanceof 构造函数】

原型对象prototype

原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容统一设置到原型对象中。
普通函数调用prototype没有任何作用
构造函数调用时，他所创建的对象中会有一个隐含的属性

数组(Array)

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

array对象方法
Unshift() 头部添加
shift() 头部删除
Push() 尾部添加
pop() 尾部删除

slice() 从数组提取指定元素

var arr = ["张三",77,5,"李四"];
//  参数（开始位置的索引,结束位置的索引）
//   开始位置的索引【包含开始索引】
//   结束位置的索引【不包含结束索引】，可以省略不写，截取开始索引以后所有元素
arr.slice(0,2);
console.log(arr); 

splice() 用于删除、添加数组中指定元素

var arr = ["张三",77,5,"李四"，33,"赵武"];
//   第一个   开始位置的索引 
//   第二个   删除的数量
//   第三个及以后   添加新的元素到开始位置索引的前面
arr.splice(2,1,"人民的名义","传家");
console.log(arr); 

concat() 连接两个或多个数组，并将新的数组返回

var arr = [ 7,5];
var arr1 = ["张三", "李四","赵武"];
var arr2 = [1,2,3];
var result = arr.concat(arr1,arr2,"钱六");
console.log(result); 

join() 将数组转换成字符串

var arr = ["张三", "李四","赵武"];  
//  可以指定一个字符串作为参数，这个字符串将成为数组中元素的连接符【如不使用连接符 则默认,为连接符】
var result = arr.join("");
console.log(result);    // "张三李四赵武"

reverse() 用来反转数组

var arr = ["张三","李四","赵武","钱六"];
//  整个反过来
arr.reverse();
console.log(arr);    //"钱六，赵武，李四，张三"

sort() 对数组元素进行排序

//   默认按照Unicode编码进行排序
var arr = [6,9,2,4];
arr.sort();
console.log(arr);    //"2,4,6,9"

//  自定义排列的顺序
// 在sort()里添加一个回调函数[回调函数里定义两个形参]，来指定排序规则
var arr = [1,3,5,7,9];
arr.sort(function(a,b) {
    // 升序排序
    renturn(a-b);
    // 降序排序
    renturn(b-a);
});
console.log(arr);

遍历数组
1.使用for循环

// 遍历数组：就是把数组的元素从头到尾访问一次
        var arr = ['red', 'green', 'blue'];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }
// 1. 因为我们的数组索引号从0开始 ，所以 i 必须从 0开始  i < 3
// 2. 输出的时候 arr[i]  i 计数器当索引号来用

2.使用forEach方法（只支持IE8以上的浏览器）
【forEach方法需要一个函数作为参数，会在回调函数中传递三个值】

//  创建一个数组
var arr = ["张三",77,"李四"]
//  forEach()方法需要一个函数作为参数
//  像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
//  数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
//  以实参的形式传递进来，我们可以来定义形参，来读取这些内容
//  浏览器会在回调函数中传递三个参数:
//       第一个参数，就是当前正在遍历的元素(数组里的某个正在遍历的元素）
//       第二个参数，就是当前正在遍历的元素的索引
//       第三个参数，就是正在遍历的数组（正在遍历的对象）
arr.forEach(function(value,index,obj){ 
     console.log(value); 
});

函数对象方法call()和apply()

都是函数对象的方法，需通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call()和apply()可以将一个对象指定为第一个参数

• 此时这个对象将会成为函数执行时的this
  call()方法可以将实参在对象之后依次传递
  apply()方法需要将实参封装到一个数组中统一传递
• this的情况:
  1.以函数形式调用时，this永远都是window
  2.以方法的形式调用时，this是调用方法的对象
  3.以构造函数的形式调用时，this是新创建的那个对象
  4.使用call和apply调用时，this是指定的那个对象

arguments内置类数组对象

arguments里面存储了所有传递过来的实参

//  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
        function fn() {
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
// 伪数组 并不是真正意义上的数组，而是类数组
// 1. 具有数组的 length 属性
// 2. 按照索引的方式进行存储的
// 3. 它没有真正数组的一些方法 pop()  push() 等等

Date() 日期对象

var year = date.getFullYear();  // 返回当前日期的年
var month = date.getMonth() + 1;  // 月份 返回的月份小1个月   记得月份+1 
var dates = date.getDate();  // 返回的是 几号
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];  
var day = date.getDay();   // 周一返回的是 1 周六返回的是 6  但是周日返回的是 0
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

// 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());

// 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());

Math数学对象

// Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
        console.log(Math.PI); // 一个属性 圆周率
        console.log(Math.max(1, 99, 3)); // 99

// 1.绝对值方法
        console.log(Math.abs(1)); // 1
        console.log(Math.abs(-1)); // 1
        console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
        console.log(Math.abs('pink')); // NaN 
// 2.三个取整方法
        // (1) Math.floor()   地板 向下取整  往最小了取值
        console.log(Math.floor(1.1)); // 1
        console.log(Math.floor(1.9)); // 1
        // (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
        console.log(Math.ceil(1.1)); // 2
        console.log(Math.ceil(1.9)); // 2
        // (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
        console.log(Math.round(1.1)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(1.9)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // 这个结果是 -1
       
// 1. random() 随机数方法  返回一个随机的小数  0 =< x < 1  这个方法里面不跟参数
      console.log(Math.random());
// 2. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (y - x + 1)) + min;
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      console.log(getRandom(1, 10));
// 3. 随机点名
      var arr = ["张三", "张三丰", "张三疯子", "李四", "李思思"];
      console.log(arr[getRandom(0, arr.length - 1)]);

正则表达式

正则表达式用于定义一些字符串的规则，计算机根据正则表达式来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来

//  1.使用字面量创建  更加简单（写完之后不能改）
//  语法：var 变量 = /正则表达式/匹配模式
reg = /a/i;

//  [ac] == a|c  都是a或c
//  [a-h]   a到h  任意小写字母
//  [D-Y]   D到Y  任意大写字母
//  a[bde]c   表示abc 或 adc 或 aec
//  [^ fo]  表示除了fo
//  [0-9]  表示0到9
reg = /a|c/;   //  reg = /[ac]/; 
console.log( reg.test("bcdv"));   //  true

//  2.使用构造函数创建  更加灵活
//   语法：var 变量 = new RegExp ("正则表达式","匹配模式")
//   在构造函数里可以传递一个匹配模式作为第二个参数
//          i  忽略大小写
//          g  全局匹配模式
var reg = new RegExp("a");   //用来检查一个字符串是否含有a
console.log(a);    //  /a/

var reg = new RegExp("a","i");
var str = "a";
//  正则表达式的方法  test()
//  使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，符合返回true,否则返回false
var result = reg.test(str);
console.log( reg.test("bdv"));    //  false

//  replace()  把字符串中指定的内容替换成新的内容
//   参数：(被替换的内容，新的内容) 【可以传递正则表达式作为参数】
var str = "h2f77u08 ";
result = str.search( /[a-z]/gi,"@");
console.log(result );    //  @2@77@08

//  split()  将字符串拆分为数组【可以传递正则表达式作为参数】
var str = "abh87dtu0b64";
result = str.split( /[A-z]/);   // [A-z]表示a到z的大小写字母
console.log(result );    //  87,0,64

//  search()  搜索字符串中是否含有指定内容 【可以传递正则表达式作为参数】
//  能够搜索到就会返回第一次出现的索引，搜索不到返回-1
//  search()只会查找第一个，即使设置全局匹配也没有用
var str = "hello merry  mack ";
result = str.search( /a[bde]c/);
console.log(result );    //  -1

//  match()  从字符串中提取符合条件的内容 【可以传递正则表达式作为参数】
//   默认情况下找到第一个符合条件的内容后会停止检索
var str = "16fh7s7g8n4GE";
result = str.match( /[A-z]/gi);   // gi 即全局匹配又忽略大小写（顺序无所谓）
console.log(result );    //  fh,s,g,n,GE

 //  量词 {}   设置一个内容出现的次数
 //  只对他前面的一个内容起作用
 var reg = /a{2}/;  //a出现2次
 console.log( reg.test("badva"));    //  false
 var reg = /ab{3}/;    //b出现3次
 console.log( reg.test("baaadva"));   //  false
 var reg = /(ab){2}/;    //ab出现2次
 console.log( reg.test("abdvab"));    //  true
 var reg = /(a){1，3}/;    //a出现1到3次
 console.log( reg.test("abdvab"));    //  true
 var reg = /(b){2，}/;    //b出现2次以上
 console.log( reg.test("abdvbbab"));    //  true
 var reg = /ab+c/;    // 至少出现一次,相当于{1，}
 console.log( reg.test("abbbbbc"));    //  true
 var reg = /a*c/;    // 0个或多个，相当于{0，}
 console.log( reg.test("abbbbbc"));    //  true 
 var reg = /ab?c/;    // 0个或1个
 console.log( reg.test("abbbbbc"));    //  true 

检查一个字符串是否以某个指定的内容开头或者结尾
var reg = /^a/;     // ^ 表示开头
console.log( reg.test("abbbbbc"));    //  true 
var reg = /a$/;     // $ 表示结尾
console.log( reg.test("abbbbbc"));    //  false
var reg = /^a$/;      //表示以a开头并马上以a结尾，中间不能有其他内容
console.log( reg.test("aaaa"));    //  false
var reg = /^a|a$/;      //表示以a开头以a结尾
console.log( reg.test("aaaa"));    //  true 

正则表达式语法

.   表示任意字符
\.  表示.
\\   表示\ 
注意：使用构造函数时，由于他的参数是一个字符串，二\是字符串中的转义字符，使用\需要用\\来代替
\w   表示任意字母、数字、_     [A-z0-9_]
\W   表示除了字母、数字、_     [^A-z0-9_]
\d   表示任意数字   [0-9]
\D   表示除了数字   [^0-9]
\s   表示空格
\S   表示除了空格
\b   表示单词边界
\B   表示除了单词边界

DOM文档对象模型

<body>
    <div id="time">2008-9-9</div>
      // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
    <script>
        // 获取对象
        var timer = document.getElementById('time');
        // 修改div里的文字
        time.innerHTML = "2018-9-9";
        console.log(timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

事件

单击事件

<button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        // 这个函数是响应函数
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>

内联样式表

通过style属性设置的样式都是内联样式表，它具有较高的优先级，会立即显示。

//  语法： 元素.style.样式名 = 样式值；
box.style.height = 30px;
//  如果样式表中含有-连接两个名词，需要去掉-  
//  用驼峰命名法   background-color
box.style.backgroungColor = "green";

事件对象

1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
3. 事件对象 是事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);
                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);
        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>

DOM事件流

冒泡事件和默认事件

委托事件

事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点

DOM对象

定时器

setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

// setTimeout语法规范：  window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');
        // }, 2000);
        function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
 
// setInterval 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);