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

时间:2024-07-26 10:05:44

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);