JavaScript对象类型之Array及Object

骑猪看日落 2024-03-23 12:20 100阅读 0赞

![5130150bee6c4c828443d428ef1be6cf.gif][]

**目录**

一、Array

（1）语法

（2）API

二、Object

（1）语法

（2）特色：属性增删

（3）特色：this

（4）特色：原型继承

（5）特色：基于函数的原型继承

（6）JSON

--------------------

## 一、Array ##

### **（1）语法** ###

// 创建数组
    let arr = [1,2,3]; 
    
    // 获取数组元素
    console.log(arr[0]); // 输出 1
    
    // 修改数组元素
    array[0] = 5;		 // 数组元素变成了 [5,2,3]
    
    // 遍历数组元素，其中 length 是数组属性，代表数组长度
    for(let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

### **（2）API** ###

● push、shift、splice

let arr = [1,2,3]; 
    
    arr.push(4);    	// 向数组尾部(右侧)添加元素, 结果 [1,2,3,4]
    arr.shift();		// 从数组头部(左侧)移除元素, 结果 [2,3,4]
    arr.splice(1,1);	// 删除【参数1】索引位置的【参数2】个元素，结果 [2,4]

● join

let arr = ['a','b','c'];
    
    arr.join(); 		// 默认使用【,】作为连接符，结果 'a,b,c'
    arr.join('');		// 结果 'abc'
    arr.join('-');		// 结果 'a-b-c'

● map、filter、forEach

let arr = [1,2,3,6];
    
    function a(i) {   // 代表的新旧元素之间的变换规则
        return i * 10
    }
    
    // arr.map(a) // 具名函数，结果 [10,20,30,60]
    
    // arr.map( (i) => {return i * 10} ); // 箭头函数
    arr.map( i => i * 10 ); // 箭头函数

● 传给msp的函数，参数代表旧元素，返回值代表新元素

map的内部实现（伪代码）

function map(a) { // 参数是一个函数
        let narr = [];
        for(let i = 0; i < arr.length; i++) {
            let o = arr[i]; // 旧元素
            let n = a(o);   // 新元素
            narr.push(n);
        }
        return narr;
    }

filter例子：

let arr = [1,2,3,6];
    arr.filter( (i)=> i % 2 == 1 ); // 结果 [1,3]

● 传给filter的函数，参数代表旧元素，返回true表示要留下的元素

forEach例子：

let arr = [1,2,3,6];
    
    /*for(let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }*/
    
    arr.forEach( (i) => console.log(i) );

两个称呼：

>  *  高阶函数，map，filter，forEach
>  *  回调函数，例如作为参数传入的函数

## 二、Object ##

### （1）语法 ###

let obj = {
        属性名: 值,
        方法名: 函数,
        get 属性名() {},
        set 属性名(新值) {}
    }

例子1：

let stu1 = {
        name: "小明",
        age: 18,
        study: function(){
            console.log(this.name + "爱学习");
        }    
    }

例子2：

let name = "小黑";
    let age = 20;
    let study = function(){
        console.log(this.name + "爱学习");
    }
    
    let stu2 = { name, age, study }

例子3（重点）：

let stu3 = {
        name: "小白",
        age: 18,
        study(){
            console.log(this.name + "爱学习");
        }    
    }

注意：对象方法这么写，仅限于对象内部

例子4：

调用get,set

stu4.name = "小白"
    
    console.log(stu4.name)

### （2）特色：属性增删 ###

对比一下 Java 中的 Object

>  *  Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的
>  *  js 的对象，不需要什么模板，它的属性和方法可以随时加减

let stu = {name:'张三'};
    stu.age = 18;					// 添加属性
    delete stu.age;					// 删除属性
    
    stu.study = function() {		// 添加方法
        console.log(this.name + "在学习");
    }

添加get,set，需要借助Object.definePropery

let stu = {_name:null};
    
    Object.defineProperty(stu, "name", {
        get(){
            return this._name;
        },
        set(name){
            this._name = name;
        }
    });

>  *  参数1：目标对象
>  *  参数2：属性名
>  *  参数3：get，set 的定义

### （3）特色：this ###

java中的this理解：

public class TestMethod {
    
        static class Student {
            private String name;
    
            public Student(String name) {
                this.name = name;
            }
    
            public void study(Student this, String subject) {
                System.out.println(this.name + "在学习 " + subject);
            }
        }
    
        public static void main(String[] args) {
            Student stu = new Student("小明");
            
            // 下面的代码，本质上是执行 study(stu, "java")，因此 this 就是 stu
            stu.study("java"); 
        }
    }

>  *  Java 中的 this 是个隐式参数
>  *  Java 中，我们说 this 代表的就是调用方法的那个对象

js中也是隐式参数，但它与函数运行时上下文相关

例如，一个“落单”的函数

function study(subject) {
        console.log(this.name + "在学习 " + subject)
    }

测试一下：

study("js");  // 输出 在学习 js

这是因为此时函数执行，全局对象 window 被当作了 this，window 对象的 name 属性是空串

同样的函数，如果作为对象的方法

let stu = {
        name:"小白",
        study
    }

这种情况下，会被当前对象作为this

stu.study('js'); 	// 输出 小白在学习 js

还可以动态改变this

let stu = {name:"小黑"};
    study.call(stu, "js");	// 输出 小黑在学习 js

这回 study 执行时，就把 call 的第一个参数 stu 作为 this

一个例外是，在箭头函数内出现的this，以外层this理解

用匿名函数

let stu = {
        name: "小花",
        friends: ["小白","小黑","小明"],
        play() {
            this.friends.forEach(function(e){
                console.log(this.name + "与" + e + "在玩耍");
            });
        }
    }
    stu.play()

>  *  this.name 所在的函数是【落单】的函数，因此 this 代表 window

输出结果为

与小白在玩耍
    与小黑在玩耍
    与小明在玩耍

用箭头函数

let stu = {
        name: "小花",
        friends: ["小白","小黑","小明"],
        play() {
            this.friends.forEach(e => {
                console.log(this.name + "与" + e + "在玩耍");
            })
        }    
    }

>  *  this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象

输出结果是：

小花与小白在玩耍
    小花与小黑在玩耍
    小花与小明在玩耍

不用箭头函数的做法：

### （4）特色：原型继承 ###

let father = {
        f1: '父属性',
        m1: function() {
            console.log("父方法");
        }
    }
    
    let son = Object.create(father);
    
    console.log(son.f1);  // 打印 父属性
    son.m1();			  // 打印 父方法

>  *  father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
>  *  son 自己可以添加自己的属性和方法
>  *  son 里有特殊属性 `__proto__` 代表它的父对象，js 术语： son 的原型对象
>  *  不同浏览器对打印 son 的 `__proto__` 属性时显示不同
>     
>      *  Edge 打印 console.dir(son) 显示 `[[Prototype]]`
>      *  Firefox 打印 console.dir(son) 显示 `<prototype>`

### （5）特色：基于函数的原型继承 ###

出于方便的原因，js又提供了一种基于函数的原型继承

> 函数的职责
> 
> 1.  负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法
> 2.  函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象
>     
>     **注意！**名字有差异，这个属性的作用就是为新对象提供原型

配合new关键字，创建子对象

let son = new cons("子属性")

子对象的 `__proto__`就是函数的`prototype`属性

### （6）JSON ###

json的数据格式看起来与js对象非常相似，例如：

json对象：

{
        "name":"张三",
        "age":18
    }

js对象：

{
        name:"张三",
        age:18
    }

它们的区别是：

> 1.  本质不同
>     
>      *  json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货
>      *  js 对象是切切实实的对象，可以有属性方法
> 2.  语法细节不同
>     
>      *  json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
>      *  json 中不能有除以上的其它 js 对象的特性，如方法等
>      *  json 中的属性必须用双引号引起来

json字符串与js对象的转换：

JSON.parse(json字符串);  // 返回js对象
    JSON.stringify(js对象);  // 返回json字符串

[5130150bee6c4c828443d428ef1be6cf.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/6cda09a1833b46c191b65ed5ca5deedf.png