[Web 前端] 025 js 的对象、数组和数学对象

1. Javascript 对象

1.1 创建对象

1.1.1 使用原始的方式创建内置对象

var myObject = new Object();
myObject.name = "lijie";
myObject.age = 20;
myObject.say = function(){...}

1.1.2 直接创建自定义对象

var 对象名 = {属性名1: 属性值, 属性名2: 属性值2, ...}

1.1.3 使用自定义构造函数创建对象

function pen(name, color, price){
    // 1. 对象的 name 属性
    this.name = name;
    
    // 2. 对象的 color 属性
    this.color = color;
    
    // 3. 对象的 piece 属性
    this.price = price;
    
    // 4. 对象的 say 方法
    this.say = function(){};
}

var pen = new pen("铅笔", "红色", 20);
pen.say();

1.2 this 关键字

• this 单词本意即为这个
• 当对象调用某个方法时，方法中的 this 就代表着这个对象
• 类似 Python 中的 self

1.3 遍历

• for-in 语句可以遍历对象中的所有属性或数组中的所有元素

for(var i in window){
    document.write(i + "---" + window[i]);
}

1.4 关于类型

• 测试类型

// 1. global 对象的其中一个方法
typeof()

// 2. 查看当前对象的构造函数是谁
对象.constructor;

// 3. 数组推荐用这种方法，因为 typeof() 得到是 object
if(arr.constructor == Array){
    alert("数组");
}

2. Javascript 数组

• 数组就是一组数据的集合
• JS 中，数组里面的数据可以是不同类型的

2.1 定义数组的方法

// 1. 用对象的实例创建
var aList1 = new Array(1, 2, 3);

// 2. 直接量创建
var aList2 = [1, 2, 3, "abc"];

2.2 操作数组中数据的方法

2.2.1 获取数组的长度

• aList.length;

var aList = [1, 2, 3, 4];
alert(aList.length); // alert 4

2.2.2 用下标操作数组的某个数据

• aList[0];

var aList = [1, 2, 3, 4];
alert(aList[0]); // alert 1

2.2.3 在数组末尾增删成员

• push() 和 pop()

var aList = [1, 2, 3, 4];
aList.push(5);
alert(aList); // alert 1, 2, 3, 4, 5
aList.pop();
alert(aList); // alert 1, 2, 3, 4

2.2.4 在数组头部增删成员

• unshift() 和 shift()

var aList = [1, 2, 3, 4];
aList.unshift(5);
alert(aList); // alert 5, 1, 2, 3, 4
aList.shift();
alert(aList); // alert 1, 2, 3, 4

2.2.5 在数组中增加或删除成员

• splice()

var aList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

// 1. 若 splice() 只接受 1 个参数，表示删除该下标至末尾的所有元素，包括该下标
aList.splice(11);
console.log("1. aList =", aList);

// 2. 若 splice() 只接受 2 个参数，表示删除该两个下标间的所有元素，包括该下标
aList.splice(1, 3);
console.log("2. aList =", aList);

// 3. 若 splice() 只接受 3 个参数，前 2 个意思同上，第 3 个元素用来填补删除处
aList.splice(1, 3, 100);
console.log("3. aList =", aList);

// 4. 若 splice() 接受 3 个以上参数，前 3 个意思同上，第 4 个及之后的元素也用来填补删除处
aList.splice(1, 3, 101, 102, 103, 104);
console.log("4. aList =", aList);

• 运行结果

1. aList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
2. aList = [0, 4, 5, 6, 7, 8, 9, 10]
3. aList = [0, 100, 7, 8, 9, 10]
4. aList = [0, 101, 102, 103, 104, 9, 10]

2.3 多维数组

• 多维数组指的是数组的成员也是数组的数组

var aList = [[1, 2, 3], ['a', 'b', 'c']];
alert(aList[0][1]); // alert 2

3. Javascript 数学对象

3.1 Math

// 1. 四舍五入
var res1 =  Math.round(5.921);
var res2 =  Math.round(5.321);
console.log("res1 =", res1);
console.log("res2 =", res2);


// 2.1 获取最大值
var res3 =  Math.max(10, 20, 30, 41, 52, 14, 28, 39);
console.log("res3 =", res3);

// 2.2 获取最小值
var res4 =  Math.min(10, 20, 30, 41, 52, 14, 28, 39);
console.log("res4 =", res4);


// 3. 获取绝对值
var res5 = Math.abs(-100);
console.log("res5 =", res5);


// 4.1 退一取整（向下取整）
var res6 = Math.floor(1.1);
var res7 = Math.floor(1.9);
console.log("res6 =", res6);
console.log("res7 =", res7);

// 4.2 进一取整（向上取整）
var res8 = Math.ceil(1.1);
var res9 = Math.ceil(1.9);
console.log("res8 =", res8);
console.log("res9 =", res9);


// 5. 幂运算
var res10 = Math.pow(2, 3);
console.log("res10 =", res10);


// 6. 开方运算
var res11 = Math.sqrt(9);
console.log("res11 =", res11);

• 运行结果

res1 = 6
res2 = 5
res3 = 52
res4 = 10
res5 = 100
res6 = 1
res7 = 1
res8 = 2
res9 = 2
res10 = 8
res11 = 3

3.2 random()

• 获取一个随机数，返回 (0-1] 之间的随机小数
• 从概率论的角度，可能取到 1，但取到的概率为 0

// 手动封装函数
function rand(m, n){
    return Math.floor(Math.random() * (n-m+1)) + m; // m 写到 floor() 中也行
}
var res = rand(20, 30);