JS 数组函数 - 精致猪猪侠

JS 数组函数

8.数组

1.利用数组字面量创建数组：带一个方括号

var 数组名 = [ ]; // 创建空的数组
var 数组名 = [ 1,2,'年号',ture ]; // 利用数组字面量创建带初始值的数组

2.数组元素的类型：数组可以放任意类型的数据

3.通过数组名[索引] 来获取/访问数组元素

索引从0开始

4.通过数组名 .length来获取数组长度

数组长度指元素的个数

5.遍历数组

就是将数组的元素从头到尾访问一次
列子1：

<script>
        // 求数组[3,5,6,7,0]中的最大值
        // 1.声明一个保存最大元素的变量max
        // 2.默认的最大值是数组中的第一个元素
        // 3..遍历数组，即将每个数组元素与max比较，若比max大，就将它存到max中
       var arr= [3,5,6,7,0];
       var max=arr[0];
       for(var i=1;i<arr.length;i++){//此处从第二个元素开始，索引是1
           if(arr[i]>max){
               max=arr[i];
           }
       }
       console.log('最大元素：'+max);
    </script>

6.数组中新增元素

1.通过修改length的长度，新增数组元素

新增数组元素的默认值是undefined

<script>
       var arr= [3,5,6,7,0];
       arr.length=10;//length是可读写的
       console.log(arr);//直接输出数组名会得到数组中所有元素
       console.log(arr[6]);//undefined,也就是声明了变量但未赋值，就去访问
    </script>

2.通过修改索引号，新增数组元素

在上个例子中，可以：
arr[5]=10;

3. 案例1：筛选数组

 <script>
        // 要求：将数组[3,5,6,7,0,20,30,21]中大于等于10的元素选出来，放入新数组
        // 1.声明一个新的数组来存放大于等于10的元素
        // 2.遍历就数组，找出大于等于10的元素
        // 3.依次追加给新数组 newArr 用到驼峰命名法
        var arr = [3, 5, 6, 7, 0, 20, 30, 21];
        var newArr = [];
        var j = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr[j] = arr[i];//新的索引号从0开始，新设一个变量j,从0依次递增
                j++;
            }
        }
        console.log(newArr);
    </script>

4. 案例2：删除指定数组元素

 <script>
        // 要求：将数组[3,5,6,7,0,20,30,21]中的0元素去掉，放入新数组
        // 1.声明一个新的数组来存放删除0后的元素
        // 2.遍历就数组，找出不是0的元素
        // 3.依次追加给新数组 newArr  ，数组的长度length不断累加
        var arr = [3, 5, 6, 7, 0, 20, 30, 21];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i]!= 0) {
                newArr[newArr.length] = arr[i];
                //新的索引号从0开始，newArr.length  从0依次递增
            }
        }
        console.log(newArr);
    </script>

7.翻转数组

<script>
        // 要求：将数组[3,5,6,7,0]中的元素反过来存放，输出[0,7,6,5,3]
        // 1.声明一个新的数组来存放反过来存放后的元素
        // 2. 把旧数组索引号第4个取过来（arr.length-1）,给新数组索引号第0个元素(newArr.length)
        // 3.旧数组中的索引采用递减的方式，依次追加给新数组 newArr  
        var arr = [3, 5, 6, 7, 0];
        var newArr = [];
        for (var i = arr.length-1; i >=0; i--) {
                newArr[newArr.length] = arr[i];//新的索引号从0开始，newArr.length  从0依次递增
           
        }
        console.log(newArr);//得到 [0, 7, 6, 5, 3]
    </script>

8.数组元素的排序冒泡排序

首先，交换两个变量，要引入一个临时变量
冒泡排序：一次比较两个元素，若它们顺序错误，就把它们交换
例如： 4，5，2，1，3要从小到大排序
第一趟：4，2，1，3，5 交换了4次
先4和5比较，不交换；
5和2，交换；
5和1，交换
5和3，交换
最大值5，已找到，就不再参与下方的比较了
第二趟：2，1，3，4，5；//找到4和5 交换了3次
第三趟：1，2，3，4，5 //找到3，4，5 交换了2次
第四趟：1，2，3，4，5 //找到2，3，4，5 交换了1次
冒泡排序结束
发现：

一共需要的趟数，用外层for实现
5个数据走了4趟，趟数等于数组长度减1
2.每一趟交换的次数，用内层for实现
趟数+次数=数组的长度
但次数要从0次开始，所以次数初始值=arr.length-i-1

<script>
        var arr=[4,5,2,1,3];
        for(var i=0;i<arr.length;i++){
            for(var j=0;j<=arr.length-i-1;j++){
                //升序，前一个值与后一个值比较，若比后一个值大，就交换
                if(arr[j]>arr[j+1]){
                    var t=arr[j];
                    arr[j]=arr[j+1];
                    arr[j+1]=t; 
                }
            }
        }
        console.log(arr);// [1, 2, 3, 4, 5]
    </script>

9.函数

1.函数的使用：声明函数和调用函数

1，声明函数： function 函数名（）{}
function 是声明函数的关键字，必须小写，一般函数名用动词命名，例如getSum 别忘了要使用驼峰命名法
2. 调用函数：函数名（）；
函数不调用，自己不执行

script>
//求和函数
        function getSum(){
            var sum=0;
            for(var i=1;i<=10;i++){
                sum+=i;
            }
            console.log(sum);
        }
        getSum();
    </script>

2.函数的参数

function 函数名（形参）{}
函数名（实参）将实参传递给形参

 <script>
//求两个数之间的和函数
        function getSum(start,end){
            var sum=0;
            for(var i=start;i<=end;i++){
                sum+=i;
            }
            console.log(sum);
        }
        getSum(1,100);//5050
    </script>

3.形参与实参的匹配问题：(一般让实参的个数等于形参的个数)
1.若实参的个数等于形参的个数，正常输出结果
2.若实参的个数大于形参的个数，按照形参的个数去取实参的个数
3.若实参的个数小于形参的个数，多出的形参定义为undefined,最终结果是NaN

<script>
        function getSum(a,b){
            
            console.log(a+b);
        }
        getSum(1,100,20); //101
        getSum(1);//NaN
    </script>

3.函数的返回值

使用return 语句将函数的返回值给调用者：函数名（）

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

常用一个变量来接收函数的返回值
return 终止函数
函数体内return语句之后的代码不被执行
return 只能返回一个值，若用逗号隔开多个值，以最后一个为准
若想同时返回多个值，可以返回一个数组，之后，再去遍历数组，来获取数组中的元素

<script>
        //  求两个数的加，减，乘，除
        function getRsult(num1,num2){
            return [num1+num2,num1-num2,num1*num2,num1/num2]
        }
        var re=getRsult(1,3);
        console.log(re);//[4, -2, 3, 0.3333333333333333]
    </script>

函数都是有返回值的，若有return ，则返回return 后面的值；
若没有return ，则返回undefined；

4. arguments 的使用

在JS中，arguments 是当前函数的一个内置对象，所有函数都内置了一个arguments 对象，arguments 对象中存储了传递的所有实参
arguments 是一种伪数组
1. 具有数组的length属性
2. 按照索引的方式进行存储传递过来的所有实参
3. 它没有真正数组的一些方法 pop() push()等等
代码：

<script>
       function fn(){
           console.log( arguments);
           //Arguments(4) [1, 2, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
           console.log( arguments.length);//4
           console.log( arguments[1]);//2
       }
       fn(1,2,4,5);
    </script>

只有函数才有arguments对象，是每个函数都内置了arguments对象，直接使用

 <script>
// 利用函数求任意个数的最大值
       function getMax(){
           var max=arguments[0];
           for(var i=1;i<arguments.length;i++){
               if(arguments[i]>max){
                   max=arguments[i];
               }
           }
           return max;
       }
       console.log(getMax(1,5,6,7,3));//7
       console.log(getMax(1,5,6,7,8,0));//8
    </script>

5. 利用函数实现数组的翻转

<script>
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
                //新的索引号从0开始，newArr.length  从0依次递增 
            }
            return newArr;
        }
        var arr1 = reverse([3, 5, 6, 7, 0]);
        console.log(arr1);//[0, 7, 6, 5, 3]
        var arr2 = reverse([3, 5, 4, 4, 2, 6]);
        console.log(arr2);//[6, 2, 4, 4, 5, 3]
    </script>

5. 利用函数实现数组的排序：冒泡排序

<script>
        // 对数组进行冒泡排序
        function sort(arr) {
            for (var i = 0; i < arr.length; i++) {
                for (var j = 0; j <= arr.length - i - 1; j++) {
      //升序，前一个值与后一个值比较，若比后一个值大，就交换
                    if (arr[j] > arr[j + 1]) {
                        var t = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = t;
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([4, 5, 2, 1, 3]);
        console.log(arr1);
        //[1, 2, 3, 4, 5]
        var arr2 = sort([3, 9, 6, 5, 3, 2, 1]);
        console.log(arr2);
        //[1, 2, 3, 3, 5, 6, 9]
    </script>

6. 判断闰年

<script>
        //  是闰年返回true,平年返回false
        function isRunYear(year){
            var flag=false;
            if(year%4==0&&year%100!=0||year%400==0){
                flag=true;
            }
            return flag;
        }
        console.log(isRunYear(2000));//true
        console.log(isRunYear(1999));//false
     </script>

7. 函数调用另一个函数，函数就是实现某种功能的代码块

<script>
        // 要求:用户输入年份,输出当前年份的2月份的天数
        // 分析:若是闰年,2月份是29天;若是平年,2月份是28天
        function backDay() {
            var year = prompt('请输入年份: ');
            if (isRunYear(year) == true) {
                alert('当前年份是闰年,2月份有28天');
            }
            else {
                alert('当前年份是平年,2月份有29天');
            }
        }
        backDay();
        //判断是否是闰年的函数:
        //  是闰年返回true,平年返回false
        function isRunYear(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>

8.函数的声明：

利用函数关键字 function 函数名 () { } 称为命名函数
调用函数：函数名（）；
利用函数表达式：
var 变量名 = function(){ }
调用函数：变量名（）；
1. 声明时，是变量名，不是函数名，此函数是没有名字的，称为匿名函数
2. 跟声明变量相似
3. 也可以传递实参给形参

10.作用域：分为全局作用域和局部作用域

全局作用域：一般指整个script标签，或一个单独的js文件
局部作用域：指的是仅仅在函数的内部起作用
由于作用域的不同，变量也分为全局变量和局部变量
注意：如果在函数的内部，没有用var声明，直接赋值的变量，也是全局变量
函数的形参是局部变量
全局变量只有浏览器关闭时才会销毁，比较占内存
局部变量，当程序执行完毕就销毁，比较节约内存
作用域链：发生函数之间的嵌套使用时，内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据可以被内部函数访问，就称为作用域链
从被访问处，一层一层的往上查找，就近原则

 <script>
        var num=10;//全局变量
    function fn1(){
        var num=20;//局部变量
        function fn2(){
            console.log(num);//20
            // 一层一层的往上查找,找到了 局部变量var num=20; 
        }
    }
   </script>

总结：内部函数访问外部函数的变量时，采取就近原则

11.预解析

js引擎运行js代码分两步：
（1）预解析：js 引擎会把js代码里面的var 和function提升到当前作用域的最前面
（2）代码执行：按照代码的书写顺序从上到下执行
预解析分为变量预解析（变量提升）和函数预解析（函数提升）
变量提升：就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作

 console.log(num);//undefined
    var num = 20;
    //相当于执行以下代码：
    var num;
    console.log(num);//所以是只声明了变量，但未赋值；所以输出undefined
    num = 20;

利用函数表达式：来声明函数时

     var 变量名 = function(){  }
     因为此处是用var来声明的，所以也和变量预解析一样的规律

fun();
    var fun = function(){
        console.log(11);//此处报错
    }
    //相当于执行以下代码：
    var fun;
    fun();
    fun = function(){
        console.log(11);
    }

函数提升：就是把所有的函数声明提升到当前作用域的最前面，不提升调用函数部分

 fn();
     function fn(){
         console.log(11);//11
     }
     //相当于执行以下代码：
     function fn(){
         console.log(11);
     }
     fn();

要结合局部和全局变量（函数体内的不用var声明的变量也是全局变量），和作用域链（就近原则）来判断代码执行顺序
案例：

var num=10;
    fun();
    function fun(){
        console.log(num);
        var num=20;
    }
    //输出的是undefined
    // 相当于执行以下代码：
    var num;
    function fun(){
        //此处变量所在的当前域是函数体，
        // 所以将其变量的声明提升到函数体的最前面
        var num;
        //根据作用域链（就近原则）来判断出：此处的num是局部变量，
        //所以是只声明了变量，但未赋值；所以输出undefined
        console.log(num);

        var num=20;
    }
    num=10;
    fun();

案例：

 fun();
     console.log(c);
     console.log(b);
     console.log(a);
     function fun(){
         var a=b=c=9;
         //此处是：var a=9; b=9; c=9;
         //所以a是局部变量，b和c都是全局变量
         //要想此处全都要使a,b,c都声明为局部变量，
         //var a=9,b=9,c=9;
         console.log(a);
         console.log(b);
         console.log(c);
     }
    //  相当于以下代码：
    function fun(){
         var a =9;
         b=9; 
         c=9;
         //注意：函数声明时不会执行代码，必须函数调用
         console.log(a);//9
         console.log(b);//9
         console.log(c);//9
     }
     fun();
     console.log(c);//9
     console.log(b);//9
     console.log(a);//报错

posted on 2021-10-31 11:33 精致猪猪侠阅读(274) 评论(0) 收藏举报

刷新页面返回顶部