JavaScript基础(二)

WangQ
144 阅读4分钟

一、循环

1、for

for 循环的语法如下：

 for (语句 1; 语句 2; 语句 3) {
      要执行的代码块
 }

语句 1 在循环（代码块）开始之前执行。

语句 2 定义运行循环（代码块）的条件。

语句 3 会在循环（代码块）每次被执行后执行

2、for...in

for...in遍历对象，格式：

 for (变量 in 对象){
     循环体
 }

使用for.....in循环里的循环变量习惯用key或k

     // 遍历对象
     var obj = {
       name: 111,
       age: 222,
       sex: 111,
       sayHi: function () {
         console.log('hello');
       }
     }
     for(var k in obj){
       // k变量 输出的是属性名，Obj[k]是属性值
       console.log(k);
       console.log(obj[k]);
     }

输出结果：

image.png

3、while

只要指定的条件为 true，while 循环会一直循环代码块。

语法

 while (条件) {
     要执行的代码块
 }

4、do/while

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。同样当指定的条件为 true 时循环指定的代码块，但该循环在判断条件前会执行一次代码块

语法

 do {
     执行代码
 } while (condition);

JavaScript 支持不同类型的循环:

5、两种关键字

Break语句

它被用于“跳出” switch 语句或跳出循环。break 语句会中断循环，并继续执行循环之后的代码（如果有）

例子：

输出为0，1，2

         for(var i=0;i<6;i++){
             if(i==3){
                  break; //跳出
             }
             console.log(i);
         }

Continue 语句

continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。

本例跳过值 3 ：

例子：

输出0，1，2，4，5

         for(var i=0;i<6;i++){
             if(i==3){
                continue; //继续执行后续循环
             }
             console.log(i);
         }

二、数组

1、定义

数组是指一组数据的集合存存储在单个变量下的方式

在数组里可以放任意数据类型的数据，一定要用逗号隔开。

2、 数组长度

使用数组名.length 动态监测数组长度，数组的长度是元素个数。

数组长度 = 索引值 + 1

3、 创建数组

(1)利用new关键字创建数组

 var arr1 = new Array(2);  //实例化对象
 var arr2 = [3,4,5,6];

(2)利用数组字面量[]创建数组，最常用

 var arr2 = [3,4,5,6];
 arr2.length = 3;
 /arr2.length = 5;

[i]下标，从0开始，定义初始化数组，最好使用第二种方法，因为第一种方法括号内只写一个数字时，表示为该数组有两个空属性且数组长度为2的数。

4、获取 / 得到 / 访问数组元素

1、数组的索引（下标）：用来访问数组的下标，从0开始。

格式：数组名[下标]

注意：访问时，下标超过数组长度，则多余的那个值为undefined。例：

 var arr2 = [1,2,3]
 console.log(arr[4])
 //则arr[4]值为undefined

5、 遍历数组

遍历--就是把数组中的每一个元素从头到尾访问一遍

 var arr = [0,1,2,3]
 for(i = 0;i < 4, i++){
     console.log(arr[i])
 }

注意：数组索引号从0开始，所以i必须从0开始 i<3

输出的时候arr[i], i 是计数器当索引号来使用

6、 数组新增元素

(1)通过修改length长度新增数组元素(实现扩容目的)

 var arr = [1, 2, 3, 4, 5]
 arr.length = 7;
 console.log(arr);
 console.log(arr[6]);//输出undefined

输出结果：

image.png

(2)修改索引号，追加数组元素

     var arr = [1, 2, 3]
     arr[4] = 4;
     console.log(arr);
     console.log(arr[4]);

输出结果：

image.png

注意：不要给数组名直接赋值，如果赋值，数组中的元素将会都没有了

8、应用

    //案例1：数组求和及平均值
    var arr1 = [2,6,1,7,4];
    var i ;
    var sum = 0
    for(i = 0;i < arr1.length;i++){
     sum += arr1[i]
    }
    console.log(sum)
    var averge = sum/arr1.length;
    console.log(averge);  
    console.log(sum , averge)//连续输出多个变量，用逗号隔开

    // 案例2：数组最大值
     var arr2 = [2,99,1,77,52,25,7];
     var max =arr2[0];
     for(i= 1; i < arr2.length; i++){
      if(max < arr2[i]){
        max  = arr2[i];
      }
     }
     console.log(max);

    //案例3：数组转换为分割字符串
    //要求：将['red','green','blue','pink']转换为字符串，并且用|或其他符号分割
    var arr = ['red','green','blue','pink'];
    //自己--直接利用数据转换，不要使用String方法更简单，先令变量str为空字符串，然后运算时进行数据转换
    var str =arr[0];
    for(var i = 1; i < arr.length; i++){
      var str =str+'|'+String(arr[i])
    }
    //方法2
    var str = '';
    var sep = '!';
    //遍历数组获取原来的元素，加到字符串中，同时后边再加一个符号
    for(var i = 0;i < arr.length; i++){
      str += arr[i] +sep;
    }
    console.log(str)

     //案例4：筛选数组
     //将数组[ 2, 0, 1, 77, 0, 52, 0, 25, 7]中大于10的元素选出来，放入新数组
     var arr = [ 2, 0, 1, 77, 0, 52, 0, 25, 7];
     var newArr = [];
     // var n = 0;
     newArr.length = 0;
     for(var i = 0; i < arr.length; i++){
       if(arr[i] > 10){
         // newArr[n]=arr[i];
         //newArr.length可以代替数组下标
         newArr[newArr.length]=arr[i];
         // n = n + 1; 新数组的索引号要从0开始
         //n = n+1;等效为 n++;
       }
     }
     console.log(newArr)

     //案例5：删除指定数组元素
     //要求：将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组
     var arr = [2,0,6,1,77,0,52,0,25,7];
     var newArr = [];
     for(var i = 0;i < arr.length; i++){
       if(arr[i] != 0){
         // 数组索引号应该从0开始依次递增
         newArr[newArr.length] = arr[i];
       }
     }
     console.log(newArr)

     // 案例6
     // 要求：将数组['red','green','blue','pink','purple']的内容反过来存放
     var  arr = ['red','green','blue','pink','purple'];
     var newArr =[];
     // for(var  i =0; i<arr.length;i++){
     //   newArr[i] = arr[arr.length-i-1] ;
     // }
     for(var i = arr.length-1;i >=0;i--){
       newArr[newArr.length] = arr[i]  
     }
     console.log(newArr);

三、伪数组

1、定义

即 arrayLike，也称为类数组。是一种按照索引存储数据且具有 length 属性的对象。因为是对象，所以不能调用[数组的方法]，比如 forEach()、push() 等。

无法直接调用数组方法或期望lenyunsuangth属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。

  • 典型的是函数的 argument参数，
  • 像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList
  • 对象都属于伪数组。

2、获得伪数组元素集合

document . getE lementsByClassName("class值")通过class获得元素伪数组集合、

document. getE lementsByTagName("tagname" )通过标记名获得元素伪数组集合

3、常见的伪数组有哪些？

  • 函数中的 arguments
 test(1, 2, 3, 4);
 ​
 function test() {
   console.log(arguments); // expected output: [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
   console.log(arguments.length); // expected output: 4
 }
  • document.querySelectorAll() 等批量选择元素的方法的返回值
 const elements = document.querySelectorAll("div");
 console.log(elements); // expected output: NodeList(4) [div, div, div, div]
  • <input/> 文件上传后的 files
 <html>
   <body>
     <input type="file" name="file" id="input" onchange="fileChange()" />
   </body>
   <script>
     // 选择文件后触发
     function fileChange() {
       console.log(document.querySelector("#input").files); // expeced output: FileList {0: File, length: 1}
     }
   </script>
 </html>

4、如何将伪数组转换为数组？

  • ES2015 新增的 Array.from() 方法
 let a = {
   0: "x",
   1: "y",
   2: "z",
   length: 3,
 };
 ​
 let b = Array.from(a);
 console.log(b); // expected output: [ 'x', 'y', 'z' ]
  • 数组的 slice() 方法
 let a = {
   0: "x",
   1: "y",
   2: "z",
   length: 3,
 };
 ​
 let b = [].slice.call(a);
 let c = [].slice.apply(a);
 console.log(b); // expected output: [ 'x', 'y', 'z' ]
 console.log(c); // expected output: [ 'x', 'y', 'z' ]
  • 数组的 concat() 方法
 let a = {
   0: "x",
   1: "y",
   2: "z",
   length: 3,
 };
 ​
 let b = [].concat.apply([], a);
 console.log(b); // expected output: [ 'x', 'y', 'z' ]
  • 遍历伪数组的每一项，将其添加到一个新的数组
 let a = {
   0: "x",
   1: "y",
   2: "z",
   length: 3,
 };
 ​
 let b = [];
 for (let i = 0; i < a.length; i++) {
   b.push(a[i]);
 }
 console.log(b); // expected output: [ 'x', 'y', 'z' ]
avatar
文章
阅读
粉丝