Blogger Information
Blog 18
fans 0
comment 0
visits 15947
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数组常用方法、Json字符串和Ajax异步提交
沉寂的博客
Original
605 people have browsed it

数组常用方法

  数组的常用方法如下代码所示

  1. <script>
  2. //栈方法,后进先出(在数组尾部进行的)push() pop();队:先进新出(在数组头部进行的)unshift() shift()
  3. let arr = [];
  4. // 在数组尾部进行操作添加数组
  5. // console.log(arr.push(1, 2, 3, 4));
  6. // 删除数组
  7. // console.log(arr.pop());
  8. // console.log(arr.pop());
  9. // console.log(arr.pop());
  10. // console.log(arr.pop());
  11. console.log("%s", "-------------", arr);
  12. // 在数组头部进行的操作,unshift() shift()添加和删除操作;先进先出,
  13. console.log(arr.unshift(1, 2, 3, 4));
  14. console.log(arr.shift());
  15. console.log(arr);
  16. // 可以push()和shift()结合使用,也可以unshift()和pop()结合使用、
  17. // join()与字符串处理的split()相反,是将数组转化成字符串,并返回
  18. console.log(arr.join("-"));
  19. // concat()字符串组合函数
  20. // slice()返回数组中的部分成员,返回的数组是一个新的数组
  21. console.log(arr.slice(1));
  22. // splice(开始索引,删除数量,插入数据);数组的增删改,它的本质是删除数组内容
  23. let se = [1, 2, 34, 4, 5];
  24. // 删除元素
  25. console.log(se.splice(0, 2));
  26. console.log(se);
  27. // 更新
  28. se.splice(0, 2, 88, 99);
  29. console.log(se);
  30. // 新增
  31. se.splice(0, 0, 3, 4, 6);
  32. console.log(se);
  33. // 排序
  34. // 默认按照自摸排序,sort();
  35. let res = ["b", "a", "c", "f", "e"];
  36. console.log(res.sort());
  37. // 如果想要阿拉伯数字排正序需要参数a-b,降序相反
  38. console.log(se.sort((a, b) => a - b));
  39. // 遍历
  40. arr.forEach((item) => console.log(item));
  41. // map对数组的每个成员都调用回调进行处理并返回这个数组
  42. let mp = se.map((item) => item * 2);
  43. console.log(mp);
  44. // 过滤
  45. let gl = se.filter((item) => item > 10);
  46. console.log(gl);
  47. // 归内,求总数;reduce(callback(prev,curr));
  48. let sum = se.reduce((prev, curr) => prev + curr, 100);
  49. console.log(sum);
  50. </script>

执行结果如下:
数组常用方法

Json字符串

  JSON常用的方法有JSON.stringify()(将JS数据转换成JSON数据),JSON 数据都是字符串,还有一个方法是JSON.parse()(将JSON数据装换成JS数据);
用法如下代码所示:

  1. <script>
  2. //JSON.stringify(data,replacer,space);将Js数据转为json
  3. console.log(JSON.stringify(3.14), typeof JSON.stringify(3.14));
  4. console.log(
  5. JSON.stringify({ a: "a", b: "b" }),
  6. typeof JSON.stringify({ a: "a", b: "b" })
  7. );
  8. //对json格式的字符串的特殊操作,主要通过后边连个参数,第二个参数自持数组和函数
  9. // 数组
  10. // 把属性a和属性b过滤出来
  11. // 第三个参数是用来格式化json输出字符窜的样式
  12. let str = JSON.stringify({ a: 1, b: 2, c: 3, d: 4, e: 5 });
  13. console.log(JSON.stringify({ a: 1, b: 2, c: 3, d: 4, e: 5 }, ["a", "b"]));
  14. // 函数
  15. console.log(
  16. JSON.stringify(
  17. { a: 1, b: 2, c: 3, d: 4, e: 5 },
  18. (k, v) => {
  19. if (v > 3) return undefined;
  20. return v;
  21. },
  22. "****"
  23. )
  24. );
  25. console.log(str);
  26. // 把json数据转换成JS JSON.parse()
  27. console.log(JSON.parse(str), typeof JSON.parse(str));
  28. console.log(
  29. JSON.parse(str, (k, v) => {
  30. if (v === "") return v;
  31. return v * 2;
  32. })
  33. );
  34. </script>

执行结果:
JSON知识

Ajax异步提交

  ajax异步提交主要有四个步骤:
1.创建xhr对象const xhr=new XMLHttpRequest();;
2.配置xhr参数xhr.open('get','url地址');``xhr.responseType='json';;
3.处理xhr响应xhr.onload=()=>{};;
4.发送xhr请求,get方式时参数为null;xhr.send(null);
具体代码如下:

  1. <script>
  2. const Btn = document.querySelector("button");
  3. Btn.addEventListener("click", (ev) => {
  4. //xhr 异步提交的步骤分为四步
  5. // 1创建xhr对象
  6. const xhr = new XMLHttpRequest();
  7. // 2.配置xhr参数
  8. xhr.open("get", "../php/test1.php?id=2");
  9. // 这一步可以省略因为返回的数据都是json数据
  10. xhr.responseType = "json";
  11. // 3.处理xhr相应
  12. // 成功
  13. xhr.onload = () => {
  14. console.log(xhr.response);
  15. // DOM将响应的结果渲染到页面中去
  16. let user = `${xhr.response.name}(${xhr.response.email})`;
  17. document.querySelector("p").innerHTML = user;
  18. };
  19. // 失败时候
  20. xhr.onerror = () => console.log("Error");
  21. // 4.发送xhr请求 get请求时参数为空
  22. xhr.send(null);
  23. });
  1. <button>ajax-get</button>
  2. <p></p>

执行结果:
ajax get

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!