JS前置知识

什么是JS语言

javascript是一种运行在客户端 的脚本语言

客户端：即接受服务的一端，与服务端相对应，在前端开发中，通常客户端指的就是浏览器。

脚本语言：也叫解释型语言，特点是执行一行，解释一行，如果发现报错，代码就停止执行 。

javascript的三个组成部分：ECMAScript、BOM、DOM

ECMAScript：定义了javascript的语法规范。

BOM：一套操作浏览器功能的API。

DOM：一套操作页面元素的API。

script标签

书写Javascript代码有两种方式，第一种是直接在script标签中书写，第二种是将代码写在js文件中，通过script进行引入。

直接在script中书写javascript代码：

<script>
    alert("今天天气真好呀");
</script>

通过script标签引入一个JS文件，需要指定src属性

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

<font color="red">tips：如果script标签指定了src属性，说明是想要引入一个js文件，这个时候不能继续在script标签中写JS代码，即便写了，也不会执行。</font>

<script src = "test.js">
  alert("Hello World");   //这段代码不会执行
</script>

script标签的书写位置，原则上来说，可以在页面中的任意位置书写script标签。

写在head标签中，style标签之后。
写在body结束标签的前面。
```
<body>
  <script>
  </script>
</body>
```
写在html结束标签的后面，即页面的最后面。
```
<html>
</html>
<script>
</script>
```

输入输出语句

在实际开发，基本不能使用3、4、5,因为用户体验不好。

console.log 控制台输出日志
document.write 往页面中写入内容
alert 弹框警告
confirm 确认框
prompt 输入框

注释

不被程序执行的代码。用于程序员标记代码，在后期的修改，以及他人的学习时有所帮助，在JS中，分为单行注释、多行注释以及文档注释

//这是单行注释，只能注释一行
?
/*
    这是多行注释，不能嵌套
*/
?
?
//文档注释在JS中通常用于对函数进行说明
/**
* 计算圆的面积
* @param r{number} 圆的半径
* @returns {number} 根据圆的半径计算出来的面积
*/
function getArea(r) {
  return Math.PI * r * r;
}

注释的作用：

1. 模块划分，方便代码查找和维护
2. 用于解释复杂代码的逻辑，方便维护和后期开发。

要求：写代码的时候必须要写注释，但是需要注意注释的合理性。

【永无bug.js】

变量

变量，可以变化的量，变量是在计算机中存储数据的一个标识符。可以把变量看成存储数据的容器。

变量与字面量：

字面量：10、20、“abc”、true这种从字面上就能看出来类型和值的量叫做字面量。

变量：可以变化的量。

变量的声明与赋值

1.变量可以同时声明并赋值。
2.先声明后赋值
3.不声明，直接赋值
4.既不声明，也不赋值
5.同时声明多个变量
 //如果一个变量没有声明，而是直接赋值，这个变量是隐式全局变量，可以使用
//  console.log(m);  如果一个变量没有声明，也没有赋值，直接使用会报错

【测试1.html】

变量的命名规则与规范

//一个变量，如果只声明，没有初始化，默认值是undefined

命名规则（必须遵守）：
1.由字母、数字、下划线、$符号组成，开头不能是数字。
2.不能使用关键字和保留字
3.严格区分大小写

命名规范（建议遵守）：
1. 命名要有意义
2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

【测试2.html】

变量练习

1. 交换两个变量的值（掌握）
2. 不使用临时变量，交换两个数值变量的值（了解）

tips:javascript是一种弱类型语言，不管声明什么类型的变量，都是用var，并且变量的类型是可以变化的。

var age = 90;
age = "张三";

数据类型

基本数据类型包括了：number、string、boolean、undefined、null

如何查看数据类型

使用typeof关键字查看数据类型

typeof name;
typeof(name);

Number类型

进制

1. 十进制，我们平时使用的就是十进制，进行运算时，八进制和十六进制的值最终都会转换成十进制。
2. 八进制，0开头的数值，数值序列：0-7
3. 十六进制，0x开头的数值，数值序列：0-9A-F
?
进制了解即可，基本都是使用十进制，稍微了解一下进制之间的转换。
?
?
var a = 12 * "abc";
  //Not a Number:不是一个数字
  console.log(a);  //NaN它不是一个单独的数据类型，而是数字类型的一个特殊值

  var c = 12 / 0;
  console.log(c);  //Infinity  正无穷

  var d = - 12 / 0;
  console.log(d);  //-Infinity 负无穷

浮点数

科学计数法：

var num = 5e+3;
var num1 = 5e-2;
//如何表示0.003和20000？

浮点数的精度问题：

0.1 + 0.2 = ?
0.07 * 100 = ?

浮点数在运算的时候会出现精度丢失的问题，因此在做比较运算的时候，尽量不要用小数进行比较。

数值范围

javascript不能表示世界上所有的数，因此在javascript中，数值大小是有一定限制的。

Number.MIN_VALUE  :5e-324
Number.MAX_VALUE  :1.7976931348623157e+308
Infinity   :正无穷
-Infinity  ：负无穷

数值判断

1. NaN:表示一个非数值，当无法运算或者运算错误的时候，会得到一个NaN，NaN是number类型，表示一个非数值。
2. NaN不等于NaN
3. isNaN用来判断是否是一个数字，当返回true的时候，表示不是一个数字，返回false表示是一个数字。

【案例：计算用户的工资.html】

String类型

字面量

字符串的字面量：“abc” 、 ‘abc’ 字符串可以是双引号，也可以是单引号引起来。

思考：如何打印以下字符串。
我是一个"正直"的人
我很喜欢"传‘智‘播客"

字符串长度

length属性用来获取字符串的长度

var str = "abckjdlkfjd";
str.length;//字符串的长度

字符串拼接

拼接字符串使用+号

//思考：
console.log(11 + 11);
console.log("hello" + " world");
console.log("100" + "100");
console.log("11" + 11);

两边只要有一个是字符串，那么+就是字符串拼接功能
两边如果都是数字，那么就是算术功能。

boolean类型

boolean类型只有两个字面量，true和false，区分大小写。

所有类型的值都可以转化成true或者false

NaN、""、undefined、null、false、0  这6个值可以转换成false，其余的都是true。

undefined类型与null类型

undefined表示一个声明了没有赋值的变量
null表示一个空的对象。 表示对象不存在，用在引用数据类型
?
  var a;
  //undefined是一个数据类型，它里面只有一个值，这个值就是undefined
  //1.如果声明了一个变量，但是没有对它进行赋值，那么它的值默认就是undefined
  console.log(a);  //undefined
?
  //2.如果一个函数没有明确的返回值，那么它的返回值就是undefined
?
undefined派生自null。
undefined == null  -->true
undefined === null -->false

类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的，这个在调试过程中时非常有用的。

转换成字符串类型

toString() var b=true; b=b.toString();
String() var c=undefined d=string(c);
在数据的最后面加上空字符串(value+"") var a=12; a=a+"";
underfined和null没有toString方法

例如：var a = 12;? a = a + ""; //字符串和基本数据类型相加，得到的结果是一个字符串?

转换成数值类型

Number() 会先从整体上查看一下这个字符串是否是一个合法的数字
parseInt 会逐个字符进行转换，直到遇到非数字结束，parseInt不会保留小数位 int代表的是整数的意思
parseFloat 会保留小数位
+num, -0 让字符串和数字做除了加法以外的运算等运算

转换成布尔类型

Boolean

?

//将数字转换成为布尔值 0和NaN会被转换成为false

//将字符串转换成为布尔值，只有空字符串才会被转换成为false

//布尔值转换成为布尔值，false会被转换成为false

//undefined和null都会被转换成为false

//0、NaN、空字符串、false、undefined和null会转换成为false

?
!!
//!是逻辑非运算.只要一个!就可以将数据转换成为boolean类型 //但是转换以后的boolean值和它含义不一致 //所以需要使用两个!来进行转换

运算符

赋值运算符

var a = 23;
var b = a;
a += 10;

算数运算符

var a = 1;  console.log(a + 1);
var a = 1;  console.log(a - 1);
var a = 1;  console.log(a * 1);
var a = 1;  console.log(a / 1);
var a = 10;  console.log(a % 2);
?
?
?
比较运算符
== 只判断数据的内容,不判断类型
=== 不仅判断内容还判断类型
?
var c = "13";
 console.log(c < 50);  //如果是数字和字符串进行比较运算，字符串会转换成为数字
//如果是两个字符串进行比较运算，它会按照字符出现的顺序来进行比较
?
?

一元运算符

思考：
var a = 1; var b = ++a + ++a; console.log(b);  
var a = 1; var b = a++ + ++a; console.log(b);  
var a = 1; var b = a++ + a++; console.log(b);  
var a = 1; var b = ++a + a++; console.log(b);

逻辑运算符

&&:只要有一个值为假，结果就是假。找假值
||:只要有一个值为真，结果就是真。找真值
!:取反
?
（1）逻辑运算的短路问题：
?
// 逻辑或运算短路问题：只要有一个运算数是true,后面的运算数就不再计算
  // var m = a++; m = 1,a = 2;
 // console.log(a++ < 10 || a++ < 20);  // true
 // console.log(a);  //2
?
 //逻辑且的短路问题:只要有一个运算数是false,后面的运算数就不再计算
  //var m = a++; m = 1,a = 2;
  console.log(a++ > 20 && a ++ < 10);  //false
  console.log(a);  //2

  （2）逻辑运算的取值问题：

   // 逻辑 或 运算取第一个为true的值
  console.log(0 || undefined || 8 || "Hello" || false); //8
  //如果所有的值都为false，取最后一个值
  console.log(undefined || false || "" || null || 0);  //0

  //逻辑 与 运算取第一个为false的值
  console.log(8 && "Hello" && 0 && false && undefined); //0
  //如果所有的值都为true,取最后一个值
  console.log(8 && "Hello" && 12 && true && "张三");  //张三

?
思考：
true && true;
false || false;
null && undefined
null || undefined
“abc” && undefined
“abc” || undefined
null || false || 0 || 1 || null
“abc” && “bcd” && “def”

运算符的优先级

1. ()  优先级最高
2. 一元运算符  ++   --   !
3. 算数运算符  先*  /  %   后 +   -
4. 关系运算符  >   >=   <   <=
5. 相等运算符   ==   !=    ===    !==
6. 逻辑运算符 先&&   后||

思考：

//练习1
var a = true || false && true;
var b = false || true && false;
var c = true || false && false;
?
//练习2
var a  = true && false || false && true;
var b = true && true || false && false;
?
//练习3
((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true)
//练习4
var num = 10;
if(5 == num / 2 && (2 + 2 * num).toString() === "22") {
   console.log(true);
}

第二天

1.选择语句

1.1.if..else

  if(判断条件){
    代码   //如果满足判断条件，才执行代码
  }else{
    不满足判断条件时执行的代码
  }
if(condition) {
    statement1
} else if (condition) {
    statement2
} else {
    statement3
}
?
 //if...else语句，如果判断的区间有重合，小的区间要写到前面
//判断条件不能够连写，需要用 && 连接
?
三元表达式：
 //    表达式 ? 表达成立时的取值 : 表达式不成立时的取值
  var max = +num1 > num2 ? num1 : num2;

思考：

1. 是否年满18岁
2. 素质教育（把分数变成ABCDE）90-100
3. 判断星期几

1.2.switch..case

//语法
switch (expression) {
    case value:
        statement
        break; // break 关键字会导致代码执行流跳出 switch 语句
?
    case value:
        statement
        break;
    default:
        statement
}
//switch (+num（此处前面的加号是为了转换成数字防止变成字符串）){
//    case 0:
//    case 1:
//    case 2:
//    case 3:
//    case 4:
//      alert("Hello");
//      break;
//    case 5:
//    case 6:
//      alert("嘿嘿");
//      break;
//    default:
//      alert("呵呵呵呵");
//      break;
//  }

思考：

var a = "10";
    switch (a) {
        case 10:
            console.log("10");
        case 20:
            console.log("20");
        case 30:
            console.log("30");
        default :
            console.log("haha");
    }

思考2：

今天星期几

1.3.三元运算符

表达式1 ? 表达式2 : 表达式3
var sex = sex == 1 ? ‘男‘:‘女‘;

思考：

从两个数中找最大值

2.循环语句

在JavaScript中，循环语句有三种，while、do while和for循环。

2.1. while循环

基本语法：

//当满足循环条件时，执行循环体里的代码
//每执行完一次循环体的代码以后，再判断一下循环条件
//如果循环不成立时，结束循环
while(循环条件){
  //循环体
}
while(true){   //死循环，因为条件是true永远满足条件
  alert("你的电脑中毒了");
}
?
 //让用户输入用户名密码。如果用户名不是admin密码不是888,就让用户重新输入
  //用户名是 admin 并且 密码是888
  //用户名不是admin 或者 密码不是888
  var userName,password;
   while(userName != "admin" || password != "888"){
    userName = prompt("请输入用户名");
    password = prompt("请输入密码");
  }  //这个情况下里面的逻辑运算符一定要写||，否则会有bug

示例代码：

//计算1~100所有整数之和
var i = 0;   //初始化变量，用来表示循环了多少次
var sum = 0;  //初始化变量，用来记录和
?
//while语句的判断条件是i<=100,只要满足这个条件，就会一直执行循环体
while(i <= 100) {
  sum +=i;  //循环体每次进来以后，都会在sum上进行叠加
  i ++;    //每次加完以后，让计数器自增
}

2.2. do...while循环

do...while循环和while循环语法类似，不同点在于，do...while循环里，循环体至少会被执行一次。

语法格式:

do{
  //循环体
}while(判断条件);

思考：

使用do...while完成循环输入用户名密码案例。

2.3.for循环

for循环是最常用的语句之一，它可以很方便的让代码循环规定的次数。

语法格式：

for(初始化语句;条件判断语句;循环体执行完以后的语句){
  //循环体
}
?
//var num = 0;
  //  while (num <= 100) {
  //    console.log(num);
  //    num ++;
  //  }
//先执行一次初始化语句，然后判断循环条件是否满足，如果满足就执行循环体的代码
  //执行完循环体的代码以后，再执行num++这个代码
  //再判断循环条件是否满足

示例代码：

var sum = 0;
for(var i =0; i <= 100; i ++){
  sum += i;
}

思虑：

1.求1~100以内所有数的乘积
 //var product = 1;
  //for(var i = 1; i <= 10; i++){
  //  product *= i;
  //}
  //console.log(product);

2.求1~100以内3的倍数之和。
  //  var sum = 0;
  //  for (var i = 1; i <= 100; i++) {
  //    //如果i是3的倍数，才把i加上
  //    if (i % 3 == 0) {
  //      sum += i;
  //    }
  //  }
  //  console.log(sum);

3.求1~100以内不能被7整除的数之和。
  // var sum = 0;
   // for(var i = 1; i <= 100; i ++){
   //   if( i % 7 != 0){
   //     sum += i;
   //   }
   // }
   // console.log(sum);

4.求1~100以内所有偶数之和。
    // var sum = 0;
     // for (var i = 1; i <= 100; i++) {
     //   //如果i是3的倍数，才把i加上
     //   if (i % 2 == 0) {
     //     sum += i;
     //   }
     // }
     // console.log(sum);

5.求1~100以内所有的偶数和所有的奇数之和。
 //  var oddSum = evenSum = 0;
  //  for(var i = 1;i <= 100; i++){
  //    if(i % 2 != 0){   //代表的是奇数
  //      oddSum += i;
  //    }else{   //代表的是偶数
  //      evenSum += i;
  //    }
  //  }
  //  console.log("奇数之和"+ oddSum + "，偶数之和"+ evenSum);

6.打印矩形
  for (var j = 0; j < 3; j++) {  //外循环决定行数
    for (var i = 0; i < 10; i++) {  //内循环决定列数
      document.write("*");
    }
    document.write("<br>");
   }
   document.write("<br>");

7.打印三角形
正三角形
 for(var i = 0; i < 10; i++){  //i = 0   1   2  3  4
    for(var j = 0; j <= i; j++){  //j <= 0
      document.write("*");
    }
    document.write("<br>");
  }

  document.write("<br>");
  倒三角形
  for(var i = 5; i > 0;i--){
    for(var j = 0; j < i; j++){
      document.write("*");
    }
    document.write("<br>");
  }

8.打印九九乘法表。
document.write("<table width=‘1000‘>");
  for (var i = 1; i < 10; i++) {  //外循环控制行数
    document.write("<tr>");
    for (var j = 1; j <= i; j++) {
      document.write("<td>");
//    document.write("(" + j + "," + i + ")");
      document.write(j + " * " + i + " = " + (j * i));
      document.write("</td>");
    }
    document.write("</tr>");
  }
  document.write("</table>");

9.本金10000元存入银行，年利率是千分之三，每过1年，将本金和利息加作为新的本金。计算5年后，获得的本金是多少
  var money = 10000;
  var rate = 0.003;
  //第一年   10000 * (1 + 0.003)
  //第二年   10000 * (1 + 0.003) * (1 + 0.003)
  //第三年   10000 * (1 + 0.003) * (1 + 0.003) * (1+0.003)
  for (var i = 0; i < 5; i++) {
//  money = money * rate + money;
//  money = money * (1 + rate);
    money *= (1 + rate);
  }

10.斐波那契数列指的是这样的一个数列：0、1、1、2、3、5、8、13、21... ... 即第n个数是前面两个数之和。求，当n=12时，对应的值。
   var num1 = 1;
   var num2 = 1;
   var sum = 0;
   for(var i = 3;i <= 12; i++){
    sum = num1 + num2;
    num1 = num2;
    num2 = sum;
  }
  console.log(sum);

2.4.break和countinue

break:立即跳出整个循环，即结束循环。

continue:结束当前循环，继续开始下一轮循环。

// break和continue后面的语句都不会执行

思考：

for(var i = 0;i <= 10; i++) {
  if(i == 5) {
    continue;
  }
  if(i == 8) {
    break;
  }
  console.log(i);
}

练习:

1.求1~100之间不能被7整除的数之和
  var sum = 0;
  for(var i = 1; i <= 100; i++){
  //  if( i % 7 != 0){
  //    sum += i;
  //  }

  if(i % 7 == 0){
    continue;
  }
  sum += i;
}
console.log(sum);

2.求200~300之间，所有奇数之和
  sum = 0;
for(var i = 200; i <= 300; i++){
//  if(i % 2 != 0){
//    sum += i;
//  }
  if( i % 2 == 0){
    continue;
  }
  sum += i;
}

3.求200~300之间，第一个能被7整除的数。
  sum = 0;
  for(var i = 200; i <= 300; i++){
    if( i % 7 == 0){
      console.log(i);
      break;
    }
 //所有能被7整除的数
      //    if(i % 7 != 0){
     // continue;
    //    }
   //    console.log(i);

2.5.断点调试

断点调试是指在代码中添加断点，当程序运行时到这一断点时就会暂停，可以让开发人员执行后续的操作（例如，查看变量值，单步运行查看代码流程等），可以很方便的让开发人员对代码进行调试。

调试步骤：

运行JS代码-->F12打开控制台-->Sources-->找到想要暂停的JS代码-->点击行号添加断点

调试中的相关技巧：

Watch:监视。通过Watch可以查看变量的值，非常实用。
F10:单步运程，程序执行到下一行代码。
F8:直接运行到下一个断点。如果程序中没有其它断点，程序就直接运行结束

tips： 不要随便监视表达式，如果监视了表达式，表达式会被执行

3.数组

所谓数组，就是将多个元素（通常是同一类型的数据）按照一定的顺序放到一个集合中，这个集合我们就称它为数组。

练习：

为什么要使用数组？
1.一个变量同时只能用来存储一个值，当我们需要存储多个值，如全班每个人的成绩时，就必须要用到数组了。
2.使用数组把同一类型的数据放到一个集合里，便于管理，同时操作起来也比较方便。

3.1.创建数组

数组是一个有长度且按照一定顺序排列的列表。在JavaScript里，数组的长度可以动态调整。

通过构造函数创建数组：

var arr1 = new Array();  //创建了一个空的数组，这个数组里没有数据
var arr2 = new Array(10);  //创建了一个空的数组，但是指定了这个数组的长度是10
var arr3 = new Array(10,13,14);  //创建了一个数组，并且在这个数组里放入了三个数字10,13,14

通过字面量来直接创建数组

var arr1 = [];   //创建了一个空的数组
var arr2 = [12];  //创建了一个数组，并在这个数组里放入了一个数字12
var arr3 = ["ab","cd","ef"];  //创建了一个数组，并在这个数组里放入了三个字符串，注意使用逗号分隔

3.2.数组的长度与下标

数组的长度：和字符串一样，数组也有一个length属性，指数组中存储的数据的个数。

var arr = ["123","Hello",345,true];
arr.length;    //数组的长度是4

数组的下标：数组是有序的，数组里的每一个元素都有对应的下标，我们可以通过下标很方便的拿到数组里的数据。注意：数组里的下标是从0开始的。

var arr = ["hello",1234,true,4567,"world"];
arr[3];   //取出的结果是4567
arr[10];   //下标超出了数组的长度，返回值是undefined

3.3.数组的取值与赋值

数组的取值：可以通过数组的下标，很方便的取出数组里对应位置上的值。

var arr = [12,34,23,78,3,1,9];
arr[3];   //将数组里的第3个元素78取出

数组的改值：通过数组的下标，也可以很方便的修改数组里对应位置上的值。

var arr = [34,23,5,8,120];
arr[2] = "Hello";  //将数组里第2个元素数字5改成了字符串"Hello"
arr[8] = "World";  //在数组的第8个位置上插入了一个字符串"World"

练习：

1.将1~100以内所有的数都放到数组里
  var arr = [];
  //var index = 0;
  for (var i = 1; i <= 100; i++) {
    //第一种方式：直接使用i来作为数组的下标
//  arr[i - 1] = i;

    //第二种：定义一个index作为数组的下标
//  arr[index] = i;
//  index ++;

    //第三种：使用arr.length作为数组的下标
//  arr[arr.length] = i;

    //第四种：使用arr.push方法添加元素
    arr.push(i);
  }
  console.log(arr);

2.将1~100以内所有的奇数放到数组里。
 arr = [];
  for (var i = 1; i <= 100; i++) {
    if (i % 2 != 0) {
 //arr.push(i);
      arr[arr.length] = i;
    }
  }
  console.log(arr);

3.将1~100以内能被3整除的数放到数组里。
  arr = [];
  for (var i = 1; i <= 100; i++) {
    if (i % 3 == 0) {
      arr[arr.length] = i;
    }
  }
  console.log(arr);

3.4.数组的遍历

遍历：将数组里的每一个元素都访问一次，就叫遍历一次数组。

数组遍历的基本语法:

for(var i = 0; i < arr.length; i ++) {
  //可以操作数组里的每一个元素
}

练习1：

var arr = [234,12,86,59,30,28,49,71];
1.求数组中所有数据之和以及平均数。
 var sum = 0;
  for (var i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  var average = sum / arr.length;
  console.log("sum = " + sum + " ,average = " + average);

2.求数组里的最大数。
3.求数组里最大值和最小值所在的位置
4.求数组里的最大最小值以及它们所在的位置。
   var max = arr[0];  //假设数组里的第0个元素是最大的数
  var maxIndex = 0;  //假设第0个元素是最大数
  var min = arr[0];
  var minIndex = 0;
  for(var i = 0; i < arr.length; i++){
    if(arr[i] > max){
      max = arr[i];
      maxIndex = i;
    }
    if(arr[i] < min){
      min = arr[i];
      minIndex = i;
    }
  }
  console.log("max = " + max +",maxIndex = " + maxIndex  + ",min = " + min + ",minIndex = " + minIndex);

练习2：

var arr = ["abc","def","Hello","Hi","World"];
1.将字符串数组用|或其它符号分割
   var str = "";
  for (var i = 0; i < arr.length; i++) {
//    console.log(arr[i] + "|");
    str += arr[i] + "|";
  }
  console.log(str);
2.有一个字符串数组，求字符串数组中每项的长度，并把长度存入到一个新的数组里。
 var newArr = [];
  for (var i = 0; i < arr.length; i++) {
//    newArr.push(arr[i].length);
    newArr[newArr.length] = arr[i].length;
  }
  console.log(newArr);

3.将数组中值为0的项去掉，将不为0的值存入一个新的数组
    arr = [2, 4, 5, 0, 3, 7, 0, 1, 0, 5, 0];
  newArr = [];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] != 0) {
      newArr.push(arr[i]);
    }
  }
  console.log(newArr);

4.让一个数组倒序保存到另一个数组里
   newArr = [];
  for (var i = arr.length - 1; i >= 0; i--) {
    newArr.push(arr[i]);
  }
  console.log(newArr);

3.5.冒泡排序

使用冒泡排序将一个数组里的数据升序或降序进行排列。

     var arr = [];
  for (var i = arr.length - 1; i >= 0; i--) {
        var flag = true;
      for (var j = 0; j < i; j++) {
      //      document.write("(" + j +"," + (j +1) + ")");
        document.write("(" + arr[j] + "," + arr[j + 1] + ")");
          if (arr[j] > arr[j + 1]) {
               flag = false;
               //        document.write("交换了" + flag);

              var tmp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = tmp;
            }
          }
          if (flag) {
            //说明已经排好了
            break;
          }
          document.write("<br>");
              }

        console.log(arr);

（扩充）交换两个变量的值
//  var tmp = a;
  //  a = b;
  //  b = tmp;
  //  console.log("a = " + a + " , b = " + b);

  //  a = a + b;  // a = 28, b = 15;
  //  b = a - b;  // b = 13, a = 28
  //  a = a - b;  // a = 15, b = 13

  //按位异或运算
//  a = a ^ b;
//  b = a ^ b;
//  a = a ^ b;
//  console.log("a = " + a + " , b = " + b);

//  console.log(3 ^ 2 ^ 2);
  var x = 23456;
  var result = 1024 ^ x;
  console.log("加密以后的数字是" + result);
  console.log(result ^ x);

  //  a = [b, b = a][0];
//  console.log("a = " + a + " , b = " + b);

第三天

1.函数

学习目标：掌握函数的基本用法，会使用函数解决一些问题。

1.1.函数的基础知识

1.1.1.为什么要使用函数

在写代码的时候，有一些常用的代码需要书写多次，如果直接复制粘贴的话，会造成大量的冗余代码，为了提高代码的重用率，提高编码效率，我们需要使用函数。函数可以用来封装一段重复的代码，只需要声明一次，就可以被多次调用。

冗余代码缺点：

1.代码重复，可阅读性差。

2.不易维护。一旦逻辑发生改变，所有的地方也都要修改。

1.1.2.函数的声明与调用

函数的声明：声明函数需要用到function关键字。

function 函数名(){
  //函数体（函数的内容）
}

特点：

1.函数在声明时不会执行，只有被调用时才会被执行。
2.函数一般用来做一件事，在对函数进行命名时一定要注意，做到顾名思义。

函数的调用：

函数名();

示例代码：

//声明一个函数
function sayHi(){
  alert("吃了没");
}
//调用函数
sayHi();

练习:

1.封装一个打招呼的函数
   function sayHello() {
  console.log("Hello");
  console.log("早上好");
  console.log("吃了没");
}

2.封装一个函数，计算两个数的和
   function getSum() {
  console.log(3 + 2);
  }
  getSum(); 

3.封装一个函数，计算1~100之间所有数的和
    function getTotal() {
    var total = 0;
    for(var i = 1; i <= 100; i++){
      total += i;
    }
    console.log(total);
  }
  getTotal();

1.1.3.函数的参数

1.形式参数：在定义函数名和函数体的时候使用的参数，目的是用来接收调用该函数时传入的值。这个参数是一个不存在的变量，仅仅只是为了占用位置，所以我们可以称它为形式参数，简称形参。形式的值由调用者来传入

2.实际参数：在调用有参函数时，函数名后面括号中的参数被称为实际参数，实参可以是常量、变量或者表达式。

语法：

//有参函数在声明时，需要在函数名后的括号里写上形参
function 函数名(形参1,形参2,形参3...){
  //函数体
}
//调用有参函数,在函数名后面的括号里直接传入实际参数
函数名(实参1,实参2,实参3...);

练习：

1.计算1~n的数字之和
   function getSum1(n) {
    var sum = 0;
    for(var i = 1; i <= n; i++){
      sum += i;
    }
  }
  getSum1(20);

2.计算两个数的和
  function getSum2(m,n) {
      console.log(m + n);
  }
  getSum2(4,5);

3.计算m~n之间数字之和
    function getSum3(m,n) {
    var sum = 0;
    for(var i = m; i <= n; i++){
      sum += i;
    }
    console.log(sum);
  }
  getSum3(2,100);

1.1.4.函数的返回值

很多情况下，调用者在函数执行完成以后，需要拿到函数执行的结果（比如，拿到两个数的和，拿到两个数的较大数等），这个返回的结果就叫做返回值。//return语句用来将结果返回给调用者

返回值语法：使用return关键字标识函数的返回值。

function 函数名(形参1,形参2,形参3...) {
  //函数体
 return 返回值;   //return关键字用来标识函数的返回值
}
var result = 函数名(形参1,形参2,形参3...);  //调用者定义一个变量，用来保存函数的返回值。

练习:

1.计算1~n之间所有数的和，并返回结果。
   function getSum1(n) {
    var sum = 0;
    for(var i = 1; i <= n; i++){
      sum += i;
    }
    //return语句用来将结果返回给调用者
    return sum;
  }

2.计算两个数的和，并返回结果
    function getSum2(m,n) {
    return m + n;
  }
  console.log(getSum2(4, 5));

3.计算m~n之间所有数的和，并返回结果。
   function getSum3(m,n) {
    var sum = 0;
    for(var i = m; i <= n; i++){
      sum += i;
    }
    return sum;
//    console.log(sum);
  }
  var result = getSum3(2, 100);
  console.log(result);

1.1.5.函数三要素

函数的三要素指的是：

/在其它强类型语言里，比如Java,函数名、参数和返回值只要有一个不一样，那这就是两个不同的函数。函数名一样，参数或者返回值不一样，就叫函数重载 //但是在JS里，只要函数名一样，就是同一个函数。在JS里不允许函数重载

文档注释：文档注释/ ** */通常用在函数的声明中，用来解释这个函数的作用。（包括函数名，参数以及返回值的作用）

<font color="red">声明函数时，使用文档注释对函数进行说明，是一种良好的开发习惯</font>

 /**
   * 求圆的面积
   * @param r {number} 圆的半径
   * @returns {number} 圆的面积
   */
function getArea(r){
  return Math.PI*r*r;
}
getArea(3);

练习：

1.根据半径计算圆的面积
   function getArea(r) {
    return Math.PI * r * r;
  }
  var area = getArea(3);
  console.log(area);

2.根据半径计算圆的周长
   /**
   * 根据计算周长
   * @param r {number} 圆的半径
   * @returns {number} 圆的周长
   */
  function getLength(r) {
    return Math.PI * 2 * r;
  }
  var length = getLength(2);

3.求两个数中的较大数。
    function getMax(a, b) {
    return a > b ? a : b;
  }
  console.log(getMax(13, 5));

4.求一个数组中的最大数。
    function getArrMax(arr) {
//  var arr = [12,3,4,5,6];
    var max = arr[0];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] > max) {
        max = arr[i];
      }
    }
    return max;
  }
  console.log(getArrMax([1, 23, 4, 5, 6, 7]));
  var arr = [34, 89, 76, 23, 45, 12];
  console.log(getArrMax(arr));

5.求一个数组中的最小数。
6.翻转一个数组，返回一个新的数组。
  function reverseArray(arr) {
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
      newArr.push(arr[i]);
    }
    return newArr;
  }
  var array = reverseArray([123, 34, 56, 78, 9, 12]);
  console.log(array);

7.给一个数组进行倒序排序。
   function bubbleSort(arr) {
    for (var i = arr.length - 1; i >= 0; i--) {
      var flag = true;
      for (var j = 0; j < i; j++) {
        if (arr[j] < arr[j + 1]) {
//          arr[j] = [arr[j + 1],arr[j+1] = arr[j]][0];
          flag = false;
          var tmp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = tmp;
        }
      }
      if (flag) {
        break;
      }
    }
    return arr;
  }
  var arr = bubbleSort([9, 4, 5, 2, 3, 6, 7, 8]);
  console.log(arr);

1.2.函数的高级知识

1.2.1.函数调用

在函数内部是可以调用其它函数的

function fn1(){
  console.log("fn1开始");
  fn2();    //在函数fn1里调用了fn2函数
  console.log("fn1结束");
}
function fn2(){
  console.log("fn2的代码");
  console.log("fn2的代码");
  console.log("fn2的代码");
}
fn1();

断点调试：

1.F8:跳转到下一个断点
2.F10:单步运行（不会跳入到函数里）
3.F11:单步调试（跳入到函数里）
4.Shift+F11:跳出函数调用

练习：

1.求阶乘
  function getJC(n) {
    var result = 1;
    for (var i = 1; i <= n; i++) {
      result *= i;
    }
    return result;
  }
  console.log(getJC(6));

2.求阶乘的和
    // 1! + 2! + 3! + 4! + ... + n!
  function getJCSum(n) {
    var sum = 0;
    for (var i = 1; i <= n; i++) {
      sum += getJC(i);
    }
    return sum;
  }
  console.log(getJCSum(4));

3.求任意三个数的最大值。
  //  3.求任意三个数的最大值。
//  function getMax(a, b, c) {
  //第一种写法:
//    var d;
//    var result;
//    if(a > b){
//      d = a;
//    }else{
//      d = b;
//    }
//
//    if( d > c){
//      result = d;
//    }else{
//      result = c;
//    }

  //第二种写法
//    var d = a > b ? a : b;
//    var result = d > c ? d : c;
//    return result;

  //第三种写法
//    return (a > b ? a : b) > c ? (a > b ? a : b) : c;
//  }

  function getMax1(a,b){
    return a > b ? a : b;
  }
  function getMax2(m,n,p) {
    var x = getMax1(m,n);
    return getMax1(x,p);
  }
  console.log(getMax2(1, 4, 9));

1.2.2.函数参数与返回值详解

函数的参数详解：

1.在JavaScript中，没有函数重载，只有覆盖。如果定义了两个同名函数，后面的函数会覆盖掉前面的函数。

//即使前一个函数有参数，后一个函数没有参数 //此时调用的依然是后一个函数，而不是前一个函数 //如果函数不需要参数，而调用的时候又传入了一个参数 //这个传入的参数会被 “舍弃” 掉

2.在JavaScript中，实参的个数可以和形参的个数不一致。

如果实参的个数多于形参的个数，多余的实参会被舍弃。(并不是真正的舍弃，而是使用了一个变量对其进行了保存)
如果实参的个数少于形参的个数，不足的实参使用undefined替代。

函数返回值详解：

1.return 语句作为函数的返回，它后面的语句不会执行。
2.函数也可以没有return语句。如果一个函数没有明确的返回值，那么这个函数的返回值是undefined.
3.函数也可以直接return，而不给返回值，相当于return undefined.作用是用来结束函数的调用。

练习:

1.比较两个数据大小，返回更大的那个数。
2.求数组中的最大值和最大值所在的位置，并且返回。
  function getMaxAndIndex(arr) {
    var max = arr[0];  //修改第0个元素是最大数
    var maxIndex = 0;
    for(var i = 0; i < arr.length; i++){
      if(arr[i] > max){
        max = arr[i];
        maxIndex = i;
      }
    }
//    return max;
//    return maxIndex;
//    return {maxIndex:max};
    return [max,maxIndex];
  }
  var result = getMaxAndIndex([12,34,5,6,90,345,234,1234,899]);
  console.log("最大数是" + result[0] + ",最大数所在的位置是" + result[1]);

1.2.3.函数的作用域

全局变量：在最外层声明的变量就是全局变量，全局变量在任何地方都能够被访问。

局部变量：在函数中声明的变量就是局部变量，局部变量只能在当前函数内能够被访问。

隐式全局变量：没有使用var声明的变量也是全局变量。

作用域：变量可以发挥作用的区域。

全局作用域：在script标签内，函数外定义的作用域就是全局作用域。在全局作用域中定义的变量是全局变量。

函数作用域：在函数中的区域叫做函数区域，在函数作用域中定义的变量就是局部变量，只能在当前函数中访问。

<font color="red">在函数中，只有全局作用域和函数作用域。在if、while、for等语句中定义的变量都是全局变量。 </font>

1.2.4.预解析

JS解析器在执行JS代码的时候，分为两个过程：预解析过程和代码执行过程。

预解析过程：

1.把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。

2.把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。

3.先提升var,再提升function

思考：

console.log(a);
function a(){
  console.log("aaaaa");
}
var a = 1;
console.log(a);

面试题：

var num = 10;
fn1();
function fn1(){
  console.log(num);  //undefined
  var num = 20;
}
?
var a = 18;
fn2();
function fn2(){
  var b = 9;
  console.log(a);   underfined
  console.log(b);   9
}
?
fn3();
console.log(c);   //9
console.log(b);   //9
console.log(a);   //9
function fn3(){
  a = b = c = 9;
  console.log(a);  //9
  console.log(b);  //9
  console.log(c);  //9
}
?
fn3();
console.log(c);   //9
console.log(b);   //9
console.log(a);   //9
function fn3(){
 var a = b = c = 9;
  console.log(a);  //9
  console.log(b);  //9
  console.log(c);  //报错  因为预解析时把var=a提前了，到此处a没有被赋值所以报错了
}

1.2.5.声明函数的两种方式

函数声明（命名函数）

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

函数表达式(匿名函数)

var 函数名 = function(){
  //函数体
}
?
匿名函数的调用必须要写在函数表达式的后面

这两种函数的区别：

1.命名函数可以在声明之前调用，因为预解析时，会先把函数的声明给解析出来。

2.<font color="red">匿名函数的调用必须要放在声明之后</font>，因为预解析时，只会声明变量，不会给变量赋值！（DOM注册事件）

1.2.6.匿名函数

匿名函数：没有名字的函数

匿名函数的使用:

1.将匿名函数赋值给一个变量，通过变量名来调用函数。
var test = function(){   //将匿名函数赋值给一个变量
  console.log("Hello");
}
test();  //通过变量名来调用函数
2.匿名自调用函数。
(function(){
  console.log("Hi");
})();

自执行函数的作用：防止全局变量污染。

第四天

1.对象

学习目标：1.会创建一个对象2.会定义一个构造函数3.会操作一个对象

1.1.对象的基本概念

1.1.1.为什么要有对象？

在JavaScript中，对象跟数组、函数一样，都是一种复杂的数据类型，也叫引用数据类型。是一系列相关的属性的集合，可以很方便的对变量和函数进行管理。

面向对象编程（Object Oritented P rogramming，简称OOP）是非常重要的软件编程思想。

1.1.2.什么是对象

现在生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。

编程语言：在内存上一段有意义的区域被称为对象，它也可以具有相关特征（属性），执行具体的行为（方法）。

思考：

1. 女友对象
    //特征：名字、性别、身高、体重、血型、星座、生日
    //行为：吃饭、睡觉、拍电影、唱歌、发微博
2. 学生对象
    //特征：名字、性别、身高、体重、分数
    //行为：吃饭、睡觉、学习、敲代码
3. 英雄对象
    //特征：名字、性别、金钱、等级、技能
    //行为：移动、攻击、防御

1.2.创建对象

1.2.1.通过构造函数创建

var hero = new Object();   //创建一个空的对象
hero.name = "奥特曼";
hero.skill = "打怪兽";
hero.attack = function(){
  console.log("奥特曼发出光波打败了小怪兽");
}
hero.attack();

注意事项：

1.this一定要出现在方法中才有意义，不在方法中的this没有意义。(如果一个函数挂载在对象里作为它的属性则称这个函数为方法)0

2.在方法中出现的this，指的是当前对象，即调用这个方法的对象

? //this谁调用指的就是谁

? //this只能在函数内部使用才有意义

//在函数外部使用，"没有意义"

1.2.2.对象字面量

//对象也可以理解为一个以键值对形式存在的无序集合

var person = {
  name : "迪伽",
  age : 2000,
  sex : "男";
  fight : function(){
    console.log("打怪兽");
  }
};
console.log(person.name); //"迪迦"   通过点可以获取到对应的值
person.fight(); //只有如此上面的额“打怪兽才能被打印出来”

1.3.批量创建对象

1.3.1.使用普通函数创建对象

优点：可以同时创建多个对象

缺点：创建出来的没有具体的类型，都是Object类型的对象。

function createTeacher(name,age,height) {
   var teacher = new Object();
   teacher.name = name;
   teacher.age = age;
   teacher.height = height;

  return teacher;
  }
   var teacher1 = createTeacher("苍老师",30,165);

  var teacher2 = createTeacher("许老师",35,170);

  var teacher3 = createTeacher("姜老师",18,180);

1.3.2.查看一个对象的类型

1. typeof 只能判断基本数据类型
      var arr = new Array(1,2,3);
      console.log(typeof arr);  //object
2. instanceof  判断对象的数据类型
      console.log(arr instanceof Array); //只用于判断                                                  （true/false）
3. constructor.name 也可以获取到对象的具体类型
      //调用arr的constructor.name属性，拿到arr的数据类型
      //constructor指的是构造器（构造函数）
      console.log(arr.constructor.name);  //Array
  console.log(teacher1.constructor.name); //Object

1.3.3.构造函数

构造函数，是一种特殊的函数，主要用来在创建对象时就给对象初始化，即为对象的成员变量赋值，总与关键字new一起使用在创建对象的语句中。

关键字new所做的操作:

1.new会创建一个新的空对象
2.new会让this指向这个对象
3.调用构造函数
4.new会返回这个创建好的对象

练习：

1.学生对象的构造函数
 var student = new Object;
2.老师对象的构造函数
3.英雄对象的构造函数

1.4.操作对象的属性

1.4.1.点语法

#//获取对象属性
//对象.属性  获取对象的某个属性
//1.如果这个对象有这个属性，就返回所对应的属性值
//2.如果这个对象没有这个属性，则返回undefined
var name = teacher.name;   //获取到老师对象的姓名属性
teacher.name = "苍老师";   //将老师对象的姓名设置成为苍老师
?
# //设置对象属性
//对象.属性 = 值
//1.如果对象有这个属性，修改这个属性的值
//2.如果对象没有这个属性，则给这个对象添加一个新属性
var name = teacher["name"]; //获取到老师对象的姓名属性
teacher["name"] = "苍老师";  //将老师对象的姓名设置成为苍老师

1.4.2.[]语法

也叫关联数组方式，说白了就是把对象当作数组来看待。

//获取对象属性值
//对象["下标"]  把对象的属性当成是数组里的元素
     (下标即属性)
//设置对象属性
//对象["下标"] = 值

//注意：<font color="red">如果使用一个变量来获取对象里的属性时，必须要使用[]语法。</font>

function Student(name,age){
  this.name = name;
  this.age = age;
}
var stu = new Student("张三",18);
var tmp = "name";
var name = stu.tmp;   //undefined,在stu对象里找tmp属性
name = stu[tmp];     //张三，这里的tmp是一个变量，它指的是"name"字符串

1.4.3.遍历对象

使用for..in循环可以遍历一个对象里的数据

var obj = {"name":"张三","age":18,"sex":"男"};
for(var x in obj){
  console.log(obj[x]);
}

1.5.基本数据类型与引用数据类型

基本数据类型：也叫简单数据类型，原始数据类型或者值类型。在存储时，变量存的就是值本身。

引用数据类型：也叫复杂数据类型。在存储时，变量中存储的仅仅是地址（引用）。

练习1：

//1.
  var num1 = 10;
  var num2 = num1;
  num1 = 20;
  console.log(num1);  //20
  console.log(num2);  //10

//2.
  var num = 50;
  function fn1(num) {
    num = 60;
    console.log(num); //60
  }
  fn1(num);
  console.log(num);  //50

//3.
  var num1 = 55;
  var num2 = 66;
  function fn2(num,num1) {
    //var num=num;
    //var num1=num1;
    num = 100;
    num1 = 100;
    num2 = 100;
    console.log(num);  //100
    console.log(num1); //100
    console.log(num2); //100
  }
  fn2(num1,num2);
  console.log(num1); //55  
  console.log(num2); //100
  console.log(num);  //报错  全局作用域中没有定义这个变量

练习2:

//1.
function Person(name, age) {
    this.name = name;
    this.age = age;  
  }
  var p1 = new Person("zs", 18);
  var p2 = p1;
  p2.name = "ls";
  console.log(p1.name);      //ls
  console.log(p2.name);      //ls
 //2.
  function Person(name, age) {
    this.name = name;
    this.age = age;
  }
  function f1(p) {
    p.name = "ls";
    console.log(p.name);          //ls
  }
  var p1 = new Person("zs", 18);
  console.log(p1.name);           //zs
  f1(p1);
  console.log(p1.name);           //ls

练习3:

//1.
function f1(a, b) {
      a = a + 1;
      b = b + 1;
      console.log("a = " + a);   //6
      console.log("b = " + b);   //7
    }
    var x = 5;
    var y = 6;
    f1(x, y);
    console.log("x = " + x);      //5
    console.log("y = " + y);      //6
 //2.
 function Person(name, age) {
    this.name = name;
    this.age = age;
  }
  function f2(p) {
    p = new Person("ls", 50);
    p.name = "ww";
    console.log(p.name);        //ww
  }
  var p2 = new Person("zs", 18);
  f2(p2);
  console.log(p2.name);         //zs

//3.
  function f3(arr) {
    arr[0] = 100;
  }
  var array = [1, 2, 3];
  f3(array);
  console.log(array);           //100 2 3

  //4.冒泡排序的函数中，是否可以不返回数组？
var array = [4,3,9,8,5,7,1,2,0,6];

  function bubbleSort(arr){
    for(var i = arr.length - 1; i >=0; i--){
      var flag = true;
      for(var j = 0; j < i; j++){
        if (arr[j] > arr[j + 1]){
          flag = false;
          arr[j] = [arr[j + 1],arr[j + 1] = arr[j]][0];
        }
      }
      if(flag){
        break;
      }
    }
  }

  bubbleSort(array);
  console.log(array);

第五天

内置对象

JS内置对象就是指Javascript自带的一些对象，供开发者使用，这些对象提供了一些常用的的功能。

常见的内置对象有Math、String、Array、Date等

内置对象有很多，我们主要是记下这些内置对象的用法即可。但是同学们也不可能一下子记住这么多的方法，因此当同学们忘了某个方法该如何使用的时候，可以通过以下方式查看。

跳转到定义ctrl+左键
火狐开发者网站MDN
W3School网站
离线文档
笔记

Math对象

Math对象中封装很多与数学相关的属性和方法。

属性PI

Math.PI
最大值/最小值
```
Math.max();
Math.min();
```

取整

1. Math.ceil();//天花板，向上取整
    var b = 123.056;
    console.log(Math.ceil(b));  // 124  ceil 向上取整
?
2. Math.floor();//地板，向下取整  
     var a = 123.789;
     console.log(Math.floor(a));  //123 floor是向下取整
     a = -123.08;
     console.log(Math.floor(a));  //-124
?
3. Math.round();//四舍五入，如果是.5，则取更大的那个数
     var c = 123.456;
     console.log(Math.round(c));  //123
      c = 23.89;
      console.log(Math.round(c));  //24

随机数

Math.random();//返回一个[0,1)之间的数，能取到0，取不到1
?
    //生成 [0,100]的随机数
  //  parseInt(Math.random() * 101);
  console.log(Math.round(Math.random() * 100));  //

  //[50,100] --> [0,50]
  Math.round(Math.random() * 50) + 50;  //[50,100]

  //[32,89]  -->[0,57]
  Math.round(Math.random() * 57) + 32;

绝对值

Math.abs();//求绝对值
?
  console.log(Math.abs(-234));  //234 取绝对值

次幂和平方

Math.pow(num, power);//求num的power次方
   //  Math.pow(2, 3); //8  2的3次方
?
Math.sqrt(num);//对num开平方
   //  Math.sqrt(4);//2   对4开平方

sin cos

 //  console.log(Math.sin(30));  参数是弧度，而不是角度  PI弧度 =      180角度

console.log(Math.sin(Math.PI / 6));  //sin(30)

console.log(Math.cos(Math.PI / 6));  //cos(30)

console.log(Math.tan(Math.PI / 2));   //不存在
 //  console.log(Math.sin(30));  参数是弧度，而不是角度  PI弧度 =      180角度

console.log(Math.sin(Math.PI / 6));  //sin(30)

console.log(Math.cos(Math.PI / 6));  //cos(30)

console.log(Math.tan(Math.PI / 2));   //不存在


## Date对象

> Date对象用来处理日期和时间

- 创建一个日期对象

  ```javascript
  var date = new Date();//使用构造函数创建一个当前时间的对象

  var date = new Date("2017-03-22");//创建一个指定时间的日期对象   //如果只给日期，不给时间，默认时间是世界标准时00:00:00

  var date = new Date("2017-03-22 00:52:34");//创建一个指定时间的日期对象   //如果给日期，又设置时间，这个时间代表的是当地时区的时间

     //  console.log(+date);  //1490115154000 (转换成毫秒)
     var date1 = new Date(1490115154000);  // 从1970年1月1日0时起的毫秒数
    console.log(date1);  //Wed Mar 22 2017 00:52:34 GMT+0800 (中国标准时间)

日期格式化(了解)

date.toString();//默认的日期格式
date.toLocalString();//本地风格的日期格式（兼容性）
date.toDateString();
date.toLocalDateString();
date.toTimeString();
date.toLocalTimeString();

获取日期的指定部分

getMilliseconds();//获取毫秒值
getSeconds();//获取秒
getMinutes();//获取分钟
getHours();//获取小时
getDay();//获取星期，0-6    0：星期天
getDate();//获取日，即当月的第几天
getMonth();//返回月份，注意从0开始计算，这个地方坑爹，0-11
*getFullYear();//返回4位的年份  如 2016
getYear();   //将返回的实际年份减去1900年。例如：2016年返回116
?
 //Coordinated Universal Time,协调世界时,又叫世界标准时间。可以理解为0度经线所在有时区。
  getUTCYear(); //返回标准时间对应的年份
  getUTCHour();  //返回标准时间对应的小时
?
例题：
 //现在时间：2017年08月12日,星期六,北京时间 10:33:45
  var date = new Date();

  var year = date.getFullYear();
  var month = getNumber(date.getMonth() + 1);
//  if (month < 10) {
//    month = "0" + month;
//  }
  var riqi = getNumber(date.getDate());
//  if (riqi < 10) {
//    riqi = "0" + riqi;
//  }
  var day = date.getDay();
  switch (day) {
    case 0:
      day = "日";
      break;
    case 1:
      day = "一";
      break;
    case 2:
      day = "二";
      break;
    case 3:
      day = "三";
      break;
    case 4:
      day = "四";
      break;
    case 5:
      day = "五";
      break;
    case 6:
      day = "六";
      break;
  }
  var hour = getNumber(date.getHours());
  var minutes = getNumber(date.getMinutes());
  var seconds = getNumber(date.getSeconds());

  console.log("现在时间：" + year + "年" + month + "月" + riqi + "日,星期" + day + ",北京时间" + hour + ":" + minutes + ":" + seconds);
?

  function getNumber(a){
//    if(a < 10){
//      return "0" + a;
//    }
//    return a;
    return a < 10 ? ("0" + a) : a;
  }

//思考： //封装一个函数，返回当前的时间，格式是：yyyy-MM-dd HH:mm:ss

时间戳

var date = +new Date();//1970年01月01日00时00分00秒起至现在的总毫秒数

//思考 //如何统计一段代码的执行时间？
```
var start = +new Date();
for (var i = 0; i <= 10000; i++) {
console.log(i);
```
} var end = new Date();

console.log("代码执行的时长是" + (end - start) + "毫秒");

Array对象

> 数组对象在javascript中非常的常用

- 数组判断

  ```javascript
  //语法：Array.isArray(obj)
  //作用：用来判断一个对象是否是一个数组
  var a = 100;
  var b = true;
  var c = [1,2,3,4,5,6];
  console.log(Array.isArray(a));   //false
  console.log(Array.isArray(b));   //false
  console.log(Array.isArray(c));   //true

	console.log(a instanceof Array);(也可用于判断)

      function printElement(arr) {
      if(!Array.isArray(arr)){
        return false;
      }
      for(var i = 0; i < arr.length; i++){
        console.log(arr[i]);
      }
      return true;
    }
    var result = printElement(d);
    console.log("result = " +result);

数组转换

//语法：array.join(separator)
//作用：将数组的值拼接成字符串
?
var arr = [1,2,3,4,5];
arr.join();//不传参数，默认按【,】进行拼接
arr.join("-");//按【-】进行拼接

数组的增删操作

array.push();//从后面添加元素，返回新数组的length
array.pop();//从数组的后面删除元素，返回删除的那个元素
array.unshift();//从数组的前面的添加元素，返回新数组的长度
array.shift();//从数组的最前面删除元素，返回删除的那个元素
?
//练习1
var arr = ["刘备"];
//添加数据后变成：["赵云","马超","刘备","关羽","张飞"]
   arr.unshift("赵云", "马超");
   arr.push("关羽", "张飞");
   console.log(arr);
?
//删除数据后变成：["关羽","张飞"]
   arr.shift();
   arr.shift();
   arr.shift();
   console.log(arr);

//练习2 var arr = ["赵云","马超","刘备","关羽","张飞"]; //把数组的最后一个元素变成数组的第0个元素

var last = arr.pop();  //张飞
 arr.unshift(last);
 arr.unshift(arr.pop());
 console.log(arr);

//把数组的第0个元素变成数组的最后一个元素

  var last = arr.pop();  //拿到最后一个  arr = "赵云", "马超", "刘备", "关羽"
var first = arr.shift();  //拿到第0个  arr = "马超", "刘备", "关羽"
arr.unshift(last);   // arr = "张飞","马超", "刘备", "关羽"
arr.push(first);     // arr = "张飞","马超", "刘备", "关羽","赵云"
console.log(arr);

- 数组的翻转与排序

  ```javascript
  #array.reverse();//翻转数组

    另一种方法翻转数组
    //  var newArray = [];
    //  for(var i = arr.length - 1; i >= 0; i--){
    //    newArray.push(arr[i]);
    //  }
    //  console.log(newArray);

  #array.sort();//数组的排序，默认按照字母顺序排序

  //sort方法可以传递一个函数作为参数，这个参数用来控制数组如何进行排序
  arr.sort(function(a, b){
      # //如果返回值>0,则交换位置
    return a - b;
  });

  //练习：
  //将[3, 6, 1, 5, 10, 2,11]从小到大排列
     arr.sort(function (a,b) {
      return a - b;
    })
    console.log(arr);
?
  //将字符串数组按照字符长度从小到大排列
     arr = ["Hello","Hi","好","World","ITHeima","ShangHai","Beijing"];
    arr.sort(function (a,b) {
  //    console.log("a = " + a + " , b = " + b);
      return a.length - b.length;  //按照元素的长度进行升序的排序
    });
    console.log(arr);
?
  //将学生数组按照年龄从小到大排列
    arr = [
      {name:"张三",age : 18},
      {name:"李四",age : 14},
      {name:"王五",age : 20},
      {name:"赵四",age : 19},
      {name:"刘能",age : 21},
      {name:"谢飞机",age : 30},
      {name:"赵本山",age : 68},
    ];
    arr.sort(function (a,b) {
       return a.age - b.age;
    });
    console.log(arr);

数组的拼接与截取

# //concat：
      数组合并，不会影响原来的数组，会返回一个两个数组合并后的新数组。
  
  var newArray = array.concat(array2);
?
 # //slice:
    数组切分，复制数组的一部分到一个新数组，并返回这个数组
返回值是截取的那一部分元素组成的数组（slice方法只有是从原有数组的基础上复制一部分元素生成一个新的数组）
  //原来的数组不受影响，包含begin，不包含end
  //第一个参数表示开始截取的下标；第二个参数表示结束截取的下标
  var newArray = array.slice(begin, end);
?
 # //splice:
      数组拼接，以新元素来替换旧元素，以此来修改数组的内容，常用于删除数组的某些项（需要两个以上参数）
    
  //start:开始位置  deleteCount:删除的个数  items:替换的内容
      第二个以后的参数，表示删除以后，再向数组里插入的数据
  array.splice(start, deleteCount, [items]);
?
//在数组第5个元素前面，删除0个，再插入一个元素250
  var arr = [3,4,5,6,7,8,0,2,1,9];
  arr.splice(5,0,250);
  console.log(arr);

//练习：
var arr = [4, 6, 7, 8, 3, 46, 8];
//从数组中截取一个新的数组[6,7,8,3],返回新的数组
  var newArry=arr.slice(arr[1],arr[4]);
//删除[6,7,8,3]和替换成[1,1,1]              
  var   neaArry=arr.splce(arr[1],4,[1,1,1])

数组查找元素

 #//indexOf方法
   用来查找数组中某个元素第一次出现的位置，如果找不到，返回-1
  #array.indexOf(search, [fromIndex]);
    var arr = [23,89,57,63,12,57,87];
    var index = arr.indexOf(57);
    console.log(index);

lastIndexOf()
从后面开始查找数组中元素出现位置,如果找不到，返回-1
#array.lastIndexOf(search, [fromIndex]);
 index = arr.lastIndexOf(57);
 console.log(index);

 //  function getElementIndex(element,array){

// for(var i = 0; i < array.length;i++){ // if (arr[i] == element){ // return i; // } // } // return -1; // } // var index = getElementIndex(157,arr); // console.log(index);

- 操作数组里的元素

  ```javascript
  #//filter方法
  //返回一个由符合函数要求的元素组成的新数组,不改变原数组
  (只是在原有数组的基本上过滤一部分数据组成一个新的数组,会把数组进行一次遍历)

  var arr = [12,34,56,89,78,23,45,19];
  //调用数组的filter方法，添加过滤方法，符合规则的元素会被存放到新数组里

  #//element:表示数组里的元素;index:表示索引值;array:表示调用filter方法的数组。

  var newArr = arr.filter(function(element,index,array){
    return element > 30;
  });
  console.log(arr);  //filter方法不会改变原数组里的数据[12,34,56,89,78,23,45,19];
  console.log(newArr);  //新数组里保存符合要求的元素[34, 56, 89, 78, 45]

  #//map方法
    让数组中的每个元素都调用一次提供的函数，将调用的后的结果存放到一个新数组里并返回。不会改变原有的数组
    （只是相当于把原有的数组复制一份，再让复制后的数组里的每一个元素再执行一次map里的函数）
  # newArr = arr.map(function(element,index,array){
    //在数组里的每一个元素的最后面都添加一个字符串"0"
    # return element + "0";
  # });
  console.log(newArr);  //["120", "340", "560", "890", "780", "230", "450", "190"]
  console.log(arr);    //map方法不会改变原数组里的数据 [12,34,56,89,78,23,45,19]

  #//forEach() 方法
     对数组的每个元素执行一次提供的函数,且这个函数没有返回值
      （没有返回值，不会生成一个新的数组，而且也不改变原有数组）

  var result = arr.forEach(function (element, index, array) {
    //数组里的每一个元素都会被打印
    console.log("第" + index + "个元素是" + element);
  });
  console.log(result);   //函数没有返回值

  #////some() 方法
    测试数组中的某些元素是否通过由提供的函数实现的测试.

   result =  arr.some(function (element,index,array) {
    //数组里否有一些元素大于50.只要有一个元素大于，就返回true
    console.log(element);//12,34,56
    return element > 50;
  });
  console.log(result);  //true

  #//every() 方法
     测试数组的所有元素是否都通过了指定函数的测试。
   （数组里的每一个元素是否都满足条件。只要有一个不满足，就返回false）
  result =  arr.every(function (element,index,array) {
    //数组里是否每一个元素都大于50.只有在所有的数都大于50时，才返回true
    console.log(element);  //12.第0个数字就已经小于50了，就没有再比较的意义了
    return element > 50;
  });
  console.log(result);   //false

清空数组

//1．array.splice(0,array.leng);//删除数组中所有的元素
//2．array.length = 0;//直接修改数组的长度
//3．array = [];//将数组赋值为一个空数组，推荐

数组综合练习

var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"]
//1. 找到数组中第一个a出现的位置
console.log(arr.indexOf("a"));
//2. 找到数组中最后一个a出现的位置
console.log(arr.lastIndexOf("a"));
//3. 找到数组中每一个a出现的位置
for (var i = 0; i < arr.length; i++) {
    if (arr[i] == "a") {
      console.log("----" + i);
    }
  }
//4. 数组去重，返回一个新数组
 var newArr = [];
  for (var i = 0; i < arr.length; i++) {
    if(newArr.indexOf(arr[i]) == -1){
      newArr.push(arr[i]);
    }
  }
  console.log(newArr);
//5. 获取数组中每个元素出现的次数
   for(var i = 0; i < arr.length; i++){
    var element = arr[i];
      //i = 0 --> {"c" : 1}
    //i = 1 --> {"c":1,"a":1}
    //i = 2 --> {"c":1,"a":1,"z":1}
    //i = 3 --> {"c":1,"a":2,"z":1}
    //i = 4 --> {"c":1,"a":2,"z":1,"x" : 1}
    //i = 5 --> {"c":1,"a":3,"z":1,"x" : 1}
    //i = 6 --> {"c":1,"a":4,"z":1,"x" : 1}
    //i = 7 --> {"c":1,"a":4,"z":2,"x" : 1}
    //i = 8 --> {"c":2,"a":4,"z":2,"x" : 1}
    //i = 9 --> {"c":2,"a":4,"z":2,"x" : 2}
    //i = 10 --> {"c":2,"a":5,"z":2,"x" : 2}
    //i = 11 --> {"c":2,"a":5,"z":2,"x" : 3}
   if(obj[element] == undefined){
      obj[element] = 1;
    }else{
      obj[element] ++;
    }
  }
  console.log(obj);

String对象

字符串可以看成是一个字符数组。因此字符串也有长度，也可以进行遍历。String对象很多方法的名字和和Array的一样。可以少记很多的单词。

查找指定字符串

#//indexOf:
获取某个字符串第一次出现的位置，如果没有，返回-1
#//lastIndexOf:
从后面开始查找第一次出现的位置。如果没有，返回-1

去除空白

#trim();
//去除字符串两边的空格，内部空格不会去除

大小写转换

  toUpperCase(); ：全部转换成大写字母
      //有返回值，返回值是变成大写以后的字符串不会改变原有的字符串

  toLowerCase(); ：全部转换成小写字母

字符串拼接与截取

#//字符串拼接
//可以用concat，用法与数组一样，但是字符串拼串我们一般都用+
    var str1 = "Hello";
    var str2 = "World";
    console.log(str1 + str2);
?
#//字符串截取的方法有很多，记得越多，越混乱，因此就记好用的就行
?
#//slice ：
从start开始，end结束，并且取不到end。
  str = "   a  bcd  efghi  JKLN  nopq  rst   ";
   console.log(str.slice(3, 6));  //a
   console.log(str);
?
#//subString ：
从start开始，end结束，并且取不到end
    console.log(str.substring(3, 6)); //a
    console.log(str);
?
#// substr ： ：
从start开始，截取length个字符。(推荐)
   console.log(str.substr(3, 6)); //a  bcd
   console.log(str);

字符串切割

#//split:将字符串分割成数组（很常用）
//功能和数组的join正好相反。
var str = "张三,李四,王五";
var arr = str.split(",");
console.log(arr);  //"张三""李四""王五"

字符串替换

#replace(searchValue, replaceValue)
  返回替换后的字符串，不会改变原来的字符串
//参数：searchValue:需要替换的值    replaceValue:用来替换的值
  str = "Hello";
  console.log(str.replace("o", "!")); //hell!
  console.log(str);//hello

练习

//1. 截取字符串"我爱中华人民共和国"，中的"中华"
  slice(start,end)  substring(start,end)  
  substr(start,length)    

  console.log(str.substr(2, 2));
  console.log(str.slice(2, 4));
  str.substring(2, 4);
?
//2. "abcoefoxyozzopp"查找字符串中所有o出现的位置
   str = "  a b  co e f ox y o zz op p   ";
  for(var i = 0; i < str.length;i ++){
    if (str[i] == "o"){
      console.log(i);
    }
  }
?
//3. 把字符串中所有的o替换成!
   console.log(str.replace(/o/g, "!"));   //正则表达式
?
//4. 把一个字符串中所有的空格全部去掉
    console.log(str.replace(/ /g, ""));  //global
?
//5. 统计一个字符串中每个字符出现的次数
  ar obj = {};
  for(var i = 0; i < str.length; i++){
    if (obj[str[i]] == undefined){
      obj[str[i]] = 1;
     }else{
      obj[str[i]]++;
    }
  }
  console.log(obj);

基本包装类型

简单数据类型是没有方法和属性的。为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean。

基本包装类型：把基本类型包装成复杂类型。

//自动装箱:把基本数据类型转换成为引用数据类型

? var str = "Hello"; //基本数据类型

? var newStr = new String("Hello"); //转换成为引用数据类型

//自动拆箱:把引用数据类型转换成为基本数据类型

? var num = new Number(12); //引用数据类型? console.log(num + 1); //自动拆箱

var str = “abc”;
var result = str.indexOf(“a”);
//发生了三件事情
1. 把简单类型转换成复杂类型：var s = new String(str);
2. 调用包装类型的indexOf方法：var result = s.indexOf(“a”);
3. 销毁刚刚创建的复杂类型（过河拆桥、卸磨杀驴）

补充

递归函数

递归函数：自己直接或者间接调用自己的函数，递归函数一定要留有出口，不然就是死循环了

<font color="red">递归函数比较抽象，尤其是第一次接触的同学们，大家了解即可。</font>

var count = 0;
function tellStory() {
  count++;
  console.log("从前座山");
  console.log("山里有个庙");
  console.log("庙里有一个老和尚");
  console.log("还有一个老和尚");
  console.log("老和尚在给老和尚聊天");

if (count < 4) {
  tellStory();
    }
  }

  tellStory();

1. 求1-100所有数的和
  function getSum(n){
    if(n == 1){
      return 1;
    }
    return getSum(n - 1) + n;
  }
  console.log(getSum(1));
  console.log(getSum(3));
?
2. 斐波那契数列
    function fibonicc(n){
    if(n == 1 || n == 2){
      return 1;
    }
    return fibonicc(n - 2) + fibonicc(n - 1);
  }
  console.log(fibonicc(12));

回调函数

回调函数：把函数当成参数来使用，那么这个函数就叫回调函数。

跟递归一样，回调函数现阶段只要求了解概念即可，在特效的时候，会用到回调函数，到时候再解释一下。

 function uploadFile(onSuccess,onFailure) {
    console.log("已上传25%");
    console.log("已上传50%");
    console.log("已上传75%");

var num = parseInt(Math.random() * 2);  //生成[0,2)的随机数
if (num % 2 == 0) {  //如果是偶数，表示上传失败
  //如果失败，让用户重新上传
  onFailure();
} else {
  //如果上传成功，跳转到一个新的界面
  onSuccess();
}
 }

  uploadFile(fn2,fn1);

  function fn1(){

    alert("对不起，您的文件上传失败");
    console.log("上传失败，需要重新上传");

  }

  function fn2(){

    alert("恭喜您，上传成功，哈哈哈哈");
    console.log("上传成功，跳转到新的界面");

  }

arguments对象

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

//1. 求任意个数的最大值
   function getMax(a, b) {
//    return a > b ? a : b;
    var max = arguments[0];
    for (var i = 0; i < arguments.length; i++) {
//      console.log(arguments[i]);
      if (arguments[i] > max) {
        max = arguments[i];
      }
    }
    return max;
  }
 console.log(getMax(1, 3, 4, 5, 8, 192, 0, 100));  //192
?
?
//2. 求任意个数的和
  
  function getSum(a, b) {
//    return a + b;
    console.log(delete arguments);  //false
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
      sum += arguments[i];
    }
    return sum;
  }
  console.log(getSum(1, 2, 3,4));  //10

delet操作符

var student = {
name : "张三",
age : 18
  };

  console.log(student.name);

  //删除了一个student对象的name属性

  //true 代表删除成功

  console.log(delete student.name);

  console.log(student.name);  //undefined

  var num = 14;

  //var声明的全局变量不允许删除

  //DOTDELETE标识的属性不允许删除

  //原型链里属性不允许删除

  //flase 表示删除失败

  console.log(delete num);  //false

  console.log(num);  //14

  str = "Hello";

  //删除成功

  console.log(delete str);  //true

//  console.log(str);  //报错，变量未定义

json对象

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据跟处理对象是一样的。

JSON的属性必须用双引号包裹，而对于JS对象的属性名来说，括号可以省略。

//对于js对象来说，属性名的双引号是可以省略的。
var obj = {
  name:"zs",
  age:18,
  sex:"男"
}
?
//json对象的属性名必须使用双引号括起来
var obj = {
  "name":"zs",
  "age":18,
  "sex":"男"
}
?
//在js中，其实就可以把json当成javascript的对象，因此操作是一样。

时间： 2024-10-12 21:23:53

JS基础的笔记整理

JS前置知识

什么是JS语言

script标签

输入输出语句

注释

变量

变量的声明与赋值

变量的命名规则与规范

变量练习

数据类型

如何查看数据类型

Number类型

进制

浮点数

数值范围

数值判断

String类型

字面量

字符串长度

字符串拼接

boolean类型

undefined类型与null类型

类型转换

转换成字符串类型

转换成数值类型

转换成布尔类型

运算符

赋值运算符

算数运算符

一元运算符

逻辑运算符

运算符的优先级

1.选择语句

1.1.if..else

1.2.switch..case

1.3.三元运算符

2.循环语句

2.1. while循环

2.2. do...while循环

2.3.for循环

2.4.break和countinue

2.5.断点调试

3.数组

3.1.创建数组

3.2.数组的长度与下标

3.3.数组的取值与赋值

3.4.数组的遍历

3.5.冒泡排序

1.函数

1.1.函数的基础知识

1.1.1.为什么要使用函数

1.1.2.函数的声明与调用

1.1.3.函数的参数

1.1.4.函数的返回值

1.1.5.函数三要素

1.2.函数的高级知识

1.2.1.函数调用

1.2.2.函数参数与返回值详解

1.2.3.函数的作用域

1.2.4.预解析

1.2.5.声明函数的两种方式

1.2.6.匿名函数

1.对象

1.1.对象的基本概念

1.1.1.为什么要有对象？

1.1.2.什么是对象

1.2.创建对象

1.2.1.通过构造函数创建

1.2.2.对象字面量

1.3.批量创建对象

1.3.1.使用普通函数创建对象

1.3.2.查看一个对象的类型

1.3.3.构造函数

1.4.操作对象的属性

1.4.1.点语法

1.4.2.[]语法

//注意：<font color="red">如果使用一个变量来获取对象里的属性时，必须要使用[]语法。</font>

1.4.3.遍历对象

1.5.基本数据类型与引用数据类型