JavaScript深入：伪数组、闭包与Vue实战-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51141492/article/details/123266673

文章目录

一、JavaScript
二、vue

一、JavaScript

1、伪数组

1.1什么是伪数组：

（1）不具有数组的push，pop方法

（2）具有length属性

（3）能够使用数组遍历方法，遍历它们

1.2哪些是伪数组

（1）函数的argument参数

（2）调用getElementsByTagName，doucments.childNodes之类的，返回NodeList对象的都属于伪数组。

（3）例如：var obj={99:abc,length:100}这样的数据也属于伪数组

1.3判断是否为真数组的方法

(是返回true，不是返回false）

（1）arr instranceof Array

（2）Array.isArray(arr)

(3) Object.prototype.toString.call(arr) === ‘[object Array]’

2、立即执行函数

demo：点击数字输出下标

<body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </body>
  <script type="text/javascript">
    var oLi = document.querySelectorAll('li')
    for (var i = 0; i < oLi.length; i++) {
      ;(function (num) {
        oLi[num].onclick = function () {
          console.log(num)
        }
      })(i)
    }
   
  </script>

思考：不用立即执行函数时，会形成闭包时，i=5时，才会进入到循环。

弹幕：事件处理函数拽着立即执行函数的AO

面试题1：

var fn = (function test1() {
  return 1
},
function test2() {
  return '2'
})()
var num = (1, 2)
console.log(num) //2 逗号运算符
console.log(typeof fn) //string

面试题2：

var a = 10
if (function b() {}) {
  a += typeof b
}
console.log(a)

首先，肯定会执行，因为里面是个函数，虽然是个空函数，不是fales就执行

为什么是undefined：(function b() {})因为有括号括起来了，变成一个表达式。表达式忽略函数名字。所以b函数不存在了。所以是undefined

3、闭包作业1：

（1）累加器：0；执行一次函数就增加1

function test() {
  var num = 0
  function add() {
    console.log(++num)
  }
  return add
}
var plus = test()
plus()
plus()
plus()

（2）（缓存机制）写一个闭包：一个班级，学生名字保存在一个数组里，两个方法，写在函数中的一个对象中，第一个方法是加入班级，第二个方法是离开班级，每次加入或离开，都需要打印新的学生名单。

function myClass() {
  var students = []

  var attendance = {
    join: function (name) {
      students.push(name)
      console.log(students)
    },
    leave: function (name) {
      //方法一for循环
      for (var i = 0; i < students.length; i++) {
        var item = students[i] //优化for循环
        if (item === name) {
          students.splice(i, 1)
          console.log(students)
          // 方法二：var idx = students.indexOf(name)
          // if (idx !== -1) {
          //   students.splice(idx, 1)
          //   console.log(students)
          // }
        }
      }
    }
  }
  return attendance
}
var obj = myClass()
obj.join('张三')
obj.join('李四')
obj.join('王五')

闭包在做项目，封装插件的时候，还有模块化编程的时候，很有用。

4、对象

以对象为基准，里面的函数叫方法。外部的都叫函数

对象基本样子：

var teacher = {
  name: '张三',
  age: 32,
  sex: 'male',
  height: 180,
  weight: 160,
  teach: function () {
    console.log('i am studying javascript')
  },
  smoke: function () {
    console.log('i am smoking')
  },
  eat: function () {
    console.log('i am having a dinner')
  }
}
console.log(teacher.name)//张三
teacher.teach()//i am studying javascript 

teacher.address = '北京'
console.log(teacher)//内部有adress属性

**增：**也可以添加一个方法：

var teacher = {
  name: '张三',
  age: 32,
  sex: 'male',
  height: 180,
  weight: 160,
  teach: function () {
    console.log('i am studying javascript')
  },
  smoke: function () {
    console.log('i am smoking')
  },
  eat: function () {
    console.log('i am having a dinner')
  }
}
teacher.drink = function () {
  console.log('i am drinking')
}
console.log(teacher)
teacher.drink()

改：

teacher.drink()
teacher.height = 190
console.log(teacher.height)//190

//改方法
teacher.smoke = function () {
  console.log('i am not smoking')
}
teacher.smoke()//i am not smoking

**删：**关键字delete

delete teacher.address
console.log(teacher)//address属性删除了

//删除方法（笔试题）
delete teacher.teach
console.log(teacher)

对象方法里面属性增减

var teacher = {
  name: '张三',
  age: 32,
  sex: 'male',
  height: 180,
  weight: 160,
  teach: function () {
    console.log('i am studying javascript')
  },
  smoke: function () {
    teacher.weight--
    console.log(teacher.weight)
  },
  eat: function () {
    teacher.weight++
    console.log(teacher.weight)
  }
}
teacher.eat()//161
teacher.eat()//162
teacher.smoke()//161