數組 & 對象 & 函數


數組

數組也是一個對象,不同的是對象用字符串作為屬性名,而數組用數字作為索引,數組的索引從0開始

創建數組:

//方式一:構造器,可以在創建數組時指定	Var arr = new Array(1,2,4,6,7);

//方式二:字面量(推薦),可以在創建數組時指定元素
	Var arr = [1,2,4,6,7];

區別:

 arr1 = new Array(10)   //創建長度為10的數組
 arr2 = [10]             //創建數組,數組只有一個元素10

添加元素

數組名[索引] = 值;
例:arr[0] = 10;

讀取元素

//數組名[索引]
arr[0];

數組角標從0開始,如果讀取不存在的值,不會報錯,而是返回undefined

數組的長度

arr.length

注意:

  • 數組索引從0 開始

  • 如果跳躍式添加元素,中間元素也存在,值為空

  • 數組長度可設定,設置過大自動填充,過小則會截取

  • 數組元素可以為任意數組類型,包括數組、對象和函數

向最后一個位置添加元素:

arr.push("")
//或
arr[arr.length] = 值;

JS數組常用方法

push() :向數組的末尾添加一個或多個元素,並返回新的長度。

unshift() :向數組的開頭添加一個或更多元素,並返回新的長度,其他 元素索引也會隨之更改

Var arr = [];
var result = arr.push("丸子","莉香");
console.log(arr); //"丸子,莉香"
console.log(result); //2

該方法會將新數組的長度作為返回值返回

pop()刪除並返回數組的最后一個元素

shift()刪除並返回數組的第一個元素

var result = arr.pop();
console.log(result); //莉香,即刪除的對象 
console.log(arr); //"丸子"

數組的遍歷

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

對象

在JavaScript中,對象是一組無序的相關屬性和方法的集合,所有的事物都是對象,例如字符串、數值、數組、函數等。

聲明

1、構造器

var obj = new Object();

2、字面量

聲明對象可直接添加屬性 (屬性名:屬性值)

//空對象
var obj1 = {}

//聲明帶屬性的對象
var obj = {
    name:"莉香",
    age:23,
    gender:"仙女"
}

字面量賦值用冒號

3、利用構造函數創建對象

function 構造函數名(形參1,形參2,形參3...) {
    this.屬性名1 = 參數1;
    this.屬性名2 = 參數2;
    this.屬性名3 = 參數3;
    this.方法名 = 函數體;
  }
// 工廠函數創建對象 這個把創建好的對象返回給函數調用處
function createPerson(name, age, job) {
    var person = new Object();
    person.name = name;
    person.age = age;
    person.job = job;
    person.sayHi = function(){
        console.log('Hello,everyBody');
    }
    return person;
}
var p1 = createPerson('張三', 22, 'actor');

注意:

  • 構造函數約定首字母大寫
  • 函數內的屬性和方法前面需要添加this,表示當前對象的屬性和方法
  • 構造函數中不需要retrun返回結果

new關鍵字的作用(面試題)

  • 在構造函數代碼開始執行之前,創建一個空對象;
  • 修改this的指向,把this指向創建出來的空對象;
  • 執行構造函數內的代碼,給這個新對象添加屬性和方法
  • 在函數完成之后,返回這個創建出來的新對象(所以構造函數里面不需要return)

添加/修改屬性

//對象.屬性名 = 屬性值;
var obj = new Object();
obj.name = "丸子";	//添加屬性
obj.gender = "男";

//對象['屬性']
obj['name'] = "莉香"  //修改屬性

js中屬性聲明和賦是同時進行的

獲取對象屬性:

對象.屬性名
console.log(obj.name); 

讀取對象中沒有的屬性不會報錯而是返回undefined

刪除對象的屬性:

delete 對象名.屬性名

使用特殊值作為屬性名

不能使用 . 的方式,需要使用另一種方式:

對象名["屬性名"] = 屬性值

注意:

  • 對象字面量的屬性名可以加引號也可以不加,建議不加
  • 屬性名和屬性值是鍵值對結構,多個鍵值對之間使用逗號隔開 ,最后一個鍵值對之后不要加逗號

遍歷

in運算符

檢查對象中是否含有指定屬性,有則返回true,沒有返回fasle

語法:屬性名 in 對象

console.log("name" in obj)     //true
//i為數組索引
for(let k in obj){
   console.log(obj[k])
}

of運算符

//item為數組中數據
for(let item in this.books){
    totalPrice += item.price * item.count
}

函數

「1. 函數的概念」
封裝了一段可被重復調用執行的代碼塊,通過函數可以實現大量代碼的重復使用。函數是一種數據類型。

函數的聲明

1、 通過function關鍵字定義函數 -- 命名函數

function 函數名() {
    //函數體代碼
}

注意:function 是聲明函數的關鍵字,必須小寫

2、通過函數表達式定義函數 -- 匿名函數

var fn = function() {};

//調用
fn();
//匿名函數使用的第2種方式--匿名函數自調用
  (function(){
    alert(123);
  })();

注意:

  • fn是變量名,不是函數名,只不過變量存儲的是函數
  • 函數表達式創建的函數可以通過 變量名(); 來調用
  • 函數聲明后調用才會執行函數體代碼

函數的參數

  • 形參:函數定義時候,傳遞的參數(實參值傳遞給形參,不用聲明的變量)
  • 實參:函數調用時候,傳遞的參數
  //帶參數的函數聲明
  function 函數名(形參1,形參2,形參3...) {
    //函數體
  }
  // 帶參數的函數調用
  函數名(實參1,實參2,實參3...);

「函數形參和實參數量不匹配時」

參數個數 說明
實參個數等於形參個數 輸出正確結果
實參個數多於形參個數 只取到形參的個數
實參個數小於形參 多的形參定義為undefined
function getSum(a, b, c) {
    return a + b + c;
}
// js中形參的默認值是undefined。
// 調用函數
var n = getSum(1, 2);// n = NaN
var n = getSum(1, 2, 3, 4); //1 + 2 +3 = 6

函數的返回值

返回值:函數調用整體代表的數據;函數執行完成后可以通過return語句將指定數據返回 。

// 聲明函數
function 函數名() {
    ...
    return 需要返回的值;
    // 1. 函數遇到return會停止執行,並返回指定的值
    // 1. 如果函數沒有return 返回的值是undefined
}
// 調用函數
函數名(); //此時調用函數就可以得到函數體內return的值

break & continue & return

  • break: 結束當前的循環體 (如for、while)
  • continue: 跳出本次循環,繼續執行下次循環
  • return: 不僅可以退出(函數體內)循環,還能夠返回return語句中的值,同時還可以結束當前的函數體內的代碼
function breakDown() {
    for (var i = 0; i < 10; i++) {
        if (i == 5) {
            return 1;
        }
        console.log(i);
    }
}
breakDown();	//1
  • return只能結束函數體內的代碼
  • 函數如果有return 則返回的是 return 后面的值
  • return d,a,b;返回的是b的值
  • 如果函數沒有 return語句,則返回undefined

arguments的使用

當不確定有多少個參數傳遞的時候,可以用 arguments 來獲取。arguments是當前函數的一個內置對象。所有函數都內置了一個 arguments 對象,arguments 對象中存儲了傳遞的所有實參。arguments展示形式是一個偽數組,因此可以進行遍歷。

偽數組具有以下特點:

  • 具有length屬性

  • 按索引方式存儲數據

  • 不具有數組的push,pop等方法

 function fn() {
    //arguments 里面存儲了所有傳遞過來的實參
    console.log(arguments);// [1,2,3...]
    console.log(arguments[1]); // 2
    console.log(arguments.length); // 3
    
    //我們可以按照數組的方式 遍歷argument  
  }
  fn(1, 2, 3);

例:

// 用偽數組 實現求最大值
 function getMax() {
    var max = arguments[0];
    for (var i = 1; i < arguments.length; i++) {
      if (arguments[i] > arguments[0]) {
        max = arguments[i];
      }
    }
    return max;
  }
  var result = getMax(1,3,77,5,85)
  colsole.log(result);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM