Json和Ajax相关概念（文末有数组函数的小彩蛋）

Json概念

JSON.stringify(data,replacer,space)

JSON.stringify(data,replacer,space):将js数据转为json

• json的数据类型是特殊格式的字符串

console.log(JSON.stringify(3.14), typeof JSON.stringify(3.14));
//字符串必须加""
console.log(JSON.stringify("hello"), typeof JSON.stringify("hello"));
//布尔值不能加""
console.log(JSON.stringify(true), typeof JSON.stringify(true));

• 对json格式字符串的特殊操作,主要通过后面二个参数；第二个参数支持数组 和 函数

//数组
console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, ["a", "b"]));
//输出{"a":1,"b":2}
//Json 数组格式
console.log(JSON.stringify({"a":1,"b":2,"c":3}));
//输出{"a":1,"b":2,"c":3}
//函数
console.log(
JSON.stringify({ a: 1, b: 2, c: 3 }, (k, v) => {
// 将需要过滤掉的数据直接返回undefined
if (v < 2) return undefined;
    return v;
})
);
//输出{"b":2,"c":3}

• 第三个参数,用来格式化输出的json字符串

console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "****"));
//输出
{
****"a": 1,
****"b": 2,
****"c": 3
}

JSON.parse(str,reviver),将json转为js对象

let obj = JSON.parse(`{"a":1,"b":2,"c":3}`);

• 第二个参数可以对json的数据进行处理后再返回

obj = JSON.parse(`{"a":1,"b":2,"c":3}`, (k, v) => {
   // json对象是由内向外解析
   if (k === "") return v;
      return v * 2;
});
console.log(obj);
//输出{"a":2,"b":4,"c":6}

Ajax概念

ajax-get

<button>ajax-get</button>
<p></p>
<script>
const btn = document.querySelector("button");
btn.onclick = () => {
//   1. 创建 xhr 对象:
const xhr = new XMLHttpRequest();
// 2. 配置 xhr 参数:
xhr.open("get", "demo1.php?id=1");
// 设置返回的格式为json
xhr.responseType = "json";
// 3. 处理 xhr 响应:
xhr.onload = () => {
console.log(xhr.response);
let user = `${xhr.response.name} ${xhr.response.email} ${xhr.response.password}`;
document.querySelector("p").innerHTML = user;
};
xhr.send(null);
};
</script>

ajax-post

const form = document.querySelector(".login form");
const btn = document.querySelector(".login button");
const tips = document.querySelector(".tips");
btn.onclick = (ev) => {
// 建立xhr对象
const xhr = new XMLHttpRequest();
// 设置传输格式post
xhr.open("post", "demo2.php");
//处理 xhr 响应
xhr.onload = () => {
tips.innerHTML = xhr.response;
};
//发送xhr数据
xhr.send(new FormData(form));
};

Cors 跨域概念

cors: 跨域资源共享

• 同源策略: 为请求的安全,浏览器禁止通过脚本发起一个跨域的请求
  • 只允许通过脚本发起基于同源的请求
  • 同源指: 协议相同,域名/主机名相同,端口相同

ajax-get-cors

<button>ajax-get-cors</button>
<p class="tips"></p>
<script>
// cors: 跨域资源共享
const btn = document.querySelector("button");
const tips = document.querySelector(".tips");
const btn = document.querySelector("button");
btn.onclick = ev => {
// 1. 创建 xhr 对象:
const xhr = new XMLHttpRequest();
// 2. 配置 xhr 参数:
xhr.open("get", "http://world.io/cors1.php");
// 3. 处理 xhr 响应:
xhr.onload = () =>
(document.querySelector("p").innerHTML = xhr.response);
// 4. 发送 xhr 请求:
xhr.send(null);
};
</script>

ajax-post-cors

<button>ajax-post-cors</button>
<p class="tips"></p>
<script>
// cors: 跨域资源共享
const btn = document.querySelector("button");
const tips = document.querySelector(".tips");
btn.onclick = ev => {
// 1. 创建 xhr 对象:
const xhr = new XMLHttpRequest();
// 2. 配置 xhr 参数:
xhr.open("post", "http://world.io/cors2.php");
// 3. 处理 xhr 响应:
xhr.onload = () => (tips.innerHTML = xhr.response);
// 4. 发送 xhr 请求:
let formData = new FormData();
formData.append("email", "admin@php.cn");
 formData.append("password", "123456");
xhr.send(formData);
};
</script>
//跨域文件头设置 *为全部同意，可以设置单独的域名只允许这个域名
header('Access-Control-Allow-Origin: *');

jsonp-cors

• jsonp 原理

function getUser(data) {
    console.log(data);
    let user = data.name + ": " + data.email;
   document.querySelector("p").innerHTML = user;
}

• 举例

const btn = document.querySelector("button");
btn.onclick = () => {
// 1. 动态生成一个允许跨域请求的html元素
let script = document.createElement("script");
// 2. 将跨域请求的url添加到src属性上
script.src = "http://world.io/cors3.php?callback=getUser";
// 3. 将script挂载到页面中
document.body.insertBefore(script, document.body.firstElementChild);
};

数组常用方法

栈和队

栈: 后进先出
队: 先进先出
他们是仅允许在一端进行增删的数组

• 声明空数组

let arr = [];

• push(),pop()在数组的尾部进行增删

//输出3，为添加的元素个数
console.log(arr.push(1, 2, 3));
//从尾部开始删除，每次删除一个元素
console.log(arr.pop());

• unshift(), shift()在数组的头部进行增删

//输出3，为添加的元素个数
console.log(arr.unshift(1, 2, 3));
//从头部开始删除，每次删除一个元素
console.log(arr.shift());

• push()+shift(): 模拟队列, 尾部进入,头部出去

console.log(arr.push(4, 5, 6));
console.log(arr.shift());
console.log(arr.shift());
console.log(arr.shift());

• pop()+unshift(): 模拟队列, 头部进入,尾部出去

console.log(arr.unshift(4, 5, 6));
console.log(arr.pop());
console.log(arr.pop());
console.log(arr.pop());

• join(): 与字符串的split()相反,将数组转为字符串返回

arr = ["iphone", "vivo", "huawei"];
let res = arr.join("--");
console.log(res);
//输出 iphone--vivo--huawei
//可以把字符串用数组方式输出
let str = "china";
console.log(str[0], str[1], str[2]);
//输出 c h i

• concat()数组合并

console.log("hello".concat(" word"));
//输出 hello word
console.log([1, 2, 3].concat("hello").concat({ x: 1, y: 2 }));
//输出[1, 2, 3, "hello", {…}]
//不论内容是什么，都会被合并成数组

• slice(): 返回数组中的部分成员

arr = [1, 2, 3, 4, 5];
console.log(arr.slice(0, 3));
//输出[1,2,3]:从索引0位置开始，取3个元素
console.log(arr.slice(-4));
//输出[2,3,4,5]:从结尾位置开始，取4个元素

• splice(开始索引,删除的数量,插入的数据…): 数组的增删改,它的本职工作是删除元素

arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2));
//输出[3,4,5]:从索引2的位置开始，后边的都删除
console.log([1, 2, 9, 8, 7]);
//输出[3,4,5]:从索引2的位置开始，后边的都删除
res = arr.splice(2, 2, ...[8, 99]);
console.log(arr);
//输出[1, 2, 8, 99, 5]：第一个2表示从索引2位置开始，第二个2表示替换几个元素
res = arr.splice(1, 0, ...[88, 99]);
//第二个数字为0表示不替换，只新增

• 排序 sort()

arr = ["a", "z", "o", "p", "w"];
res = arr.sort();
console.log(res);
//输出["a", "o", "p", "w", "z"]：字母按照顺序排列
arr = [1, 99, 89, 7, 64, 57];
res = arr.sort();
console.log(res);
//输出[1, 57, 64, 7, 89, 99] ：数字排序只针对第一个数字
//解决办法 [1, 7, 57, 64, 89, 99]
arr.sort((a, b) => a - b);

• forEach 遍历

arr = [1, 2, 3, 4, 5];
arr.forEach(item => console.log(item));
//map方法
res = arr.map((item) => item * 2);
console.log(res);
//输出[2,4,6,8,10]

• filter过滤

//过滤掉偶数
arr = [1, 2, 3, 4, 5];
res = arr.filter((item) => item % 2);
console.log(res);
//过滤掉奇数
arr = [1, 2, 3, 4, 5];
res = arr.filter((item) => !(item % 2);
console.log(res);

• reduce归纳

arr = [1, 2, 3, 4, 5];
res = arr.reduce((prev, curr) => prev + curr);
console.log(res);
//输出15：1+2+3+4+5
res = arr.reduce((prev, curr) => prev + curr，1000);
//输出1015，第二个值为默认开始值