一、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字符串