1.6对象
英文名称：Object。
类似于C++中的map，由key:value对构成。
value可以是变量、数组、对象、函数等。
函数定义中的this用来引用该函数的“拥有者”。
对象属性与函数的调用方式：
person.name、person.add_money() person["name"]、person["add_money"]()
例如：
index3.js
let person = {//key：value
name: "头发没了还会再长",
age: 18,
money: 0,
add_money: function (x) {
this.money += x;//this就是拥有add_money这个函数的对象
}
};
function main() {
console.log("person.name:" + person.name, "person.age:" + person.age, "person.money:" + person.money);
console.log("person[\"name\"]:" + person["name"]);
person.add_money(1);
console.log("person.money:" + person.money);
person["add_money"](2);
console.log("person[\"money\"]:" + person["money"]);
}
export {
main
}
.html
<script type="module">
import { main } from "/static/js/index3.js";
main();
</script>
控制台结果（F12）
1.7数组
数组是一种特殊的对象。
类似于C++中的数组，但是数组中的元素类型可以不同。
数组中的元素可以是变量、数组、对象、函数。
例如：
let a = [1, 2, "a", "yxc"];
let b = [
1, // 变量
"yxc", // 变量
['a', 'b', 3], // 数组
function () { // 函数
console.log("Hello World");
},
{ name: "yxc", age: 18 } // 对象
];
访问数组中的元素
通过下标。
例如：
a[0] = 1; // 访问数组a[]的第0个元素
console.log(a[0]);
数组的常用属性和函数
属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
函数push()：向数组末尾添加元素
函数pop()：删除数组末尾的元素
函数splice(a, b)：删除从a开始的b个元素
函数sort()：将整个数组从小到大排序
自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。
例如：
let a = [];
let b = [
1,
"头发没了还会再长",
['a', 'b', 'c'],
function () {
console.log("Hello world");
return 0;
},
{ name: "头发没了还会再长", age: 18 }
];
let main = function () {
console.log(typeof a);
console.log(b[0]);
console.log(b[1]);
console.log(b[2][0]);
console.log(b[3]());
console.log(b[4].name);
console.log(b[4]["age"]);
}
export {
main
}
控制台输出：
let a = [1, 3, 5, 2, 4];
let main = function () {
console.log(a.length);
a.push(6);
console.log(a);
a.pop();
console.log(a);
a.splice(6, 6);
console.log(a);
a.sort();
console.log(a);
a.sort(function (a, b) {
return b - a;
});
console.log(a);
}
export {
main
}
1.8函数
函数是用对象来实现的。
函数也C++中的函数类似。
定义方式
function add(a, b) {
return a + b;
}
let add = function (a, b) {
return a + b;
}
let add = (a, b) => {
return a + b;
}
返回值
如果未定义返回值，则返回undefined。
例如：
function add1(a, b){
return a+b;
}
let add2 = function(a, b){
return a+b;
}
let add3 = (a, b) =>{
return a+b;
}
let p = function(){
console.log("hellop");
}
let add = ()=>{
return ()=>{
console.log("helloadd");
};
};
let main = function () {
let c= add1(1,2);
console.log(c);
c=add2(1,4);
console.log(c);
c=add3(1,3);
console.log(c);
console.log(p());//因为没有返回值 所以会输出undefined
console.log(add()());//add()返回的是一个函数 再用()调用函数
}
export {
main
}
1.9类
与C++中的Class类似。但是不存在私有成员。
this指向类的实例。
定义
class Point {
constructor(x, y) { // 构造函数
this.x = x; // 成员变量
this.y = y;
this.init();
}
init() {
this.sum = this.x + this.y; // 成员变量可以在任意的成员函数中定义
}
toString() { // 成员函数
return '(' + this.x + ', ' + this.y + ')';
}
}
let p = new Point(3, 4);
console.log(p.toString());
继承
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 这里的super表示父类的构造函数
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
注意：
super这个关键字，既可以当作函数使用，也可以当作对象使用。- 作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
super作为对象时，指向父类的原型对象。
在子类的构造函数中，只有调用super之后，才可以使用this关键字。
- 成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态。
静态方法
在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类名来调用。例如：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
static print_class_name() {
console.log("Point");
}
}
let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name(); // 会报错
静态变量
所有的对象共享一个静态变量
在ES6中，只能通过class.propname定义和访问。例如：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
Point.cnt++;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Point.cnt = 0;//静态变量
let p = new Point(1, 2);
let q = new Point(3, 4);
console.log(Point.cnt);
静态变量和全局变量很像，但是静态变量是每个类的，可以避免出现重名。因为全局变量一个函数只能定义一个，但静态变量每个类都可以有一个，变量可以重名。
