对象

---

前言

开始学习对象，以及对象的一些相关知识。

---

一、对象

1.对象的概念

JavaScript中的对象其实就是生活中对象的一个抽象。JavaScript的对象是无序属性的集合。
其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript 中的对象想象成键值对，其中值可以是数据和函数。

2.对象字面量

创建一个对象最简单的方式是使用对象字面量赋值给变量。类似数组。对象字面量语法:{}
内部可以存放多条数据，数据与数据之间用逗号分隔，最后一个后面不要加逗号。每条数据都是有属性名和属性值组成，键值对写法:k: v
属性:对象的描述性特征，一般是名词，相当于定义在对象内部的变量。
方法:对象的行为和功能，一般是动词，定义在对象中的函数。

//使用字面量创建一个对象
var person1 = {
    name : "gd",
    age : 22,
    sayHi : function() {
        console.log("你好");
    }
}

3.对象数据的调用和更改

//使用字面量创建一个对象
var person1 = {
    name : "gd",
    age : 22,
    sayHi : function() {
        console.log(this.name + "你好");
    }
}
//调用对象
console.log(person1.name);
console.log(person1.age);
person1.sayHi();
//使用中括号调用
console.log(person1['name']);
console.log(person1['age']);
person1["sayHi"]();

//更改
person1.age = 23;

//添加一条属性
person1.sex = "male";

//删除一条属性
delete person1.sex;
console.log(person1);

4.遍历对象方法

for in循环也是循环的一种，专门用来遍历对象，内部会定义一个k变量，k变量在每次循环时会从第一个开始接收属性名，一直接收到最后一条属性名，执行完后跳出循环。

//使用字面量创建一个对象
    var person1 = {
    name : "gd",
    age : 22,
    sayHi : function() {
        console.log(this.name + "你好");
    }
}
//for in 遍历对象
for (var k in person1) {
    console.log(k + person1[k]);
}

二、其他创建对象的方式

1.new Object创建对象

1.构造函数用于创建一类对象，首字母要大写。
2．构造函数要和new一起使用才有意义。

//new Object方式创建对象
var person1 = new Object;
person1.name = "gd";
person1.age = 22;
person1.sayHi = function () {
    console.log("你好");
};
console.log(person1);

2.工厂函数创建对象

代码如下（示例）：

//工厂方法就相当于对new Object（）方法进行封装
function createPerson(name,age,sex) {
    //创建一个空对象
    var person = new Object();
    person.name = name;
    person.age = age;
    person.sex = sex;
    person.sayHi = function () {
        console.log("你好");
    }
    //将对象作为函数的返回值
    return person;
}
//创建对象可以用工厂函数
var p1 = createPerson("gd",22,"false");
var p2 = createPerson("scx",23,"true");

console.log(p1);
console.log(p2);

3.自定义构造函数

自定义一个创建具体对象的构造函数，函数内部不需要new一个构造函数的过程,直接使用this代替对象进行属性和方法的书写，也不需要return 一个返回值。
使用时，利用new关键字调用自定义的构造函数即可。
注意:构造函数的函数名首字母需要大写，区别于其他普通函数名。
代码如下（示例）：

//自定义一个构造函数
function Person(name,age,sex) {
    //不需要创建一个新对象
    //用this来替代创建的新对象
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function () {
        console.log("你好");
    }
}
//用new关键字调用构造的函数
var p1 = new Person("gd",22,"famale");
console.log(p1);

三、简单和复杂数据类型

简单数据类型又叫做基本类型，也叫作值类型。
复杂数据类型又叫做引用数据类型。
值类型:简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。
引用类型:复杂数据类型，在存储时，变量中存储的仅仅是地址（引用)，因此叫做引用数据类型。

1.简单数据类型在内存中的存储

变量中如果存储的是简单类型的数据，那么变量中存储的是值本身，如果将变量赋值给另一个变量，是将内部的值复制一份给了另一个变量，两个变量之间没有联系，一个变化，另一个不会同时变化。

var a = 5;
var b = a;
a = 10;
console.log(a);
console.log(b);

2.复杂数据类型在内存中的存储

如果将复杂类型的数据赋值给一个变量，复杂类型的数据会在内存中创建一个原型，而变量中存储的是指向对象的一个地址，如果将变量赋值给另一个变量，相当于将地址复制一份给了新的变量，两个变量的地址相同，指向的是同一个原型，不论通过哪个地址更改了原型，都是在原型上发生的更改，两个变量下次访问时，都会发生变化。

//复杂数据类型
var p = {
    name : "gd",
    age : 22,
    sex : "famale"
};
var p1 = p;
p.name = "scx";
console.log(p);
console.log(p1);

四、内置对象

JavaScript包含的三种对象：自定义对象、内置对象、浏览器对象。
内置对象的使用：需要知道对象中有哪些成员，有什么功能，直接使用。

1.MDN使用方法

Mozilla开发者网络(MDN)提供有关开放网络技术(Open Web)的信息，包括HTML、CSS和万维网及HTML5应用的API。
MDN
1.方法的功能
2.参数的意义和类型
3.返回值意义和类型
4.demo进行测试

//内置对象
// console.log(Math);
//通过查询手册进行学习
console.log(Math.random());
//使用MDN中的示例，快速使用代码
function getRandomArbitrary(min, max) {
     return Math.random() * (max - min) + min;
}
console.log(getRandomArbitrary(10,20));

2.Math对象

//一个半径为十的圆周长
console.log(2 * 10 * Math.PI);

//随机数
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
console.log(getRandomInt(1,20));

//四舍五入取整
console.log(Math.round(4.3));
console.log(Math.round(4.7));

//绝对值
console.log(Math.abs(-90));

//取最大值和最小值
console.log(Math.max(12,45,55,23,88,10,22));
console.log(Math.min(12,45,55,23,88,10,22));

//求几次方
console.log(Math.pow(3,4));

//求平方根
console.log(Math.sqrt(4));
console.log(Math.pow(4,1/2));

3.Array对象

（1）数组对象的创建

//字面量创建一个数组
// var arr = [1,2,3];

//数组也是对象，也可以通过构造函数生成
var arr1 = new Array();
var arr2 = new Array(1,2,3);
var arr3 = new Array("zs","ls","ww");
// console.log(arr1);
// console.log(arr2);
// console.log(arr3);

//检测数组的类型
console.log(typeof(arr1));
console.log(typeof(arr3));

var a = {};
//检测某个实例对象是否属于某个对象
console.log(arr1 instanceof Array);
console.log(arr2 instanceof Array);
console.log(a instanceof Function);

function fun() {
    console.log();
}
console.log(fun instanceof Function);

（2）数组收尾操作方法
push：在数组末尾添加一个或者多个元素，并返回数组操作后的长度。
pop：删除数组最后一项，并返回删除项
shift：删除数组第一项，并返回删除项
unshift：在数组开头添加一个或多个元素，并返回数组长度。

//字面量创建数组
var arr = [1,2,3,4];

//尾推:参数是随意的，可以有一个或者多个。
console.log(arr.push([5,6,7,8]));
console.log(arr);

//尾删:不需要传参数
console.log(arr.pop());
console.log(arr);

//首删:不需要传参数
console.log(arr.shift());
console.log(arr);

//首添：与push方法一样
//尾删:不需要传参数
console.log(arr.unshift(-1,0));
console.log(arr);

收尾操作方法案例：

//字面量创建数组
var arr =[1,2,3,4]
//将第一项删除添加到最后一项
arr.push(arr.shift());
console.log(arr);
arr.push(arr.shift());
console.log(arr);
arr.push(arr.shift());
console.log(arr);
arr.push(arr.shift());
console.log(arr);

（3）数组的合并和拆分
concat：将数组进行合并，参数可以为数组、数组的值、随意值，返回值为拼接后的数组。
slice：将数组进行拆分，参数为start、end位置（包含start但不包含end），参数值可可以是正数，也可以是负数。

//定义一个数组
var arr = [1,2,3,4,5,6,7,8,9,10];
//合并
//参数：数组，数组的变量，零散的值
//返回值：新拼接的数组
// var arr1 = arr.concat([5,6,7]);
// var arr1 = arr.concat(5,8);
// var ar = [10,11]
// var arr1 = arr.concat(ar);
// console.log(arr);
// console.log(arr1);

//拆分
//参数：start end（正或负值）
var arr2 = arr.slice(3,7);
console.log(arr2);
var arr3 = arr.slice(-7,-1);
console.log(arr3);

（4）数组的删除插入和替换
splice：通过不同的参数，可以实现数组的删除插入和替换。

//数组
var arr = [1,2,3,4,5,6,7,8,9,10];
//删除
// console.log(arr.splice(2,5));
// console.log(arr);

//插入
// console.log(arr.splice(2,0,"hello"));
// console.log(arr);

//替换
console.log(arr.splice(2,2,"hello"));
console.log(arr);
        

（5）数组的位置方法
indexOf：找到数组中某个元素出现的第一个位置
lastIndexOf:找到数组中的元素出现的最后一个位置

//数组
var arr = [1,2,3,4,5,6,7,8,9,10,4];

//从前往后查找，找到第一个元素
console.log(arr.indexOf(4));
//从前往后查找，找到最后一个
console.log(arr.lastIndexOf(4));

（6）数组的倒序和排序
reverse：倒序
sort：排序

//数组
var arr = [1,2,3,4,5,6,7,8,9,10];

//倒序 reverse
// arr.reverse;
// console.log(arr);

//排序
// arr.sort();
// console.log(arr);
arr.sort(function (a,b) {
    if (a < b) {
        return 1;
    } else if (a > b) {
        return -1;
    } else {
        return 0;
    }
});
console.log(arr);

（7）数组转字符串
除了toString转字符串之外，还可以用join转字符串。

//数组
var arr = [1,2,3,4,5,6,7,8,9,10];
//join转字符串
console.log(arr.join());
console.log(arr.join(" "));

（8）清空数组的三种方法

//数组
var arr = [1,2,3,4,5,6,7,8,9,10];

//清空数组的三种方法
// arr =[];
// arr.length = 0;
arr.splice(0,arr.length);
console.log(arr);

4.String对象

字符串是不可变的。由于字符串的不可变，在大量拼接字符串的时候会有效率问题。

//定义一个字符串
//特点：字符串是不可变的

//大量拼接字符串的时候，会有效率问题
var sum = "";
for (var i = 1;i<1000000;i++) {
    sum += i;
}
console.log(sum);

字符串的多种方法：

//定义一个字符串
var str = "这是一个普通的字符串，abc，   ￥%#";

//长度属性
console.log(str.length);

//返回指定下标位置的字符
console.log(str.charAt(6));

//返回指定字符串第一次出现的下标
console.log(str.indexOf("字"));

//字符串拼接
var str1 = str.concat("哈哈哈","普通");
console.log(str1);

//分割字符串成一个数组
var str2 = str.split("");
console.log(str2);

//字符串内容倒置
var str = str.split("").reverse().join("");
console.log(str);

//大小写转换
var lstr = str.toUpperCase();
var sstr = str.toLowerCase();
console.log(lstr);
console.log(sstr);

//提取字符串的某个部分，有三种方法
//slice从开始位置截取到一定的位置
var one = str.slice(3,7);
var one = str.slice(-7,-3);
var one = str.slice(-7);
console.log(one);

//substr从开始位置截取一定的长度
var two = str.substr(3,7);
var two = str.substr(-9,7);
var two = str.substr(-7);
console.log(two);

//substring都是整数，比较大小找到小的作为开始，大的作为结束
var three = str.substring(3,7);
var three = str.substring(7,3);
var three = str.substring(7);
console.log(three);

---

总结

这部分学的比较慢了，最近参加了教师资格证面试，耽误了前端的学习进度，进度是要追回来的，还是每天坚持学习前端。