search

博客列表 >数组方法和对象模拟数组的方法

数组方法和对象模拟数组的方法

葡萄枝子
葡萄枝子原创
2021年11月20日 18:25:38557浏览

数组方法和对象模拟数组的方法

数组方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <!--js数组-->
  10. <script>
  11.     var num = 15;
  12.     var data = ['a', 'b', 'c', ['x', 'y']];
  13.     var res = [];
  15.     // 转字符串，数字转2进制，省略则默认10进制
  16.     res = num.toString(2);
  17.     console.log(res);
  18.     // 1111
  20.     // 数组转字符串，',' 连接
  21.     res = data.toString();
  22.     console.log(res);
  23.     // 'a,b,c,x,y'
  25.     // 数组转字符串，分隔符连接（省略则默认 , 连接）
  26.     res = data.join('-');
  27.     console.log(res);
  28.     // a-b-c-x,y
  30.     // 尾部添加，返回新数组长度
  31.     res = data.push([1, 2]);
  32.     console.log(data, res);
  33.     // ['a', 'b', 'c', ['x', 'y'], [1, 2]] 数组长度 5
  35.     // 尾部删除，删除最后一个元素，返回被删除的元素
  36.     res = data.pop();
  37.     console.log(data, res);
  38.     // ['a', 'b', 'c', ['x', 'y']] 被删除 [1, 2]
  40.     // 头部添加，返回新数组长度
  41.     res = data.unshift([1, 2, 3]);
  42.     console.log(data, res);
  43.     // [[1, 2, 3], 'a', 'b', 'c', ['x', 'y']] 数组长度 5
  45.     // 头部删除，删除第一个元素，返回被删除的元素
  46.     res = data.shift();
  47.     console.log(data, res);
  48.     // ['a', 'b', 'c', ['x', 'y']] 被删除 [1, 2, 3]
  50.     // 删除替换，第2位置删除1个元素，'o', {p: 'p', q: 'q'} 添加到删除位置，返回被删除的元素数组
  51.     res = data.splice(2, 1, 'o', {p: 'p', q: 'q'});
  52.     console.log(data, res);
  53.     // ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y']] 被删除 ['c']
  55.     // 截取，不改变现有数组，返回第3到第4（不含）之前的元素组成新数组
  56.     res = data.slice(3, 4);
  57.     console.log(data, res);
  58.     // ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y']] 返回 [{p: 'p', q: 'q'}]
  60.     // 合并，不改变现有数组，返回新数组
  61.     res = data.concat([1, 2], 3);
  62.     console.log(data, res);
  63.     // ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y']] 返回 ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y'], 1, 2, 3]
  65.     // 遍历，为每个元素执行回调，无返回值
  66.     data.forEach(function (item, i, arr) {
  67.         if ('object' == typeof item && !Array.isArray(item))
  68.             console.log(item, i);
  69.     })
  70.     // {p: "p", q: "q"} 3
  72.     // 遍历，为每个元素执行回调，返回新数组
  73.     res = data.map(function (item, i, arr) {
  74.         return Array.isArray(item);
  75.     })
  76.     console.log(res);
  77.     // 返回 [false, false, false, flase, true]
  79.     // 遍历，为每个元素执行回调，返回布尔是否全部为真
  80.     res = data.every(function (item, i, arr) {
  81.         return Array.isArray(item);
  82.     })
  83.     console.log(res);
  84.     // false
  86.     // 遍历，为每个元素执行回调，返回布尔是否有一个为真
  87.     res = data.some(function (item, i, arr) {
  88.         return Array.isArray(item);
  89.     })
  90.     console.log(res);
  91.     // true
  93.     // 过滤，返回过滤后的新数组
  94.     res = data.filter(function (item, i, arr) {
  95.         return Array.isArray(item);
  96.     })
  97.     console.log(res);
  98.     // 返回 [['x', 'y']]
  100.     // 归并，迭代所有项，返回最终值
  101.     res = data.reduce(function (prev, curr, i, arr) {
  102.         if (Array.isArray(curr)) {
  103.             prev.push(curr);
  104.         }
  105.         return prev;
  106.     }, [])
  107.     console.log(res);
  108.     // [['x', 'y']]
  110.     // 从第3位置查找元素首次出现的位置索引
  111.     res = data.indexOf('o', 3);
  112.     console.log(res);
  113.     // -1
  115.     // 同上，从后往前查
  116.     res = data.lastIndexOf('o');
  117.     console.log(res);
  118.     // 2
  120.     // 查找值，查找符合条件的首个元素，未找到返回 undefined
  121.     res = data.find(function (item, i, arr) {
  122.         return 'string' == typeof item;
  123.     });
  124.     console.log(res);
  125.     // a
  127.     // 查找索引，查找符合条件的首个元素的位置索引，未找到返回 -1
  128.     res = data.findIndex(function (item, i, arr) {
  129.         return 'string' == typeof item;
  130.     });
  131.     console.log(res);
  132.     // 0
  134.     // 反转
  135.     data.reverse();
  136.     console.log(data);
  137.     // [['x', 'y'], {p: 'p', q: 'q'}, 'o', 'b', 'a']
  139.     // 排序
  140.     data.sort();
  141.     console.log(data);
  142.     // [{p: 'p', q: 'q'}, 'a', 'b', 'o', ['x', 'y']]
  144.     // unshift, shift, push, pop, sort, reverse, splice 会改变原始数组
  145. </script>
  147. </body>
  148. </html>

数组方法

对象模拟数组方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <!--对象模拟数组-->
  10. <script>
  12.     function Myarray() {
  13.         this.length = arguments.length;
  14.         for (var i = 0; i < arguments.length; i++) {
  15.             this[i] = arguments[i];
  16.         }
  18.         // 获取数据
  19.         this.get = function () {
  20.             var data = [];
  21.             for (var i = 0; i < this.length; i++) {
  22.                 data[i] = this[i];
  23.             }
  24.             return data;
  25.         }
  27.         // 设置数据
  28.         this.set = function (data) {
  29.             this.length = data.length;
  30.             for (var i = 0; i < data.length; i++) {
  31.                 this[i] = data[i];
  32.             }
  33.         }
  35.         // toString 转字符串
  36.         this.toString = function () {
  37.             var data = '';
  38.             for (var i = 0; i < this.length; i++) {
  39.                 if (data) data += ',';
  40.                 data += this[i];
  41.             }
  42.             return data;
  43.         }
  45.         // join 连接
  46.         this.join = function (sep = ',') {
  47.             var data = '';
  48.             for (var i = 0; i < this.length; i++) {
  49.                 if (data) data += sep;
  50.                 data += this[i];
  51.             }
  52.             return data;
  53.         }
  55.         // push 尾部添加
  56.         this.push = function (elem) {
  57.             this[this.length] = elem;
  58.             this.length++;
  59.             return this.length;
  60.         }
  62.         // pop 尾部弹出
  63.         this.pop = function () {
  64.             var popData = this[this.length - 1];
  65.             delete this[this.length - 1];
  66.             this.length--;
  67.             return popData;
  68.         }
  70.         // unshift 头部添加
  71.         this.unshift = function (elem) {
  72.             for (var i = this.length; i > 0; i--) {
  73.                 this[i] = this[i - 1];
  74.             }
  75.             this[0] = elem;
  76.             this.length++;
  77.             return this.length;
  78.         }
  80.         // shift 头部弹出
  81.         this.shift = function () {
  82.             var shiftData = this[0];
  83.             for (var i = 0; i < this.length; i++) {
  84.                 this[i] = this[i + 1];
  85.             }
  86.             delete this[this.length - 1];
  87.             this.length--;
  88.             return shiftData;
  89.         }
  91.         // splice 删除替换
  92.         this.splice = function (start = 0, count = 0, replace = null) {
  93.             var delData = [];
  94.             for (var i = 0; i < count; i++) {
  95.                 delData[i] = this[start + i];
  96.                 delete this[start + i];
  97.             }
  99.             if (replace) {
  100.                 for (var i = this.length + arguments.length - 2; i > start; i--) {
  101.                     this[i] = this[i - 1];
  102.                 }
  103.                 for (var i = 0; i < arguments.length - 2; i++) {
  104.                     this[start + i] = arguments[i + 2];
  105.                     this.length++;
  106.                 }
  107.             }
  109.             var data = [], j = 0;
  110.             for (var i = 0; i < this.length; i++) {
  111.                 if (undefined === this[i]) continue;
  112.                 data[j] = this[i];
  113.                 j++;
  114.             }
  115.             this.set(data);
  116.             return delData;
  117.         }
  119.         // slice 截取
  120.         this.slice = function (start, pos) {
  121.             var data = [], j = 0;
  122.             for (var i = start; i < pos; i++) {
  123.                 data[j] = this[i];
  124.                 j++;
  125.             }
  126.             return data;
  127.         }
  129.         // concat 合并
  130.         this.concat = function () {
  131.             var data = this.get(), j = data.length;
  132.             for (var i = 0; i < arguments.length; i++) {
  133.                 data[j] = arguments[i];
  134.                 j++;
  135.             }
  136.             return data;
  137.         }
  139.         // forEach 遍历
  140.         this.forEach = function (fn) {
  141.             for (var i = 0; i < this.length; i++) {
  142.                 fn(this[i], i, this);
  143.             }
  144.         }
  146.         // map 遍历
  147.         this.map = function (fn) {
  148.             var data = [];
  149.             for (var i = 0; i < this.length; i++) {
  150.                 data[i] = fn(this[i], i, this);
  151.             }
  152.             return data;
  153.         }
  155.         // every 遍历
  156.         this.every = function (fn) {
  157.             var data = true;
  158.             for (var i = 0; i < this.length; i++) {
  159.                 data = data && fn(this[i], i, this);
  160.             }
  161.             return data;
  162.         }
  164.         // some 遍历
  165.         this.some = function (fn) {
  166.             var data = false;
  167.             for (var i = 0; i < this.length; i++) {
  168.                 data = data || fn(this[i], i, this);
  169.             }
  170.             return data;
  171.         }
  173.         // filter 过滤
  174.         this.filter = function (fn) {
  175.             var data = [], j = 0;
  176.             for (var i = 0; i < this.length; i++) {
  177.                 if (fn(this[i], i, this)) {
  178.                     data[j] = this[i];
  179.                     j++;
  180.                 }
  181.             }
  182.             return data;
  183.         }
  185.         // reduce 归并
  186.         this.reduce = function (fn, init = '') {
  187.             var data = init, j = 0;
  188.             for (var i = 0; i < this.length; i++) {
  189.                 data = fn(data, this[i], i, this);
  190.             }
  191.             return data;
  192.         }
  194.         // indexOf 查找索引
  195.         this.indexOf = function (value, pos = 0) {
  196.             for (var i = pos; i < this.length; i++) {
  197.                 if (value == this[i]) return i;
  198.             }
  199.             return -1;
  200.         }
  202.         // lastIndexOf 倒着查找
  203.         this.lastIndexOf = function (value, pos = 0) {
  204.             for (var i = this.length - 1; i >= pos; i--) {
  205.                 if (value == this[i]) return i;
  206.             }
  207.             return -1;
  208.         }
  210.         // find 查找元素
  211.         this.find = function (fn) {
  212.             for (var i = 0; i < this.length; i++) {
  213.                 if (fn(this[i], i, this)) return this[i];
  214.             }
  215.             return undefined;
  216.         }
  218.         // findIndex 查找索引
  219.         this.findIndex = function (fn) {
  220.             for (var i = 0; i < this.length; i++) {
  221.                 if (fn(this[i], i, this)) return i;
  222.             }
  223.             return -1;
  224.         }
  226.         // reverse 反转
  227.         this.reverse = function () {
  228.             var data = [], j = 0;
  229.             for (var i = this.length - 1; i >= 0; i--) {
  230.                 data[j] = this[i];
  231.                 j++;
  232.             }
  233.             this.set(data);
  234.         }
  236.         // sort 排序
  237.         this.sort = function (fn) {
  238.             var tmp;
  239.             for (var i = 0; i < this.length; i++) {
  240.                 if (('function' === typeof fn && fn(this[i], this[i + 1])) || 'undefined' === typeof fn) {
  241.                     for (var j = i + 1; j < this.length; j++) {
  242.                         if (this[i] > this[j]) {
  243.                             tmp = this[i];
  244.                             this[i] = this[j];
  245.                             this[j] = tmp;
  246.                         }
  247.                     }
  248.                 } else {
  249.                     for (var j = i + 1; j < this.length; j++) {
  250.                         if (this[i] < this[j]) {
  251.                             tmp = this[i];
  252.                             this[i] = this[j];
  253.                             this[j] = tmp;
  254.                         }
  255.                     }
  256.                 }
  257.             }
  258.         }
  260.         // max 最大值
  261.         this.max = function () {
  262.             var data = this[0];
  263.             for (var i = 1; i < this.length; i++) {
  264.                 if (data < this[i]) data = this[i];
  265.             }
  266.             return data;
  267.         }
  269.         // min 最小值
  270.         this.min = function () {
  271.             var data = this[0];
  272.             for (var i = 1; i < this.length; i++) {
  273.                 if (data > this[i]) data = this[i];
  274.             }
  275.             return data;
  276.         }
  277.     }
  279.     var data = new Myarray('a', 'b', 'c', ['x', 'y']);
  281.     // 数组转字符串，',' 连接
  282.     res = data.toString();
  283.     console.log(res);
  284.     // 'a,b,c,x,y'
  286.     // 数组转字符串，分隔符连接（省略则默认 , 连接）
  287.     res = data.join('-');
  288.     console.log(res);
  289.     // a-b-c-x,y
  291.     // 尾部添加，返回新数组长度
  292.     res = data.push([1, 2]);
  293.     console.log(data.get(), res);
  294.     // ['a', 'b', 'c', ['x', 'y'], [1, 2]] 数组长度 5
  296.     // 尾部删除，删除最后一个元素，返回被删除的元素
  297.     res = data.pop();
  298.     console.log(data.get(), res);
  299.     // ['a', 'b', 'c', ['x', 'y']] 被删除 [1, 2]
  301.     // 头部添加，返回新数组长度
  302.     res = data.unshift([1, 2, 3]);
  303.     console.log(data.get(), res);
  304.     // [[1, 2, 3], 'a', 'b', 'c', ['x', 'y']] 数组长度 5
  306.     // 头部删除，删除第一个元素，返回被删除的元素
  307.     res = data.shift();
  308.     console.log(data.get(), res);
  309.     // ['a', 'b', 'c', ['x', 'y']] 被删除 [1, 2, 3]
  311.     // 删除替换，第2位置删除1个元素，'o', {p: 'p', q: 'q'} 添加到删除位置，返回被删除的元素数组
  312.     res = data.splice(2, 1, 'o', {p: 'p', q: 'q'});
  313.     console.log(data.get(), res);
  314.     // ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y']] 被删除 ['c']
  316.     // 截取，不改变现有数组，返回第3到第4（不含）之前的元素组成新数组
  317.     res = data.slice(3, 4);
  318.     console.log(data.get(), res);
  319.     // ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y']] 返回 [{p: 'p', q: 'q'}]
  321.     // 合并，不改变现有数组，返回新数组
  322.     res = data.concat([1, 2], 3);
  323.     console.log(data.get(), res);
  324.     // ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y']] 返回 ['a', 'b', 'o', {p: 'p', q: 'q'}, ['x', 'y'], [1, 2], 3]
  326.     // 遍历，为每个元素执行回调，无返回值
  327.     data.forEach(function (item, i, arr) {
  328.         if ('object' == typeof item && !Array.isArray(item))
  329.             console.log(item, i);
  330.     })
  331.     // {p: "p", q: "q"} 3
  333.     // 遍历，为每个元素执行回调，返回新数组
  334.     res = data.map(function (item, i, arr) {
  335.         return Array.isArray(item);
  336.     })
  337.     console.log(res);
  338.     // 返回 [false, false, false, flase, true]
  340.     // 遍历，为每个元素执行回调，返回布尔是否全部为真
  341.     res = data.every(function (item, i, arr) {
  342.         return Array.isArray(item);
  343.     })
  344.     console.log(res);
  345.     // false
  347.     // 遍历，为每个元素执行回调，返回布尔是否有一个为真
  348.     res = data.some(function (item, i, arr) {
  349.         return Array.isArray(item);
  350.     })
  351.     console.log(res);
  352.     // true
  354.     // 过滤，返回过滤后的新数组
  355.     res = data.filter(function (item, i, arr) {
  356.         return Array.isArray(item);
  357.     })
  358.     console.log(res);
  359.     // 返回 [['x', 'y']]
  361.     // 归并，迭代所有项，返回最终值
  362.     res = data.reduce(function (prev, curr, i, arr) {
  363.         if (Array.isArray(curr)) {
  364.             prev.push(curr);
  365.         }
  366.         return prev;
  367.     }, [])
  368.     console.log(res);
  369.     // [['x', 'y']]
  371.     // 从第3位置查找元素首次出现的位置索引
  372.     res = data.indexOf('o', 3);
  373.     console.log(res);
  374.     // -1
  376.     // 同上，从后往前查
  377.     res = data.lastIndexOf('o');
  378.     console.log(res);
  379.     // 2
  381.     // 查找值，查找符合条件的首个元素，未找到返回 undefined
  382.     res = data.find(function (item, i, arr) {
  383.         return 'string' == typeof item;
  384.     });
  385.     console.log(res);
  386.     // a
  388.     // 查找索引，查找符合条件的首个元素的位置索引，未找到返回 -1
  389.     res = data.findIndex(function (item, i, arr) {
  390.         return 'string' == typeof item;
  391.     });
  392.     console.log(res);
  393.     // 0
  395.     // 反转
  396.     data.reverse();
  397.     console.log(data.get());
  398.     // [['x', 'y'], {p: 'p', q: 'q'}, 'o', 'b', 'a']
  400.     // 排序
  401.     data.sort();
  402.     console.log(data.get());
  403.     // [{p: 'p', q: 'q'}, 'a', 'b', 'o', ['x', 'y']]
  405.     // 最大最小值
  406.     var numArr = new Myarray(4, 2, 8, 5, 7, 1);
  407.     console.log(numArr.max(), numArr.min());
  409. </script>
  411. </body>
  412. </html>

对象模拟数组方法

上一条：html中的teble标签制作表格下一条：简单计算器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多