JS — 对象、数组、函数

对象

  • 英文名称:Object

  • 类似于C++中的map,python中的字典,由key:value对构成。

  • value可以是变量、数组、对象、函数等。

  • 函数定义中的this用来引用该函数的“拥有者”。

例如:
test.js中的内容为:

let person = { // 定义一个对象person
 name:'kitty', // 对象的元素可以是变量
 age:18,
 money:0,
 friends:['Alice', 'Bob', 'Lucy'], // 对象的元素可以是数组
 clothes:{ // 对象的元素可以是对象
 color:"pink",
 price: 100,
 },
 add_money:function(x){ // 对象的元素可以是函数
 this.money += x; // this:返回拥有这个函数的对象,这里指person
 }
}
function main(){
 console.log(person);
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
</body>

对象属性与函数的调用方式(访问对象的值的方式):

1. 点的方式,person.nameperson.add_money()

2. 中括号的方式,person["name"]person["add_money"]()

例如:
test.js中的内容为:

let person = { // 定义一个对象person
 name:'kitty', // 对象的元素可以是变量
 age:18,
 money:0,
 friends:['Alice', 'Bob', 'Lucy'], // 对象的元素可以是数组
 clothes:{ // 对象的元素可以是对象
 color:'pink',
 price: 100,
 },
 add_money:function(x){ // 对象的元素可以是函数
 this.money += x; // this:返回拥有这个函数的对象,这里指person
 }
}
function main(){
 // 1. 点的方式,类似于c++中的class类
 console.log(person.name, person.age, person.clothes); // kitty 18 {color:'pink',price: 100}
 // delete person.name; // 删除对象的属性
 
 console.log(person.money); // 0
 person.add_money(10); // 调用函数
 console.log(person.money); // 10
 // 2. 中括号的方式
 console.log(person["money"]); // 10
 person["add_money"](10); // 调用函数
 console.log(person["money"]); // 20
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
</body>

数组

  • 数组是一种特殊的对象,用中括号[ ]表示。

  • 类似于C++中的数组,但是数组中的元素类型可以不同。

  • 数组中的元素可以是变量、数组、对象、函数。

例如:
test.js中的内容为:

let a = [1, 2, "a", "kitty", [3, 4, 5]];
let b = [
 1, // 变量
 "kitty", // 变量
 ['a', 'b', 3], // 数组
 function () { // 函数
 console.log("Hello World");
 },
 { name: "kitty", age: 18 } // 对象
];
let c = []; // 定义一个空数组
let d = {}; // 定义一个空对象(没有任何成员的对象)
let main = function() {
 console.log(a);
 console.log(b);
 console.log(c);
 console.log(d);
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
</body>

访问数组中的元素:

  • 通过下标,从0开始访问。

例如:
test.js中的内容为:

let a = [1, 2, "a", "kitty", [3, 4, 5]];
let b = [
 1, // 变量
 "kitty", // 变量
 ['a', 'b', 3], // 数组
 function () { // 函数
 console.log("Hello World");
 return 0; // 如果不加这句话,执行函数后返回undefined
 },
 { name: "kitty", age: 18 } // 对象
];
let main = function() {
 console.log(b[0]); // 访问数组b[]的第0个元素,返回 1
 console.log(b[2][1]); // 返回 b
 console.log(b[3]); // 返回函数的定义: ƒ () { console.log("Hello World");return 0; }
 console.log(b[3]()); // 执行函数,返回 Hello World 0
 console.log(b[4].name) // 返回对象的元素,返回 kitty 
 // 或者 console.log(b[4]['name']);
 b[0] = function() { // 给b的第0个元素重新赋值为函数
 console.log("哈哈哈");
 }
 b[0](); // 执行函数b[0],返回 哈哈哈
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
</body>

数组的常用属性和函数:

  • 属性length:返回数组长度。注意length是属性,不是函数,因此调用的时候不要加()

  • 函数push():向数组末尾添加元素

  • 函数pop():删除数组末尾的元素

  • 函数splice(a, b):删除从a开始的b个元素

  • 函数sort():将整个数组从小到大排序

  • 自定义比较函数:array.sort(cmp),函数cmp输入两个需要比较的元素,返回一个实数,负数表示第一个参数小于第二个参数,0表示相等,正数表示大于。

test.js中的内容为:

let a = [5, 4, 1, 3, 2];
let b = [
 1, // 变量
 "kitty", // 变量
 ['a', 'b', 3], // 数组
 function () { // 函数
 console.log("Hello World");
 return 0; // 如果不加这句话,执行函数后返回undefined
 },
 { name: "kitty", age: 18 } // 对象
];
let main = function() {
 console.log(b.length); // 返回数组的长度,返回5
 b.push(5); // 在末尾添加新的元素
 console.log(b);
 b.pop(); // 删除最后一个元素
 console.log(b);
 a.sort(); // 排序(从小到大),返回[1, 2, 3, 4, 5]
 console.log(a);
 a.sort(function(a, b) { // 逆序(从大到小),返回[5, 4, 3, 2, 1]
 return b - a;
 })
 console.log(a);
 a.splice(1, 2); // 删除从下标1开始的2个元素,返回[5, 2, 1]
 console.log(a);
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
</body>

函数

  • 函数是用对象来实现的。

  • 函数与C++中的函数类似。


函数的定义方式:

例如:
test.js中的内容为:

// 第一种定义方式
function add(a, b) {
 return a + b;
}
let main = function() {
 console.log(add(3, 4));
}
export {
 main
}

test.js中的内容为:

// 第二种定义方式
let add = function(a, b) {
 return a + b;
}
let main = function() {
 console.log(add(3, 4));
}
export {
 main
}

test.js中的内容为:

// 第三种定义方式
let add = (a, b) => {
 return a + b;
}
let main = function() {
 console.log(add(3, 4));
}
export {
 main
}

test.html中的内容为:

<body>
 <script type="module">
 import {main} from "/test/test.js";
 main();
 </script>
</body>

返回值:

  • 如果未定义返回值,则返回undefined。

作者:kitty又困了原文地址:https://www.cnblogs.com/kitty-38/p/18677480

%s 个评论

要回复文章请先登录注册