數組
數組也是一個對象,不同的是對象用字符串作為屬性名,而數組用數字作為索引,數組的索引從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);