zoukankan      html  css  js  c++  java
  • 如何区分slice、splice和split

    小颖之前写过一篇文章:JavaScript Array 对象方法 以及 如何区分javascript中的toString()、toLocaleString()、valueOf()方法中有分享过slice()和splice()的用法。今天把slice、splice和split放一起,再看看有哈子区别嘻嘻,因为用的时候老混,放一起总结下,也方便后期查询。嘻嘻

    目录:

    1.slice

    2.splice

    3.split

    代码:

    1.slice

        <script type="text/javascript">
        let arry = [1, 2, 3, 4, 5, 6];
        /**************slice*******************/
        // 1.slice(数组)不改变原数组
        // 用法:arrayObject.slice(start,end)截取从索引为start开始(包括start)到索引到end之前(不包括end)得值
        let _arr1 = arry.slice(1, 5);
        console.log('数组arry:' + arry);
        console.log('数组_arr1:' + _arr1);
        //如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾
        let _arr2 = arry.slice(2);
        console.log('数组arry:' + arry);
        console.log('数组_arr2:' + _arr2);
        //如果不传入参数二,且参数一为负数(-2),将从参数倒数(从右向左)第2个位置开始截取,一直到数组尾
        let _arr3 = arry.slice(-2);
        console.log('数组arry:' + arry);
        console.log('数组_arr3:' + _arr3);
        //当只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组
        let _arr4 = arry.slice(-7);
        console.log('数组arry:' + arry);
        console.log('数组_arr4:' + _arr4);
        //当传入两个参数一正一负时,start为正,end为负,且end+数组的length > start,则正常截取,当end+数组的length <= start 时,将返回一个空数组
        let _arr5 = arry.slice(1, -1);
        console.log('数组arry:' + arry);
        console.log('数组_arr5:' + _arr5);
        let _arr6 = arry.slice(1, -5);
        console.log('数组arry:' + arry);
        console.log('数组_arr6:' + _arr6);
        //当传入两个参数一正一负时,start为负,end为正,且start+数组的length < end,则正常截取,当start+数组的length >= end 时,将返回一个空数组
        let _arr7 = arry.slice(-5, 5);
        console.log('数组arry:' + arry);
        console.log('数组_arr7:' + _arr7);
        let _arr8 = arry.slice(-5, 0);
        console.log('数组arry:' + arry);
        console.log('数组_arr8:' + _arr8);
        let _arr9 = arry.slice(-5, 1);
        console.log('数组arry:' + arry);
        console.log('数组_arr9:' + _arr9);
        //2.slice(字符串)
        // slice方法复制string的一部分来构造一个新的字符串,用法与参数匀和数组的slice方法一样;
        let stringA = "1,2,3,4,5,6,7";
        let _string1 = stringA.slice(1, 7);
        console.log('stringA长度:' + stringA.length);
        console.log('_string1:' + _string1);
        </script>

    2.splice

    实例1:

        let arry = [1, 2, 3, 4, 5, 6];
        /**************splice*******************/
        // 1.splice(数组)改变原数组
        // 用法:arrayObject.splice(index,howmany,item1,.....,itemX)splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
        let _arr1 = arry.splice(1, 2,22,23);
        console.log('数组arry:' + arry);
        console.log('数组_arr1:' + _arr1);

    实例2:

        let arry = [1, 2, 3, 4, 5, 6];
        // /**************splice*******************/
        // // 1.splice(数组)改变原数组
        // // 用法:arrayObject.splice(index,howmany,item1,.....,itemX)splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
        // 如果start为负数,则截取从倒数(从右向左数)第几个到数组末尾之间的值,并从倒数第几个位置开始插入新的值。
        let _arr2 = arry.splice(-2, 2,22,23);
        console.log('数组arry:' + arry);
        console.log('数组_arr2:' + _arr2);

    3.split

    参数描述
    separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
    howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
        // split(字符串)
        // 用法:stringObject.split(separator,howmany)把一个字符串分割成字符串数组
        // 如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
        let stringA1 = "1,2,3,4,5,6,7";
        let _stringArry1 = stringA1.split("");
        console.log('stringA1:' + stringA1);
        console.log('_stringArry1:' + _stringArry1);
        let stringA2 = "1.2.3.4.5.6.7";
        let _stringArry2 = stringA2.split(".");
        console.log('stringA2:' + stringA2);
        console.log('_stringArry2:' + _stringArry2);
  • 相关阅读:
    同一个ip、不同端口的两个应用,cookie竟然是可以互相访问到
    JS类型判断typeof、instanceof、Object.prototype.toString.call()
    js 控制一次加载一张图片,加载完成后再加载下一张
    cookie机制和session机制的区别
    Do not access Object.prototype method 'hasOwnProperty' from target object
    Vue 中使用mockjs模拟后端数据
    vue遍历数据字典
    this的用法
    关于html5的离线缓存(转帖)
    js正则 (二)
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/8658332.html
Copyright © 2011-2022 走看看