JavaScript(对象)

一、概念

在JavaScrrpt中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象。

对象是一个具体的事物。实实在在看的见，摸得着。

对象是由属性和方法组成

• 属性：事物的特征，在对象中用属性来表示(常用名词)
• 方法：事物的行为，在对象中用方法来表示(常用名词)

为什么需要对象？

保存一个值时，可以使用变量。保存多个值(一组值)时，可以使用数组。

利用对象表达结构更清晰，更强大。

二、创建对象

三种方式创建对象(Object)

1、利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达找个具体事物(对象)的属性和方法。

/* 利用字面量创建对象 */
var obj = {}; // 创建一个空对象
var obj1 = {
    uname:'小明',
    age:18,
    sex:'男',
    sayHi:function(){
        console.log('Hi~')
    }
}

// (1) 里面的属性或方法采用键值对的形式。key:value
// (2) 多个属性或者方法中间用逗号分隔
// (3) 方法冒号后面跟的是一个匿名函数

/* 使用对象 */
// (1) 调用对象的属性
console.log(obj1.uname)
// (2) 调用对象的属性
console.log(obj1['uname'])
// (3) 调用对象的方法
obj1.sayHi()

2、new创建对象

var obj = new Object() // 创建一个空对象
obj.uname='小明';
obj.age:18;
obj.sex:'男';
obj.sayHi = function(){
    console.log('Hi~')
}

// (1)利用等号赋值，添加对象的属性和方法
// (2) 每个属性和方法之间，用分号结束

3、利用构造函数创建对象

因为前边的两种方式，一次只能创建一个对象。

但是有很多对象的属性和方法都是大量相同的的，我们可以利用函数的方法，重复这些相同的代码。

又因为这个函数封装的不是普通代码，而是对象，我们称这种函数为构造函数。

// 结构
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function (){}
}

// 调用
new 构造函数名();

/* 案例 */

// 构建四大天王
function Star(uname,age,sex){
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        console.log(sang)
    }
}
// 调用
var ldh = new Star('刘德华',18,'男'); // 返回一个对象
console.log(ldh.age) // 18
ldh.sing('冰雨')
var zxy = new Star('张学友',9,'男'); // 返回一个对象
console.log(zxy.age) // 19

/* 注意 */
// (1) 构造函数名 首字母大写 Star
// (2) 构造函数不需要 return 就可以返回结果
// (3) 构造函数 需要使用 new
// (4) 调用 new Star() 就可以创建一个对象
// (5) 属性和方法前边必须添加 this

4、构造函数和创建对象区别

• 创建对象
  • 特指某一个具体事物
  • 通过new关键字创建对象的过程称为对象实例化
• 构造函数
  • 泛指某一大类
  • 抽取了对象的公共部分，封装到函数里

5、new关键字执行过程

• new构造函数可以在内存中创建了一个空的对象
• this就会指向刚才创建的空对象
• 执行构造函数中的代码，为空对象添加属性和方法
• 返回对象(所以不用return返回)

6、变量和属性

• 相同点
  • 都是用来存储数据
• 不同点
  • 变量
    • 单独声明并赋值
    • 使用时，直接写变量名
    • 单独存在
  • 属性
    • 在对象中，不需要声明
    • 使用时，对象名.属性名 或 对象名['属性名']
    • 寄托在对象中

7、函数和方法

• 相同点

  • 都是实现某些功能，通俗说，做某件事

• 不同点

  • 函数
    • 单独声明
    • 调用：函数名()
    • 单独存在
  • 方法
    • 寄托在对象中
    • 调用时，对象名.方法名()

8、遍历对象(for...in...)

// for in 遍历对象
for (变量 in 对象)

var obj = {
    name:'小明',
    age:18,
    sex:'男'
}

for(var k in obj){
    console.log(k); // 得到 属性名(key)
    console.log(obj[k]); // 得到 属性值(value)
}

三、内置对象

• 对象分类
  • 自定义对象(ECMAScript)
  • 内置对象(ECMAScript)：JS语言自带的对象，供开发者使用，提供基础API
  • 浏览器对象(JS独有)

1、查文档

• MDN

  • 查阅该方法的功能
  • 查看参数的意义和类型
  • 查看返回值的意义和类型
  • 通过demo测试

• W3C

2、Math对象

// Math数学对象，不是构造函数，不需要new来调用，直接使用即可

// 圆周率
console.log(Math.PI)

// 获取一组数的最大值
console.log(Math.max(1,99,3)) // 99
console.log(Math.max(-1,-99)) // -1
console.log(Math.max(1,99,'小明')) // NaN
console.log(Math.max()) // -Infinity(负无穷)

// 绝对值
console.log(Math.abs(1)) // 1
console.log(Math.abs(-1)) // 1
console.log(Math.abs('-1')) // 1(隐式转换，字符串转数字型)
console.log(Math.abs('小明')) // NaN

// 向下取整
console.log(Math.floor(1.1)) // 1
console.log(Math.floor(1.9)) // 1

// 向上取整
console.log(Math.ceil(1.1)) // 2
console.log(Math.ceil(1.9)) // 2

// 四舍五入 (.5 特殊，往大了取)
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.round(-1.1)) // -1
console.log(Math.round(-1.5)) // -1 (.5 特殊，往大了取。-1>-2)

// 随机数
// 返回一个随机的小数，[0-1) 之间
// 没有参数
console.log(Math.random())
// 得到一个两数之间的随机整数
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
console.log(getRandomArbitrary(1,10))

3、Date

// 构造函数,new调用

// 返回当前系统时间
var date = new Date();

// 日期格式化
let formatNowDatetime = (date) => {
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}

// 获取总的毫秒数(距离1970年过了多少毫秒)
new Date().valueOf()
new Date().getTime()
var date1 = +new Date()
// H5新增
Date.now()

4、数组对象

/* 检测是否为数组 */ 

// instanceof(运算符)
var arr = [];
console.log(arr instanceof Array)
// Array.isArray() // H5新增，IE9以上支持
console.log(Array.isArray(arr))

/* 添加数组元素 */

// push 
// 数组末尾添加一个或多个数组元素
// 直接写数组元素就可以
// 返回值是 新数组的长度
// 原数组发生变化
arr.push(1)
arr.push(2,'小明')

// unshift 
// 数组开头添加一个或多个数组元素
// 直接写数组元素就可以
// 返回值是 新数组的长度
// 原数组发生变化
arr.unshift('red')

/* 删除数组元素 */

// pop
// 删除数组的最后一个元素
// 没有参数
// 返回值 删除的元素
// 原数组发生变化
arr.pop()

// shift
// 删除数组的第一个元素
// 没有参数
// 返回值 删除的元素
// 原数组发生变化
arr.shift()

/* 反转数组 */
arr.reverse();

/* 冒泡排序 */
var arr1 = [3,4,7,1]
arr1.sort(function (a,b){
    return a - b; // 升序排列
})
arr1.sort(function (a,b){
    return b - a; // 降序排列
})

/* 获取数组索引 */

// indexOf *从前往后*
// 直返回第一个满足条件的索引号
// 如果没有该元素，返回 -1
arr.indexOf('red')

// lastIndexOf *从后往前*
// 直返回第一个满足条件的索引号
// 如果没有该元素，返回 -1
arr.lastIndexOf('red')

/* 数组转字符串 */

// toString()
var arr = [1,2,3]
console.log(arr.toString()) // 1,2,3

// join
console.log(arr.join('-')) // 1-2-3

5、字符串对象

5.1、基本包装类型

复杂数据类型才有属性和方法，字符串属于简单数据类型，为什么会有length类型？

基本包装类型：就是把简单属性类型，包装称为复杂数据类型

• String
• Number
• Boolean

var str = 'andy'
// (1) 把简单数据类型包装为复杂数据类型
var temp = new String('andy')
// (2) 把临时变量的值 给 str
str = temp;
// (3) 销毁临时变量
temp = null;

5.2、字符串不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

// charAt 根据位置返回字符
var str = 'andy'
console.log(str.charAt(3))

// 遍历所有字符
for(var i=0;i<str.length;i++){
    console.log(str.charAt(i))
}

// charCodeAt(index) 返回相应索引号的字符ASCII 目的：判断用户按下哪个键
console.log(str.charCodeAt(0)) // 97

// str[index] H5新增
console.log(str[0]) // a

/* 拼接字符串 */
// concat('字符串1','字符串2'...)

/* 截取字符串 */

// substr(start,length)
// 从start位置开始(索引号)，length取的个数

// slice(start,end)
// 从start位置开始，截取到end位置，end取不到(他们都是索引)

// substring(start,end)
// 从start位置开始，截取到end位置，end取不到
// 基本和slice相同，但是不接受负值

/* 替换字符串 */  
// replace('被替换的字符串','替换为字符串')
// 只替换第一个满足条件的字符

// 字符转换为数组 split('分隔符')

四、简单数据类型

1、简单数据类型

• 简单数据类型又称基本数据类型或者值类型
• 在存储时变量中存储的是值本身
• String/number/boolean/undefined/null
• 注意：null用typeof校验返回Object。如果打算储存对象，但还没想好放什么，可以暂定为null

2、复杂数据类型

• 复杂数据类型又称引用数据类型
• 在存储时变量存储的仅仅是地址(引用)
• 通过new创建的对象(系统对象、自定义对象)
• Object/Array/Date等

3、堆和栈

• 栈(操作系统)
  • 由操作系统自动分配释放存放函数的参数值、局部变量的值等
  • 其操作方式类似数据结构中的栈：简单数据类型存放在栈中
• 堆(操作系统)
  • 存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收
  • 复杂数据类型存放到堆里

4、简单数据类型传参

函数的形式也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

function fn(a){
    a++;
    console.log(a); // 11
}
var x = 10;
fn(x);
console.log(x) // 10

5、复杂数据类型传参

函数的形式也可以看作是一个变量，当我们把一个引用类型变量作为参数传给函数的形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参保存的是同一个堆地址，所以操作的是同一个对象。

function Person(name){
    this.name = name;
}
function fn1(x) {
    console.log(x.name) // 刘德华
    x.name = '张学友'	
    console.log(x.name)	// 张学友
}
var p = new Person('刘德华')
console.log(p.name) // 刘德华
fn1(p)
console.log(p.name) // 张学友

---

该内容学习自 传智播客JavaScript基础课程 javaScript零基础通关必备教程