JS基础（下）函数+对象

小白一枚2号

已于 2024-03-26 15:11:00 修改

阅读量356

点赞数 3

文章标签： javascript

于 2024-03-24 19:46:05 首次发布

本文链接：https://blog.csdn.net/2303_79590957/article/details/136992056

版权

函数：

1.常用函数sort的使用：

arr.sort(function(a,b){return a-b})//升序
arr.sort(function(a,b){return b-a})//降序

2.函数的一般声明方式：

方法1：

function 函数名 (参数/空）
{
    函数体
}

方法2（匿名函数，使用方法和一般函数相同）：

let people=new function{"参数","函数体"}

方法3：

let e =function(参数){函数体}

方法4（立即执行函数）：

定义后需要加一些操作，才会在定义的位置生效，且只生效一次

//方式1：（建议匿名函数在时，任何函数调用后加上”；“否则匿名函数会不生效）
(function () { document.write('hi') }());
//方式2：
(function (){
 //function body
})();

方法5（构造函数）：

构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写，构造函数和普通函数的还有一个区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用，且调用构造函数后生成的是对象。

1.调用构造函数，它会立刻创建一个新的对象
2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回

具体代码及实现方式见：对象的工厂化创建

对象：

this的用法：

当以函数的形式调用时，this是window

当以方法的形式调用时，谁调用方法this就是谁

当以构造函数的形式调用时，this就是新创建的那个对象

1.对象的定义：

方法1（注意符号是冒号）：

    let ob = {
      uname: '爸爸',
      sayHi: function () {
        alert(`${uname}好`)
      }
    }

方法2：

let op = new Object()//声明op是个对象
    op.name = 'ah'
    op.age = 4000
    op.sayName = function () {
      console.log(this.name);
    }
    op.sayName()
    console.log(op);

2.对象的修改：

    let ob = {
      uname: '爸爸',
    }
    console.log(ob);
    //查
    console.log(ob.uname);// console.log(ob['uname']);
    //改
    ob.uname = '哈哈'
    console.log(ob.uname);
    // 增
    ob.age = 18
    console.log(ob);
    console.log(ob.age);//实时更新
    //删
    delete ob.uname

3.工厂化创建对象：

1.定义一个构造函数

2.调用函数并传入相关参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    //-----------------用工厂方法创建对象---------------
    //1.定义函数
    function createPerson(name, age) {
      let ob = new Object()
      ob.name = name
      ob.age = age
      ob.sayName = function () {
        document.write(this.name)
      }
      return ob
    }

    //2.调用函数并传入相关参数
    let person1 = createPerson("啊哈", 400)
    let person2 = createPerson("岚", 400)
    let person3 = createPerson("药师", 400)


    console.log(person1);
    console.log(person2);
    console.log(person3);


    //------------用工厂方法创建对象+循环-----------
    for (let i = 4; i <= 10; i++) {
      var person = createPerson("person" + i, 18);
      console.log(person);
    }
  </script>
</body>

</html>

4.工厂化创建对象优化：

每new一次，函数就会再定义一次，因此我们把函数提出来，节省空间

1.定义全局函数

2.创建工厂

3.调用工厂

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    //1.定义全局函数
    function sayName() {
      console.log(this.name);
    }
    //2.工厂
    function Person(name, age) {
      this.name = name
      this.age = age
      this.sayName = sayName
    }
    //3.调用
    person_1 = new Person("巡猎", 100)
    person_1.sayName()
  </script>
</body>

</html>

5.对象吧的遍历：

使用for in 循环（不用for of ：Object对象本身没有内置的遍历器，并没有实现这个接口，使得它无法被for…of遍历，而 for of遍历依靠的是遍历器Iterator。
）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>
    let person = {
      name: "ah",
      age: 18,
      say: function () {
        console.log(this.name);
      }
    }
    person.say()
    for (let x in person) {
      document.write(`${x}:${person[x]}<br>`)
    }
  </script>
</body>

</html>

6.内置对象Math的使用：

内置对象：Math
1.使用：

var x = Math.PI;            // 返回 PI
  var y = Math.sqrt(16);      // 返回 16 的平方根

2.常用：

  abs(x)    //返回 x 的绝对值。
  floor(x)    //返回 x，向下舍入为最接近的整数。
  max(x, y, z, ..., n)    //返回值最高的数字。
  min(x, y, z, ..., n)    //返回值最小的数字。
  pow(x, y)    //返回 x 的 y 次幂值。
  random()    //返回 0 到 1 之间的随机数。
  round(x)   // 将 x 舍入为最接近的整数。

示例：生成随机颜色：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style="width: 200px;height: 200px;"></div>

  <script>
    let getRandomColor = function (flag = true) {
      if (flag) {
        let x = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f',]
        for (let i = 0; i < 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          x += arr[random]
        }
        return x
      }
      else {
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      }
    }

    const div = document.querySelector('div')
    div.style.backgroundColor = getRandomColor()

  </script>
</body>

</html>

检查一个对象是否是一个类的实例：instanceof

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  <script>
    //1.全局函数
    function say() {
      console.log(this.name);//谁调用方法this就是谁
    }
    //2.工厂
    function Person(name, age) {
      this.name = name
      this.age = age
      this.say = say
    }
    p1 = new Person("hh", 18)

    //instanceof的使用
    console.log(p1 instanceof Person)//运算符检查一个对象是否是一个类的实例，它返回true或false
  </script>
</body>

</html>