学习JS的第8天
一、JSON
1、什么是JSON？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言：JSON 使用 JavaScript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
- JSON 具有自我描述性，更易理解
2、JSON的特点
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
3、JSON的两种结构
JSON有两种表示结构，分别是对象和数组。
对象结构以”{”大括号开始，以”}”大括号结束。中间部分由0或多个以”，”分隔的”key(关键字)/value(值)”对构成，关键字和值之间以”：”分隔，语法结构如代码。
数组是以中括号[]包裹一个或多个对象，即将对象放在数组中，以”[”开始，”]”结束。中间由0或多个以逗号分隔的值列表组成，
{
key1:value1,
key2:value2,
...
}
var shoppingData = [
{
"id" : 1,
"src" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a260090e0e08770b0bd865845a4b4ab.jpg?thumb=1&w=200&h=200&f=webp&q=90",
"name" : "小米11",
"des" : "骁龙888 | 2K四曲面屏",
"price" : "200"
},
{
"id" : 2,
"src" : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4e75e528fb468aee107f551179aa0799.jpg?thumb=1&w=200&h=200&f=webp&q=90",
"name" : "小米11",
"des" : "骁龙888 | 2K四曲面屏",
"price" : "3999"
}];
3、JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法：JSON.parse(text[, reviver])
**text:**必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
例如我们从服务器接收了以下数据：
{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
4、JSON.stringify()
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
语法：JSON.stringify(value[, replacer[, space]])
**value:**必需， 要转换的 JavaScript 值（通常为对象或数组）。
replacer: 可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
例如我们向服务器发送以下数据：
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
//我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：
var myJSON = JSON.stringify(obj);
myJSON 为字符串。
我们可以将 myJSON 发送到服务器：
二、ES5的严格模式
1、关于严格模式
1)概念：除了正常运行模式，ECMAscript5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式是的Javascript在更严格的条件下运行。
2)严格模式的作用：
a.消除了JS语法的一些不合理、不严谨之处，减少一些怪异行为；
b.消除代码运行的一些不安全之处，保证代码运行的安全；
c.提高编译器效率，增加运行速度；
d.为未来新版本的JS做好铺垫
注意点：同样的代码，在“严格模式”中，可能会有不一样的运行结果，一些在“正常模式”下可以正常运行的语句，在“严格模式”下将不能运行，掌握这些内容，有助于更细致深入的理解JS，让你编程一个更好的程序员。
2、严格模式的调用
1、如何进入严格模式？
进入严格模式的标志，书写这一行语句 "use strict"
老的浏览器会把他当成一串普通的字符串，加以忽略
2、“严格模式”有两种调用方式，适用于不同的场合；
针对整个脚本文件：将 "use strict" 放在脚本文件的第一行，则整个脚本文件都将以“严格模式”运行，
如果这行语句不在第一行，则无效，整个脚本以“正常模式”运行。
如果不同模式的代码文件合并成一个文件，这一点需要特别注意。
针对单个函数：将 "use strict" 放在函数的第一行，则整个函数以“严格模式”运行。
脚本文件的变通写法：因为第一种调用方式不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数中
3、严格模式下的改变
进入严格模式之后，需要进行哪些行为变更：
1.全局变量声明时，必须加关键字(var)
正常模式：a = 10; console.log(a) //10
严格模式：a = 10; console.log(a) //a is not defined
2.this无法指向全局对象
正常模式：function fn(){ console.log(this) } //window
严格模式：function fn(){ console.log(this) } //undefined
3.函数内不允许出现重名参数
正常模式：function fn( a,b,b ){ console.log(a,b) }
fn(1,2,3) //1,3
严格模式：function fn( a,b,b ){ }
//报错：Duplicate parameter name not allowed in this context 在此上下文中不允许出现重复的参数名
4.arguments对象
4.1 arguments对象不允许被动态改变
正常模式：
function fn(a){
a=20;
console.log(a); //20
console.log(arguments[0]); //20
}
fn(10);
严格模式：
function fn(a){
a=20;
console.log(a); //20
console.log(arguments[0]); //10
}
fn(10);
5、不允许使用arguments.callee
6.新增的保留字：implements，interface，let，package，private，protected，public，static，yield
三、ES5新增的数组方法
1、indexOf(data,start)接收两个参数：要查找的项和（可选的）表示查找起点位置的索引
2、forEach() 循环 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值
3、map(callback) ； 会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值。
map可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值。映射
4、filter() 遍历和过滤。返回符合条件的元素的数组。filter需要在循环的时候判断一下是true还是false，是true才会返回这个元素。
//1、indexOf(data,start)接收两个参数：要查找的项和（可选的）表示查找起点位置的索引
//注意点：
//a、如果没有找到，就返回-1
//b、indexOf查找到的是第一次数组元素出现的位置
//c、indexOf也可以给字符串使用
var arr = ['张三', '李四', '王麻子', '张三', '张姨', '张小帅', '张三'];
//返回的是数组元素的下标的位置
var res = arr.indexOf('张三', 1);
console.log(res); // 3
//2、forEach() 循环 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值
//注意点：forEach()没有返回值
//不支持 continue，用 return 代替。
//不支持 break，用 try catch/every/some 代替：
var arr = ['a', 'b', 'c', 'd'];
//参数1表示数组元素，参数2表示下标 参数3表示当前元素所属的数组对象（arr）。
arr.forEach(function(items, index, arr){
console.log(items);
});
//continue 的实现 用return来实现该效果
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
if (item === 3) {
return; //不能为false 否则返回false
}
console.log(item);
});
//break的实现
var arr = [1, 2, 3, 4, 5];
arr.every(function (item) {
console.log(item);
return item !== 3;
});
结果： 1 2 3 false
//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
//map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
map() 不会改变原始数组
var arr = [1, 2, 3, 6, 8, 10, 12];
//参数1表示数组元素，参数2表示下标
var res = arr.map(function(items, index){
return items *= (1+0.3);
})
console.log(res);
console.log(arr);
//map() 不会改变原始数组 仅针对基本数据类型！！！ 引用数据类型会发生改变！！！
var infoArr = [
{name : '', age : 46, sex : '男', like : '抹茶'},
{name : 'jack马', age : 52, sex : '男', like : '福报'},
{name : 'pony马', age : 48, sex : '男', like : '钱'}
];
var res = infoArr.map(function(items, index){
return items.age += 10;
// return items.like; 也不会发生改变，数据上处理会改变
})
console.log(res);
console.log(infoArr); //打印会发现 age 已经被改变了
// filter() 遍历和过滤。返回符合条件的元素的数组。filter需要在循环的时候判断一下是true还是false，是true才会返回这个元素。 不改变原数组
var arr = [10, 20, 22, 36, 71];
var res = arr.filter(function(items, index){
return items > 20;
//return items == 20;
})
console.log(res); // 22 36 71
console.log(arr);//10, 20, 22, 36, 71
//数组去重
var arr = ['a', 'a', 'a', 'c', 'b', 'c', 2, 3, 2, 2, 6, 6];
var res = arr.filter(function(items, index){
console.log(index, items);
return arr.indexOf(items) == index;
});
console.log(res);
四、this对象
解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，this指向的是一个对象。
这个对象我们称为函数执行的上下文对象，
根据函数的调用方式的不同，this会指向不同的对象
1.以函数的形式调用时，this永远都是window 例如 fn();
2.以方法的形式调用时，this就是调用方法的那个对象
//练习
function fn(){
console.log(this);
}
//当函数名+括号调用函数的时候，this指向window
fn();
//this 指向了接收事件的 HTML 元素：
var box = document.getElementById('box');
box.onclick = function(){
console.log(this); //id为box的标记
//严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
"use strict";
function myFunction() {
return this;
}
<!--在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：-->
<button onclick="this.style.display='none'">
点我后我就消失了
</button>
五、字符串
1、字符串的对象概念：
字符串就是一串字符，由双（单）引号括起来。字符串是 JavaScript 的一种基本的数据类型。字符串不能进行算术运算，只能进行“连接”运算。
JS中的任何数据类型都可以当作对象来看。所以string既是基本数据类型，又是对象。
2、字符串的创建
1, 直接使用字符串字面量去创建
var str1 = “亲, 包邮哦!”;
alert(typeof str1);
2, 通过new创建字符串对象, 通过new创建的都为object类型
var str2 = new String(“hello world!”);
alert(typeof str2);
3, 省略new, 这种方式创建的不是object类型, 而是string类型
var str3 = String(“hello world”); 包装类
alert(typeof str3);
3、字符串的属性和方法
1)length：获取字符串的长度。如：var len=strObj.length;
2)toLowerCase():将字符串中的字母转成全小写。如：strObj.toLowerCase();
3)toUpperCase():将字符串中的字母转成全大写。如：strObj.toUpperCase()；
4)charAt(index):返回指定下标位置的一个字符。如果没有找到，则返回空字符串； 参数是下标
//关于charAt(index) 和 通过名字[下标]访问的影响
//4)charAt(index):返回指定下标位置的一个字符。如果没有找到，则返回空字符串； 参数是下标
//[]中括号加下标的形式，在低版本的浏览器里面是不支持的 --- 没错就是IE
var str = 'hello';
console.log(str.charAt(0));
console.log(str[0]);
5)indexOf:返回一个字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到，则返回-1；
例子：判断用户输入的邮箱地址是否有@符号
6)lastIndexOf:在原始字符串中，从右往左查找。如果没有找到，则返回-1；
8)substring()：在原字符串，返回一个字符串；不取结束位置，不能给负值会转成0
注点意：参数是下标
9)split():将一个字符串切割成若干段，返回一个数组。也就是说将一个字符串转成数组；括号里面可以给空字符串， 会把字符串切割成几份
var res = str.split("");
10)slice():提取字符串的片断，并在新的字符串中返回被提取的部分；不包括结束位置。给负值时，可以返回倒数第几个
var res = str.slice(0, 3);
11）trim()：移除字符串首尾空白；
12）concat()：连接两个或多个字符串，返回连接后的字符串
13)replace() 替换与正则表达式匹配的子串。不改变原数组 //可用于敏感字符替换
14)substr() 从起始索引号提取字符串中指定数目的字符。参数1表示起始位置 、值2表示截取的项数
15）charAt() 方法可返回指定位置的字符。
五、编码介绍
ASCII：American Standard Code for Information Interchange，美国信息交换标准代码。
Unicode（统一码、万国码、单一码）是计算机科学领域里的一项业界标准,包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。 Unicode目前普遍采用的是UCS-2,它用两个字节来编码一个字符。 如汉字”经”的编码是0x7ECF,注意字符码一般用十六进制来 表示，为了与十进制区分，十六进制以0x开头，0x7ECF转换成十进制 就是32463,UCS-2用两个字节来编码字符，两个字节就是16位二进制， 2的16次方等于65536,所以UCS-2最多能编码65536个字符。
GBK全称《汉字内码扩展规范》（GBK即“国标”、“扩展”汉语拼音的第一个字母，英文名称：Chinese Internal Code Specification）。
GBK 向下与GB2312编码兼容，向上支持 ISO 10646.1国际标准，是前者向后者过渡过程中的一个承上启下的产物。
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。 UTF-8用1到4个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
知识补充：
回调函数：如果把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指的函数时，我们就说这是回调函数。
//回调函数：把函数自己当成一个参数给另一个函数使用，称之为回调函数，当函数执行完毕后再去执行回调
function add(num1, num2){
return num1 + num2;
}
function sub(num1, num2){
return num1 - num2;
}
function mul(num1, num2){
return num1 * num2;
}
function div(num1, num2){
return num1 / num2;
}
//总的方法 callback表示回调函数
function calc(num1, num2, callback){
// function add(){
// return num1 + num2;
// }
return callback(num1, num2);
}
var res = calc(10, 20, mul);
console.log(res);
练习：
1、敏感字符的替换
var str = '色哈哈';
var res = str.replace('色', '*');
console.log(res);
2、已知字符串 str = “I hate BeiJing!”,提取第3个字符到第5个字符
var str = "I hate BeiJing!";
console.log(str.slice(3,6)); //ate
console.log(str.substr(3,3)); //ate
3、统计含有a或A的字符串个数
var countryList=["America","Greece","Britain","Canada","China","Egypt"];
var c = 0 ;
for(var i in countryList){
if(countryList[i].indexOf("a")!=-1 || countryList[i].indexOf("A") != -1){
console.log(countryList[i]);
c++;
}
}
console.log("含有a或A的字符串有"+c+"个");
4统计字符串字符串个数
var str = 'aabbcddeeettccc';
//使用一个对象去统计字符串的个数，可以把字符串元素当成对象的属性，个数当成属性的值
var obj = {};
//遍历字符串元素
for(var i=0; i<str.length; i++){
//判断下空的对象里面有没有这个字符串元素，如果有就把它的值++
//如果没有这个字符串元素，把它添加到空对象里面并给其赋值
//str[i] ---> str[0]---> a
//obj['a'] 表示判断这个空对象里面有没有a这个字符串元素
//str[0] a
//obj['a']
// ''
//obj['a'] = 1 ---> 1++ --->2
if(obj[str[i]]){
obj[str[i]]++;
}else{
//obj['a'] = 1
//obj['b'] = 1
obj[str[i]] = 1;
}
}
console.log(obj);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
