Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 数组方法和对象模拟数组的方法
Blogger Information
Blog 70
fans 1
comment 0
visits 52941
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数组方法和对象模拟数组的方法
葡萄枝子
Original
558 people have browsed it

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

数组方法

  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>

对象模拟数组方法

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：这个写的确实不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post