JavaScript---day 01-2

JavaScript：数组：

JS 中创建数组有两种方式：

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组

注意 Array () ，A 要大写

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；// 等价于var arr = new Array();
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象：数组</title>
    <script>
        //数组创建几种方式：
        var arr = new Array();

        //或者
        var arr2 = [];
        //或者初始化：数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
        var arr3 = ['1', 2, 35, 4, '2'];

        //索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。
        // 定义数组
        var arrStus = [1, 2, 3];
        // 获取数组中的第2个元素
        alert(arrStus[1]); //可以下标越界取元素,只是都是undefined。。。不会报错
        //或者：数组[ 数组.length ] = 新数据;
        arrStus.push(15);//加入元素
        //遍历
        var ret='';
        console.log(arrStus.length)
        for (var k = 0; k < arrStus.length; k++) {
            ret += arrStus[k]+",";
        }
        console.log(ret);
        //删除元素
        arrStus.pop();
        console.log(arrStus.length);
        ret='';
        for (var k = 0; k < arrStus.length; k++) {
            ret += arrStus[k]+",";
        }
        console.log(ret);
        // for in循环不仅可以遍历数组，还可以遍历对象，但for in存在一些陷阱，比如它会在遍历完元素之后，
        //还会对数组或对象的prototype中的属性进行遍历，所以，for in 更像是为对象遍历而设计的。
        //对于数组的遍历，不提倡 for in。

        //for of (ES6)
        //ES6中引入了 for ... of 循环，以替代 for...in 和 forEach() ，
        //允许对 Array(数组)、String(字符串)、Maps(映射)、Sets(集合)等可迭代的数据结构进行遍历。
        // for(var k of arr) 中的 k ，就是数组 arr 中的元素，而不是数组的下标。

        //forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
        //forEach() 对于空数组是不会执行回调函数的。
        //回调函数  function (v, k) 中的 k 是数组的下标，v 是数组元素值。

        //Object.keys.forEach() 主要是用于遍历对象，获取对象的属性名，对于遍历数组意义不大。
    </script>

<body>

</body>

</html>

函数的概念

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

调用的时候实参值是传递给形参的
形参简单理解为：不用声明的变量
实参和形参的多个参数之间用逗号（,）分隔

小结：

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取。JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js函数</title>
    <script>

        //函数式js中的最小功能单位
        //创建函数
        function add(num1, num2) {
            return num1 + num2;
        }
        console.log(add(1, 2));
        //意外来了
        console.log(add(1, 2, 3));//不报错，而且调用函数啦。。执行的是前两个参数。
        //实参可以和形参参数不匹配，说明JavaScript的函数参数列表不可以作为鉴别不同方法的特征。。。只能函数名区分
        console.log(add());//结果为NAN..如果实参小于形参，那就是未传递的形参就是undefined。。任何数字+undefined都是NAN  



        /* 内置对象： */
        //运行js代码的时候，由运行环境已经创建好的一些对象。。。我们可以直接使用
        //获取函数的实参个数
        function add2(num3, num4) {
            console.info(arguments);//arguments类似于java的可变形参列表。在js中可以当成一个数组来使用。。。(伪数组)

            //比较arguments是不是一个数组
            console.info([1, 3, 5] instanceof Array);//instanceof  对复杂数据类型做所属判断用的，和java一致、
            console.info(arguments instanceof Array);//false。。他不是一个数组。使用方式类似于数组
            console.log("===========arguments,不是数组，却是可以和数组一样的遍历方式==============")
            //arguments不具有数组的 push , pop 等方法
            var element = 0;
            for (let index = 0; index < arguments.length; index++) {
                element += arguments[index];
            }
            console.log(element);
            return num3 + num4;
        }
        add2(123, 3243, 345643645, 657567, 75345353, 234);


        //匿名函数
        var temp = function (x1, x2) {
            return x2 - x1;
        }
        //可以这样调用
        console.log(typeof temp(55, 11));//结果是number
        console.log(typeof temp);//function
        console.log(temp(55, 11));//-44

        //匿名函数调用方式二：自执行
        var temx = (function (x1, x2) {
            return x2 - x1;
        })(1, 5);
        //函数体（）.....
        console.log(temx);

        //函数作为参数传递进去：函数作为参数和返回值
        function cal(func1, numb1, numb2) {
            return func1(numb1, numb2);
        }
        function funcadd(number1, number2) {
            return number1 + number2;
        }
        var result = cal(funcadd, 1, 21);
        //除零是无穷大：
        (function (numx, numy) {
            console.log(numx / numy);
        })(1, 0);//Infinity

        //函数嵌套
        function distance(x1, y1, x2, y2) {
            function square(x) {
                return x * x;
            }

            return Math.sqrt(square(x1 - x2) + square(y1 - y2));
        }

        var result1 = distance(0, 0, 3, 4);
        //外层函数不能调用：函数内层函数。。。
       // console.log(square(1));报错。。。。。
        console.log(result1); // 5 

        function swtic(op, numxx, numyy) {
            switch (op) {
                case '+': return numxx + numyy;
                case '-': return numxx - numyy;
                case '*': return numxx * numyy;
                case '/': return numxx / numyy;
            }
        }

    </script>
</head>

<body>
    <!-- js函数 -->
</body>

</html>

posted on 2020-09-07 12:04 白嫖老郭阅读(63) 评论(0) 收藏举报

刷新页面返回顶部

隔壁老郭的博客

JavaScript---day 01-2

JavaScript：数组：

函数的概念

arguments的使用

导航

公告