JavaScript基础--数组和函数

数组的基本概念

JavaScript中数组的概念和C语言几乎一样, 都是指一组有序数据集合
不同的是由于JavaScript是弱语言, 所以JavaScript的数组中可以存放不同类型的数据
不同的是JavaScript中的数组是引用类型, 提供了很多便捷的属性和方法, 让我们使用起来更加简单

定义数组

var arr1=new Array(); 
var arr2=new Array("Saab","Volvo","BMW");
var arr3=[];
var arr4=["Saab","Volvo","BMW"];

使用数组

    var arr1 = new Array();
    arr1[0] = 1;
    arr1[1] = "12";
    arr1[2] = true;
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);

注意点:
- C语言中的数组必须在定义时确定长度, 后续不可修改
- 而JavaScript中的数组不需要在定义时确定长度, 后续可以动态增长

数组遍历

    var arr3 = [1, "123", true];
    for(var i = 0; i < arr3.length; i++){
        console.log(arr3[i]);
    }

注意点:
- JavaScript中可以通过数组的length属性直接获取数组的长度, 不用像C语言一样额外计算

数组解构赋值

什么是数组的解构赋值?
- 解构赋值是ES6中新增的一种赋值方式

数组解构赋值的注意点

在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构

    // let [a, b, c] = [1, 3, 5];
    // let [a, b, c] = [1, 3, [2, 4]];
    let [a, b, [c, d]] = [1, 3, [2, 4]];
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("c = " + c);
    console.log("d = " + d);

在数组的解构赋值中, 左边的个数可以和右边的个数不一样

    let [a, b] = [1, 3, 5];
    console.log("a = " + a);
    console.log("b = " + b);

在数组的解构赋值中, 右边的个数可以和左边的个数不一样

    let [a, b, c] = [1];
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("c = " + c);

在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值

    let [a, b = 666, c = 888] = [1];
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("c = " + c);

在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖
```
let [a, b = 666] = [1, 3, 5];
        console.log("a = " + a);
        console.log("b = " + b);
```
在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据
在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后
```
let [a, ...b] = [1, 3, 5];
        console.log("a = " + a);
        console.log(b);
```

数组增删改查

获取数组中索引为1的那个数据 (查)

let arr = ["a", "b", "c"];
        console.log(arr[1]);

将索引为1的数据修改为d, 索引为2的修改为e (改)

let arr = ["a", "b", "c"];
         //参数1: 从什么位置开始
         //参数2: 需要替换多少个元素
         //参数3开始: 新的内容
         arr.splice(1, 2, "d", "e");
         console.log(arr);

要求在数组最后添加一条数据 (增)

let arr = ["a", "b", "c"];
         //push方法可以在数组的最后新增一条数据, 并且会将新增内容之后数组当前的长度返回给我们
         let res = arr.push("d");
         console.log(res);
         console.log(arr);

要求在数组最前面添加一条数据 (增)

let arr = ["a", "b", "c"];
         //unshift方法和push方法一样, 会将新增内容之后当前数组的长度返回给我们
         let res = arr.unshift("m");
         console.log(res);
         console.log(arr);

要求删除数组最后一条数据 (删)

let arr = ["a", "b", "c"];
         //数组的pop方法可以删除数组中的最后一条数据,  并且将删除的数据返回给我们
         let res = arr.pop();
         console.log(res);
         console.log(arr);

要求删除数组最前面一条数据 (删)

let arr = ["a", "b", "c"];
         //数组的shift方法可以删除数组中的最前面一条数据,  并且将删除的数据返回给我们
         let res = arr.shift();
         console.log(res);
         console.log(arr);

要求删除数组中索引为1的数据 (删)

let arr = ["a", "b", "c"];
         //参数1: 从什么位置开始
         // 参数2: 需要删除多少个元素
         arr.splice(1, 1);
         console.log(arr);

数组常用方法

如何清空数组

 let arr = [1, 2, 3, 4, 5];
         arr = [];
         arr.length = 0;
         arr.splice(0, arr.length)
         console.log(arr);

如何将数组转换为字符串

 let arr = [1, 2, 3, 4, 5];
 let str = arr.toString();
         console.log(str);
         console.log(typeof str);

如何将数组转换成指定格式字符串

 let arr = [1, 2, 3, 4, 5];
         // join方法默认情况下如果没有传递参数, 就是调用toString();
         // join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
         let str =  arr.join("+");
         console.log(str);
         console.log(typeof str);

如何将两个数组拼接为一个数组

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
         // 注意点: 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接
         // let res = arr1 + arr2;
         let res = arr1.concat(arr2);
         // 注意点: 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
         //         扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
         let res = [...arr1, ...arr2]; // let res = [1, 3, 5, 2, 4, 6];
         console.log(res);
         console.log(typeof res);
         // 注意点: 不会修改原有的数组, 会生成一个新的数组返回给我们
         // console.log(arr1);
         // console.log(arr2);

如何对数组中的内容进行反转

let arr = [1, 2, 3, 4, 5];
let res = arr.reverse();
         console.log(res);
         // 注意点: 会修改原有的数组
         console.log(arr);

如何截取数组中指定范围内容

let arr = [1, 2, 3, 4, 5];
         // slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
         let res = arr.slice(1, 3)
         console.log(res);
         console.log(arr);

如何查找元素在数组中的位置

let arr = [1, 2, 3, 4, 5];
        // indexOf方法如果找到了指定的元素, 就会返回元素对应的位置
        // indexOf方法如果没有找到指定的元素, 就会返回-1
        // 注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
        let res = arr.indexOf(3);
        let res = arr.indexOf(6);
        // 参数1: 需要查找的元素
        // 参数2: 从什么位置开始查找
        let res = arr.indexOf(3, 4);
        // 注意点: lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
        let res = arr.lastIndexOf(3);
        let res = arr.lastIndexOf(3, 4);
        console.log(res);

如何判断数组中是否包含某个元素

let arr = [1, 2, 3, 4, 5];
        let res = arr.includes(4);
        console.log(res);

二维数组

什么是二维数组?
- 二维数组就是数组的每一个元素又是一个数组, 我们就称之为二维数组
如何操作二维数组?
- 数组名称[二维数组索引]; 得到一个一维数组
  数组名称[二维数组索引][一维数组索引]; 得到一维数组中的元素
- 数组名称[二维数组索引] = 一维数组;
  数组名称[二维数组索引][一维数组索引] = 值;
注意点:
- 在定义二维数组的时候, 将来需要存储多少个一维数组, 就写上多少个[]即可

函数基本概念

JavaScript中函数的概念和C语言几乎一样,都是用于封装一段代码，方便将来重复使用的
不同的是JavaScript中的函数也是一种类型, 是引用类型
格式:

function 函数名称(形参列表){
            被封装的代码;
        }

特点:
- 冗余代码变少了
  需求变更, 需要修改的代码变少了

函数的定义

 // 格式一:
function 函数名(形参1, 形参2, 形参3...) {
  //函数体
  return 返回值;
}

// 格式二:
var 变量 = 函数名(实参1, 实参2, 实参3...);

注意点:
- 和C语言一样, 函数可以没有返回值, 也可以有返回值
- 不同的是JavaScript是弱语言, 所以不用只能返回值类型
- 如果函数没有显示的使用 return语句，那么函数有默认的返回值：undefined
- 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
- 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined

function sum(a, b) {
    var res = a + b;
    return res;
}
var res = sum(10, 20);
console.log(res); // 30

function sum(a, b) {
   var res = a + b;
   return;
}
var res = sum(10, 20);
 console.log(res); // undefined

function sum(a, b) {
   var res = a + b;
}
var res = sum(10, 20);
console.log(res); // undefined

arguments的使用

由于JavaScript中的函数是引用类型(可以添加属性和方法)。所以所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

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

    var sum = getSum(5, 1, 3, 4);
    console.log(sum);

函数扩展运算符

扩展运算符在函数的形参列表中的作用
- 将传递给函数的所有实参打包到一个数组中
注意点:
- 和在等号左边一样, 也只能写在形参列表的最后

function getSum(...values, a) {
            console.log(a);
            console.log(values);
        }
        getSum(10, 20 , 30);

函数形参默认值

在ES6之前可以通过逻辑运算符来给形参指定默认值

function getSum(a, b) {
            // 在ES6之前可以通过逻辑运算符来给形参指定默认值
            // 格式: 条件A || 条件B
            // 如果条件A成立, 那么就返回条件A
            // 如果条件A不成立, 无论条件B是否成立, 都会返回条件B
            a = a || "指趣学院";
            b = b || "知播渔教育";
            console.log(a, b);
        }
        getSum(123, "abc");function getSum(a, b) {
            // 在ES6之前可以通过逻辑运算符来给形参指定默认值
            // 格式: 条件A || 条件B
            // 如果条件A成立, 那么就返回条件A
            // 如果条件A不成立, 无论条件B是否成立, 都会返回条件B
            a = a || "指趣学院";
            b = b || "知播渔教育";
            console.log(a, b);
        }
        getSum(123, "abc");

从ES6开始, 可以直接在形参后面通过=指定默认值


function getSum(a = "指趣学院", b = getDefault()) {
            console.log(a, b);
        }
        getSum();
        // getSum(123, "abc");
        function getDefault() {
            return "李南江"
        }

注意点:
- ES6开始的默认值还可以从其它的函数中获取

函数作为参数和返回值

let say = function () {
            console.log("hello world");
        }
        say();
        let fn = say;
        fn();
        将函数作为其他函数的参数
        function test(fn) { // let fn = say;
            fn();
        }
        test(say);

// 将函数作为其他函数的返回值
        function test() {
            // 注意点: 在其它编程语言中函数是不可以嵌套定义的,
            // 但是在JavaScript中函数是可以嵌套定义的
            let say = function () {
                console.log("hello world");
            }
            return say;
        }
        let fn = test(); // let fn = say;
        fn();

匿名函数

没有名称的函数, 我们称之为匿名函数
- 匿名函数不能单独出现, 一般作为其他函数参数或者返回值使用

    // 报错
    function () {
        console.log("hello world");
    }

    // 立即执行函数
    (function () {
        console.log("hello world");
    })();

    // 作为函数参数
    function test(fn) {
        fn();
    }
    test(function () {
        console.log("hello world");
    });

    // 作为函数返回值
    function test() {
        return function () {
            console.log("hello world");
        }
    }
    var res = test();
    res();

箭头函数

什么是箭头函数?
- 箭头函数是ES6中新增的一种定义函数的格式
- 目的: 就是为了简化定义函数的代码

        // 在ES6之前如何定义函数
        function 函数名称(形参列表){
            需要封装的代码;
        }
        let 函数名称 = function(形参列表){
            需要封装的代码;
        }

        从ES6开始如何定义函数
        let 函数名称 = (形参列表) =>{
            需要封装的代码;
        }

箭头函数的注意点
- 在箭头函数中如果只有一个形参,()可以省略
- 在箭头函数中如果{}中只有一句代码,{}也可以省略

let say = name => console.log("hello  " + name);

递归函数

什么是递归函数?
- 递归函数就是在函数中自己调用自己, 我们就称之为递归函数
- 递归函数在一定程度上可以实现循环的功能
递归函数的注意点
- 每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好