關(guān)于JavaScript對(duì)象類型之Array及Object
一、Array
(1)語(yǔ)法
// 創(chuàng)建數(shù)組 let arr = [1,2,3]; // 獲取數(shù)組元素 console.log(arr[0]); // 輸出 1 // 修改數(shù)組元素 array[0] = 5; // 數(shù)組元素變成了 [5,2,3] // 遍歷數(shù)組元素,其中 length 是數(shù)組屬性,代表數(shù)組長(zhǎng)度 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); // 向數(shù)組尾部(右側(cè))添加元素, 結(jié)果 [1,2,3,4] arr.shift(); // 從數(shù)組頭部(左側(cè))移除元素, 結(jié)果 [2,3,4] arr.splice(1,1); // 刪除【參數(shù)1】索引位置的【參數(shù)2】個(gè)元素,結(jié)果 [2,4]
- join
let arr = ['a','b','c']; arr.join(); // 默認(rèn)使用【,】作為連接符,結(jié)果 'a,b,c' arr.join(''); // 結(jié)果 'abc' arr.join('-'); // 結(jié)果 'a-b-c'
- map、filter、forEach
let arr = [1,2,3,6]; function a(i) { // 代表的新舊元素之間的變換規(guī)則 return i * 10 } // arr.map(a) // 具名函數(shù),結(jié)果 [10,20,30,60] // arr.map( (i) => {return i * 10} ); // 箭頭函數(shù) arr.map( i => i * 10 ); // 箭頭函數(shù)
- 傳給msp的函數(shù),參數(shù)代表舊元素,返回值代表新元素
map的內(nèi)部實(shí)現(xiàn)(偽代碼)
function map(a) { // 參數(shù)是一個(gè)函數(shù) 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 ); // 結(jié)果 [1,3]
- 傳給filter的函數(shù),參數(shù)代表舊元素,返回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) );
兩個(gè)稱呼:
高階函數(shù),map,filter,forEach
回調(diào)函數(shù),例如作為參數(shù)傳入的函數(shù)
二、Object
(1)語(yǔ)法
let obj = { 屬性名: 值, 方法名: 函數(shù), get 屬性名() {}, set 屬性名(新值) {} }
例子1:
let stu1 = { name: "小明", age: 18, study: function(){ console.log(this.name + "愛學(xué)習(xí)"); } }
例子2:
let name = "小黑"; let age = 20; let study = function(){ console.log(this.name + "愛學(xué)習(xí)"); } let stu2 = { name, age, study }
例子3(重點(diǎn)):
let stu3 = { name: "小白", age: 18, study(){ console.log(this.name + "愛學(xué)習(xí)"); } }
注意:對(duì)象方法這么寫,僅限于對(duì)象內(nèi)部
例子4:
let stu4 = { _name: null, /*類似于java中私有成員變量*/ get name() { console.log("進(jìn)入了get"); return this._name; }, set name(name) { console.log("進(jìn)入了set"); this._name = name; } }
調(diào)用get,set
stu4.name = "小白" console.log(stu4.name)
(2)特色:屬性增刪
對(duì)比一下 Java 中的 Object
Java 的 Object 是以類作為模板來(lái)創(chuàng)建,對(duì)象不能脫離類模板的范圍,一個(gè)對(duì)象的屬性、能用的方法都是確定好的
js 的對(duì)象,不需要什么模板,它的屬性和方法可以隨時(shí)加減
let stu = {name:'張三'}; stu.age = 18; // 添加屬性 delete stu.age; // 刪除屬性 stu.study = function() { // 添加方法 console.log(this.name + "在學(xué)習(xí)"); }
添加get,set,需要借助Object.definePropery
let stu = {_name:null}; Object.defineProperty(stu, "name", { get(){ return this._name; }, set(name){ this._name = name; } });
參數(shù)1:目標(biāo)對(duì)象
參數(shù)2:屬性名
參數(shù)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 + "在學(xué)習(xí) " + subject); } } public static void main(String[] args) { Student stu = new Student("小明"); // 下面的代碼,本質(zhì)上是執(zhí)行 study(stu, "java"),因此 this 就是 stu stu.study("java"); } }
Java 中的 this 是個(gè)隱式參數(shù)
Java 中,我們說(shuō) this 代表的就是調(diào)用方法的那個(gè)對(duì)象
js中也是隱式參數(shù),但它與函數(shù)運(yùn)行時(shí)上下文相關(guān)
例如,一個(gè)“落單”的函數(shù)
function study(subject) { console.log(this.name + "在學(xué)習(xí) " + subject) }
測(cè)試一下:
study("js"); // 輸出 在學(xué)習(xí) js
這是因?yàn)榇藭r(shí)函數(shù)執(zhí)行,全局對(duì)象 window 被當(dāng)作了 this,window 對(duì)象的 name 屬性是空串
同樣的函數(shù),如果作為對(duì)象的方法
let stu = { name:"小白", study }
這種情況下,會(huì)被當(dāng)前對(duì)象作為this
stu.study('js'); // 輸出 小白在學(xué)習(xí) js
還可以動(dòng)態(tài)改變this
let stu = {name:"小黑"}; study.call(stu, "js"); // 輸出 小黑在學(xué)習(xí) js
這回 study 執(zhí)行時(shí),就把 call 的第一個(gè)參數(shù) stu 作為 this
一個(gè)例外是,在箭頭函數(shù)內(nèi)出現(xiàn)的this,以外層this理解
用匿名函數(shù)
let stu = { name: "小花", friends: ["小白","小黑","小明"], play() { this.friends.forEach(function(e){ console.log(this.name + "與" + e + "在玩耍"); }); } } stu.play()
this.name 所在的函數(shù)是【落單】的函數(shù),因此 this 代表 window
輸出結(jié)果為
與小白在玩耍 與小黑在玩耍 與小明在玩耍
用箭頭函數(shù)
let stu = { name: "小花", friends: ["小白","小黑","小明"], play() { this.friends.forEach(e => { console.log(this.name + "與" + e + "在玩耍"); }) } }
this.name 所在的函數(shù)是箭頭函數(shù),因此 this 要看它外層的 play 函數(shù),play 又是屬于 stu 的方法,因此 this 代表 stu 對(duì)象
輸出結(jié)果是:
小花與小白在玩耍 小花與小黑在玩耍 小花與小明在玩耍
不用箭頭函數(shù)的做法:
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 是父對(duì)象,son 去調(diào)用 .m1 或 .f1 時(shí),自身對(duì)象沒有,就到父對(duì)象找
son 自己可以添加自己的屬性和方法
son 里有特殊屬性
__proto__
代表它的父對(duì)象,js 術(shù)語(yǔ): son 的原型對(duì)象不同瀏覽器對(duì)打印 son 的
__proto__
屬性時(shí)顯示不同Edge 打印 console.dir(son) 顯示
[[Prototype]]
Firefox 打印 console.dir(son) 顯示
<prototype>
(5)特色:基于函數(shù)的原型繼承
出于方便的原因,js又提供了一種基于函數(shù)的原型繼承
函數(shù)的職責(zé)
負(fù)責(zé)創(chuàng)建子對(duì)象,給子對(duì)象提供屬性、方法,功能上相當(dāng)于構(gòu)造方法
函數(shù)有個(gè)特殊的屬性 prototype,它就是函數(shù)創(chuàng)建的子對(duì)象的父對(duì)象
注意!名字有差異,這個(gè)屬性的作用就是為新對(duì)象提供原型
function cons(f2) { // 創(chuàng)建子對(duì)象(this), 給子對(duì)象提供屬性和方法 this.f2 = f2; this.m2 = function () { console.log("子方法"); } } // cons.prototype 就是父對(duì)象 cons.prototype.f1 = "父屬性"; cons.prototype.m1 = function() { console.log("父方法"); }
配合new關(guān)鍵字,創(chuàng)建子對(duì)象
let son = new cons("子屬性")
子對(duì)象的 __proto__
就是函數(shù)的 prototype
屬性
(6)JSON
json的數(shù)據(jù)格式看起來(lái)與js對(duì)象非常相似,例如:
json對(duì)象:
{ "name":"張三", "age":18 }
js對(duì)象:
{ name:"張三", age:18 }
它們的區(qū)別是:
- 本質(zhì)不同
- json 對(duì)象本質(zhì)上是個(gè)字符串,它的職責(zé)是作為客戶端和服務(wù)器之間傳遞數(shù)據(jù)的一種格式,它的屬性只是樣子貨
- js 對(duì)象是切切實(shí)實(shí)的對(duì)象,可以有屬性方法
- 語(yǔ)法細(xì)節(jié)不同
- json 中只能有 null、true|false、數(shù)字、字符串(只有雙引號(hào))、對(duì)象、數(shù)組
- json 中不能有除以上的其它 js 對(duì)象的特性,如方法等
- json 中的屬性必須用雙引號(hào)引起來(lái)
json字符串與js對(duì)象的轉(zhuǎn)換:
JSON.parse(json字符串); // 返回js對(duì)象 JSON.stringify(js對(duì)象); // 返回json字符串
到此這篇關(guān)于關(guān)于JavaScript對(duì)象類型之Array及Object的文章就介紹到這了,更多相關(guān)JavaScript的Array及Object內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- js中遍歷對(duì)象的屬性和值的方法
- Javascript的數(shù)組與字典用法與遍歷對(duì)象的屬性技巧
- js中遍歷Map對(duì)象的方法
- js 遍歷對(duì)象的屬性的代碼
- JS中如何輕松遍歷對(duì)象屬性的方式總結(jié)
- js遍歷json對(duì)象所有key及根據(jù)動(dòng)態(tài)key獲取值的方法(必看)
- JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解
- jquery動(dòng)態(tài)遍歷Json對(duì)象的屬性和值的方法
- js簡(jiǎn)單遍歷獲取對(duì)象中的屬性值的方法示例
- JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
- es6 javascript對(duì)象Object.values() , Object.entries()示例詳解
- Javascript?Object對(duì)象類型使用詳解
- Object的相關(guān)方法 和 js遍歷對(duì)象的常用方法總結(jié)
相關(guān)文章
JS限制上傳圖片大小不使用控件在本地實(shí)現(xiàn)
文件上傳之前的檢測(cè),通常是通過(guò)文件名來(lái)判斷文件類型是否合法,但是要想檢測(cè)文件的大小很難辦到,除非在本地或者使用控件。使用JS可以輕松解決詞問題,本文詳細(xì)介紹,需要了解的朋友可以參考下2012-12-12JavaScript CSS修改學(xué)習(xí)第五章 給“上傳”添加樣式
在所有的表單項(xiàng)里面,文件上傳部分是最難添加樣式的。IE支持一些(不是很多)樣式屬性,Mozilla很少,其他瀏覽器幾乎沒有?!盀g覽”按鈕在CSS操作里面也很難訪問。2010-02-02javascript定義變量時(shí)加var與不加var的區(qū)別
這篇文章主要介紹了javascript 變量中 var 與不加var的區(qū)別,需要的朋友可以參考下2014-12-12JavaScript編程中window的location與history對(duì)象詳解
這篇文章主要介紹了JavaScript編程中window的location與history對(duì)象,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10javascript學(xué)習(xí)筆記(三)顯示當(dāng)時(shí)時(shí)間的代碼
主要是為了熟悉javascript中在date對(duì)象,大家可以看下。2011-04-04