js高级回顾

1.1-数组对象api

<script>
//声明数组
let arr = [10,20,30]

/*1.数组的增删改查操作 
新增元素到最后面 ： arr.push( 元素 )
新增元素到最前面 ： arr.unshift()
删除最后一个元素 ： arr.pop()
删除第一个元素   ： arr.shift()
删除指定位置元素 ： arr.splice(起始下标,删除数量)
 */

//2.将数组中的每一个元素都拼接成一个字符串
let str = arr.join()//10,20,30
console.log ( str )

//3.翻转数组
var newArr =  arr.reverse()
console.log ( newArr )//[100,20,10]

//4.数组排序
let arr1 = [10,20,70,40,50,60]
//数组排序方法的参数是一个回调函数：告诉数组内置对象你的排序规则
//从小到大排序
arr1.sort(function (a,b)
{
    return a - b
});

console.log ( arr1 )//从小到大

1.2-字符串对象api

1.工厂函数

工厂函数：用于批量创建对象的函数

 <script>
  /* 
    1.面向对象 ： 是一种注重结果的思维方式
        面向对象思维 ： 注重结果
        面向过程思维 ： 注重过程

    2.面向对象 与 面向过程的关系
        * 面向对象本质 ： 对面向过程的一种封装

    3.构造函数创建对象（new关键字四个工作流程）
    */

  /*学习路线 
    1.介绍创建多个对象需求
    2.介绍函数封装来创建多个对象 （工厂函数）
    3.引入最终目标： 构造函数
     */

  //1.需求：创建3个人对象 （姓名name,年龄age,性别sex）
  //弊端：（1）代码冗余  （2）维护不便
  // let person1 = {
  //     name:'ikun',
  //     age:32,
  //     sex:'男'
  // }

  // let person2 = {
  //     name:'班长',
  //     age:38,
  //     sex:'男'
  // }

  // let person3 = {
  //     name:'王悦',
  //     age:28,
  //     sex:'男'
  // }

  //2.使用函数创建对象 : 解决创建多个对象代码冗余
  //工厂函数 ： 
  function createPerson (name, age, sex) {
    //(1)创建空对象
    let p = {}
    //(2)对象赋值
    p.name = name
    p.age = age
    p.sex = sex
    //(3)返回创建好的对象
    return p
  }

  let p1 = createPerson('ikun', 32, '男')
  let p2 = createPerson('班长', 38, '男')
  let p3 = createPerson('王悦', 28, '男')
  console.log(p1, p2, p3)

</script>

1.1.2-重点构造函数==

<script>
  
    1.面向对象 ： 是一种注重结果的思维方式
        面向对象思维 ： 注重结果
        面向过程思维 ： 注重过程

    2.面向对象 与 面向过程的关系
        * 面向对象本质 ： 对面向过程的一种封装

    3.构造函数创建对象（new关键字四个工作流程）
    构造函数： 使用new关键字调用的函数
        (1)创建空对象
        (2)this指向这个对象
        (3)对象赋值
        (4)返回对象
        
    

  学习路线 
    1.介绍创建多个对象需求
    2.介绍函数封装来创建多个对象 （工厂函数）
    3.引入最终目标： 构造函数
    

  2.使用函数创建对象 : 解决创建多个对象代码冗余
  工厂函数 ： 创建对象
  function createPerson (name, age, sex) {
    //(1)创建空对象
    let p = {}
    //(2)对象赋值
    p.name = name
    p.age = age
    p.sex = sex
    //(3)返回创建好的对象
    return p
  }

  let p1 = createPerson('ikun', 32, '男')
  let p2 = createPerson('班长', 38, '男')
  let p3 = createPerson('王悦', 28, '男')
  console.log(p1, p2, p3)

  构造函数作用与工厂函数一致，都是创建对象。但是构造函数代码更加简洁
  1.构造函数 ： 使用new关键字调用一个函数
  
  
  function Person (name, age, sex) {
    //(1)创建空对象  {}
    //(2)将this指向这个对象  this = {}
    //(3)对象赋值
    this.name = name
    this.age = age
    this.sex = sex
    //(4)返回这个对象  return this
  }

  let person1 = new Person('ikun', 32, '男')
  let person2 = new Person('班长', 38, '男')
  let person3 = new Person('王悦', 28, '男')
  console.log(person1, person2, person3)

  /* 声明一个空函数 */
//   function fn () {}

//   let res1 = fn() //普通函数
//   let res2 = new fn() //构造函数
//   console.log(res1, res2)
</script>

1.3- ______proto______属性介绍

 <script>
   /* 
    1.prototype属性： 属于构造函数，指向原型对象
        * 作用： 解决构造函数资源浪费+变量污染
    2.__proto__属性： 属于实例对象，指向原型对象
        * 作用： 可以让实例对象访问原型中的成员
    */

1.5-静态成员与实例成员

 <script>
    /* 
    构造函数也可以有自己的属性： 例如prototype

    静态成员 ： 属于函数对象的成员
    实例成员： 属于实例化对象的成员
     */

    //构造函数
     function Person(name,age){
        this.name = name;
        this.age = age;
    };

    Person.aaa = '啊啊啊';
    console.log(Person.aaa);//静态成员
    

    //实例化对象
    let p1 = new Person('张三',20);

    console.log(p1.name);//实例成员
    console.log(p1.age);//实例成员
    
</script>

- 1.什么是原型？

任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称之为原型对象

2.如何访问原型对象
- 构造函数名.prototype
3.哪些对象可以访问原型？
- a.构造函数自身
- b.该原型对应的构造函数实例化出来的对象
4.proto属性介绍
- 属于对象，指向实例化这个对象的构造函数对应的原型
- proto属性不是W3C的标准属性，所以实际开发中一般不会使用它来访问原型
6.constructor属性介绍
- 属于原型对象，指向这个原型对应的构造函数
- 作用:可以得知某个实例对象，到底是由哪一个构造函数生成的

js基础语法复习

1.数据类型
- 基本数据类型：number、string、boolean、undefined、null
- 复杂数据类型：object（包含三种子数据类型）
  - 无序存储对象object: {}
  - 有序存储数组array: []
  - 函数function: function
- 内置对象：属于object类型，是js作者提前写好的对象，里面存储了一些属性和方法，方便开发者直接使用
  - Math：数学对象
  - Date：日期对象
  - Function：函数对象
  - RegExp：正则表达式
  - Array：数组对象
  - String ：string对象
  - Boolean ：boolean对象
  - Number ：number对象
2.值类型与引用类型
- a.值类型（基本数据类型）:栈中存储的是数据，赋值拷贝的是数据，修改拷贝后的数据对原数据没有影响
- b.引用类型（复杂数据类型）：栈中存储的是地址，数据存在堆中，赋值拷贝的是地址，修改拷贝后的数据对原数据有影响
3.in关键字三个作用
- a.for-in循环遍历对象属性
- b.判断对象能够访问某个属性
  - 语法： 属性名字符串 in 对象名
- c.判断数组是否包含某个下标
  - 语法： 下标 in 数组名
  - 判断数组是否包含某元素，可以使用:数组名.indexOf(元素)
4.delete关键字两个作用
- a.删除对象的属性： delete 对象名.属性名
- b.删除没有使用let声明的变量
5.==与===的区别
- a.===:全等运算符
  - 严格匹配，值与数据类型必须要同时相等
- b.==:相等运算符
  - 不严格匹配，当左右两边数据类型不一致的时候允许数据类型转换，分为五种情况（x == y）
    - （1）当x与y都为null或者undefined, 返回true
    - （2）当x或y为NaN,返回false
    - （3）当x或y都为：string，number，boolean。且数据类型不一致的时候，此时会隐式转换成number后比较
    - （4）如果x或y存在对象类型，则会转为原始值后比较
    - （5）x与y都为对象类型，则比较它们的引用地址。如果同一个地址则为true，不同地址则为false

1.3-js基础语法复习）

1.数据类型
- 基本数据类型：number、string、boolean、undefined、null
- 复杂数据类型：object（包含三种子数据类型）
  - 无序存储对象object: {}
  - 有序存储数组array: []
  - 函数function: function
- 内置对象：属于object类型，是js作者提前写好的对象，里面存储了一些属性和方法，方便开发者直接使用
  - Math：数学对象
  - Date：日期对象
  - Function：函数对象
  - RegExp：正则表达式
  - Array：数组对象
  - String ：string对象
  - Boolean ：boolean对象
  - Number ：number对象
2.值类型与引用类型
- a.值类型（基本数据类型）:栈中存储的是数据，赋值拷贝的是数据，修改拷贝后的数据对原数据没有影响
- b.引用类型（复杂数据类型）：栈中存储的是地址，数据存在堆中，赋值拷贝的是地址，修改拷贝后的数据对原数据有影响
3.in关键字三个作用
- a.for-in循环遍历对象属性
- b.判断对象能够访问某个属性
  - 语法： 属性名字符串 in 对象名
- c.判断数组是否包含某个下标
  - 语法： 下标 in 数组名
  - 判断数组是否包含某元素，可以使用:数组名.indexOf(元素)
4.delete关键字两个作用
- a.删除对象的属性： delete 对象名.属性名
- b.删除没有使用let声明的变量
5.==与===的区别
- a.===:全等运算符
  - 严格匹配，值与数据类型必须要同时相等
- b.==:相等运算符
  - 不严格匹配，当左右两边数据类型不一致的时候允许数据类型转换，分为五种情况（x == y）
    - （1）当x与y都为null或者undefined, 返回true
    - （2）当x或y为NaN,返回false
    - （3）当x或y都为：string，number，boolean。且数据类型不一致的时候，此时会隐式转换成number后比较
    - （4）如果x或y存在对象类型，则会转为原始值后比较
    - （5）x与y都为对象类型，则比较它们的引用地址。如果同一个地址则为true，不同地址则为false

原型继承

    1.继承 :  一个对象 拥有 另一个对象 所有的 成员
    2.原型继承 :把父对象 作为子对象构造函数的原型
   

    //父对象
    let father = {
        house: {
            address: '深圳湾一号',
            price: 20000000
        },
        car: {
            brand: '劳斯莱斯幻影',
            price: 15000000
        }
    }

    //子对象
    //构造函数
    function Son(name, age) {
        this.name = name
        this.age = age
    }
    //原型继承: 把父对象 作为子对象构造函数的原型
    Son.prototype = father
    //可选 : 原型继承之后，由于父对象覆盖原来的 子对象构造函数原型， 就会导致constructor消失.
    //解决办法： 手动添加。（对开发几乎没有影响，也可以不加）
    Son.prototype.constructor = Son


    //实例对象
    let s1 = new Son('ikun', 30)
    let s2 = new Son('班长', 20)
    console.log(s1, s2)

##原型链##
   1.原型链 : 每一个对象都有自己的原型, 而原型也是对象,也会有自己的原型，此次类推形成链式结构。称之为原型链。(原型链的终点是null)
   2.对象访问原型链规则 : 就近原则
    * 对象先访问自己的，自己没有就找原型的，原型没有就找原型的原型，一直到原型链终点null.如果还找不到。  属性则获取undefined, 方法则会报错 xxx is not function

内置对象
2.1 查看str的原型

    console.log(str.__proto__.constructor) //String
    console.log(str.__proto__ === String.prototype) //true
    //2.2 查看arr的原型的原型
    console.log(str.__proto__.__proto__.constructor) //Object
    console.log(str.__proto__.__proto__ === Object.prototype) //true

    /日期对象
    let date = new Date()
    js有几个特殊的对象 无法使用 log来打印的，需要用dir来打印: function date dom对象 
    console.dir(date)
    3.1 查看date的原型
    console.log(date.__proto__.constructor) //Date
    console.log(date.__proto__ === Date.prototype) //true
    3.2 查看date的原型的原型
    console.log(date.__proto__.__proto__.constructor) //Object
    console.log(date.__proto__.__proto__ === Object.prototype) //true

DOM对象

    1.HTMLdivElement  不同的标签有不同的样式  div.__proto__.constructor
    2.HTMLElement  页面所有的标签都属于HTML div.__proto__.__proto__.constructor
    3.ELement  所有标签都属于元素节点(文本节点  注释节点)
    4.Node 页面一切内容皆节点
    5.EventTarget 所有节点都可以注册事件
    6.Object  万物皆对象
    7.万物皆空

instanceof

instanceof(关键字): 运算符。用于检测构造函数的prototype在不在实例对象的原型链中
```
   说人话： 亲子鉴定,鉴定两个对象之间有没有血缘关系
```
1. 实例对象 instanceof 构造函数
  检测右边构造函数的prototype 在不在左边实例对象的原型链中
2. 应用 : 某些函数为了限制你的数据类型,在内部需要用instanceof进行判断是否是正确的数据类型
// let data = new Date()
// console.log(data instanceof Date);
// arr-> Array.prototype -> Object.prototype -> null
console.log(arr instanceof Array) //true
console.log(arr instanceof Object) //true
console.log(arr instanceof String) //false
//封装一个函数，要求这个函数必须要传数组类型、传其他类型不可以
function fn(arr) {
```
   if (arr instanceof Array) {
       console.log(arr.reverse())
   } else {
       console.log('数据类型错误')
   }
```
}
fn([10, 20, 30])
fn('abc')

argumens

arguments关键字: 获取函数所有的实参

    是一个伪数组 :  有数组三要素(元素、下标、长度)，但是不能使用数组的方法

2. 应用 : 一般用户参数数量不限的函数. 
    例如: arr.push()  Math.max()  这些函数实参数量不限，底层原理就是使用arguments来接收所有的实参

剩余参数rest

    3. 剩余参数(rest参数) : 获取函数剩余的所有实参
        语法:  function 函数名(形参1,...形参2){}
        特点: (1)只能作为最后一个参数  (2)是真数组

    4. 一般情况下,rest参数可以替代arguments

一般情况下,rest参数可以替代arguments

5. 函数默认参数
    function 函数名(形参=默认值){  }

##this的三种指向##
环境对象 this : 谁'调用'我,我就指向谁

        普通函数；  函数名()          this指向window
        对象方法:   对象名.方法名()   this指向对象
        构造函数；  new 函数名()      this指向new创建实例对象
            * 小技巧: 没点没new是window, 有new是实例,有点是点左边的对象

上下文调用

2.上下文调用 : 修改函数内部的this

        2.1 函数名.call(修改后的this,形参1,形参2…………)

typeof 数据 : 有两种数据类型无法检测

        null和数组无法检测,结果都是 'object'

解决方案:万能数据类型检测

        Object.prototype.toString.call(数据)

        2.2 函数名.apply(修改后的this, 数组或伪数组 )

Math.max()

    // let max1 = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4])
    //这里使用apply只是借助传参特点，this指向不用修改。还是原来的this
    let max1 = Math.max.apply(Math,arr)
    console.log( max1 )

    //ES6求最大值   ...作用和apply类似，也会自动遍历数组，然后逐一传参
    let max2 = Math.max(...arr)
    console.log(max2)
    



        2.3 函数名.bind(修改后的this)
            * 不会立即执行函数,而是得到一个修改this之后的新函数。
            * bind一般用于修改: 定时器函数、事件处理函数

        3.面试必问:  call 和 apply 和 bind 三者区别
           相同点 : 作用一致，修改函数this指向
           不同点 :  
 传参方式不同 : call是按照顺序传参, apply是数组/伪数组传参
 执行机制不同 : call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数

伪数组转真数组

实际开发中，ES6新增语法用于伪数组转真数组 :  Array.from(伪数组)
    let arr = Array.from(weiArr)
    console.log(arr)

闭包

    1.闭包closure是什么 : 
        a. 闭包 是一个 访问其他函数内部变量 的 函数
        b. 闭包 = 函数 + 上下文引用

    2.闭包作用 : 解决变量污染

    3.在浏览器中调试闭包 :
  */

  //局部作用域 :  在函数内部声明

  function fn() {
    let num = 10
    // fn1 + 访问num 组合才叫闭包
    function fn1() {
      console.log(num)
    }
    fn1()
  }

  fn()

递归

1.递归函数: 一个函数在内部调用自己

        * 递归作用和循环类似的,也需要有结束条件

    2.递归应用:
        浅拷贝与深拷贝 : 
            方式一(推荐) : JSON方式实现
                * let newObj = JSON.parse( JSON.stringify( obj ) )
            方式二(递归) : 了解
        遍历dom树

日	一	二	三	四	五	六
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

1.1-数组对象api

1.2-字符串对象api

1.工厂函数

1.1.2-重点构造函数==

1.5-静态成员与实例成员

- 1.什么是原型？

js基础语法复习

1.3-js基础语法复习）

原型继承

instanceof

argumens

剩余参数rest

上下文调用

伪数组转真数组

递归

发表评论

博客信息

2025年01月

搜索

最新文章

最新回复

文章分类

文章归档

其它功能

目录

1.1-数组对象api

1.2-字符串对象api

1.工厂函数

1.1.2-重点构造函数==

1.5-静态成员与实例成员

- 1.什么是原型？

js基础语法复习

1.3-js基础语法复习）

原型继承

instanceof

argumens

剩余参数rest

上下文调用

伪数组转真数组

递归

发表评论

博客信息

2025年01月

搜索

最新文章

最新回复

文章分类

标签云

文章归档

其它功能

目录