一.json对象的基本概念以及使用方法
1.基本概念
json：描述数据的一种结构，可以将若干属性和方法封装成一个整体。从而统一管理
注意事项：key建议用""括起来。
2.json对象的定义
1）概念
json对象的定义：由{}括起来的键值对（key:value），每两个键值对间用逗号隔开。
注意事项：建议json的key全都用双引号括起来
2）案例
var stu = {
"name":"chen li qing",
"age":18,
"gender":"M",
"hobby":["唱","跳","rap","篮球"],
"eat":function(){
console.log("eat");
},
"sleep":function(){
console.log("sleep");
}
}
3.json对象的使用
1）概念
json对象的使用：对该对象的属性进行读写。
方法1：点运算符：json对象.属性名
方法2：下标法 对象名[属性名]
重点：json对象[属性名] 这个写法在if条件语句中是可以进行选择条件布尔值判断的，
在json对象中存在这个属性时，条件语句值为true，不存在就是false
2）案例
var stu = {
"name":"chen li qing",
"age":18,
"gender":"M",
"hobby":["唱","跳","rap","篮球"],
"eat":function(){
console.log("eat");
},
"sleep":function(){
console.log("sleep");
}
}
方法1：点运算符：json对象.属性名------这里属性名不需要加双引号
stu.name = "老王";
console.log(stu.name);
console.log(stu.age);
console.log(stu.gender);
console.log(stu.hobby);
stu.eat();
stu.sleep();
方法2：下标法：对象名["属性名"]------这里属性名需要保证是字符串的值
console.log(stu["name"]);
var str = "age";
console.log(stu[str]);
console.log(stu["gender"]);
console.log(stu["hobby"]);
stu["eat"]();
stu["sleep"]();
4.添加新的自定义属性
1）概念
添加新的自定义属性：json对象.新属性名 = 属性值
2）案例
var stu = {
"name":"chen li qing",
"age":18,
"gender":"M",
"hobby":["唱","跳","rap","篮球"],
"eat":function(){
console.log("eat");
},
"sleep":function(){
console.log("sleep");
}
}
stu.aaa = 999;--------此处添加之前不存在的新属性
console.log(stu.aaa);
5.json对象的遍历
案例：
for(var 索引变量 in [json对象/数组对象名]){
index：索引变量在每次循环中，代表该次的索引
}
var stu = {
"name":"chen li qing",
"age":18,
"gender":"M",
"hobby":["唱","跳","rap","篮球"]
}
index代表json每一次循环的key
for(var index in json对象){
}
for(var index in stu){----------注意事项:forin中不能用点运算符，for...in中只
能用下标法访问value
console.log(stu[index]);
}
6.this指向
1）概念
如果在一个成员方法中需要使用其他成员，则要添加前缀this.key()------此处key不需
要加引号
2）案例
var stu = {
"name":"chen li qing",
"age":18,
"gender":"M",
"hobby":["唱","跳","rap","篮球"],
"eat":function(){
console.log("eat");
},
"sleep":function(){
console.log("sleep");
},
"showValue":function(){
console.log(this.name,this.age,this.gender,this.hobby);
this.sleep();
this.eat();
}
}
stu.showValue();
var data = {
"reason": "查询成功",
"result": {
"city": "苏州",
"realtime": {
"temperature": "4",
"humidity": "82",
"info": "阴",
"wid": "02",
"direct": "西北风",
"power": "3级",
"aqi": "80"
},
"future": [
{
"date": "2019-02-22",
"temperature": "1/7℃",
"weather": "小雨转多云",
"wid": {
"day": "07",
"night": "01"
},
"direct": "北风转西北风"
},
{
"date": "2019-02-23",
"temperature": "2/11℃",
"weather": "多云转阴",
"wid": {
"day": "01",
"night": "02"
},
"direct": "北风转东北风"
},
{
"date": "2019-02-24",
"temperature": "6/12℃",
"weather": "多云",
"wid": {
"day": "01",
"night": "01"
},
"direct": "东北风转北风"
},
{
"date": "2019-02-25",
"temperature": "5/12℃",
"weather": "小雨转多云",
"wid": {
"day": "07",
"night": "01"
},
"direct": "东北风"
},
{
"date": "2019-02-26",
"temperature": "5/11℃",
"weather": "多云转小雨",
"wid": {
"day": "01",
"night": "07"
},
"direct": "东北风"
}
]
},
"error_code": 0
}
console.log(data.reason);
console.log(data.result.city);
console.log(data.result.future[1].wid.day);
二.严格模式
前提:所有的变量必须先定以才能使用
1.8.5版本添加了严格模式：
"use strict":被"use strict"修饰的作用域所有变量必须定义才能使用（关闭了声明提
升）（没什么用，只是要求变量必须定义，但是在使用前还是使用后定义，是没有限制的，
下，用完再定义，也不会报错）
使用示例：
"use strict";
a = 123;
var a;
三.回调函数
1）概念
回调函数:一个被当做函数参数的函数（做参数的时候函数名后面不带括号）
2）案例
来由与作用：
第三方函数,别人写的函数,你只能调用，你无法操作该函数体
解决方案:
回调函数,把自己写的函数当做参数，传递到第三方函数中，第三方自己调用
第三方在设计该函数的时候,就必须考虑，用户如何把自己想要的功能传进来
代码展示：
function f1(){ -----------f1是第三方函数,无法打开函数体
f2();
}
function f1(f){--------加上形参f，后面调用函数实参是f2，所以这里f=f2
f();-------------------------------- 这里的f() == f2()
}
var f2 = function(){
}
f1(f2);
案例：
循环定时器:每周期性的执行某种功能
setInterval(回调函数,时间间隔);------时间间隔单位是毫秒，一千毫秒就是
一秒，代表循环定时器函数要求里面的回调函数每一秒执行一次
var count = 0
var fun = function(){
console.log(++count); 意为变量初始值为0的count每秒自增一次，且
每次在控制台打印出来
};
setInterval(fun,1000);
四.字符串
1.字符串的定义（两种方法）
a.字面量:内置基本类型
var str1 = "helloworld";
console.log(str1,typeof str1);
b.构造方法:这个方法声明的字符串属于引用类型
var str2 = new String("heihei");----------此处String首字母一定要大写，括
号里面都是字符串，要带双引号
console.log(str2,typeof str2);
2.ASCII码表
asc码表:每个字符都有一个对应的编码,这个表就是ascii码表
字符串进行运算其本质是在比较其背后所对应的asc码值：一般是比较两边单词等首字母大
小，首字母相同就比较第二个字母，直到分出大小为止。
97 "a"
65 "A"
32 空格
48 "0" 这里是字符串0，不是数字
13 回车
3.统计字符串数据
需求：输入一个字符串，统计字符串中有多少个大写字母，小写字母，数字,空格，其他字符
var str = "12 a4 5b cAAB+#$% ^";
var big = 0; 大写字母
var small = 0; 小写字母
var num = 0; 数字
var space = 0; 空格
var other = 0; 其他符号
for(var i=0; i<str.length; i++){
if(str.charAt(i)>="A" && str.charAt(i)<="Z"){
big++;
}else if(str.charAt(i)>="a" && str.charAt(i)<="z"){
small++;
}else if(str.charAt(i)>="0" && str.charAt(i)<="9"){
num++;
}else if(str.charAt(i) == " "){
space++;
}else{
other++;
}
}
console.log(big,small,num,space,other);
4.字符串常见API和属性
1）length
含义：字符串的长度
语法：字符串标识符.length
功能：获取索引对应的字符
2）charAt
功能:获取索引对应的字符
参数:charAt(索引)
返回值:索引对应的字符
案例：
var str = "ahelloworld";
console.log(str.charAt(1));---------值为h
3）charCodeAt
功能:获取索引对应的字符的asc值
参数:charCodeAt(索引)
返回值:索引对应的字符的asc值
案例：
var str = "ahelloworld";
console.log(str.charCodeAt(0));------------a的asc值为97
4）fromCharCode
功能:返回asc码对应的字符
参数:fromCharCode(asc1,[asc2,asc3...])
返回值:返回asc码对应的字符
注意事项:该方法通过类名String调用
console.log(String.fromCharCode(97,98));
5）indexOf
功能:用来查找元素,找到返回下标,找不到返回-1（从左往右找）
参数:indexOf(目标字符串)
返回值:找到返回下标,找不到返回-1
只能查找第一次
var str = "helloworld";
console.log(str.indexOf("l"));
console.log(str.indexOf("13123"));
数组也有该方法：
var arr = [1,2,3,4];
console.log(arr.indexOf(-3));
案例：
数组元素去重
var arr = [1,2,3,4,1,2,3,5,6,7];
var arr1 = [];
for(var i=0; i<arr.length; i++){
if(arr1.indexOf(arr[i]) == -1){ 第一次找不到，返回-1，并将该元素插入arr1这个空数组，第二次找到相同的值，返回的不是-1，就不满足条件，不会被插入arr1数组。以此达到去重效果
arr1.push(arr[i]);
}
}
console.log(arr1);
6）lastIndexOf
功能:用来查找元素,找到返回下标,找不到返回-1（从右往左找）但是找到的时候返回的下标还是从左往右数得出的
参数:indexOf(目标字符串)------------记得索引对象元素都是字符串，带双引号
返回值:找到返回下标,找不到返回-1
只能查找第一次
案例：
var str = "helloworld";
console.log(str.lastIndexOf("l"));
7）replace
功能:用参数2替换参数1 不改变原字符串
参数:replace(参数1,参数2)
返回值:被替换的字符串
只能替换一次
案例：
var str = "caixukun de ge bi shi caixukun";
str = str.replace("caixukun","老王")
console.log(str);
8）slice和substring
功能:字符串截取（两个函数没太大区别） 不改变原字符串
参数:(起始位置,结束位置) [起始位置,结束位置)
返回值:被截取的字符串
案例：
var str = "helloworld";
console.log(str.slice(2,5));
console.log(str.substring(2,5));
slice和substring的异同?
slice支持负数
var str = "helloworld";
var str1 = str.slice(-5,-2); 就是从后往前数，左开右闭，所以左边往回退一步
取值这里str1值为wor
9）split
功能:将字符串转换为数组（通常与join配合使用） 他不改变原字符串；
参数:split(分隔符)
返回值:数组
案例：
var str = "wo de ge bi shi cai xu kun";
var arr = str.split("shi"); 会将“shi”这个字符串转换成“，”来分割前后，然后其他所有的逗号消失
console.log(arr); 此处转化而来的数组arr = [“wo de ge bi”，“cai xu kun”]，里面有两个元素；
10）toUpperCase和toLowerCase
不改变原字符串
console.log("heLLoWorld".toUpperCase());字符串转大写
console.log("heLLoWorld".toLowerCase());字符串转小写
五.经典案例补充
1.输入某年某月某日，判断这一天是这一年的第几天？（1980~2060)
html：
<input type="text" id="t1">
<input type="text" id="t2">
<input type="text" id="t3">
<button id="btn">计算</button>
<input type="text" id="t4">
script：
var oT1 = document.getElementById("t1");
var oT2 = document.getElementById("t2");
var oT3 = document.getElementById("t3");
var oT4 = document.getElementById("t4");
var oBtn = document.getElementById("btn");
function isInputOk(y,m,d){------------函数判定输入合法；
此处判定年份在题目要求范围内
if(y>2060|| y<1980){
return false;
}
此处判定月份在题目要求范围内
if(m>12 || m<1){
return false;
}
此处判定不同月份要求的日期以及二月份在闰平年的不同天数是否合法
switch(m){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
if(d<1 || d>31){
return false;
}
case 4:
case 6:
case 9:
case 11:
if(d<1 || d>30){
return false;
}
case 2:
if(isLeapYear(y) && d<1 ||d > 29){------------二月份比较特殊，需要判断闰平年，闰年二月天数1~29天，平年1~28天，不在这个范围内的二月份日期都不合法
return false;
}else if(d<1 ||d > 28){
return false;
}
}
return true;（当所有输入不合法的条件都没有被触发时，还是务必在函数结尾加上return true，否则会在输入合规的情况下还是一直返回false显示输入不合法）
}
function isLeapYear(y){---------------------判断闰平年
if((y%4==0&&y%100!=0)||y%400==0){
return true;
}else{
return false;
}
}
function sumDay(y,m,d){-----------------计算天数和，此处注意月份数需要减一，当月的月份是不满的
var sum = 0;
switch(m-1){
case 11:
sum += 30;
case 10:
sum += 31;
case 9:
sum += 30;
case 8:
sum += 31;
case 7:
sum += 31;
case 6:
sum += 30;
case 5:
sum += 31;
case 4:
sum += 30;
case 3:
sum += 31;
case 2:
if(isLeapYear(y)){
sum += 29;
}else{
sum += 28;
}
case 1:
sum += 31;
}
return sum + d/1;
}
oBtn.onclick = function(){
if(isInputOk(oT1.value,oT2.value,oT3.value)){
oT4.value = sumDay(oT1.value,oT2.value,oT3.value);
}else{
oT4.value = "输入不合法";
}
}
2.求任意字符串不同字符的重复次数
三种方法：
常规解法：
var str = "aabccdeefff";
var arr = str.split("");
var arr1 = [];
var count = 0;
for(var i=0; i<arr.length; i++){
if(arr1.indexOf(arr[i]) == -1){
arr1.push(arr[i]);
}
}
for(var i=0; i<arr1.length; i++){
count = 0;
for(var j=0; j<str.length; j++){
if(arr1[i] == str.charAt(j)){
count++;
}
}
console.log(arr1[i],count);
}
json优化解法：
var str = "aabccdeefff";
var json = {}
for(var i=0; i<str.length; i++){----------------所有未被赋值的变量，值都是undefined
var key = str.charAt(i);
if(json[key] == undefined){
json[key] = 1;
}else{
json[key]++;
}
}
console.log(json);
5549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
