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

相关文章