web前端(15)—— JavaScript的数据类型,语法规范2

Object对象

说这个对象之前,如果您对编程语言开发稍微有点了解的话,应该知道面向对象是什么意思,而js也有面向对象一说,就因为如此,js才会这么强大。

什么是面向对象

其实所有支持面向对象的编程语言,对于这个面向对象的概念都一样的,所以你学会了此概念,理解其他任何语言的面向对象都很简单,所以我这里也不再废话了,可以看我之前的Python部分关于面向对象的讲解:传送门

创建对象的几种方法:

  • 使用Object或对象字面量创建对象
  • 工厂模式创建对象
  • 构造函数模式创建对象
  • 原型模式创建对象

最常用的使用oject创建对象方法:

var student = new Object();
student.name = "easy";
student.age = "20";

  

或者另一种:

var sutdent = {
  name : "easy",
  age : 20
};

  

但是当我们要创建多个对象的话,是不是每次都要重新写一遍,这样肯定不行的

使用工厂模式创建:

function createStudent(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

var student1 = createStudent("student1", 20);
var student2 = createStudent("student2", 20); ... var studentn = createStudent("studentn", 20);

  

但是假如我在创建对象之后,还想知道此对象是什么类型呢?

例:

function createFruit(name, color) {
  var obj = new Object();
  obj.name = name;
  obj.color = color;
  return obj;
}

var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");

  

使用typeof查看:

使用构造函数创建:

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = function(){
    alert(this.name)
  };
}

function Fruit(name, color) {
  this.name = name;
  this.color = color;
  this.alertName = function(){
    alert(this.name)
  };
}

  

前面我们学过可以用typeof查看对象,这里再介绍一个函数instanceof查看

这样的话,我们就可以判断出创建的对象是什么类型的了

细心的朋友发现,其实就是因为有this.alertName方法在起作用,在调用stu1.alertName()时,this对象才被绑定到stu1上。

通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针,由此stu1和stu2共享了该全局函数,解决了内存浪费的问题。

但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

构造函数和普同函数区别:

  • 实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。
  • 按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。
  • 使用new操作符调用构造函数时,会经历4个阶段:
  1.   创建一个新对象;
  2.   将构造函数作用域赋给新对象(使this指向该新对象);
  3.   执行构造函数代码;
  4.   返回新对象;

原型模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分

function Student() {
    this.name = ‘easy‘;
    this.age = 20;
}

Student.prototype.alertName = function(){
    alert(this.name);
};

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数

  

以上的面向对象问题,如果您是前端开发者,那么你可能必须得学会了,如果您是后端开发者,做个了解,知道以上的方法创建对象就行

Date日期对象

创建日期对象只有构造函数一种方式,使用new关键字

var myDate = new Date();

  

日期对象的方法:

//返回本地时间
console.log(myDate().toLocalString());

  

关于这个日期对象,后期最常用的应该就是设计一个倒计时了,其他都不算难,怎么设计倒计时以后遇到再说吧,现在暂且不表

JSON对象

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包

JSON不只是js特有,不敢说所有的编程语言,大部分的编程语言都有此JSON,所以也就是说你可以通过JSON实现不同语言之间的数据交互

JSON的格式

{
  "key1":value1, // 注意是都是双引号
  "key2":value2,
  ……
}

  

JSON有两种结构

  • 对象
  • 数组

对象:一个对象以“{”开始,“}”结束,“key/value”之间运用 “,”分隔

var packJSON= {"name":"alex", "password":"123"};

  

数组:数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔

var packJSON = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];

  

JSON对象和JSON字符串转换

在数据传输过程中,JSON是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

JSON字符串:

var jsonStr =‘{"name":"alex", "password":"123"}‘ ;

JSON对象:

var jsonObj = {"name":"alex", "password":"123"};

JSON字符串转换JSON对象

var jsonObject= jQuery.parseJSON(jsonstr);

JSON对象转化JSON字符串

var jsonstr =JSON.stringify(jsonObject );

遍历JSON对象和JSON数组

遍历JSON对象代码如下:

var packAlex  = {"name":"alex", "password":"123"} ;

for(var k in packAlex ){//遍历packAlex 对象的每个key/value对,k为key
   alert(k + " " + packAlex[k]);
}

  

遍历JSON数组代码如下

var packAlex = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];

for(var i in packAlex){//遍历packJson 数组时,i为索引
   alert(packAlex[i].name + " " + packAlex[i].password);
}

  

复杂性数据类型:

你发现其实以下那些就是刚才我们讲解的,所以就不多说了

Function

Object

Arrary

String

Date

正则表达式

正则表达式是编程语言通用的,所以js也有正则表达式,只是语法上有稍微的不同

这里就不再多说了,可以看我之前的系列里的关于正则的文章:传送门

原文地址:https://www.cnblogs.com/yangva/p/9973939.html

时间: 2024-08-01 17:16:00

web前端(15)—— JavaScript的数据类型,语法规范2的相关文章

web前端之JavaScript高级程序设计六:事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

web前端之JavaScript正则表达式

web前端之JavaScript正则表达式 后面有代码: \d 表示数字 \d? ?表示0个或者一个 \d+ +表示一个或者多个 \d{3} 表示三个 \d{3,5} 表示三到五个 \d{3,} 表示至少出现3次 \d* *表示0到任意个 \b 表示单词边界 \B 表示非单词边界 \bis\b 表示查找" is "的 . 表示任意字符 \ 表示转译 http:(\/\/.+\.jpg) 用()进行分组 $1 获取其内部东西 []表示或 ^表示开头 $表示结尾 g表示全局 \d{4}[/

web前端入门到实战:HTML规范新内容,HTML6 真正需要的功能

HTML5 规范在 2014 年正式发布.时至今日,虽然这一规范已经引入了许多新的 API.功能和改进,但许多开发人员已经在展望下一代 HTML 规范了. 一点点背景介绍 有些人还是不知道 HTML 标准是怎样制定出来的.具体来说,一些组织提出自己的模式和协议,希望浏览器接受并使用它们:但很显然,唯一真正有话语权的组织是 W3C .所以 W3C 来分析 Web 世界需要什么,然后他们编写并规划一些语言指南,这些指南最后将成为浏览器的标准. 早在 Internet Explorer 时代 W3C

Web前端之javascript

一.javascript的存在形式 方式一: <html> <head> <script> alert('Hello, world'); </script> </head> <body> ... </body> </html> 方式二: <html> <head> <script src="/static/js/abc.js"></script>

web前端之JavaScript的变量和数据类型

JavaScript 变量 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) 提示:JavaScript 语句和 JavaScript 变量都对大小写敏感 程序演示: 1 <!DOCTYPE html>

web前端之JavaScript之jquery中的回调函数

回调函数指的是被调用者完成处理后自动回调调用者预先传递的函数. 在类C语言中通常通过函数指针/引用的方式传递. jQuery也提供类似的回调函数机制.但是如何正确传递回调函数仍然值得一提. 在John(jQuery Founder)写的指南中有详细的介绍. 1.不带参数的回调 $.get('myhtmlpage.html', myCallBack); 其中myCallBack是函数名字.函数是javascript的基础.可以当作引用变量一样传递. 2.带参数的回调 很自然的,按照以往的经验,我们

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

Web前端开发JavaScript提高(4)

JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaScript最早是在HTML网页上使用,它是属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的,现在随着node.js引擎的出现,使得JavaScript逐步成为

web前端之Javascript的输出

操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标识 HTML 元素: 警告: 请使用 document.write() 仅仅向文档输出写内容. 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖: 程序演示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4

web前端(四)——javascript高级

数组 定义数组的方法 //对象的实例创建 var aList = new Array(1,2,3); //直接量创建(首选) var aList2 = [1,2,3,'asd']; 操作数组中数据的方法 //获取数组的长度 var aList = [1,2,3,4]; alert(aList.length); // 弹出4 //用下标操作数组的某个数据 var aList = [1,2,3,4]; alert(aList[0]); // 弹出1 //将数组成员通过一个分隔符合并成字符串 var