关于JavaScript对象类型之Array及Object（javascript中array对象拥有的方法）快来看

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

目录一、Array二、Object（1）语法（2）特色：属性增删（3）特色：this（4）特色：原型继承（5）特色：基于函数的原型继承（6）JSON

（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];

arr.forEach( (i)=> console.log(i) );

两个称呼：

高阶函数，map，filter，forEach

回调函数，例如作为参数传入的函数

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

对比一下 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 的定义

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 father={
f1: ‘父属性’,
m1: function() {
console.log(“父方法”);
}
}
let son=Object.create(father);
console.log(son.f1); // 打印父属性
son.m1(); // 打印父方法

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

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

son 里有特殊属性代表它的父对象，js 术语： son 的原型对象

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

Edge 打印 console.dir(son) 显示

Firefox 打印 console.dir(son) 显示

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

函数的职责

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

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

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

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

let son=new cons(“子属性”)

子对象的就是函数的属性

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

json对象：

{
“name”:”张三”,
“age”:18
}

js对象：

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

它们的区别是：

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

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

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

到此这篇关于关于JavaScript对象类型之Array及Object的文章就介绍到这了,更多相关JavaScript的Array及Object内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:js中遍历对象的属性和值的方法Javascript的数组与字典用法与遍历对象的属性技巧js中遍历Map对象的方法js 遍历对象的属性的代码JS中如何轻松遍历对象属性的方式总结js遍历json对象所有key及根据动态key获取值的方法(必看)JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解jquery动态遍历Json对象的属性和值的方法js简单遍历获取对象中的属性值的方法示例JS遍历Json字符串中键值对先转成JSON对象再遍历es6 javascript对象Object.values() , Object.entries()示例详解Javascript?Object对象类型使用详解Object的相关方法和 js遍历对象的常用方法总结