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

一：常用数组函数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    let repeatNums = [1,1,2,2,3,3];
    //把数组转成set
    let set = new Set(repeatNums);
    //set再转数组：
    let newNums = Array.from(set);
    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:可选，文本添加缩进、空格和换行符

例如：

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

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

数组：

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

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

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

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

例如：

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

加入第二个参数

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

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

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

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

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

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

<button>发送</button>

php部分:

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

js代码:

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

点击后证明发送成功: