一、Array
（1）语法
// 创建数组 let arr = [1,2,3]; // 获取数组元素 console.log(arr[0]); // 输出 1 // 修改数组元素 array[0] = 5; // 数组元素变成了 [5,2,3] // 遍历数组元素，其中 length 是数组属性，代表数组长度 for(let i = 0; i < arr.length; i++) { console.log(arr[i]); }
（2）API
● push、shift、splice
let arr = [1,2,3]; arr.push(4); // 向数组尾部(右侧)添加元素, 结果 [1,2,3,4] arr.shift(); // 从数组头部(左侧)移除元素, 结果 [2,3,4] arr.splice(1,1); // 删除【参数1】索引位置的【参数2】个元素，结果 [2,4]
● join
let arr = ['a','b','c']; arr.join(); // 默认使用【,】作为连接符，结果 'a,b,c' arr.join(''); // 结果 'abc' arr.join('-'); // 结果 'a-b-c'
● map、filter、forEach
let arr = [1,2,3,6]; function a(i) { // 代表的新旧元素之间的变换规则 return i * 10 } // arr.map(a) // 具名函数，结果 [10,20,30,60] // arr.map( (i) => {return i * 10} ); // 箭头函数 arr.map( i => i * 10 ); // 箭头函数
● 传给msp的函数，参数代表旧元素，返回值代表新元素
map的内部实现（伪代码）
function map(a) { // 参数是一个函数 let narr = []; for(let i = 0; i < arr.length; i++) { let o = arr[i]; // 旧元素 let n = a(o); // 新元素 narr.push(n); } return narr; }
filter例子：
let arr = [1,2,3,6]; arr.filter( (i)=> i % 2 == 1 ); // 结果 [1,3]
● 传给filter的函数，参数代表旧元素，返回true表示要留下的元素
forEach例子：
let arr = [1,2,3,6]; /*for(let i = 0; i < arr.length; i++) { console.log(arr[i]); }*/ arr.forEach( (i) => console.log(i) );
两个称呼：
- 高阶函数，map，filter，forEach
- 回调函数，例如作为参数传入的函数
二、Object
（1）语法
let obj = { 属性名: 值, 方法名: 函数, get 属性名() {}, set 属性名(新值) {} }
例子1：
let stu1 = { name: "小明", age: 18, study: function(){ console.log(this.name + "爱学习"); } }
例子2：
let name = "小黑"; let age = 20; let study = function(){ console.log(this.name + "爱学习"); } let stu2 = { name, age, study }
例子3（重点）：
let stu3 = { name: "小白", age: 18, study(){ console.log(this.name + "爱学习"); } }
注意：对象方法这么写，仅限于对象内部
例子4：
let stu4 = { _name: null, /*类似于java中私有成员变量*/ get name() { console.log("进入了get"); return this._name; }, set name(name) { console.log("进入了set"); this._name = name; } }
调用get,set
stu4.name = "小白" console.log(stu4.name)
（2）特色：属性增删
对比一下 Java 中的 Object
- Java 的 Object 是以类作为模板来创建，对象不能脱离类模板的范围，一个对象的属性、能用的方法都是确定好的
- js 的对象，不需要什么模板，它的属性和方法可以随时加减
let stu = {name:'张三'}; stu.age = 18; // 添加属性 delete stu.age; // 删除属性 stu.study = function() { // 添加方法 console.log(this.name + "在学习"); }
添加get,set，需要借助Object.definePropery
let stu = {_name:null}; Object.defineProperty(stu, "name", { get(){ return this._name; }, set(name){ this._name = name; } });
- 参数1：目标对象
- 参数2：属性名
- 参数3：get，set 的定义
（3）特色：this
java中的this理解：
public class TestMethod { static class Student { private String name; public Student(String name) { this.name = name; } public void study(Student this, String subject) { System.out.println(this.name + "在学习 " + subject); } } public static void main(String[] args) { Student stu = new Student("小明"); // 下面的代码，本质上是执行 study(stu, "java")，因此 this 就是 stu stu.study("java"); } }
- Java 中的 this 是个隐式参数
- Java 中，我们说 this 代表的就是调用方法的那个对象
js中也是隐式参数，但它与函数运行时上下文相关
例如，一个“落单”的函数
function study(subject) { console.log(this.name + "在学习 " + subject) }
测试一下：
study("js"); // 输出 在学习 js
这是因为此时函数执行，全局对象 window 被当作了 this，window 对象的 name 属性是空串
同样的函数，如果作为对象的方法
let stu = { name:"小白", study }
这种情况下，会被当前对象作为this
stu.study('js'); // 输出 小白在学习 js
还可以动态改变this
let stu = {name:"小黑"}; study.call(stu, "js"); // 输出 小黑在学习 js
这回 study 执行时，就把 call 的第一个参数 stu 作为 this
一个例外是，在箭头函数内出现的this，以外层this理解
用匿名函数
let stu = { name: "小花", friends: ["小白","小黑","小明"], play() { this.friends.forEach(function(e){ console.log(this.name + "与" + e + "在玩耍"); }); } } stu.play()
- this.name 所在的函数是【落单】的函数，因此 this 代表 window
输出结果为
与小白在玩耍 与小黑在玩耍 与小明在玩耍
用箭头函数
let stu = { name: "小花", friends: ["小白","小黑","小明"], play() { this.friends.forEach(e => { console.log(this.name + "与" + e + "在玩耍"); }) } }
- this.name 所在的函数是箭头函数，因此 this 要看它外层的 play 函数，play 又是属于 stu 的方法，因此 this 代表 stu 对象
输出结果是：
小花与小白在玩耍 小花与小黑在玩耍 小花与小明在玩耍
不用箭头函数的做法：
let stu = { name: "小花", friends: ["小白","小黑","小明"], play() { let me = this; this.friends.forEach(function(e){ console.log(me.name + "与" + e + "在玩耍"); }); } }
（4）特色：原型继承
let father = { f1: '父属性', m1: function() { console.log("父方法"); } } let son = Object.create(father); console.log(son.f1); // 打印 父属性 son.m1(); // 打印 父方法
- father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找
- son 自己可以添加自己的属性和方法
- son 里有特殊属性 __proto__ 代表它的父对象，js 术语： son 的原型对象
- 不同浏览器对打印 son 的 __proto__ 属性时显示不同
Edge 打印 console.dir(son) 显示 [[Prototype]]
Firefox 打印 console.dir(son) 显示 <prototype>
（5）特色：基于函数的原型继承
出于方便的原因，js又提供了一种基于函数的原型继承
函数的职责
- 负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法
- 函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象
注意！名字有差异，这个属性的作用就是为新对象提供原型
function cons(f2) { // 创建子对象(this), 给子对象提供属性和方法 this.f2 = f2; this.m2 = function () { console.log("子方法"); } } // cons.prototype 就是父对象 cons.prototype.f1 = "父属性"; cons.prototype.m1 = function() { console.log("父方法"); }
配合new关键字，创建子对象
let son = new cons("子属性")
子对象的 __proto__ 就是函数的 prototype 属性
（6）JSON
json的数据格式看起来与js对象非常相似，例如：
json对象：
{ "name":"张三", "age":18 }
js对象：
{ name:"张三", age:18 }
它们的区别是：
- 本质不同
json 对象本质上是个字符串，它的职责是作为客户端和服务器之间传递数据的一种格式，它的属性只是样子货
js 对象是切切实实的对象，可以有属性方法
- 语法细节不同
json 中只能有 null、true|false、数字、字符串（只有双引号）、对象、数组
json 中不能有除以上的其它 js 对象的特性，如方法等
json 中的属性必须用双引号引起来
json字符串与js对象的转换：
JSON.parse(json字符串); // 返回js对象 JSON.stringify(js对象); // 返回json字符串
