JavaScript对象类型之Array及Object

简介: JavaScript对象类型之Array及Object

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


  • 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 对象


输出结果是:


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


不用箭头函数的做法:


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();       // 打印 父方法


  • father 是父对象,son 去调用 .m1 或 .f1 时,自身对象没有,就到父对象找


  • son 自己可以添加自己的属性和方法


  • son 里有特殊属性 __proto__ 代表它的父对象,js 术语: son 的原型对象


  • 不同浏览器对打印 son 的 __proto__ 属性时显示不同


Edge 打印 console.dir(son) 显示 [[Prototype]]


Firefox 打印 console.dir(son) 显示 <prototype>


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


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


函数的职责


  1. 负责创建子对象,给子对象提供属性、方法,功能上相当于构造方法


  1. 函数有个特殊的属性 prototype,它就是函数创建的子对象的父对象


注意!名字有差异,这个属性的作用就是为新对象提供原型


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
}


它们的区别是:


  1. 本质不同


json 对象本质上是个字符串,它的职责是作为客户端和服务器之间传递数据的一种格式,它的属性只是样子货


js 对象是切切实实的对象,可以有属性方法


  1. 语法细节不同


json 中只能有 null、true|false、数字、字符串(只有双引号)、对象、数组


json 中不能有除以上的其它 js 对象的特性,如方法等


json 中的属性必须用双引号引起来


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


 JSON.parse(json字符串);  // 返回js对象
 JSON.stringify(js对象);  // 返回json字符串
目录
相关文章
|
30天前
|
存储 JavaScript 前端开发
JavaScript Array
【10月更文挑战第06天】
36 15
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
23 3
|
14天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
10 0
|
3月前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
2月前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
27天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
2月前
|
存储 JavaScript 前端开发
JS篇(Array、Object)
JS篇(Array、Object)
17 1
|
3月前
|
JavaScript 前端开发 开发者
|
3月前
|
存储 关系型数据库 MySQL
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
40 0