JavaScript入门笔记4

作者: David_Rao | 来源:发表于2019-11-19 01:05 被阅读0次

写在前面

本文是我通过在网易云课堂上学习叶建华老师的撩课-零基础玩转JavaScript 视频教程，整理、精炼其配套笔记总结而来的。附上视频教程地址：

https://study.163.com/course/courseMain.htm?courseId=1005973001

以下是我的所有js入门笔记
JavaScript入门笔记1：https://www.jianshu.com/p/ab044eb35c56
JavaScript入门笔记2：https://www.jianshu.com/p/348805d50b77
JavaScript入门笔记3：https://www.jianshu.com/p/2146931d6706
JavaScript入门笔记4：https://www.jianshu.com/p/e95f00b53343
JavaScript入门笔记5：https://www.jianshu.com/p/97a241434881
JavaScript入门笔记6：https://www.jianshu.com/p/fc091ce8924e
JavaScript入门笔记7：https://www.jianshu.com/p/ea33bfb83da1

本章节内容
1、数组
---1.1、数组是什么
---1.2、创建数组的方式
---1.3、数组的存储方式
---1.4、数组的常用操作
2、对象
---2.1、类和对象
---2.2、JS中的对象
---2.3、JS中的对象分类
---2.4、创建对象的方式
---2.5、对象的属性
---2.6、对象的方法
---2.7、new关键字
---2.8、this关键字
---2.9、遍历对象的属性
---2.10、增加、删除、修改对象的属性
---2.11、基本类型和引用类型在堆栈中的表示

1、数组

1.1、数组是什么?

数组变量可以存放多个数据
数组是一种引用数据类型, 属于object

1.2、创建数组的方式

1.2.1、使用 Array 构造函数

// 创建一个空数组
var arr1 = new Array();
// 创建一个长度为30的数组
var arr2 = new Array(30);
// 创建一个包含3个字符串的数组
var arr3 = new Array("David", "Rao", "UJ");
// 创建一个包含3个数字的数组
var arr4 = new Array(10, 20, 30);

1.2.2、使用数组字面量

// 创建一个空数组
var arr5 = [];
// 创建一个长度为30的数组
var arr6 = [];
arr6.length = 30;
// 创建一个包含2个字符串的数组
var arr7 = ["David", "Rao", "UJ"];
// 创建一个包含3个数字的数组
var arr8 = [10, 20, 30];

1.3、数组的存储方式

var arr = [10, 20, 30];

数组元素10，20，30存储在内存的堆区中，数组名arr实际保存了这个堆区中的起始地址，这个用来保存地址的变量存储在内存的栈区中。

1.4、数组的常用操作

1.4.1、length

使用方法

var arr = [10, 20, 30];
// 获取数组长度
console.log(arr.length);  // 3
// 修改数组长度
arr.length = 5;
console.log(arr.length);  // 5
console.log(arr[4]);  // undefined
arr.length = 2;
console.log(arr.length);  // 2
console.log(arr[2]);  // undefined

1.4.2、获取数组中的元素。

数组中的指定元素 = 数组名[索引值];
下标越界返回undefined

var arr = [10, 20, 30];
console.log(arr[0]);  // 10
console.log(arr[3]);  // undefined

案例：过滤数组元素

var arr = [0, "刘备", 0, "关羽", 0, "张飞", 0];
var newArr = [];
for(var i = 0; i < arr.length; i++){
    if(arr[i] !== 0){
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);  // ["刘备", "关羽", "张飞"]

2、对象

2.1、类和对象

类是对象的模板，对象是类的具体实例

（1）类

描述一类事物，相当于“设计图纸”，如手机类，概括了手机都具有的特征。
JS中可以自定义类，同时也提供了一个默认的类叫做object(所有类的祖宗类，也叫超类)
JS中定义类是通过创建构造函数实现的

（2）对象

描述一个具体事物，相当于“成品”，如iPhone，华为手机，小米手机......，它们具有手机都具有的特征，也有属于自己不同的特征。
有自己的属性和方法

2.2、JS中的对象

除了5种基本的数据类型，其它数据类型全都属于对象Object

https://www.cnblogs.com/zhuyeshen/p/10997893.html

2.3、JS中的对象分类

2.3.1、内置对象

由ES标准中定义的对象，在任何的ES的实现中都可以使用
比如：String Number Boolean Function Object Math ....

例如String对象
https://www.w3school.com.cn/jsref/jsref_obj_string.asp

2.3.2、宿主对象

由JS的运行环境提供的对象，现在主要指由浏览器提供的对象
比如: BOM对象, DOM对象

2.3.3、自定义对象

我们自己创建的对象。下面介绍如何创建对象

2.4、创建对象的方式

2.4.1、字面量对象

var UJ = {
    //属性
    name: "David",
    age: 20,
    gender: "男",
    //方法
    eat: function (){
        console.log("I can eat.");
    }
};
console.log(UJ);
console.log(typeof UJ);  // object

2.4.2、new Object创建对象

var UJ = new Object();
UJ.name = "David";
UJ.age = 20;
UJ.gender = "男";
UJ.eat = function(){
    console.log("I can eat.");
}
console.log(UJ);
console.log(typeof UJ);  // object

2.4.3、工厂函数创建对象

function createPerson(name, age, gender) {
    var p = new Object();
    p.name = name;
    p.age = age;
    p.gender = gender;
    p.eat = function(){
        console.log("I can eat.");
    };
    return p;
}
var UJ = createPerson("David", 20, "男");
var Jenny = createPerson("Jenny", 19, "女");
console.log(UJ === Jenny);  //虽然是同一个“工厂”创造出来，但是不是同一个对象，故返回false

2.4.4、自定义构造函数 (即自定义类的创建)

推荐使用

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.eat = function(){
        console.log("I can eat.");
    }
}
var UJ = new Person("David", 20, "男");
var Jenny = new Person("Jenny", 19, "女");
console.log(UJ);
console.log(Jenny);

2.5、对象的属性

如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性。如果这个属性没有特别地放在某个对象中，默认是window对象的属性

var name = "David";
console.log(name);
console.log(window.name);

2.6、对象的方法

如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法。如果这个方法没有特别地放在某个对象中，默认是window对象的方法

function log() {
    console.log("I belong to window.");
}
console.log(log);
console.log(window.log);

2.7、new关键字

2.7.1、构造函数

构造函数是一种特殊的函数
构造函数用域创建一类对象，一般来说首字母大写
构造函数要和new一起使用才有意义
new关键字一般和构造函数一起配合使用
new的作用
（1）new先在内存中创建一个新的对象
（2）new会让this指向这个新对象
（3）执行构造函数，给这个新对象加属性和方法
（4）返回这个新对象

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.eat = function(){
        console.log("I can eat.");
    }
}
var P1 = new Person("P1", 20, "男");
var P2 = new Person("P2", 19, "女");
console.log(P1);
console.log(P2);

这幅图演示了上述代码在内存中的状态

2.8、this关键字

2.8.1、普通函数执行，内部this指向全局对象Window

function func() {
    console.log(this);
}
func();  // Window

"张三"不在特别的对象里，默认在window对象中，而普通函数内部this指向全局对象window，所以this.str就是“张三”

var str = "张三";
function func() {
    console.log(this);  // Window
    console.log(this.str);  // 张三
}
func();

2.8.2、this指向所在对象

如果函数作为一个对象的方法，被该对象所调用，那么函数内的this则指向该对象

var obj = {
    name: "David",
    func: function() {
        console.log(this);  // 返回自身
        console.log(this.name);  // David
    }
};
obj.func();

2.8.3、构造函数中的this是一个隐式对象

构造函数中的this是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化

function Fn() {
    this.name = "David";
    this.age = 20;
    console.log(this);  // 返回构造函数本身
}
new Fn();

👆用new创建一个新对象，故函数Fn视为构造函数来调用
👇没有用new创建一个新对象，故函数Fn视为普通函数来调用，this默认指向window

function Fn() {
    this.name = "David";
    this.age = 20;
    console.log(this);  // Window
}
Fn();

2.9、遍历对象的属性

'name', 'age', 'gender'不加单引号(双引号)都可，但是索引中一定要加引号

var UJ = {
    'name': 'David',
    'age': 20,
    'gender': '男',
    'eat': function() {
        console.log("I can eat");
    }
};
//访问对象的属性
console.log(UJ.name);  // David
console.log(UJ['name']);  // David
//遍历对象属性
for (var key in UJ){
    console.log(key);  // name  age  gender
    console.log(UJ[key]);  // David  20  男
}

2.10、增加、删除、修改对象的属性

var UJ = {
    'name': 'David',
    'age': 20,
    'gender': '男',
    'eat': function() {
        console.log("I can eat");
    }
};
// 增加friends属性
UJ.friends = ["C", "Java", "Python"];
console.log(UJ.friends);  // C  Java  Python
// 删除age属性
delete UJ.age;
console.log(UJ.age);  // undefined
// 修改gender属性
UJ.gender = "女";
console.log(UJ.gender);  // 女

2.11、基本类型和引用类型在堆栈中的表示

2.11.1、基本数据类型

基本类型又叫做值类型，在存储时，变量存储的是值本身，因此叫做值类型
String Number Boolean Null Undefined

2.11.2、引用数据类型

也叫复杂数据类型，变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
Object

2.11.3、区别

js中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储。值与值之间是独立存在的，修改一个变量不会影响其他的变量
对象是保存在堆内存中的，每创建一个新的对象，就会在堆内开辟一个新的空间，栈区中会有一个对应的变量保存对象的内存地址(对象的引用)，如果两个变量保存的是同一个对象(同一个地址)，它们对对象的操作会相互影响。

基本类型作为函数的参数

值传递

引用类型作为函数的参数

地址传递

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
function changeName(person) {
    person.name = "UJ";
}
var p = new Person("David", 20, "男");
changeName(p);
console.log(p.name);  // 对象传递给函数changeName处理，对象p的neme属性由原来的David改为了UJ

写在最后

如果您觉得文章对您有帮助，不要吝惜您的“点赞”呀！