技术文章 | Technical articles

JavaScript源码笔记(第八天)—web前端培训

一、排他思想


 

二、对象

对象是特征与行为的集合。它由花括号包裹的名值对,中间用逗号隔开。

{name:zhangsan,age:23}

创建对象的方式:

字面量

new关键字

访问对象的属性和方法

obj.att || obj[att]

obj.fn()

//字面量的方式来创建对象

var stu = {

name:"张二狗",

age:23,

height:180,

hobby:function(){

return "学习使我快乐!!";

}

}

console.log(stu);

//对象是由大括号包裹的名值对  

//通过键名获取键值  obj.key  ||  obj['att']

console.log("学生姓名:",stu.name,"年龄:",stu['age'],"人生格言:",stu.hobby());

stu.eat = function(){

return "吃烧饼!!";

}

console.log(stu.eat());

//使用new关键字创建一个对象

var obj = new Object();

obj.m = 10;

obj.fn = test;

console.log(obj);

console.log(obj.m);

obj.fn();

function test(){

console.log("呵呵额")

}


 

三、JSON数据

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:

{"pId":"0001","pName":"花木扶疏","pAge":"23"}

JSON JS 对象的关系:JSON JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。

var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的(只不过不规范)

var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串

 

JSON字符串与对象之间的转换方法:

JSON.stringfy(obj)  将一个对象转换成字符串形式

JSON.parse(str)     将一个字符串转换成对象

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

*** 数据存储的时候使用的是JSON格式,但是在JS中使用的时候使用的对象格式

JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

对象:对象在 JS 中是使用花括号包裹 {} 起来的内容,数据结构为 {key1value1, key2value2, ...} 的键值对结构。在面向对象的语言中,key 为对象的属性,value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

数组:数组在 JS 中是方括号 [] 包裹起来的内容,数据结构为 ["java", "javascript", "vb", ...] 的索引结构。在 JS 中,数组是一种比较特殊的数据类型,它也可以像对象那样使用键值对,但还是索引使用得多。同样,值的类型可以是任意类型。

 

一般情况下使用的是数组与对象的结合体:

//一个简单的对象

//  var obj = {

//   name:"张三",

//   age:23

//  }

//console.log(obj,"obj","数据类型:",typeof obj);//{name: "张三", age: 23} "obj" "数据类型:" "object"

//将这个简单的对象转换成JSON串   stringify()将对象转换成字符串

//var str  = JSON.stringify(obj);

//console.log("str:",str,"数据类型:",typeof str);//str: {"name":"张三","age":23} 数据类型: string

//将数据存储到本地

//localStorage.msg = str;

console.log(localStorage.msg);

//获取JSON数据 localStorage.msg

var getData = localStorage.msg;

//JSON串转换成对象  parse()

var getObj = JSON.parse(getData);

console.log(getObj);

//delete att 删除对象的某个属性

delete getObj.age;

 console.log(getObj);

 

//获取JSON

var cityDatas = localStorage.citys;

console.log(cityDatas,typeof cityDatas)

//JSON串转换成JS对象进行操作

var cityObjs = JSON.parse(cityDatas);

console.log(cityObjs,typeof cityObjs)

//获取对象的city

var cityArr = cityObjs.city;

console.log(cityArr)

//获取数组中第十项数据

var tenDatas = cityArr[9];

console.log(tenDatas);

//获取城市的字母开头

var cityTitle = tenDatas.title;

console.log(cityTitle);

//获取城市对应第十项的城市列表

var cityList = tenDatas.lists;

console.log(cityList);

//获取城市对应第十项的城市列表第一项

var ten1City = cityList[0];

 console.log("对应第十项的城市列表第一个城市是:",ten1City);

 

四、定时器介绍

setTimeout()  延迟调用 只调用一次

setInterval()   间歇调用

var count = 0;

//延迟调用 只调用一次

/*setTimeout(function(){

alert("Hello" + count++);//Hello0

},1000);*/

//间歇调用

/*setInterval(function(){

alert("Hello" + count++);//Hello0

},1000)*/

 

clearInterval(计时器名字);

clearTimeout(计时器的名字);

<body>

<div><strong id="count" style="color: red;"> 10 </strong>秒后关闭页面...</div>

</body>

<script type="text/javascript">

var count = document.getElementById("count");

var iNum = 10;

var timer = setInterval(function(){

if(iNum === 0){

//清除指定计时器

clearInterval(timer);

//关闭当前页面

window.close();

}

count.innerHTML = iNum--;

},1000);

/*window.clearInterval();

window.alert();

window.prompt();*/

</script>

关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: JavaScript源码笔记(第七天)—web前端培训
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>