数组函数

栈方法

栈：后进先出
队：先进先出
它们是近允许在一端进行增删的数组；

1、push() pop()在数组的尾部进行增删

let arr = [];
console.log(arr.push(1, 2, 3));
console.log(arr);
console.log(arr.pop());
console.log(arr.pop());
console.log(arr.pop());

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

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

push()+shift() 模拟队列:尾部进,

console.log(arr);
      console.log(arr.push(1, 2, 3));
      console.log(arr);
      console.log(arr.shift());
      console.log(arr.shift());
      console.log(arr.shift());

unshift()+pop() 模拟队列:头部近,尾部出

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

3、join() 将数组转为字符串与split()相反

arr = ['电脑', '手机', '键盘'];
      let res = arr.join(',');
      console.log(res);

4、concat()数组合并

console.log([1, 2, 3].concat([5, 6], [4]));

5、slice() 返回数组中的部分成员

arr = [7, 8, 9, 10, 11, 12, 13];
      res = arr.slice(0);
      console.log(res);
      res[1] = 100;
      console.log(arr);
      console.log(res);

6、splice(开始索引,删除的数量,插入的数据) 数组的增删改成,主要是删除元素;

arrTmp = [1, 2, 3, 4, 5, 6];
      //删除 删除前2个
      resTmp = arrTmp.splice(2);
      console.log(resTmp);
      console.log(arrTmp);
      //更新
      arrTmp = [1, 2, 3, 4];
      resTmp = arrTmp.splice(1, 2, ...[88, 99]);
      console.log(resTmp);
      console.log(arrTmp);
      //新增
      arrTmp = [1, 2, 3, 4];
      //将第二个参数设置为0,就不会又元素被删除
      resTmp = arrTmp.splice(1, 0, ...[88, 99]);
      console.log(resTmp);
      console.log(arrTmp);

7、排序默认按照字母表顺序排列

arr = ['p', 'b', 'a'];
      arr.sort();
      console.log(arr);
      //数字排序 自定义回调函数
      arr = [22, 33, 1, 9];
      arr.sort((a, b) => a - b);
      console.log(arr);

8、遍历 forech 没有返回值 map有返回值

arr = [1, 2, 3, 4, 5];
      arr.forEach(item => console.log(item));
      //map 对数组每个成员都调用回调函数进行处理并返回一个新数组
      res = arr.map(item => item + 1);
      console.log(res);

9、过滤 filter()

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      res = arr.filter(item => item % 2);
      console.log(res);

10、归内 reduce(callback(prev,curr),初始值);

//累加
      arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      res = arr.reduce((prev, curr) => {
          console.log(prev, curr);
          return prev + curr;
      });
      console.log(res);

JSON函数

1、JSON.stringify(data,replacer,space);将js转为json json对象的属性必须添加双引号,字符串也必须加双引号|json其实是一个巨有特殊格式的字符串

console.log(JSON.stringify({
      a: 1,
      b: 2,
      c: 3
  }));
  //对json格式字符串的特殊操作主要通过第二个参数:支出数组和函数
  console.log(JSON.stringify({
      a: 1,
      b: 2,
      c: 3
  }, ["a", "b"]));
  console.log(JSON.stringify({
      a: 1,
      b: 2,
      c: 3
  }, (k, v) => {
      if (v < 2) return undefined;
      return v;
  }));
  //第三个参数,用来格式化输出的json字符串
  console.log(JSON.stringify({
      a: 1,
      b: 2,
      c: 3
  }, (k, v) => {
      if (v < 2) return undefined;
      return v;
  }, 2));
  console.log(JSON.stringify({
      a: 1,
      b: 2,
      c: 3
  }, (k, v) => {
      if (v < 2) return undefined;
      return v;
  }, "***"));

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

let obj = JSON.parse(`{"b":2,"c":3}`);
  console.log(obj);
  //第二个参数可以对json的数据进行处理后再返回
  obj = JSON.parse(`{"b":2,"c":3}`, (k, v) => {
      if (k === '') return v;
      return v * 2
  })
  console.log(obj);

Ajax请求

XMLHttpRequest是浏览器对象不是js对象
发送请求步骤
创建xhr对象:const xhr=new XMLHttpRequest();
配置xhr参数 xhr.open(type,url)
处理xhr响应 xhr.onload(…)=>{…}
发送xhr请求 xhr.send(…)
xhr对象常用属性
responseType 设置响应类型
Response 响应正文
xhr对象常用方法
open(type,url) 配置请求参数
send(data/null) 发送请求
常用事件
load() 请求成功
error() 请求失败

发起一个get请求

const btn = document.querySelector('button');
  btn.onclick = () => {
      //创建xhr对象
      const xhr = new XMLHttpRequest();
      //配置xhr参数
      xhr.open('get', 'url');
      xhr.responseType = 'json';
      //处理xhr响应
      xhr.onload = () => {
          console.log(xhr.response);
          let user = `${xhr.response.name}(${xhr.response.email})`;
          document.querySelector('p').innerHTML = user;
      }
      xhr.onerror = () => console.log('Error');
      xhr.send();
  }

发起一个post请求

const form = document.querySelector('form');
  const btn = document.querySelector('button');
  const tips = document.querySelector('.tips');
  btn.onclick = (ev) => {
      ev.preventDefault();
      //创建xhr对象
      const xhr = new XMLHttpRequest();
      //配置xhr参数
      xhr.open('post', 'url');
      //处理xhr响应
      xhr.onload = () => tips.innerHTML = xhr.response;
      xhr.onerror = () => console.log('Error');
      //发送表单数据
      xhr.send(new FormData(form));
  }

跨域请求

cors:跨域资源资源在服务器端开启跨域许可(‘Access-Control-Allow-Origin’:*)
同源策略:为了请求的安全,浏览器禁止通过脚本发起一个跨域的请求:只允许通过脚本发起的同源的请求,同源指:协议相同,域名/主机名端口相同

jsonp

jsonp :json with padding (将json填充进来)
jsonp只是将json数据包含在一个函数调用中
jsonp:cllback({‘id’:1,’name’:’admin’})
jsonp:包含而部分回调函数+josn数组
回调函数:请求按钮收到响应时回调的函数,可动态设置
回调参数:作为参数传递函数的json数据;
json巧妙的利用了scrip标签发起的请求不受跨域限制的特征
将跨域请求的url作为script的src属性值,实现不需要服务器授权的跨域请求
jsonp只能完成get请求

function getUser(data) {
      console.log(data);
      let user = data.name + ":" + data.email;
      document.querySelector('p').innerHTML = user;
  }
  getUser({
          name: 'admin',
          email: 'admin@admin.conm'
      })
      //将json数据从服务器上获取
      //从前端将这个需要调用的函数名称告诉后端,让后端动态生成一个函数调用的语句并返回;
      //可以理解为前端写一个函数,后端返回该函数名和调用数据,以script的方式调用getUser({name: 'admin',email: 'admin@admin.conm'})
  const btn = document.querySelector('button');
  btn.onclick = () => {
      //动态生成一个允许跨域请求的html script标签
      let script = document.createElement('script');
      //将跨域请求的url添加到src属性中,将调用的函数名称告诉后端
      script.src = 'url?callback=getUser';
      //将script插入html中
      document.body.appendChild(script);
  }

常用数组函数、ajax请求与跨域