大標題小節

一、數組	1. 數組的創建、賦值、分類； 2. 數組的簡單操作（根據索引增、查、改）； 3. 聲明式和構造函數創建的數組的區別； 4.數組的方法：push()、unshift()、splice()、pop()、shift()、slice()、 sort()、reserve()、join()、toString()、contat()
二、對象	1. 對象的書寫規則； 2. 創建對象； 3. 操作屬性值； 4. 操作屬性； 5. 對象的遍歷 for-in； 6. 深淺拷貝； 7. 基礎類型和引用類型
三、this	1. 在 js 中，全局的變量和函數，全部屬于 window，this 指向 window。 2. 在方法中，this 表示該方法所屬的對象。 3. 在函數中，this 會指向 window，但在嚴格模式下，函數中的 this 會指向 undefined； 4. 在事件中，this 表示接收事件的元素，即接收事件的 HTML 元素。 總結

---

一、數組

注意：不要在循環中使用 return，否則會終止循環。如果一定要使用，將原本要 return 的最終結果，存到數組中，再將這個數組 return 出來。

1. 數組的創建、賦值、分類：

（1）創建：
① 聲明式創建： var arr = [];
② 構造函數創建： var arr2 = new Array();

（2）賦值：
① var arr = [4,5,6,7];
② var arr2 = new Array(7,8,9,0,1);

（3）分類：
① 偽數組：例如 arguments；
② 數組： 整數數組、字符串數組、json對象數組、二維數組；

2. 數組的簡單操作（根據索引增、查、改）：

（1）增：

var arr = []; arr = [4,'a',true,undefined,NaN,null,{},[],function(){console.log("hello")}];console.log(arr[9]);//undefined 聲明了arr，但是arr下標為9的位置未賦值 arr[9] = "world"; console.log(arr);//(10) [4, "a", true, undefined, NaN, null, {…}, Array(0), ?, "world"]

• 注意：打印的時候，瀏覽器顯示的是 (2) [empty,0]，實際上 arr2[0] 的值是 undefined，而不是 empty。var arr2 = []; arr2[1] = 4; console.log(arr2); //(2) [empty,0] console.log(arr2[0]); //undefined

（2）查：

var arr = [4,'a',true,undefined,NaN,null,{},[],function(){console.log("hello")}];console.log(arr[1]);//aarr[8]();//hellofor(var i =0;i<arr.length;i++){console.log(arr[i]); }

（3）改：

var arr = [4,'a',true,undefined,NaN,null,{},[],function(){console.log("hello")}]; arr[2] = "hello"; console.log(arr[2]); //hello

3. 聲明式和構造函數創建的數組的區別：

（1）使用聲明式：

var arr1 = []; // 創建空數組 var arr2 = [ 20 ]; // 長度為1，數據是20 var arr3 = [ "2","6","9" ]; // 創建帶有三個字符串的數組 console.log(arr2); //[20] console.log(arr3); //(3) ["2", "6", "9"]

（2）使用 Array 構造函數

var arr1 = new Array( ); // 創建空數組 var arr2 = new Array( 20 ); // 長度是 20 的空數組 var arr3 = new Array( "2","6","9" ); // 創建帶有三個字符串的數組 console.log(arr2); //(20) [empty × 20] console.log(arr3); //(3) ["2", "6", "9"]

4. 數組的方法：

以下所列方法中：

• 會改變原數組的方法：push()、unshift()、splice()、pop()、shift()、splice()、sort()、reverse()；
• 返回新數組，不影響原數組的方法：slice(n,m)、join()、toString()、concat()；

（1）增：push()、unshift()、splice()；

• ① push()，給數組的最后一位增加；

  var arr = [4,5,6,7];arr.push("hello"); console.log(arr);//(5) [4, 5, 6, 7, "hello"]

• ② unshift()，給數組的第一位增加；

  var arr = [4,5,6,7];arr.unshift("hello"); console.log(arr);//(5) ["hello", 4, 5, 6, 7]

• ③ splice(指定位置（從0開始，指定位置包括自身）, 刪除個數, 新增內容)，給指定索引的位置增加；

  var arr = [4,5,6,7];arr.splice(1,2,"world"); console.log(arr);//(3) [4, "world", 7] arr.splice(1,0,2); console.log(arr);//(4) [4, 2, "world", 7] arr.splice(1,1,"hello"); //相當于替換 console.log(arr);//(4) [4, “hello”, "world", 7]

（2）刪： pop()、shift()、splice()；

• ① pop()，刪除數組的最后一個；

  var arr = [4,5,6,7,8,9];arr.pop(); console.log(arr);//(5) [4, 5, 6, 7, 8]

• ② shift()，刪除數組的第一個；

  var arr = [4,5,6,7,8,9];arr.shift(); console.log(arr);//(5) [5, 6, 7, 8, 9]

• ③ splice(指定位置（從0開始，指定位置包括自身），刪除個數)；

  var arr = [4,5,6,7,8,9];arr.splice(1,1); console.log(arr);//(5) [4, 5, 7, 8, 9]

（3）截取： slice(n,m)（截取數組的第 n 位到第 m 位的前一位，含前不含后。返回新數組，不操作/影響原數組）

var arr = [4,5,6,7,8,9]; console.log(arr);//(6) [4,5,6,7,8,9]arr.slice(1,3); console.log(arr); //(6) [4,5,6,7,8,9] //當使用方法時，返回原數組，發現沒有變化時，可能是這個方法把處理結果放在返回值中。 //就像在 slice() 方法中有個 return。 console.log(arr.slice(1,3)); //(2) [5,6] var newArr = arr.slice(1,3); console.log( newArr ); //(2) [5,6]

（4）排序：sort()、reverse()

• ① sort()，默認按字符升序排列；var arr = [4,6,5,3,8]; arr.sort(); console.log(arr);//(5) [3, 4, 5, 6, 8]var arr2 = [2,101,6,58,3] arr2.sort(); console.log(arr2);//(5) [101, 2, 3, 58, 6]var arr3 = ["Banana", "Orange", "Apple", "Mango"] arr3.sort(); console.log(arr3); //(4) ["Apple", "Banana", "Mango", "Orange"] 解決 sort() 按位排序的方法：//升序： var arr2 = [2,101,6,58,3] arr2.sort(function(a,b){return a-b;}) console.log(arr2); //(5) [2, 3, 6, 58, 101]//降序： arr2.sort(function(a,b){return b-a;}) console.log(arr2); //(5) [101, 58, 6, 3, 2]
• ② reverse()，反向排序，將數組中的元素顛倒順序，返回逆序后的數組。var arr = ["Banana", "Orange", "Apple", "Mango"]arr.reverse();console.log(arr); //(4) ["Mango", "Apple", "Orange", "Banana"]

（5）數組轉為字符：join()、toString()

• ① join()，將數組轉為字符，參數會將逗號替換掉，返回一個新數組；var arr = [2,6,8,9]; console.log(arr.join()); //2,6,8,9 console.log(arr.join('')); //2689 console.log(arr.join('-')); //2-6-8-9
• ② toString()，也可以將數組轉為字符，返回一個新數組；var arr = [2,6,8,9]; console.log(arr.toString()); //2,6,8,9

（6）合并兩個或多個數組：concat()，返回新數組，不影響原數組。

var a = [2,6,8,9]; var b = ["hello", "world", "I"]; var c = [4, 7]; var result = a.concat(b, c); console.log(result); //(9) [2, 6, 8, 9, "hello", "world", "I", 4, 7]

5. 數組的遍歷（獲取數組中的每個元素）：for()

（1）定義一個 30 項的數組，數組每一項要求是 1-10 的隨機數，每間隔 5 個數字，求出前 5 個數的平均值。

var arr = new Array(30); var newArr = []; var aveArr = []; for(var i=0; i<30; i++){arr[i] = Math.round(Math.random()*9+1) } for(var i=0; i<30; i=i+5){newArr.push( arr.slice(i, i+5) ); } console.log(newArr) for(var i=0; i<newArr.length; i++){aveArr.push( ave(newArr[i]) ) } console.log(aveArr)//求數組每個值之和的平均值 function ave(arr){var sum=0;for(var i=0; i<arr.length; i++){sum += arr[i];}return sum/arr.length; }

（2）數組去重（利用 對象 添加屬性得到undefined）

通過obj.A，就可以給對象添加一個值為 undefined 的屬性A。

定義一個空對象 obj，遍歷數組；
判斷數組中的第一個值在obj中是否存在，如果不存在，就將這個值作為對象的鍵，給它賦值為1，如果存在，就把它的值+1。判斷第二個值在obj中是否存在…一次類推.

var arr = ['a','b','a','a','b','a']; var obj = {}; for(var i=0; i<arr.length; i++){if( obj[arr[i]] ){ obj[arr[i]]++;} else { obj[arr[i]] = 1;} } console.log(obj);//{a:4, b:2}，得到的是a和b在數組中的重復個數 var newArr = []; for(var key in obj){newArr.push(key); } console.log(newArr); //[a,b]

6. 冒泡排序 和 比較排序

（1）冒泡排序：依次對數組中相鄰數組進行比較。如果第一個比第二個大，就交換他們兩個。

var arr = [12,9,6,8,3,4]; for(j = 0; j<arr.length-1; j++){for(var i = 0; i<arr.length-1-j; i++){if(arr[i] > arr[i+1]){var temp = arr[i];arr[i] = arr[i+1];arr[i+1] = temp; }} }

（2）比較排序：將第一位依次與后面的元素相比較，得到最小值，與第一位交換，再用第二位依次與后面的元素相比較，得到最小值，再與第二位交換…；

var arr = [3,1,2,4,6,9]; for(var i = 0;i<arr.length; i++){var min = arr[i];//假設為最小值var minIndex = i;//最小值的indexfor(var j = i+1; j<arr.length; j++){ //i與后面所有的值做比較if(min > arr[j]){min = arr[j];minIndex = j;}}arr[minIndex] = arr[i];arr[i] = min } console.log(arr);

---

二、對象

• 存儲數據的載體稱為變量，在對象中稱為屬性；
• 功能實現的載體稱為函數，在對象中稱為方法；
• 當只操作對象進行編程的時候，稱為“面向對象編程”。

對象： 其實就是一種類型，即 引用類型。對象的值就是引用類型的實例。
在 ECMAScript 中引用類型是一種數據結構，用于將數據和功能組織在一起，它也常被稱為“類”。

對象的組成： 由 屬性（鍵、key） 和 屬性值（值、value） 組成；

作用：
（1）儲存數據；（2）用來編程；

1. 書寫規則：

（1）屬性可以直接寫，類似于變量名；
（2）屬性值可以是任意數據；
（3）鍵和值之間用 “:” 連接；
（4）沒對屬性之間用“,”隔開。

• 對象的值可以是數字、字符、布爾值、undefined、null、對象、數組、函數（函數在對象中叫做 “方法”）var obj = {num: 1,str: "hello",bool: true,und: undefined,nul: null,obj: {},arr: [],fn: function(){console.log(1);} }

2. 創建對象

所有對象都不相等，但是對象身上的屬性可以相等；
（1）字面量方式創建：var obj = {};
（2）構造函數的方式創建：var obj = new Object();

• 構造函數：new，用來執行（構造）函數;

• 構造函數的特點 ：
  （1）所有通過 new 調用的函數，不管有沒有返回值，都會得到一個函數的同名對象，每次 new 得到的不是同一個；

  （2）構造函數只會產生對象，構造函數是用來構造對象的函數（不能用 ypeof 來檢查數據類型。）；

  function fn(){console.log(1) } var a = new fn(); var b = new fn(); console.log(a);//fn {} console.log(b);//fn {} console.log(a == b);//false

• 內部用this 來構造屬性和方法

  function Person() {this.name="hxl";this.age=18;this.sayHi=function(){alert("Hi")}} var a = new Person(); console.log(a);//Person {name: "hxl", age: 18, sayHi: ?}

3. 操作屬性值

（1）獲取：
① 通過 “.” 拿到對象中的值；也可以使用 obj["屬性名"]，注意要加雙引號；
② 當 i 是變量時，我們不能用 obj.i 去訪問，而要用 obj[i]；
③ 獲取一個對象中不存在的屬性時，它的屬性值為 undefined。

var obj = {"a":1,"b":"hello","c":true,"d":function(){console.log("haha");},"e":function(){return {fn:function(){console.log(111);}}} }; //兩種獲取方式： console.log(obj.a);//1 console.log(obj["a"]);//1 此處若不加雙引號，意味著 a 是一個變量 console.log(obj["" + "a"]);//1 用 [] 的方式獲取，里面還可以對變量進行拼接//獲取和調用對象中的函數 console.log(obj.d); //f (){console.log("haha");} console.log(obj.d()); //hahaconsole.log(obj.e);//f (){return{ fn:function(){console.log(111);} }} console.log(obj.e());//{fn:f} console.log(obj.e().fn);//f (){cosnole.log(111);} console.log(obj.e().fn());//111//獲取對象中不存在的屬性名 console.log(obj.x); //undefined

（2）改值： obj.c = false;

4. 操作屬性

（1）賦值：
① 直接賦值：var obj = {"a":1,"b":2};；

② 變量賦值：

var obj = {}; obj.a = 20; console.log(obj)//{a:20} obj.fn = function(){console.log(1); } console.log(obj);//{a:20,fn:f}

（2）刪除對象中的某個屬性：delete 對象.屬性名;

var obj = {name: "admin",age: 18,sex: "保密",height: "180cm",weight: "70KG",like: ["read","sport","wirte"] } delete obj.like; console.log(obj); //{name: "admin", age: 18, sex: "保密", height: "180cm", weight: "70KG"}

5. 對象的遍歷 for-in

（1）for-in 用于非數組對象的遍歷，常用于對象的遍歷。
因為 obj.length 得到的是 undefined，所以普通的 for() 對 對象 沒有用。

枚舉： for-in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操作，這種循環也稱“枚舉”。

var obj = {name:"hxl",age:20,show:function(){console.log("hello")},skill:"編程" }; for(var i in obj){console.log(i);//name age show skillconsole.log(obj.i);//undefined undefined undefined undefined//注意：//原因： i 不是 obj 身上的屬性，這里的 i 只是一個變量。//當 i 是變量時，我們不能用 obj.i 去訪問，而要用 obj[i]console.log(obj[i]);//hxl 20 f (){console.log("hello")} 編程 }

（2）Object ：適用于 所有可枚舉屬性的 對象（包括字符串）。

① Object.keys()：返回值是一個由原對象的 key/鍵/屬性名 組成的新數組 。

• 傳入普通數組，返回 索引。var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // ['0', '1', '2']//傳入對象，返回 鍵/屬性名 var obj = { a: 'alive', b: 'bike', c: 'color' }; console.log( Object.keys(obj) ); // ['a', 'b', 'c']
• 傳入對象，返回 鍵/屬性名。var obj = { a: 'alive', b: 'bike', c: 'color' }; console.log( Object.keys(obj) ); // ['a', 'b', 'c']

② Object.values()：返回值是一個由原對象的 value/值/屬性值 組成的新數組 。

const obj = { id:1, name:'zhangsan', age:18 } console.log(Object.values(obj)); // ["1", "zhangsan", "18"]

• 補充： Object.assign({}, 對象1, 對象2, 對象3) 合并兩個或多個對象，返回一個新對象，不修改原對象。var obj1 = {a:1, b:2}; var obj2 = {c:3, d:4}; console.log(Object.assign({}, obj1, obj2); // {a:1, b:2, c:3, d:4}

6. 深淺拷貝

（1）值傳遞： 在拷貝的時候，拷貝的是值；

var a = 10;var b = a;console.log(a, b); //10 10b = 20;console.log(a, b); //10 20

（2）引用傳遞： 在拷貝的時候，拷貝的是指針（內存地址）；

var obj1 = {"name":"admin"}; var obj2 = obj1; console.log(obj1, obj2);//{name: "admin"} {name: "admin"}obj2.name = "hxl"; console.log(obj1, obj2);//{name: "hxl"} {name: "hxl"}

（3）對象的深淺拷貝

• 淺拷貝（直接復制，數組和對象）： 只拷貝內存地址，當修改拷貝之后的數據時，會影響原數據；引用傳遞
  對象本身是引用傳遞，淺拷貝。
• 深拷貝： 不拷貝內存地址，只拷貝值，當修改拷貝之后的數據時，不會影響原數據。值傳遞

（4）淺拷貝 轉換為 深拷貝：（常使用深拷貝）
① 整個賦值：

var obj1 = {"name":"hxl"};var obj2 = obj1;obj2 = {"name":"zjx"};console.log(obj1);//{name: "hxl"}console.log(obj2);//{name: "zjx"}//或者 相比上面的方法，建議var obj1 = {"name":"hxl"};var obj2 = {}; //給自己一個存儲空間obj2.name = obj1.name;obj2.name = "root";console.log(obj1); //{name: "hxl"}console.log(obj2); //{name: "root"}

② 當對象有多個屬性和屬性值時：

var obj1 = {name:"admin",age:18}; var obj2 = {}; for(var i in obj1){obj2[i] = obj1[i]; } obj2.name = "root"; console.log(obj1); //{name: "admin", age: 18} console.log(obj2); //{name: "root", age: 18}

③ 當對象有多個屬性和屬性值時，屬性值又是對象：

使用JSON.stringify將數據轉換成字符，再用JSON.parse轉換成對象。

this.labelListData = JSON.parse(JSON.stringify(this.editLabelList));

• 這種情況在項目中會出現在——從接口獲取的數據同時賦值給兩個變量,改變其中一個變量時，另一個變量的值也會改變。

7. 基礎類型和引用類型

基礎類型都是值傳遞，引用類型都是引用傳遞。

（1）值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol（ES6 引入了一種新的原始數據類型，表示獨一無二的值）。

（2）引用數據類型：對象(Object)、數組(Array)、函數(Function)。

---

三、this

this 是一個指針、變量、對象。表示當前函數所在的執行上下文空間（即當前的執行環境）；

面向對象語言中 this 表示當前對象的一個引用，但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。

• this 指向問題：
  （1）在 js 中，全局的變量和函數，全部屬于 window，this 指向 window。
  （2）在方法中，this 表示該方法所屬的對象。
  （3）在函數中，this 會指向 window，但在嚴格模式下，函數中的 this 會指向 undefined；
  （4）在事件中，this 表示接收事件的元素，即接收事件的 HTML 元素。

1. 在 js 中，全局的變量和函數，全部屬于 window。

var a = this; console.log(a, window);

2. 在方法中，this 表示該方法所屬的對象。

在對象方法中， this 指向調用它所在方法的對象。

//this 表示 person 對象。fullName方法所屬的對象就是 person，this.firstName相當于person.firstName var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function() {return this.firstName + " " + this.lastName;} }; console.log( person.fullName() ); //John Doe

3. 在函數中：在函數中會生成一個區域，也叫做作用域；除此之外，在函數中還存在另外一個東西——this；

（1） 在函數中，函數的所屬者默認綁定到 this 上，在瀏覽器中，window 就是該全局對象。回調函數中的 this 也指向window。

• 普通函數

  function myFunction() {return this; } console.log(myFunction())

• 回調函數：回調函數就是把一個函數作為參數 傳遞給另一個函數。

  var obj = {name: "admin",show: function (fn) { console.log(this); //指向objfn();} } obj.show( function(){ //obj.show中的這個以函數為參數的函數就是“回調函數”console.log(this); //指向window })

  其實拆分出來，相當于：

  var obj = { name: "admin", show: function () { console.log(this); //指向objfunction fn(){conosle.log(this); //指向fn，fn屬于window}fn(); //window.fn(); } } obj.show();

（2）嚴格模式下函數是沒有綁定到 this 上，這時候 this 是 undefined。

function myFunction() {"user strict";return this; } console.log(myFunction()); //undefined

4. 在事件中，this 表示接收事件的元素。

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。

<button onclick="this.style.display='none'">點我后我就消失了 </button>

總結：

觀察一個函數或變量，看前面有沒有對象，如果有對象，那么就屬于這個對象，如果沒有就屬于window。

this 指向的必須是一個對象，如果不是對象，會強行當成 一個對象；

call() 和 apply() 方法可以將 this 引用到任何對象。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js笔记（二）数组、对象、this的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。