search

博客列表 >JS中常用的数组函数JSON函数和跨域问题解决方案

JS中常用的数组函数JSON函数和跨域问题解决方案

Jason Pu?
Jason Pu?原创
2021年01月09日 20:02:31883浏览

一：常用数组函数

1.join(“分隔符”)将数组的元素转成一个字符串,原来的数组会保留

  1. let arr1 = ["2021","1","9"];
  2. console.log(arr1.join("-"));//2021-1-9

2.Array.from()将伪数组转成数组,只要有length属性的就可以转成数组。

  1.     let string1 = "abcdefg";
  2.     console.log(Array.from(string1));//[ "a", "b", "c", "d", "e", "f", "g" ]

3.pop() 数组末尾移除最后一项，减少数组的 length 值，然后返回移除的元素。
pop()会直接修改原数组，而不是创建一个新的数组

  1.     let arr2 = [1,2,3,4,5];
  2.     let popa= arr2.pop();
  3.     console.log(arr2,"被删除者："+popa);//[ 1, 2, 3, 4 ] 被删除者：5

4.push() 用于向数组的末尾添加一个或多个元素，并返回修改后数组的长度(数值类型)。
push()会直接修改原数组，而不是创建一个新的数组

  1.    let arr3=[1,2,3,4,5];
  2.     let pusha=arr3.push(6,7);
  3.     console.log(arr3,"长度："+pusha);//[ 1, 2, 3, 4, 5, 6, 7 ]长度：7

5.shift() 删除数组开头第一项，减少数组的 length 值，然后返回移除的元素。
shift()会直接修改原数组，而不是创建一个新的数组

  1.     let arr4 = [1,2,3,4,5];
  2.     let shifta= arr4.shift();
  3.     console.log(arr4,"被删除者："+shifta);//[ 2, 3, 4, 5 ]被删除者：1

6.unshift() 用于向数组的开头添加一个或多个元素，并返回修改后数组的长度(数值类型)。
unshift()会直接修改原数组，而不是创建一个新的数组

  1.     let arr5 = [1,2,3,4,5];
  2.     let unshfita=arr5.unshift(0,1);
  3.     console.log("长度现在是"+unshfita+"修改后的数组是："+arr5);//长度现在是7修改后的数组是：0,1,1,2,3,4,5

7.splice():可以实现删除,插入,替换,截取。会直接修改原数组
删除:可以删除任意数量的项，需指定 2 个参数：要删除的第一项的位置和要删除的项数。
插入:可以向指定位置插入任意数量的项，需提供 至少3 个参数：起始位置、 0（要删除的项数）和要插入的项。

  1.     //删除：
  2.     let fName= ["赵","钱","孙","李"];
  3.     let afterSplice = fName.splice(0,2);
  5.     console.log(fName);//[ "孙", "李" ]
  7.     //插入：
  8.     fName.splice(0,0,"周","吴");
  9.     console.log(fName);//[ "周", "吴", "孙", "李" ]

8.sort():用于对数组的元素进行排序
默认:按升序排列数组项,即最小的值位于最前面，最大的值排在最后面。
会直接修改原数组
sort()会转成字符串再比较,并从第1个字符进行比较

  1.     let numbers =  [3,9,7,6,4,2];
  2.     numbers.sort();
  3.     console.log(numbers);//[ 2, 3, 4, 6, 7, 9 ]
  5.     let bigNumbers = [33,99,17,6,24,2];//这种直接用sort就会有问题
  6.     bigNumbers.sort();
  7.     console.log(bigNumbers);//[ 17, 2, 24, 33, 6, 99 ]
  8.     //可以添加比较函数来解决:
  9.     bigNumbers.sort((a,b)=>a-b);
  10.     console.log(bigNumbers);//[ 2, 6, 17, 24, 33, 99 ]

9:filter():把数组中的某些元素过滤掉，然后返回剩下的元素,接收的是一个回调函数
数组中的每一项运行给定函数，返回满足过滤条件组成的新数组。
不会改变原数组

  1.     let nums = [1,2,3,4,5,6,7,8,9,10];
  2.     //返回大于6的数：
  3.     console.log(nums.filter(a=>a>6));//[ 7, 8, 9, 10 ]
  4.     //返回偶数：
  5.     console.log(nums.filter(a=>a%2==0));//[ 2, 4, 6, 8, 10 ]
  6.     //返回奇数：
  7.     console.log(nums.filter(a=>a%2!=0));//[ 1, 3, 5, 7, 9 ]

10.利用set()对数组去重复
set数据类型:ES6提供了新的数据结构Set。
它类似于数组，但是成员的值都是唯一的，没有重复的值。

  1.     let repeatNums = [1,1,2,2,3,3];
  2.     //把数组转成set
  3.     let set = new Set(repeatNums);
  4.     //set再转数组：
  5.     let newNums = Array.from(set);
  6.     console.log(newNums);//[ 1, 2, 3 ]

二：JS中的JSON处理函数

1.JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
语法：JSON.stringify(value[, replacer[, space]])
value:必需， 要转换的 JavaScript 值（通常为对象或数组）。
replacer:可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。
space:可选，文本添加缩进、空格和换行符

例如：

  1. let obj1 = {a:1,b:2,c:3};
  2. let result1 = JSON.stringify(obj1);
  3. console.log(result1,typeof result1);//{"a":1,"b":2,"c":3} string

加入第二个参数：
第二个参数支持数组 和 函数

数组：

  1.     let result2 = JSON.stringify(obj1,["a","b"]);//记得""
  2.     console.log(result2,typeof result2);//{"a":1,"b":2} string

函数然后加上第三个参数：

  1.     let result3 = JSON.stringify(obj1,(key,value)=>{
  2.         if(value>2){
  3.             // 要过滤的数据直接返回undefined就可以了
  4.             return undefined;
  5.         }
  6.         return value;
  7.     },"---");
  8.     console.log(result3);
  9.     // 运行结果：
  10.     // {
  11.     //     ---"a": 1,
  12.     //     ---"b": 2
  13.     // }

2.JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
语法：JSON.parse(text[, reviver])
text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数。

例如：

  1.     let rus = JSON.parse(`{"a":1,"b":2,"c":3}`);
  2.     console.log(rus,typeof rus);// { a: 1, b: 2, c: 3 } object

加入第二个参数

  1.     let objDemo = JSON.parse(`{"a":1,"b":2,"c":3}`,(key,value)=>{
  2.         if(value>2){
  3.             // 要过滤的数据直接返回undefined就可以了
  4.             return undefined;
  5.         }
  6.         return value;
  7.     });
  8.     console.log(objDemo,typeof objDemo);//{ a: 1, b: 2 } object

三：跨域的原理及解决办法

1.什么是跨域：当一个请求url的协议、域名/主机、端口三者之间任意一个与当前页面url不同即为跨域，只允许通过脚本发起基于同源的请求
2.解决办法
方案1：
以php为例，我们在php页面里面加一个请求头：

  1. header('Access-Control-Allow-Origin:，接受的域名');
  2. header('Access-Control-Allow-Origin:*');//*代表接受全部

方案2：jsonp
利用了script标签的src属性中的链接具有可跨域的”漏洞”，实现的跨域请求，但是jsonp跨域只能用get请求。

例如：
在html里面写一个发送按钮,点击发送后向php后台发送请求,返回年龄和身高信息,在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

  1. <button>发送</button>

php部分:

  1. exit($_GET['callback'].'({height: 170, weight: 90})');

js代码:

  1.     const btn = document.querySelector("button");
  2.     function callback(data) {
  3.         alert("身高: " + data.height + ", 体重: " + data.weight);
  4.     };
  6.     btn.onclick = ()=>{
  7.         //生成一个script标签
  8.         let script = document.createElement("script");
  9.         script.src= "http://localhost:63342/php中文网教程/0108/test2.php?callback=callback";
  10.         // 挂载到页面；
  11.         document.body.insertBefore(script,document.body.firstElementChild);
  12.     };

点击后证明发送成功:

上一条：json/Ajax异步请求下一条：1218 认识盒子
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议