HTML 學習筆記 May 10，2017 js函數調用過程內存分析、js函數細節、js一維數組細節、二維數組轉置、js面向對象編程介紹、類（原型對象）和對象、類和對象細節、創建對象的幾種方式、this關鍵字詳解
var myvar = jiSuan('abc');
js 函數
var num1 = window.prompt('請輸入第一個 num');
var num2 = window.prompt('請輸入第二個 num');
var operator = window.prompt('請輸入運算符');
num1 = parseFloat(num1);
num2 = parseFloat(num2);
// 如何調用函數
document.write("res = " + jiSuan(num1,num2,operator));
//自定義函數
// 輸入兩個數,再輸入一個運算符
function jiSuan(num1,num2,operator) {
var res = 0;
if (operator == '+') {
res = num1 + num2;
} else if (operator == '-') {
res = num1 - num2;
} else if (operator == '*') {
res = num1 * num2;
} else {
res = num1 / num2;
}
return res; // 返回
}
var myvar = text('abc');
// 如果 text 函數沒有返回值,但是你又接收了,則返回 undifined ,如果有返回值,則是什么就返回什么.
function abc2 () {
// 在 js 中有一個 arguments ,可以訪問所有傳入值
// window.alert(arguments.length);
// 遍歷所有的參數
for (var i = 0;i<arguments.length;i++) {
window.alert(arguments[i]);
}
}
JS 中的數組，可以存放更種數值，不區分類型
// 老王的王八體重
var weights = [3,5,1,3.4,2,50];
var all_weight = 0;
var avg_weight = 0;
// 數組的遍歷
for (var i = 0;i<weights.length;i++) {
all_weight += weights[i];
}
avg_weight = all_weight/weights.length;
// 如果你想知道它的數據類型是什么
window.alert(avg_weight.constructor); // 可以打印出來它是什么數據類型 function Number() {[native code]}
document.writeln("總體重是" + all_weight + "平均體重是" + avg_weight.toFixed(2)); // toFixed(2) 就是保留兩位小數.
js 中的數組是引用傳值
數值傳值原理圖：
數組傳值原理圖：
var str = "hello world abc";
var arr = str.split(" "); // 用空格來分隔字符串成數組
window.alert(arr);
// 還可以使用 for in 進行循環
for (var key in arr) {
window.alert(key + "= " arr[key]);
}
// 二分查找
二分查找有個前提,該數組是有序的.如果不是有序的,就不能用二分查找
Math.floor((1+2)/2); // 這樣就是 1
// 二分排序
var arr = [1,4,6,8,90,800];
// 思路:找到數組的中間數(midVal),和你要查找的數(findVal) 進行比較,如果 midVal > findVal 則說明 findVal 在數組的左邊,就把該數組二分(就只在左邊查找)
function binarySearch(arr,findVal,leftIndex,rightIndex) {
// 防止無窮遞歸
if (leftIndex>rightIndex) {
// 提示找不到
document.writeln("找不到");
return;
}
// 找到中間這個值
var midIndex = Math.floor((leftIndex+rightIndex)/2);
var midVal = arr[midIndex];
// 比較
if (midVal>findVal) {
// 在左邊找
binarySearch(arr,findVal,leftIndex,midIndex-1);
} else if (midVal<findVal) {
// 在右面找
binarySearch(arr,findVal,midIndex+1,rightIndex);
} else {
document.writeln("找到 下標為"+midIndex);
return;
}
}
對二維數組進行轉置
var arr = [[2,4,6,8],[8,9,0,-1],[9,6,2,1]];
// 定義一個新的數組
var arr2 = [];
// 初始化,定下有多行
for (var i = 0;i<arr[0].length;i++) {
arr2[i] = [];
}
// 可以動態的添加數據
// 遍歷舊數組
for (var i = 0; i<arr.length;i++) {
for (var j = 0; j<arr[i].length;j++) {
arr2[j][i] = arr[i][j];
}
}
// 成功!遍歷 arr2 數組就是一個轉置數組
for (var i = 0; i<arr2.length;i++) {
for (var j = 0; j<arr2[i].length;j++) {
document.writeln(arr2[i][j] + " ");
}
document.write("
");
}
js 面向（基于）對象編程
js 中基于對象 == js 面向對象
js 中沒有類 class ，但是它取了一個新名字叫原型對象。因此，類等同于 原型對象。
// 這里就是一個 Cat 類
function Cat() {
}
//
Cat();// 如果這樣用，Cat()就是函數
var cat1 = new Cat();// 如果這樣用，就是 類
// 這時 cat1 就是一個對象(實例)
cat1.name = "小白";
cat1.age = 3;
cat1.color = "白色";
// js 中對象的屬性可以動態的添加
// 屬性沒有限制.
window.alert(cat1.name);
window.alert(cat1.age);
window.alert(cat1.color);
創建對象：
var 對象名=new 類名（）；
function Person(){}
var a = new Person();
window.alert(a.constructor); // a 對象實例的構造函數
window.alert(typeof a); // a 的類型是 object
var b = 123;
window.alert(b.constructor);
window.alert(typeof b); // b 的類型是 number
var c = "123";
window.alert(c.constructor);
window.alert(typeof c); // b 的類型是 string
// 如何判斷一個對象實例是不是 Person 類型
if (a instanceof Person) {
window.alert("a 是 Person");
}
// 也可以用這種方法 來判斷 a 是不是 Person 類型
if (a.constructor==Person) {
window.alert("a 是 Person");
}
var b = cat1;
b.name = "逗逗";
window.alert(b.age + "名字" + b.name + cat1.name); // 這里 a 和 b 的名字都變成了"逗逗"
調用私有屬性
function Person() {
var name="abc"; // 如果這樣去使用 name 這個屬性是私有的
var age=900;
this.name2 = "abc2"; // this.name2 表示 name2 這個屬性是公開的
this.show=function() { // 如果你一定要訪問私有屬性,則需要定義一個公開方法
window.alert(name + " " + age);
}
}
var p1 = new Person();
p1.show();
這個打印出來是 90
