【前端知识点总结】JavaScript 基础四

复杂数据类型(引用数据类型)

1.数组

数组的作用

一个变量存储多个数据

数组的三要素

• 元素 : 数组中的数据
• 下标 : 元素位置,下标从0开始递增
• 长度 : 元素数量(长度=最大下标+1)

数组的语法

1. 声明数组 : let 变量名 = [元素1,元素2,元素3.......]
2. 数组取值 : 数组名[下标]
   • 如果下标存在获取对应元素的值
   • 如果下标不存在则获取undefined
3. 数组赋值 : 数组名[下标] = 值
   • 如果下标存在修改对应的元素的值
   • 如果下标不存在,则动态新增数据
4. 数组长度: 数组名.length

数组的操作

1. 查询数组元素 : 数组[ 下标]
2. 修改数组元素 : 数组名[下标] = 值
   • 如果下标存在修改对应的元素的值
   • 如果下标不存在,则动态新增数据
3. 新增数组元素
   • 末尾新增 : 数组名.push ( ) (实际业务中经常使用), 将一个或多个元素添加到末尾
   • 开头新增 : 数组名.unshift ( ) , 将一个或多个元素添加到开头
   • 细节 ： 如果想要一次性增加多个元素，只需要使用逗号隔开 arr.push(元素1,元素2)

     let arr = [10, 20, 30, 40, 50]

      //1.往末尾增加元素：  数组名.push( 元素 )
      /* 细节： 如果想要一次性增加多个元素，只需要使用逗号隔开  arr.push(元素1,元素2) */
      arr.push(66, 88)
      console.log(arr)

      //2.往开头增加元素：  数组名.unshift( 元素1,元素2 )
      arr.unshift(1, 2, 3)
      console.log(arr)

4. 删除数组元素 :
   • 删除末尾: 数组名.pop ( )
   • 删除开头: 数组名.shift ( )

      let arr = [10, 20, 30, 40, 50]
      //1.删‘末尾’元素:       数组名.pop()
      arr.pop()
      console.log(arr) //[10, 20, 30, 40]
      //2.删‘开头’元素:       数组名.shift()
      arr.shift()
      console.log(arr)//[20, 30, 40]

5. 删除指定元素 :
   • 数组名 . splice( 起始位置(下标) , 删除元素的数量)
   • 注 : 不写数量则从坐标起始位置以后全部删除

      let arr = [10, 20, 30, 40, 50, 60]

      //数组名.splice(起始下标,删除数量)
      arr.splice(2, 3) //从2下标开始，删除三个元素
      console.log(arr) //[10,20,60]

      /* 注意点：如果splice() 没有写删除数量，则会从起始位置开始删除后面所有的元素 */
      let arr1 = [10, 20, 30, 40, 50, 60]
      arr1.splice(2) //从2下标开始，删除后面所有元素
      console.log(arr1) //[10,20]

数组的使用场景

• 数组的求和、 最大最小值、 平均数

      // 求和
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      console.log(sum)
      // 最大值
      let max = -Infinity
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i]
        }
      }
      console.log(max)
      
      // 最小值
      let min = Infinity
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] < min) {
          min = arr[i]
        }
      }
      console.log(min)

• 筛选数组元素
  • 思路: 把数组中符合条件的元素装入一个新数组中
    1. 遍历数组
    2. 找出指定条件的数
    3. 放入新的数组
  • 需求： 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
  • 场景： 商品列表页有100件商品,价格筛选出5000-8000范围的商品

      //1.声明新数组存储结果
      let newArr = []
      //2.遍历数组找出符合条件的数
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] >= 10) {
          //3.添加到新数组中
          newArr.push(arr[i])
        }
      }
      console.log(newArr)

• 数组去0
  • 思路 : 删除数组中不符合条件的元素
  • 需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 所有的0去掉，得到一个新数组
  • 场景: 京东商品列表 选择京东自营商品，就要把非自营给去掉

      //数组除0
      let arr = [2, 0,0,15, 30, 0]
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == 0) {
          arr.splice(i, 1)
          /* i--的作用是为了抵消本次循环变量自增。  i先--后++,值不变
          因为当数组元素删除的时候，删除的这个元素后面的元素下标就会自动前移。 这个时候我们的i其实是不需要自增的
          */
          i--
        }
      }
      console.log(arr)

值类型 与 引用类型的区别

1. 值类型:

值类型的数据是直接储存在栈中,赋值时是直接拷贝的数据,修改拷贝后的数据,对原数据没有影响

2. 引用类型

栈中储存的是数据的地址,数据则是存储在堆里,赋值时拷贝的是地址,修改拷贝后的数据,对原数据有影响

      //1.值类型
      let num1 = 10
      let num2 = num1
      num2 = 50
      console.log(num2) //50
      console.log(num1) //10

      //2.引用类型
      let arr1 = [10, 20, 30]
      let arr2 = arr1
      arr2[0] = 100
      console.log(arr2) //[100,20,30]
      console.log(arr1) //[100,20,30]

遍历数组的方法(后续详解)

1.for 循环遍历

• 查询数组里的每一个元素,用 for 循环

     let arr = [10, 20, 30, 40, 50, 60]
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i])
      }

2. forEach 方法遍历

• item : 代表数组中的每一项

    let arr = [10, 20, 30, 40, 50, 60]
    arr.forEach((item) => { 
       console.log(item); 
    })

3. filter 方法遍历

• 得到一个复合条件的新数组

let arr = [10, 20, 30, 40, 50, 60]
// arr.filter(item => 筛选条件)  
let newArr = arr.filter(item => item > 30 )

4. reduce 方法遍历

• 求和方法, 0 是 sum 的初始值

let arr = [10, 20, 30, 40, 50, 60]
arr.filter((sum,item) => sum += item , 0 )

5. map 方法遍历

• 得到一个计算后的新数组

let arr = [10, 20, 30, 40, 50, 60]
// arr.map(item => 计算条件)  
let newArr = arr.map(item => item * 3 )

6. every 方法遍历

• 条件全部满足返回 true , 只要有一个条件不满足就返回 false

let arr = [10, 20, 30, 40, 50, 60]
// arr.every(item => 筛选条件)  
arr.every(item => item > 10 )// false

7. some 方法遍历

• 有满足条件的就返回 true , 否则返回 false

let arr = [10, 20, 30, 40, 50, 60]
// arr.some(item => 筛选条件)
let newArr = arr.some((item,index) => item > 30 )

8. findIndex 方法遍历

• 根据自定义条件查找索引, 返回值是一个索引值

let arr = [10, 20, 30, 40, 50, 60]
// arr.findIndex(item => 筛选条件)  
let index = arr.findIndex(item => item === 10 )// 0

9. find 方法遍历

• 枚举信息 案例(业务中常用)

     let hireType = [{id: 1,value: '正式'},{id: 2,value: '非正式'}]
     formatEmployment(num) {
      // 从hireType中 通过id找到对应的元素的value
      const item = hireType.find(it => it.id === num)
      if (item) {
        return item.value
      }

前自增(++n)和后自增(n++)的异同点

相同点

作用一直都是变量自身加一

不同点

自增表达式结果不同

• n++ : 先赋值 , 再自增 n=10 ; let r = n++ ; 结果 r=10 n=11
  • (1)先赋值： 把 n 的值赋值给 r
  • (2)后自增： n 自身+1
• ++n : 先自增 , 再赋值 n=10 ; let r = ++n结果 r =11 n=11
  • (1)先自增： n 自身+1
  • (2)后赋值： 把n 的值赋值给 r

经典案例(面试常问) :

 let c = 1
      //  赋值结果/c自身结果
      //     r1/c2 r2/c3  r4/c4 r3/c3 r3/c2  r2/c3
      let d = c++ + c++ + ++c - --c + c-- - c++
      console.log(c,d)//3,5