zoukankan      html  css  js  c++  java

  • 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零基础通关必备教程
  • 相关阅读:
    SqlSession接口和Executor
    MySQL 存储表情字符
    Lisp学习--Windows下面的开发环境搭建
    使用反射+缓存+委托，实现一个不同对象之间同名同类型属性值的快速拷贝
    GIT团队合作探讨之一-保持工作同步的概念和实践
    关于IE8下media query兼容的解决方案探讨
    git下的团队合作模型及git基础知识汇集
    互联网环境下服务提供的模式
    web统计数据搜集及分析原理
    网站统计及移动应用数据统计相关术语知识详解
  • 原文地址：https://www.cnblogs.com/luckyzs/p/13548222.html
Copyright © 2011-2022 走看看