javascript 对象

1. 对象

什么是对象 ？

 在 javascript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。对象是由属性和方法组成的。属性：事物的特征，在对象中用属性来表示 (常用名词)方法：事物的行为，在对象中用方法来表示 (常用动词)

2. 创建对象的三种方式

 在 javascript 中，现阶段我们可以采用三种方式创建对象 ( object ) ：--利用字面量创建对象--利用 new Object 创建对象--利用构造函数创建对象

(1). 利用字面量创建对象

 (1) 里面的属性或者方法我们采用键值对的形式 键 属性名 ：值 属性值(2) 多个属性或者方法中间用逗号隔开的(3) 方法冒号后面跟的是一个匿名函数

     // 利用字面量创建对象：var obj = {uname : '易', sex : '男',sayHi : function() {console.log('憨憨');}}// (1) 里面的属性或者方法我们采用键值对的形式 键 属性名 ：值 属性值// (2) 多个属性或者方法中间用逗号隔开的// (3) 方法冒号后面跟的是一个匿名函数

(2). 利用 new Object 创建对象

     // 利用 new Object 创建对象var obj1 = new Object();obj1.uname = '孙悟空';obj1.age = 18;obj1.sayHi = function() {console.log('憨憨');}// (1) 利用 等号 = 赋值的方法 添加对象的属性和方法// (2) 每个属性和方法之间用 分号结束console.log(obj1.age);console.log(obj1.sayHi());console.log(obj1['uname']);

(3). 利用构造函数创建对象

     // 构造函数function Star(name, age) {this.name = name;this.age = age;this.skills = function(skill) {console.log(skill);}}var ldh = new Star('刘德华', '18');console.log(ldh.name);console.log(ldh.sex);ldh.skills('憨憨');

(4). 使用对象

     // 使用对象// (1) 调用对象的属性 我们采取 对象名.属性名   . 我们理解为的 的console.log(obj.uname);// (2) 调用属性还有一种方法 ， 对象名['属性名']console.log(obj['sex']);// (3) 调用对象的方法 sayHi  对象名.方法名() 千万别忘记小括号obj.sayHi();

(5). 遍历对象

     // 遍历对象var obj = {name: '沙僧',age: 18,fn: function() {console.log('三师弟');}}for (var a in obj) {console.log(a); // a 变量 输出  得到的是属性名console.log(obj[a]); // obj[a] 得到的是 属性值}

(6). new 关键字

 new 在执行时会做四件事：1. 在内存中创建一个新的空对象。2. 让 this 指向这个对象。3. 执行构造函数里面的代码，给这个新对象添加属性和方法。4. 返回这个新对象 (所以构造函数不需要return) 。

(7). 判断对象是否有该属性

     // 有一个对象 来判断是否有该属性 对象['属性名']var  o = {age : 18}if (o['sex']) {console.log('里面有该属性');} else {console.log('里面没有该属性');}// 2. 遍历对象var max = 0;var ch = '';for (var k in 0) {// k 得到的是 属性名// o[k] 得到的是属性值if (o[k] > max) {max = o[k];ch = k;}}console.log(max);console.log('最多的字符是' + ch);

3. 查文挡MDN/W3C

 // 查文挡// MDN学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。Mozilla开发者网络 (MDN) 提供了有关开发网络技术 ( Open Web ) 的信息，包括HTML，CSS和万维网及HTML5应用的API。

4. Math对象

(1). 最大值和最小值

利用对象封装自己的数学对象 里面有PI最大值和最小值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 利用对象封装自己的数学对象 里面有PI最大值和最小值var myMath = {PI : 3.1415926,max : function() {var max = arguments[0]for (var i = 0; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;},min : function() {var min = arguments[0]for (var i = 0; i < arguments.length; i++) {if (min > arguments[i]) {min = arguments[i];}}return min;}}console.log(myMath.PI);console.log(myMath.max(1, 5, 6));console.log(myMath.min(2, 6, 9));</script>
</body>
</html>

(2). 随机数

 Math对象随机数方法 random() 返回一个随机的小数 0 <= x < 1

     // 随机数// 1. Math对象随机数方法 random() 返回一个随机的小数 0 <= x < 1,// 2. 这个方法里面不跟参数// 3. 代码例子;console.log(Math.random());// 4. 我们想要两个数之间的随机整数 并且 包含这两个整数var getRandom = function(min, max) {return Math.floor(Math.random()*(max - min +1)) + min;}console.log(getRandom(1, 6));

5. 日期对象

 获得Date总的毫秒数(时间戳) | 不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒数

     // 4. 日期对象// 获得Date总的毫秒数(时间戳) | 不是当前时间的毫秒数，而是距离1970年1月//1号过了多少毫秒数// 1. 通过 valueOf() getTime()var date = new Date();console.log(date.valueOf()); // 就是我们现在的时间 距离1970.1.1的毫秒数console.log(date.getTime()); // 时间// 2. 简单的写法 (最常用的写法)var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数console.log(date1);// 3. H5 新增的 获得总的毫秒数console.log(Date.now());// 获取时间戳// 倒计时效果// 1. 核心算法：输入的时间减去现在的时间，时间戳// 2. 把剩余时间总的毫秒数转换为天，时，分，秒// 转换公式如下：// d = parseInt(总秒数/60/60/24); // 计算天数// h = parseInt(总秒数/60/60%24); // 计算小时// m = parseInt(总秒数/60%60);    // 计算分钟// s = parseInt(总秒数%60);       // 计算秒数function conutDown(time) {var nowTime = +new Date(); // 返回当前时间的总毫秒数var inputTime = +new Date(time); // 计算用户输入的总的毫秒数var conutTime = ( inputTime - nowTime ) / 1000; // conutTime是剩余总秒数return conutTime;}console.log(conutDown('2021-3-16'));

6. 数组对象

(1). 检测是否为数组

 instanceof 运算符 它可以用来检测是否为数组

     // 数组对象// 检测是否为数组// (1) instanceof 运算符 它可以用来检测是否为数组var arr = [];var obj = {};console.log(arr instanceof Array);console.log(obj instanceof Array);// (2) Array.isArray(参数); H5新增的方法  ie9以上的版本支持console.log(Array.isArray(arr));console.log(Array.isArray(obj));

(2). 增加删除数组元素的方法

 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推2. unshift 在我们数组的开头 添加一个或者多个数组元素3. pop() 他可以删除数组的最后一个元素4. shift() 他可以删除数组的第一个元素


     // 增加删除数组元素的方法// 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推var arr = [1, 2, 3];// arr.push(4, '悟空');console.log(arr.push(4, '悟空'));console.log(arr);// (1) push 是可以给数组追加新的元素// (2) push() 参数直接写 数组元素就可以了// (3) push完毕之后，返回的是 新数组的长度// (4) 原数组也会发生变化// 2. unshift 在我们数组的开头 添加一个或者多个数组元素console.log(arr.unshift('red', 'pueple'));console.log(arr);// (1) unshift是可以给数组前面追加新的元素// (2) unshift() 参数直接写 数组元素 就可以了// (3) unshift完毕之后，返回的结果是 新数组的长度// (4) 原数组也会发生变化// 3. pop() 他可以删除数组的最后一个元素console.log(arr.pop());console.log(arr);// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素// (2) pop() 没有参数// (3) pop完毕之后，返回的结果是 删除的那个元素// (4) 原数组也会发生变化// 4. shift() 他可以删除数组的第一个元素console.log(arr.shift());console.log(arr);(1) shift() 是可以删除数组的第一个元素，一次只能删除一个(2) shift() 没有参数(3) shift完毕之后，返回的结果是 删除的那个元素(4) 原数组也会发生变化

(3). 数组排序

 sort方法可以使用函数表达式方便的书写,默认用首个字符进行比较


     // 数组排序// sort方法可以使用函数表达式方便的书写,默认用首个字符进行比较var numbers = [4, 2, 5, 1, 3];number.sort(function(a, b) {return a - b;});console.log(number);// 也可以写成：var numbers = [4, 2, 5, 1, 3];number.sort((a, b) => a-b);console.log(numbers);//[1, 2, 3, 4, 5]// 对象可以按照某个属性排序：var items = [{ name: 'Edwa', value: 21 },{ name: 'Sharpe', value: 37},{ name: 'And', value:45 },{ name: 'Magnetic' },{ name: 'Zeros', value:37 }];// sort by nameitems.sort(function(a, b){var nameA = a.name.toUpperCase(); // ignore upper and lowercasevar nameB = b.name.toUpperCase(); // 忽略大小写if (nameA < nameB) {return -1;}if (nameA > nameB) {return 1;}// names must be equalreturn 0;});

(4). 数组索引方法

     // 字符串对象 根据字符返回位置 str.indexOf('要查找的字符'，[起始的位置])var str = '憨憨';console.log(str.indexOf('春夏秋冬'));console.log(str.indexOf('春', 3)); //从索引号是 3的位置开始往后查找

(5). 数组转换为字符串

 数组转换为字符串1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串


     // 数组转换为字符串// 1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串// 2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串var str = [1, 2, 3, 4];console.log(str.join('&'));

7. 字符串对象

(1). 根据位置返回字符

 1. charAt(index) 根据位置返回字符2. charCodeAt(index) 返回响应字符号的字符ASCII值 目的：判断用户按下那个键3. str[index]  H5新增的


     // 根据位置返回字符// 1. charAt(index) 根据位置返回字符var str = 'andy';console.log(str.charAt(3));// 遍历所有的字符for (var i = 0; i < str.length; i++) {console.log(str.charAt(i));}// 2. charCodeAt(index) 返回响应字符号的字符ASCII值 目的：判断用户按下那个键console.log(str.charCodeAt(0)); // 97// 3. str[index]  H5新增的console.log(str[0]);

(2). 数组转换为字符串

 数组转换为字符串1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串


     // 数组转换为字符串// 1. toString() 把数组转换成字符串，逗号分隔每一项  返回一个字符串// 2. join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串var str = [1, 2, 3, 4];console.log(str.join('&'));

(4). 数组索引方法

     // 字符串对象 根据字符返回位置 str.indexOf('要查找的字符'，[起始的位置])var str = '憨憨';console.log(str.indexOf('春夏秋冬'));console.log(str.indexOf('春', 3)); //从索引号是 3的位置开始往后查找

(5). 字符串操作方法

 1. concat('字符串1', '字符串2'....)2. substr('截取的起始位置', '截取几个字符');3. slice(start, end) 从start位置开始，截取到end位置，end位置取不到(他们俩都是索引号)4. substring(start, end) 从start开始，截取到end位置，end取不到 基本和slice相同，但是不接受负值5. 替换字符 replace('被替换的字符'，'替换的字符')他只会替换一个字符6. 字符转换为数组 split('分隔符') join把数组转换为字符串7. toUpperCase()  转换大写8. toLowerCase()  转换小写



     // 字符串操作方法// 1. concat('字符串1', '字符串2'....)var str = 'andy';console.log(str.concat('red'));// 2. substr('截取的起始位置', '截取几个字符');var str1 = '挥墨染山河';console.log(str1.substr(1,3)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符// 3. slice(start, end) 从start位置开始，截取到end位置，end位置取不到(他们俩都是索引号)// 4. substring(start, end) 从start开始，截取到end位置，end取不到 //基本和slice相同，但是不接受负值// 1. 替换字符 replace('被替换的字符'，'替换的字符')他只会替换一个字符var str = 'andyandy';console.log(str.replace('a','b'));// 有一个字符串 'asdpqwkosnmsogo' 要求把里面所有的 o 替换为 *var str1 = 'asdpqwkosnmsogo';while(str1.indexOf('o') !== -1) {str1 = str1.replace('o', '*');}console.log(str1);// 2. 字符转换为数组 split('分隔符') join把数组转换为字符串var str2 = 'red, blue, color';console.log(str2.split(','));var str3 = 'red&blue&color';console.log(str3.split('&'));// toUpperCase()  转换大写// toLowerCase()  转换小写

8. 基本包装类型

javascript简单数据类型和复杂数据类型

1. 简单数据类型和复杂数据类型

2. 堆和栈

3. 简单数据类型内存分配

1. 简单数据类型是存放到栈里面，里面直接开辟一个空间，存放的是值。
2. 复杂数据类型首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据。


4. 复杂数据类型内存分配

5. 简单数据类型传参

6. 复杂数据类型传参


    <script>function Person(name){this.name = name;}function f1(x){console.log("1"+x.name); // 刘德华x.name='张学友';console.log("2"+x.name); // 张学友}var p = new Person("刘德华");console.log("first"+p.name); //刘德华f1(p);console.log(p.name); // 张学友</script>

笔记--javascript对象及简单，复杂数据类型相关推荐

  1. 重学前端-学习笔记-JavaScript对象

    说明 重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征 对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...

  2. javascript . 05 json的组成、for...in 遍历对象、简单数据类型与复杂数据类型的传值与传址、内置对象...

    对象字面量  JSON var obj = { aaa :999}; var json={"aaa":999,"bbb":888}; "kay&quo ...

  3. JavaScript入门(part4)--简单数据类型

    学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 简单数据类型 数字型number 数字型范围 数字型三个特殊值 函数isNaN 字符串型string 布尔型 ...

  4. JavaScript学习笔记：对象

    JavaScript学习笔记:对象 1.声明对象 (1)字面量对象 <!DOCTYPE html> <html lang="en"> <head> ...

  5. JavaScript学习笔记之对象及继承

    JavaScript学习笔记之对象及继承 对象属性 ES5中有两种属性,数据属性和访问器属性. 数据属性包括[[writable]](能否修改属性的值).[[value]]等等: 访问器属性包括[[C ...

  6. JavaScript笔记：对象

    JavaScript 对象是拥有属性和方法的数据. 真实生活中,一辆汽车是一个对象. 对象有它的属性,如重量和颜色等,方法有启动停止等: 对象 属性 方法 car.name = Fiat car.mo ...

  7. JavaScript（三）—— JavaScript 函数/JavaScript 作用域/JavaScript 预解析/JavaScript 对象

    本篇为 JavaScript 系列笔记第三篇,将陆续更新 JavaScript(一)-- 初识JavaScript/注释/输入输出语句/变量/数据类型 JavaScript(二)-- JavaScri ...

  8. JavaScript（一）—— 初识JavaScript/注释/输入输出语句/变量/数据类型

    本篇为 JavaScript 系列笔记第一篇,将陆续更新 文章目录 一.初识 JavaScript 1. JavaScript 是什么 2. JavaScript 的作用 3. HTML.CSS 和 ...

  9. HTML5学习笔记 —— JavaScript基础知识

    HTML5学习笔记 -- JavaScript基础知识 标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读 评论(0) 收藏 举报 分类: JavaScr ...

最新文章

  1. 赠书 | Python人脸五官姿态检测
  2. pytorch 指定层学习率
  3. 006_Spring Data JPA基于方法名称命名规则查询
  4. 2021-12-27
  5. 命令行请求jsp页面_JSP 之 8种HTTP的请求方式 之 页面组成等
  6. 理解Object.defineProperty的作用
  7. [转载] Python: fnmatch模块 (Unix B-Shell通配符的文件名匹配)
  8. 小程序 ---- （存在登录功能不符合运营规范问题）
  9. 机器学习笔记 - 什么是标准正态分布表？
  10. Ubuntu18.04 安装 Matlab2020a
  11. zbbz加载成功用不了_cad加载应用程序不能加载
  12. 百度“哼唱”音乐搜索
  13. Docker深入浅出系列
  14. rabbitmq连接特别慢 一直连接超时 An unexpected connection driver error occured
  15. 一次性下载《R语言实战2》全书的R包及常用的R包
  16. mysql的dba是什么_mysql dba是什么意思？
  17. EPSON1100清零软件 在哪有？
  18. linux redis自启动
  19. CSS Naked Day（CSS裸奔节）
  20. 安卓定时获得wifi强度编程

热门文章

  1. 牛客网项目——前置技术（八）：Kafka
  2. Nuxt之Meta标签关键字描述之description重复问题
  3. WinCE驱动开发问题精华集锦 [转]
  4. Qt使用QBrush贴图片纹理
  5. 微星 b460m 10400f 黑苹果 (mac os11) rx570 (B460M-A PRO) efi
  6. Windows10 LTSC 2021 开机 wsappx进程 CPU占用高
  7. 优秀的LOGO设计都有哪些共同点，是需要我们借鉴的？
  8. QPainter::drawPixmapFragments - the source rect is not contained by the pixmap‘s rectangle
  9. 【 bzoj 4355 】 Play with sequence - 线段树乱搞
  10. mongodb Index(3)