JavaScript基础中数组和函数的用法

1. isNaN() 这个方法用来判断非数字 并且返回一个值, 如果是数字返回的是 false ，如果不是数字返回的是true
eg：

  console.log(isNaN(16)); // false
  console.log(isNaN('你好')); // true

2. 使用alert()弹出一条信息，console.log()控制台打印信息，prompt()弹出输入框
3. typeof检测变量数据类型

eg：

 var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);

4. 强制转换

5. 算术运算符
浮点数的精度问题，浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

var result = 0.1 + 0.2;//结果是：0.30000000000000004
console.log(0.07 * 100);//结果是：7.000000000000001

所以，不要直接判断两个浮点数是否相等 !
6.递增运算符
前置递增运算符：++num 前置递增，就是自加1，类似于 num = num + 1
使用口诀：先自加，后返回值
eg：

var  num = 10;
alert(++num + 10);   // 21

后置递增运算符：num++ 后置递增，就是自加1，类似于 num = num + 1
使用口诀：先返回原值，后自加
eg：

var  num = 10;
alert(10 + num++);  // 20

<script>
      var a = 10;
      ++a; // ++a  11    a = 11
      var b = ++a + 2; // a = 12   ++a = 12
      console.log(b); // 14

      var c = 10;
      c++; // c++ 11  c = 11
      var d = c++ + 2; //  c++  = 11     c = 12
      console.log(d); // 13

      var e = 10;
      var f = e++ + ++e; // 1. e++ =  10  e = 11  2. e = 12  ++e = 12
      console.log(f); // 22
      // 后置自增  先表达式返回原值 后面变量再自加1
  </script>

7.比较运算符

//我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
  console.log(18 == '18'); // true
  //我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
  console.log(18 === '18'); // false

8.逻辑运算符

<script>
        // 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
    </script>

9.短路运算（逻辑中断）

<script>
        // 1. 用我们的布尔值参与的逻辑运算  true && false  == false 
        // 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？ 
        // 3. 逻辑与短路运算  如果表达式1 结果为真 则返回表达式2  如果表达式1为假 那么返回表达式1
        console.log(123 && 456); // 456
        console.log(0 && 456); //  0
        console.log(0 && 1 + 2 && 456 * 56789); // 0
        console.log('' && 1 + 2 && 456 * 56789); // ''
        // 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN
        // 4. 逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
        console.log(123 || 456); // 123
        console.log(123 || 456 || 456 + 123); // 123
        console.log(0 || 456 || 456 + 123); // 456
        // 逻辑中断很重要 它会影响我们程序运行结果
        var num = 0;
        console.log(123 || num++);
        console.log(num); // 0
    </script>

10.运算符优先级

一元运算符里面的逻辑非优先级很高， 逻辑与比逻辑或优先级高
11. 三元表达式

表达式1 ? 表达式2 : 表达式3;//如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

12. switch分支流程控制
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

//switch ：开关 转换  ， case ：小例子   选项，关键字 switch 后面括号内可以是表达式或值， 通常是一个变量。关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号， switch 表达式的值会与结构中的 case 的值做比较 ，如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束；如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
switch 语句和 if else if 语句的区别：
①一般情况下，它们两个语句可以相互替换
②switch…case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
③switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
④当分支比较少时，if… else语句的执行效率比 switch语句高。
⑤当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
13. for循环：for循环因为有了计数器的存在，还可以重复的执行某些操作，比如做一些算术运算。

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

名称	作用
初始化变量	通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式	用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。

执行过程：
初始化变量，初始化操作在整个 for 循环只会执行一次。执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
①执行操作表达式，此时第一轮结束。
② 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
③继续执行操作表达式，第二轮结束。
④后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

<script>
        // for 循环的执行过程
        for (var i = 1; i <= 100; i++) {
            console.log('你好吗');
        }
        // 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index
        // 2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环 
        // 3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束 
        // 4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮
    </script>

断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程。
断点调试的流程：
①浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点
②Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
③摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
双重for循环：循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

①内层循环可以看做外层循环的循环体语句
②内层循环执行的顺序也要遵循 for 循环的执行顺序
③外层循环执行一次，内层循环要执行全部次数

// 打印五行五列星星
// 1.内层循环负责一行打印五个星星
// 2.外层循环负责打印五行
      var str = '';
      for (var i = 1; i <= 5; i++) { // 外层循环负责打印五行
          for (var j = 1; j <= 5; j++) { // 里层循环负责一行打印五个星星
              str = str + '★';
          }
          // 如果一行打印完毕5个星星就要另起一行 加 \n
          str = str + '\n';

for 循环小结:
①for 循环可以重复执行某些相同代码
②for 循环可以重复执行些许不同的代码，因为我们有计数器
③for 循环可以重复执行某些操作，比如算术运算符加法操作
④随着需求增加，双重for循环可以做更多、更好看的效果
⑤双重 for 循环，外层循环一次，内层 for 循环全部执行
⑥for 循环是循环条件和数字直接相关的循环

// 打印倒三角形案例
    var str = '';
    for (var i = 1; i <= 5; i++) { // 外层循环控制行数
        for (var j = i; j <= 5; j++) { // 里层循环打印的个数不一样  j = i
            str = str + '★';
        }
        str += '\n';
    }
    console.log(str);

14.while循环

while (条件表达式) {
    // 循环体代码 
}

执行思路：
①先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
②执行循环体代码
③循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
注意：使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
15.do-while循环

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路
①先执行一次循环体代码
②再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
注意：先再执行循环体，再判断，do…while循环语句至少会执行一次循环体代码
16.continue、break
continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。
eg：吃3包饼干，第2包发霉了就扔掉第2包，继续吃第3包，其代码实现如下：

 for (var i = 1; i <= 3; i++) {
     if (i ==2) {
         console.log('这包发霉了扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '包饼干');
 }

//运行结果：
//我正在吃第1包饼干
//这包发霉了扔掉
//我正在吃第3包饼干

break 关键字用于立即跳出整个循环（循环结束）。
eg：吃3包饼干，第2包发霉了就扔掉第2包，其余的不吃了，其代码实现如下：

for (var i = 1; i <= 3; i++) {
   if (i == 2) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '包饼干');
 }
// 运行结果：我正在吃第1包饼干

16. 数组
JS 中创建数组有两种方式：
①利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组
//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组，数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
var  数组名 = ['1','2','大黄','3'];

（1）获取数组中的元素：索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始），数组可以通过索引来访问、设置、修改对应的数组元素，可以通过数组名[索引]的形式来获取数组中的元素。

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);  //输出结果2  

//翻转函数
 // 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放
        // 1、声明一个新数组 newArr
        // 2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
        // 3、我们采取 递减的方式  i--
        var arr = ['red', 'green', 'blue', 'pink', 'purple'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr);

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined
（2）遍历数组：
① 数组遍历：把数组中的每个元素从头到尾都访问一次（类似学生的点名），可以通过 for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

②数组的长度：默认情况下表示数组中元素的个数，使用数组名.length可以访问数组元素的数量（数组长度）。

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

// 冒泡排序
    // var arr = [5, 4, 3, 2, 1];
    var arr = [4, 1, 2, 3, 5];
    for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 
        for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
            // 内部交换2个变量的值 前一个和后面一个数组元素相比较
            if (arr[j] < arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);

注意：
①此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆；
②当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化；
③数组的length属性可以被修改；
④如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；
⑤如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除。
（3）数组中新增元素： 数组中可以通过以下方式在数组的末尾插入新元素

  数组[ 数组.length ] = 新数据;

17.函数： 就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
（1） 声明函数： function 是声明函数的关键字,必须小写，由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum

// 声明函数
function 函数名() {
    //函数体代码
}

（2）调用函数： 调用的时候千万不要忘记添加小括号。口诀：函数不调用，自己不执行

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。
（3）函数的封装： 把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
eg:

/* 
   计算1-100之间值的函数
*/
// 声明函数
function getSum(){
  var sumNum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
    sumNum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}
// 调用函数
getSum();

（4）函数的参数：
形参：函数定义时设置接收调用时传入
实参：函数调用时传入小括号内的真实数据
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 
<script>
      // 1. 函数可以重复相同的代码
      // function cook() {
      //     console.log('酸辣土豆丝');

      // }
      // cook();
      // 2. 我们可以利用函数的参数实现函数重复不同的代码
      // function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参 （形式上的参数）
      // }
      // 函数名(实参1,实参2...); // 在函数调用的小括号里面是实参（实际的参数）
      // 3. 形参和实参的执行过程
      function cook(aru) { // 形参是接受实参的  aru = '酸辣土豆丝' 形参类似于一个变量
          console.log(aru);

      }
      cook('酸辣土豆丝');
      cook('水煮白菜');
      // 4. 函数的参数可以有，也可以没有个数不限
  </script>

①调用的时候实参值是传递给形参的
②形参简单理解为：不用声明的变量
③实参和形参的多个参数之间用逗号（,）分隔
（5）函数形参和实参数量不匹配时：
注意：在JavaScript中，形参的默认值是undefined。
小结：
①函数可以带参数也可以不带参数
②声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
③调用函数的时候，函数名括号里面的是实参
④多个参数中间用逗号分隔
⑤形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配
（6）函数的返回值：
①return 语句返回值：函数调用整体代表的数据；函数执行完成后可以通过return语句将指定数据返回 。在使用 return 语句时，函数会停止执行，并返回指定的值，如果函数没有 return ，返回的值是 undefined。

// 利用函数求数组 [5,2,99,101,67,77] 中的最大数值。
        function getArrMax(arr) { // arr 接受一个数组  arr =  [5,2,99,101,67,77]
            var max = arr[0];
            for (var i = 1; i <= arr.length; i++) {
                if (arr[i] > max) {
                    max = arr[i];
                }
            }
            return max;
        }
        // getArrMax([5, 2, 99, 101, 67, 77]); // 实参是一个数组送过去
        // 在我们实际开发里面，我们经常用一个变量来接收函数的返回结果 使用更简单
        // var re = getArrMax([5, 2, 99, 101, 67, 77]);
        console.log(re);

 // 利用函数 求两个数的最大值
        function getMax(num1, num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            // }
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值
 // 利用函数 求两个数的最大值
        function getMax(num1, num2) {
            // if (num1 > num2) {
            //     return num1;
            // } else {
            //     return num2;
            // }
            return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(1, 3));
   // 函数返回值注意事项
        // 1. return 终止函数
        function getSum(num1, num2) {
            return num1 + num2; // return 后面的代码不会被执行
            alert('我是不会被执行的哦！')
        }
        console.log(getSum(1, 2));
        // 2. return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2; // 返回的结果是最后一个值
        }
        console.log(fn(1, 2));

        // 3.  我们求任意两个数的 加减乘数结果
        function getResult(num1, num2) {
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2); // 返回的是一个数组
        console.log(re);
        // 4. 我们的函数如果有return 则返回的是 return 后面的值，如果函数么有 return 则返回undefined
        function fun1() {
            return 888;
        }
        console.log(fun1()); // 返回 888
        function fun2() {

        }
        console.log(fun2()); // 函数返回的结果是 undefined

break ,continue ,return 的区别：
① break ：结束当前的循环体（如 for、while）
②continue ：跳出本次循环，继续执行下次循环（如 for、while）
③return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
（7）arguments的使用： 当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
①具有 length 属性
②按索引方式储存数据
③不具有数组的 push , pop 等方法

// arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
        function fn() {
            // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
            // console.log(arguments.length);
            // console.log(arguments[2]);
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。
（8）函数案例： 函数内部可以调用另一个函数，在同一作用域代码中，函数名即代表封装的操作，使用函数名加括号即可以将封装的操作执行。

 // 利用函数翻转任意数组 reverse 翻转
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 3, 4, 6, 9]);
        console.log(arr1);
        
// 利用函数冒泡排序 sort 排序
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([1, 4, 2, 9]);
        console.log(arr1);

（9）函数的两种声明方式：
①自定义函数方式(命名函数)
②利用函数关键字 function 自定义函数方式

// 声明定义方式
function fn() {...}
// 调用  
fn();  

// 函数的两种声明方式
      // 1. 利用函数关键字自定义函数(命名函数)
      function fn() {
      }
      fn();
      // 2. 函数表达式(匿名函数) 
      // var 变量名 = function() {};
      var fun = function(aru) {
          console.log('我是函数表达式');
          console.log(aru);
      }
      fun('你好啊');
      // (1) fun是变量名 不是函数名  
      // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
      // (3) 函数表达式也可以进行传递参数

①因为有名字，所以也被称为命名函数
②调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面
③函数表达式方式(匿名函数）
利用函数表达式方式的写法如下：

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数，这个fn 里面存储的是一个函数，函数表达式方式原理跟声明变量方式是一致的，函数调用的代码必须写到函数体后面