3、JavaScript基础之属性和对象

一、JSON

• 我们先来简单了解一下json, 简单的例子：

    {
      "name": "zhangsan",
      "age": 18,
      "gender": "male"
    }  
    或者
    {
      "students": [
        { "firstName": "san", "lastName": "zhang" },
        { "firstName": "si", "lastName": "li" },
        { "firstName": "wu", "lastName": "wang" }
      ]
    }
  

• 特别需要注意的是：

  • JSON 是一种纯数据格式,它只包含属性，没有方法。
  • JSON 的属性必须通过双引号引起来。
  • JSON 要求两头有 {} 来使其合法。
  • 可以把 JavaScript 对象原原本本的写入 JSON 数据，比如：字符串，数字，数组，布尔还有其它的字面值对象。

二、常用内置对象介绍

• 什么是属性和方法？

  • 属性是与对象相关的值，也可以理解为特征。方法是能够在对象上执行的动作，也可以理解为行为。

  • 举个例子：一辆汽车就是现实生活中的对象，它的名字，它的颜色，它的价格等特征就是汽车对象的属性。它能够启动，驾驶，加速，刹车等行为就是汽车对象的方法。

Array 对象

• Array 对象的常用属性：length，获取数组的长度。
• concat() 方法用于连接两个或多个数组，并返回结果。语法为：

// arrayObject.concat(arrayX, arrayX, ..., arrayX);
var a = [1, 2, 3];
var b = [4, 5, 6];
var c = ["one", "two", "three"];
console.log(a.concat(b, c)); // 打印结果为：[1, 2, 3, 4, 5, 6, "one", "two", "three"]

• reverse() 方法，颠倒数组的顺序。比如：

var a = [1, 2, 3, 4];
a.reverse();
console.log(a); // a 数组变成：[4, 3, 2, 1]。

• slice() 方法，从某个已有的数组返回选定的元素。语法为：

// arrayObject.slice(start, end);
// strat 值是必需的，规定从何处开始选取
// end 值可选，规定从何处结束选取，如果没有设置，默认为从 start 开始选取到数组后面的所有元素

var a = [1, 2, 3, 4, 5, 6];
a.slice(2, 5); // 结果为[3, 4, 5]，另外需要注意的是该方法不会修改数组，只是返回一个子数组，a 数组还是 [1, 2, 3, 4, 5, 6]

• splice() 方法，删除或替换当前数组的某些项目

// arrayObject.splice(start, deleteCount, options);
// start 值是必需的，规定删除或替换项目的位置
// deleteCount 值是必需的，规定要删除的项目数量，如果设置为 0，则不会删除项目
// options 值是可选的，规定要替换的新项目
// 和 slice() 方法不同的是 splice() 方法会修改数组
var a = [1, 2, 3, 4, 5, 6];
a.splice(2, 2, "abc");
a; // 最终 a 数组变成了[1, 2, "abc", 5, 6]

• sort() 方法，将数组进行排序

// arrayObject.sort(sortby);
// sortby 是可选的，规定排序顺序，必需是函数。如果没有参数的话，将会按照字母顺序进行排序，更准确的说是按照字符编码（可自行百度了解）的顺序进行排序。如果想按照其他标准进行排序，则需要提供比较函数
<script>
    var arr1 = ["a", "z", "k", "w", "x"];
    document.write(arr1 + "<br />");
    document.write(arr1.sort()+ "<br />" + "<br />");

    var arr2 = [11,55,22,44,66,33];
    document.write(arr2 + "<br />");
    document.write(arr2.sort() + "<br />" + "<br />");

    var arr3 = [1,22,44,6,55,5,2,4,66];
    document.write(arr3 + "<br />");
    document.write(arr3.sort() + "<br />" + "<br />");

    function sortNum1(a, b){
        return a - b; // 从小到大排序
    }
    var arr4 = [1,22,44,6,55,5,2,4,66];
    document.write(arr4 + "<br />");
    document.write(arr4.sort(sortNum1) + "<br />" + "<br />");

    function sortNum2(a,b){
        return b - a; // 从大到小排序
    }`在这里插入代码片`
    var arr4 = [1,22,44,6,55,5,2,4,66];
    document.write(arr4 + "<br />");
    document.write(arr4.sort(sortNum2) + "<br />" + "<br />");
</script>

• join() 方法，将数组转换成字符串。（数组章节有详细介绍，这里不过多的赘述，下面的类似情况同样处理，大家看到这个方法，首先回想一下我们前面所学的知识，如有遗忘，再回去看一看加深记忆）。
• pop() 方法，删除并返回数组的最后一个元素。
• push() 方法，向数组的末尾添加一个或更多元素，并返回新的长度。
• shift() 方法，删除并返回数组的第一个元素。
• unshift() 方法，向数组的开头添加一个或更多元素，并返回新的长度。

String对象

• String 对象的常用属性：length，获取字符串的长度。
• String 对象的常用方法
• charAt() 方法，获取指定位置处字符

// stringObject.charAt(index);
// 字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串
var str = "Hello world!";
document.write(str.charAt(2));
// 以上代码输出为 l

• charCodeAt() 方法，获取指定位置处字符的 Unicode 编码

// stringObject.charCodeAt(index);
// 字符串中第一个字符的下标是 0。如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN
var str = "Hello world!";
document.write(str.charCodeAt(2));
// 以上代码输出为 l08

• concat() 方法，连接字符串，等效于 “+”，“+” 更常用。与数组中的 concat() 方法相似。
• slice() 方法，提取字符串的片断，并在新的字符串中返回被提取的部
• indexOf() 方法，检索字符串。
• toString() 方法，返回字符串。
• toLowerCase() 方法，把字符串转换为小写。
• toUpperCase() 方法，把字符串转换为大写。
• replace() 方法，替换字符串中的某部分。
• split() 方法，把字符串分割为字符串数组。

Date 对象

• Date()：返回当日的日期和时间（输出的是中国标准时间）。
• getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。
• getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。
• getMonth()：从 Date 对象返回月份 (0 ~ 11)。
• getFullYear()：从 Date 对象以四位数字返回年份。
• getHours()：返回 Date 对象的小时 (0 ~ 23)。
• getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。
• getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。
• getMilliseconds()：返回 Date 对象的毫秒(0 ~ 999)。

Math 对象

1. Math 对象的常用属性：

• E ：返回常数 e (2.718281828…)。
• LN2 ：返回 2 的自然对数 (ln 2)。
• LN10 ：返回 10 的自然对数 (ln 10)。
• LOG2E ：返回以 2 为底的 e 的对数 (log2e)。
• LOG10E ：返回以 10 为底的 e 的对数 (log10e)。
• PI ：返回 π（3.1415926535…)。
• SQRT1_2 ：返回 1/2 的平方根。
• SQRT2 ：返回 2 的平方根。

2. Math 对象的常用方法：

• abs(x) ：返回 x 的绝对值。
• round(x) ：返回 x 四舍五入后的值。
• sqrt(x) ：返回 x 的平方根。
• ceil(x) ：返回大于等于 x 的最小整数。
• floor(x) ：返回小于等于 x 的最大整数。
• sin(x) ：返回 x 的正弦。
• cos(x) ：返回 x 的余弦。
• tan(x) ：返回 x 的正切。
• acos(x) ：返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
• asin(x) ：返回 x 的反正弦值。
• atan(x) ：返回 x 的反正切值。
• exp(x) ：返回 e 的 x 次幂 (e^x)。
• pow(n, m) ：返回 n 的 m 次幂 (nm)。
• log(x) ：返回 x 的自然对数 (ln x)。
• max(a, b) ：返回 a, b 中较大的数。
• min(a, b) ：返回 a, b 中较小的数。
• random() ：返回大于 0 小于 1 的一个随机数。

三、创建对象和访问对象

通过对象字面量来创建

var student = {
  name: "zhangsan",
  age: 18,
  gender: "male",
  sayHi: function () {
    console.log("hi,my name is " + this.name);
  },
};

// 调用， 可以通过.什么的方法来访问
student.name;
student.age;
student.gender; // 调用对象的属性
student.sayHi(); // 调用对象的方法

通过 new Object() 创建对象

var student = new Object();
(student.name = "zhangsan"),
  (student.age = 18),
  (student.gender = "male"),
  (student.sayHi = function () {
    console.log("hi,my name is " + this.name);
  });

通过工厂函数创建对象

function createStudent(name, age, gender) {
  var student = new Object();
  student.name = name;
  student.age = age;
  student.gender = gender;
  student.sayHi = function () {
    console.log("hi,my name is " + this.name);
  };
  return student;
}
var s1 = createStudent("zhangsan", 18, "male");

自定义构造函数

function Student(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function () {
    console.log("hi,my name is " + this.name);
  };
}
var s1 = new Student("zhangsan", 18, "male");

new 关键字

• 构造函数，是一种特殊的函数。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与 new 运算符一起使用在创建对象的语句中。这里有需要特别注意的几点：
  • 构造函数用于创建一类对象，首字母要大写。
  • 内部使用 this 关键字给对象添加成员。
  • 使用 new 关键字调用对象构造函数。

this 详解

• 在 JavaScript 中，我们经常会使用到 this 关键字，那么 this 到底指向什么呢？这里有一个口诀：谁调用 this，它就是谁。大家也可以从前面的例子中细细体会一下。
  • 函数在定义的时候 this 是不确定的，只有在调用的时候才可以确定。
  • 一般函数直接执行，内部 this 指向全局 window。比如：

function test() {
  console.log(this);
}
test(); // window.test();

• 函数作为一个对象的方法，被该对象所调用，那么 this 指向的是该对象。
• 构造函数中的 this，始终是 new 的当前对象。

遍历对象的属性

• 通过 for…in 语句用于遍历数组或者对象的属性，对数组或者对象的属性进行循环操作。比如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>

  <body>
    <script>
      var student = {
        name: "zhangsan",
        age: 18,
        gender: "male",
      };
      for (var key in student) {
        console.log(key);
        console.log(student[key]);
      }
    </script>
  </body>
</html>

• key 是一个变量，这个变量中存储的是该对象的所有的属性的名字。

删除对象的属性

• 使用 delete 删除对象的属性。比如在控制台中输入以下代码：

var student = {
  name: "zhangsan",
  age: 18,
  gender: "male",
};
student.name; // zhangsan
delete student.name;
student.name; // undefined