JavaScript对象类型之Array及Object-LMLPHP

目录

一、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) );

两个称呼:

二、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:

let stu4 = {
    _name: null, /*类似于java中私有成员变量*/
    get name() {
        console.log("进入了get");
        return this._name;
    },
    set name(name) {
        console.log("进入了set");
        this._name = name;
    }
}

调用get,set

stu4.name = "小白"

console.log(stu4.name)

(2)特色:属性增删

对比一下 Java 中的 Object

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;
    }
});

(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"); 
    }
}

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()

输出结果为

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

用箭头函数

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

输出结果是:

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

不用箭头函数的做法:

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

(4)特色:原型继承

let father = {
    f1: '父属性',
    m1: function() {
        console.log("父方法");
    }
}

let son = Object.create(father);

console.log(son.f1);  // 打印 父属性
son.m1();			  // 打印 父方法

(5)特色:基于函数的原型继承

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

function cons(f2) {
    // 创建子对象(this), 给子对象提供属性和方法
    this.f2 = f2;
    this.m2 = function () {
        console.log("子方法");
    }
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {
    console.log("父方法");
}

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

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

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

(6)JSON

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

json对象:

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

js对象:

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

它们的区别是:

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

JSON.parse(json字符串);  // 返回js对象
JSON.stringify(js对象);  // 返回json字符串
04-15 10:18