關于JavaScript對象類型之Array及Object
目錄
- 一、Array
- 二、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：
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又提供了一種基于函數的原型繼承
函數的職責
負責創建子對象，給子對象提供屬性、方法，功能上相當于構造方法
函數有個特殊的屬性 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
}
它們的區別是：
- 本質不同
- 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內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！
相關文章：
網公網安備