JS学习小结（数组常用的10个方法、JSON函数、跨域资源共享）

数组常用的10个方法

<script>
    //1、栈方法
    //栈 后进先出
    //栈 1、 后端进后端出 push() + pop()
    //栈 2、 头端进头端出 unshift() + shift()
    //队 先进先出
    //队 1、头端进尾端出 unshift() + pop()
    //队 2、头端出尾端进 shift() + push()
    let arr=[1,2,3];
    arr.push(4,5);
    console.log(arr);
    arr.pop();
    console.log(arr);
    arr.unshift(0);
    console.log(arr);
    arr.shift();
    console.log(arr);
    //2、join() 将数组元素通过分隔符拼装成字符串
    let arr2 =["我",'爱吃','苹果'];
    console.log(arr2.join(""));
    //3、concat() 数组合并
    let arr31 =[4,5,6];
    console.log(arr31.concat([7,8],9));
    //4、slice() 返回数组的部分成员
    let arr4 = [1,2,3,4,5];
    console.log(arr4.slice(2));
    //slice() 可用于复制数组
    let arr41 = arr4.slice(0);
    console.log(arr41);
    //5、splice() 用于数组的增删改，原始用途是删除元素,第一个参数是删除的其实索引号，第二个参数是删除的数量，第三个参数是插入的元素(可以插入多个值)
    let arr5 = [1,2,3,4,5,6];
    arr5.splice(1,0,...[11,111]);
    console.log(arr5);
    //6、sort() 排序,重点是整数排序
    let arr6 = [74,14,55,89];
    console.log(arr6.sort((a,b) => a - b));
    //7、map() 遍历，有返回值
    let arr7 = [1,2,3,4,5,6,789];
    console.log(arr7.map(item => item));
    //8、filter() 过滤
    let arr8 = [1,2,3,4,5,6,7];
    console.log(arr8.filter(item => item%2));
    //9、reduce() 接收一个函数作为累加器,第一个参数为回调函数，第二个参数为初始累加值
    let arr9 = [1,2,3,4,5];
    console.log(arr9.reduce((prev,curr)=> prev + curr));
    //10、length属性，可以得出数组的元素个数
    let arr10 = [1,2,3,4,5];
    console.log(arr10.length);
</script>

JSON的两个常用函数

<script>
    //JSON是一种数据交换格式，可以和各种编程语言进行数据交换。可以充当不同编程语言数据交换的中间角色。
    //1.JSON.stringify()，该函数可以将JS对象序列化为JSON字符串，该函数有三个参数，参数1为JS数据，参数2为数据处理方式，参数3为格式化输出的JSON字符串
    //1.1 第二个参数为数组，表示筛选条件，如下
    console.log(JSON.stringify({a:"苹果",b:"香蕉",c:"橘子"},["a","b"]));
    //1.2 如果第二个参数为函数，表示筛选条件，有两个参数，第一个表示键，第二个表示值
    console.log(JSON.stringify({a:1,b:2,c:3},(k,v)=>{
        if (v > 2) return undefined;
        return v;
    }));
    //1.3 第三个参数示例,如果写数字表示空格个数，也可以用字符串
    console.log(JSON.stringify({a:"苹果",b:"香蕉",c:"橘子"},null,4));
    console.log(JSON.stringify({a:"苹果",b:"香蕉",c:"橘子"},null,'---'));
    //2.JSON.parse(),可以将JSON字符串解析为JS对象，有两个参数，第一个参数是JSON字符串，第二个参数是数据过滤或数据处理
    console.log(JSON.parse('{"a":1,"b":2,"c":3}',(k,v)=>{
        if (k==="") return v;
        return v*2;
    }));
</script>

cors 跨域资源共享

同源指的是协议相同，域名相同，端口号相同
跨域指的是不同源之间的请求与响应
在html中的示例代码为

<button>跨域请求</button>
<p></p>
<script>
    //跨域请求需要在服务器端开启请求头许可，下面以get方式模拟(post方式同样可以)
    const btn = document.querySelector("button");
        btn.onclick =()=>{
            //创建异步对象
            const xhr = new XMLHttpRequest();
            xhr.open('get',"http://www.text.com/ceshi.php");
            xhr.onload = () => document.querySelector('p').innerHTML = xhr.response;
            xhr.send(null);
        };
</script>

在对应的ceshi.php下示例代码为

<?php
header('Access-Control-Allow-Origin:http://www.123.com');
echo '跨域成功';

jsonp

不用通过开启请求头许可，跨域请求响应的方法。
原理是标签的跨域是无法屏蔽的。将需要返回的数据以JSON数据格式作为参数封装在回调函数语句中，然后通过前端的script标签的src属性进行跨域请求，因为标签跨域的不可屏蔽性，后端无需开启请求头许可，就可将该回调函数语句返回到前端，进而调用回调函数，将数据输出到当前页面。
JSON-with-Padding只能完成get请求

前端html中示例代码如下

<!DOCTYPE html>
<html lang="utf-8">
    <head>
        <title>jsonp的原理</title>
    </head>
    <body>
        <button>jsonp</button>
        <p></p>
        <script>
            function getUser(data){
                console.log(data);
                let user = data.name + ": " + data.email;
                document.querySelector('p').innerHTML = user;
            }
            //getUser({"name":"张三","email":"admin@qq.com"});
            const btn= document.querySelector("button");
            btn.onclick = ()=> {
                let script = document.createElement("script");
                script.src = "http://www.test.com/1.php?haha=getUser";
                document.body.insertAdjacentElement("afterbegin",script)
            };
        </script>
    </body>
</html>

后端php中示例代码如下

<?php
$haha = $_GET['haha'];
$data ='{"name":"张三","email":"admin@admin.com"}';
echo $haha . '(' .$data . ')';

数组常用的10个方法

JSON的两个常用函数

cors 跨域资源共享

jsonp

相关文章