JavaScript基础语法（数组）第四天_js代码-重复的数据添加标识例如张三李四王五张三王五变更为张三1 李四王-优快云博客

 <script>
      let names = ['张三', '李四', '王五']
      // 通过索引下标取值，索引下标从0开始
      console.log(names[0])
      console.log(names[2])
      console.log(names.length) // 长度：元素的数量
      // 补充：如果没有这个索引,返回undefined -- 索引越界，不会报错
      console.log(names[100]) // undefined
  </script>

1️⃣通过下标取数据

2️⃣取出来是什么类型的，就根据这种类型特点来访问

1.3 一些术语

1️⃣元素：数组中保存的每一个数据都叫数组元素

2️⃣下标：数组中数据的编号

3️⃣长度：数组中数据的个数，通过数组的length属性获取

1.4 遍历数组

1️⃣遍历可以获取到数组的每一个元素

2️⃣由于数组是的长度的，可以明确循环的次数，所以一般使用for遍历

3️⃣索引从0开始，到length-1

数组求和

 <script>
      let arr = [3, 4, 2345, 34, 5645, 5, 67, 68]
      // 总和
      let sum = 0
      // 遍历数组，获取每个元素值，进行累加
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }

      console.log('和为' + sum)
      console.log('平均值为' + sum / arr.length)
  </script>

1.5 数组增加新的数据

1️⃣数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)

（）里面不带参数，返回值是删除的元素

2️⃣主要应用场景：在数据库之前，实现数据新增操作都是使用push

特点：

1️⃣追加的元素可以是一个，也可以是多个

2️⃣它是将元素到数组的最后，并返回该数组的新长度

语法：

1️⃣数组.unshift（新增的内容）

特点：

1️⃣追加的元素可以是一个，也可以是多个

2️⃣它是将元素插入到数组的最前面，并返回该数组的新长读

语法跟.push（）一样

1.6 数组的删除元素

1️⃣ 数组.pop（）：可以删除数组的最后一个元素，并且返回当前被删除的元素

语法跟..push()一样

2️⃣数组. shift() 可以从数组中删除第一个元素，并返回该元素的值

语法与上面一致

3️⃣数组. splice() 方法删除指定元素

splice（起始索引，删除的数量）

删除的数量：可以指定数量，如果没有指定，则删除从索引位置开始一直到最后的所有元素(如果指定的数量大于剩余的元素数量，不会报错，只会删除剩余的)

语法：

根据数据生成柱形图（案例）

需求：用户输入四个季度的数据，可以生成柱形图

代码与效果图如下：

JS代码（CSS代码没复制过来）

 <script>
      // 定义一个数组用于存储四个值
      let arr = [];
      // 循环接收用户的输入
      for (let i = 0; i < 4; i++) {
        let v = +prompt(`请输入第${i + 1}个值`);
        arr[i] = v;
      }

      // 要根据数据生成动态结构---遍历
      let str = `<div class="box">`;
      for (let i = 0; i < arr.length; i++) {
        str += ` <div class="son" style="height: ${arr[i]}px" >
        <span>${arr[i]}</span>
        <div class="bar"></div>
        <span>第${i + 1}季度</span>
      </div>`;
      }
      str += `</div>`;
      // 打印到页面
      document.write(str);
    </script>

效果图：