js: 数组截取、合并+对象拷贝+JSON格式转换

2022-06-18 15:31:08 阅读：163 来源： 互联网

标签：console log 截取 js JSON let 数组 student1

1、递归简单来说就是函数自己调自己，但是要加限制条件，不然会成为一个死循环。

 1       <div>
 2             <input type="text" v-model="sum"><button>输出</button>
 3             <span></span>
 4         </div>
 5         <!-- 递归 -->
 6         <script>
 7         let btn=document.querySelector('button');
 8         let span=document.querySelector('span');
 9         let inp=document.querySelector('input');
10         
11         btn.onclick=function(){ 
12             console.log(inp.value);
13             let sum=fun(inp.value);          
14            span.innerHTML=sum;    
15        }
16         let fun= function(n){
17             if(n===1){
18                 return sum=n;
19             }else{
20                 return sum=n * fun(n-1)
21             }
22         }
23 
24     </script>

2、JSON格式字符串 和对象等之间的转换

JSON --> Object 用 JSON.parse()

Object --> JSON 用 JSON.stringify()

        /* 数据类型之间的转换
        js的数据类型有：sring,number,undefined,null,boolean,
         数组 arry,  对象 object, 日期格式 date */
         let a='this is a cat';
         let arr=[5,8,111];
         let obj={
            name:'张三',
            age:18,
            like:{
                eat:'肉',
                food:'rice',
            }
         };
       
        let JSON1='{"name":"李四","age":18,"arry1":["丽丽","18","abc"]}';
        //  转成JSON格式
        console.log(a,JSON.stringify(a));
        console.log(arr,JSON.stringify(arr));
        console.log(obj,JSON.stringify(obj));
        //JSON格式 转换成对象
       //JSON格式的数据其实是 键值对形式的字符串 ：1、JSON中没有undefined，2、JSON中的字符串必须使用双引号，3、JSON中是不能用注释的
        console.log(JSON1,JSON.parse(JSON1));

3、数组的截取 splice 和 slice

     //1、splice 数组的截取 
    let arry2=[1,2,3,4,5,6,7,8,9,10,11,12,13,14];
    //splice 截取数组，参数是index,(从第几个元素开始，截取几个元素)，数组是从0开始的。
    //splice截取之后，原数组中被截取的元素就没有了,改变了原有数组
     let new2= arry2.splice(1,4); //从第一个元素开始，截取四个元素，组成新的数组
     console.log('从Index=1截取，往后截取四个',new2);
     console.log(arry2)//数组中的 2,3,4 被删除
      
      //只传一个参数 3，表示截取前3个元素
      let new3=arry2.splice(6); //只传一个元素表示从 index=6 开始往后截取到数组结束
      console.log('从index=6开始截取',new3)
      console.log(arry2)
     let new4=arry2.splice(-3);//从倒数第三个截取，往后截取到结束。
     console.log('向后截取',new4);
     console.log(arry2);

 //2、slice 不改变原数组 其他的和splice一样  ； 另外 slice 属于拷贝
 let arry3=[11,22,33,54,5,'a',7,8,'张三',9,10,'11',12,'13',14];
     let new5=arry3.slice(1,4);
     let new6=arry3.slice(4);
     let new7=arry3.slice(-4);

console.log('new7',new7); console.log(arry3); console.log(new5); console.log(new6); arry3.push('Lili'); console.log(arry3); console.log('new7',new7)

//slice 也属于拷贝，即使之后array3发生了变化，不会影响到 new7的值，slice 生成的数组 new7属于一个独立的新的数组

4、数组的合并 concat() array.push() / array.push.apply()

//两个数组合并
var array1=['张三','新新','莲莲']
var array2=['a','b','c','d','e','f','g']

var a = array1;
console.log('a',a) 
var c=array1.concat(array2);
//1、concat 返回新的数组，不改变原来数组的元素
console.log(array1);
console.log(array2);
console.log(c);

// 2、在使用push的时候，注意把原来的数组备份。
//array.push + for循环 遍历数组，可以筛选符合条件的元素,但是改变原来的数组
 for(let i=0;i<array2.length;i++){
  array1.push(array2[i])
 }
console.log(array1);
//合并某个元素 array.push()
 array1.push(array2[1]);
console.log(array1)
array1.push('大学')
console.log(array1);
// 合并多个数组到其中一个里面 
array1.push.apply(array1,array2);
console.log(array1);
// a在最开始的时候等于 array1的最初值，但是后面array1因为合并，发生了变化，a也发生了变化，不在是初始值，是变化之后的值。
console.log(a)；

console.log('c',c);//但是c没有变化，concat属于拷贝，即使之后 array1 和array2发生了变化，也不会影响 concat 生成的新数组，concat返回的是一个新的独立的数组。

5、递归实现：对象的浅拷贝与对象深拷贝

（浅拷贝数组：还可以通过数组合并，数组截取的形式）

     <!-- 递归实现深拷贝: 阶乘，累加 -->
        <script>
        const student1 = {
            name: '张三',
            age: 30,
            parent: {
                mom: '丽丽',
                dad: '张老三'
            },
            hobit: ['羽毛球', '篮球']
        }
        //1、浅拷贝函数
        function copy(obj) {
            let newObj = {};
            for (let i in obj) {
                newObj[i] = obj[i]
            }
            return newObj;
        }
        //调用函数，对student1进行拷贝
        const student2 = copy(student1);
        student1.name = '张三丰';
        student1.parent.dad = '老张三丰';
        student1.hobit.push('乒乓球');
        //浅拷贝，拷贝之后的student1.name不会随着原数据变化而变化； 但是 parent对象或者hobit 数组里面的值还是会随着 student1变化，达不到想要的拷贝目的。
        console.log(student1);
        console.log(student2);

//2、深度拷贝
function copy(obj) { let newObj = {}; for (let i in obj) { //对里面的对象再拷贝一次 if (obj[i] instanceof Object) { newObj[i]=copy(obj[i]) } else { newObj[i] = obj[i] } } return newObj; } //调用函数，对student1进行拷贝 const student2 = copy(student1); student1.name = '张三丰'; student1.parent.dad = '老张三丰'; student1.hobit.push('乒乓球'); console.log(student1); console.log(student2);

标签：console,log,截取,js,JSON,let,数组,student1
来源： https://www.cnblogs.com/lianna/p/16383663.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js: 数组截取、合并+对象拷贝+JSON格式转换