Javascript数组研究07_手写实现_[Symbol.iterator]_toLocaleString_toReversed_toSorted_toSpliced

于 2024-10-05 00:15:00 发布
阅读量718 收藏 4
点赞数 13
分类专栏： javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33546823/article/details/142704820
版权

31 Array@@iterator

31.1 基本介绍

@@iterator 方法（通过 array[Symbol.iterator] 访问）返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。

array[Symbol.iterator]()

输入参数：无。

输出：一个新的迭代器对象，可用于遍历数组的元素。

注意事项：

  • 该迭代器遵循迭代器协议，具有 next() 方法。
  • 每次调用 next() 方法会返回一个包含 value 和 done 属性的对象。
    • value：当前迭代的数组元素的值。
    • done：布尔值，表示迭代是否完成。
  • 该方法是通用的，可用于类数组对象。
  • 方法返回值和Array.prototype.values一致
31.2 手写实现
MyArray.prototype[Symbol.iterator] = function() {
    let index = 0;
    let array = this;
    return {
    	// 返回对象包含next方法
        next: function() {
            if (index < array.length) {
                let value = array[index];
                index++;
                // next()返回值有value和done属性
                return { value: value, done: false };
            } else {
                return { value: undefined, done: true };
            }
        },
        // 实现迭代器协议，返回自身（也是迭代器）
        [Symbol.iterator]: function() { return this; }
    };
};

// 测试用例
let arr = new MyArray(1, 2, 3);
for (let item of arr) {
    console.log(item); // 输出 1, 2, 3
}

let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

难点总结：

  • 实现迭代器协议：需要提供 next() 方法和 [Symbol.iterator]() 方法，使迭代器本身可迭代。
  • 正确处理索引：需要跟踪当前索引，确保遍历完整个数组。
  • 处理稀疏数组：迭代器会遍历所有索引，包括空槽，空槽的值为 undefined。

32 Array.toLocaleString()

32.1 基本介绍

toLocaleString() 方法返回一个表示数组元素的字符串。数组中的元素将使用各自的 toLocaleString 方法转换成字符串，这些字符串由一个特定语言环境的字符串（例如逗号 ","）分隔。

array.toLocaleString()

输入参数：无。

输出：一个字符串，表示数组的元素。

注意事项：

  • 该方法不会修改原数组，是一个复制方法。
  • 对于每个元素，调用其 toLocaleString 方法。如果元素为 null 或 undefined，则转换为空字符串。
  • 使用的分隔符是特定于语言环境的。
  • 争对稀疏数组，空槽的行为和undefined一致
32.2 手写实现
MyArray.prototype.toLocaleString = function() {
    let result = '';
    let separator = ','; // 分隔符，实际应根据本地化设置，这里简化处理

    for (let i = 0; i < this.length; i++) {
        if (i > 0) result += separator;

        let element = this[i];
        if (element == null) { // null 或 undefined
            result += '';
        } else if (typeof element.toLocaleString === 'function') {
            result += element.toLocaleString();
        } else {
            result += element.toString();
        }
    }
    return result;
};

// 测试用例
let date = new Date('2020-01-01');
let arr = new MyArray(1234.567, date, 'Hello', null, undefined);
console.log(arr.toLocaleString());
// 输出示例："1,234.567,1/1/2020, 12:00:00 AM,Hello,,"

难点总结：

  • 处理不同类型的元素：需要调用元素的 toLocaleString 方法，处理数字、日期、字符串等类型。
  • 处理 null 和 undefined：应转换为空字符串。
  • 分隔符：分隔符应根据语言环境确定，简化情况下使用逗号。

33 Array.toReversed()

33.1 基本介绍

toReversed()方法是 reverse() 方法对应的复制版本。它返回一个元素顺序相反的新数组。

array.toReversed()

输入参数：无。

输出：一个新的数组，元素顺序与原数组相反。

注意事项：

  • 该方法不会修改原数组，是一个复制方法。
  • 返回的新数组是原数组的浅拷贝。
  • 对于稀疏数组，空槽的处理和reverse方法不一致，在该函数空槽将被视为undefined
33.2 手写实现
MyArray.prototype.toReversed = function() {
    let length = this.length >>> 0;
    let result = new MyArray();
    result.length = length;

    for (let i = 0; i < length; i++) {
    	// 直接赋值，空槽将被处理为undefined
        result[i] = this[length - 1 - i];
    }

    return result;
};

// 测试用例
let arr = new MyArray(1, 2, 3);
let reversedArr = arr.toReversed();
console.log(reversedArr); // [3, 2, 1]
console.log(arr); // [1, 2, 3]

let sparseArr = new MyArray();
sparseArr[1] = 'a';
sparseArr[3] = 'b';
let reversedSparseArr = sparseArr.toReversed();
console.log(reversedSparseArr); // ['b', undefined, 'a', empty]

难点总结：

  • 创建新数组：需要正确设置新数组的长度。
  • 处理稀疏数组：和reverse不同，空槽将会被看作undefined。
  • 不修改原数组：必须确保原数组未被修改。

34 Array.toSorted()

34.1 基本介绍

toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。

array.toSorted(compareFunction)

输入参数：

  • compareFunction(a, b)（可选）：用于定义排序顺序的函数。

输出：一个新的已排序数组。

注意事项：

  • 该方法不会修改原数组，是一个复制方法。
  • 排序行为与 sort() 方法相同。
  • 对于稀疏数组，空槽处理行为和sort不一致，将会被视为undefined。
34.2 手写实现
MyArray.prototype.toSorted = function(compareFunction) {
    let length = this.length >>> 0;
    let elements = [];
    let holesCount = 0;

    // 将所有元素（包括空槽视为 undefined）收集到 elements 数组中
    for (let i = 0; i < length; i++) {
        if (i in this) {
            let value = this[i];
            elements.push(value);
        } else {
            // 空槽视为 undefined
            elements.push(undefined);
        }
    }

    if (typeof compareFunction !== 'function') {
        compareFunction = function(a, b) {
            // 将 undefined 元素排序到末尾
            if (a === undefined && b === undefined) return 0;
            if (a === undefined) return 1;
            if (b === undefined) return -1;

            let strA = String(a);
            let strB = String(b);
            if (strA < strB) return -1;
            if (strA > strB) return 1;
            return 0;
        };
    } else {
        // 包装用户提供的 compareFunction，确保 undefined 被排序到末尾
        const originalCompareFunction = compareFunction;
        compareFunction = function(a, b) {
            if (a === undefined && b === undefined) return 0;
            if (a === undefined) return 1;
            if (b === undefined) return -1;
            return originalCompareFunction(a, b);
        };
    }

    // 使用排序算法（这里使用快速排序）
    function quickSort(arr, left, right) {
        if (left >= right) return;
        let pivotIndex = partition(arr, left, right);
        quickSort(arr, left, pivotIndex - 1);
        quickSort(arr, pivotIndex + 1, right);
    }

    function partition(arr, left, right) {
        let pivot = arr[right];
        let i = left - 1;
        for (let j = left; j < right; j++) {
            if (compareFunction(arr[j], pivot) <= 0) {
                i++;
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
        }
        [arr[i + 1], arr[right]] = [arr[right], arr[i + 1]];
        return i + 1;
    }

    quickSort(elements, 0, elements.length - 1);

    // 构建结果数组
    let result = new MyArray();
    for (let i = 0; i < elements.length; i++) {
        result[i] = elements[i];
    }
    result.length = elements.length;

    return result;
};


// 测试用例 1
let arr = new MyArray(3, 1, 4, 1, 5, 9);
let sortedArr = arr.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5, 9]
console.log(arr);       // [3, 1, 4, 1, 5, 9]

// 测试用例 2：含有空槽和 undefined
let sparseArr = new MyArray();
sparseArr[2] = 'c';
sparseArr[5] = 'a';
sparseArr[7] = undefined;
sparseArr[9] = 'b';
let sortedSparseArr = sparseArr.toSorted();
console.log(sortedSparseArr); // ['a', 'b', 'c', undefined, undefined, undefined, undefined, undefined, undefined, undefined]
console.log(sparseArr);       // [empty × 2, 'c', empty × 2, 'a', empty, undefined, empty, 'b']

// 测试用例 3：自定义比较函数
let arr2 = new MyArray('banana', undefined, 'apple', , 'cherry');
let sortedArr2 = arr2.toSorted((a, b) => a.localeCompare(b));
console.log(sortedArr2); // ['apple', 'banana', 'cherry', undefined, undefined]
console.log(arr2);       // ['banana', undefined, 'apple', empty, 'cherry']

// 测试用例 4：全是空槽的数组
let arr3 = new MyArray(5);
let sortedArr3 = arr3.toSorted();
console.log(sortedArr3); // [undefined, undefined, undefined, undefined, undefined]

难点总结：

  • 将空槽视为 undefined：在遍历数组时，如果索引不存在（空槽），将其视为 undefined 并添加到 elements 数组中。。
  • 排序时将 undefined 排到末尾：在比较函数中，明确规定 undefined 应排在末尾。
  • 处理用户自定义的 compareFunction：当用户提供比较函数时，需要包装一下，确保 undefined 被正确处理。
  • 创建新数组：构建结果数组时，按照排序后的 elements 数组逐个赋值，确保长度和索引正确。

35 Array.toSpliced()

35.1 基本介绍

toSpliced() 方法返回一个数组的浅拷贝，其中从指定的开始索引删除或替换了指定数量的元素，并插入了新元素。该方法不会修改原数组。

array.toSpliced(start)
array.toSpliced(start, deleteCount)
array.toSpliced(start, deleteCount, item1, item2, ...)

输入参数：

  • start：开始修改的索引位置。
  • deleteCount（可选）：要删除的元素数量。
  • item1, item2, ...（可选）：要插入的新元素。

输出：一个新的数组，包含修改后的元素。

注意事项：

  • 该方法不会修改原数组，是一个复制方法。
  • 行为类似于 splice() 方法，但返回的是新数组。
  • 对于稀疏数组，将会将空槽处理为undefined
35.2 手写实现
MyArray.prototype.toSpliced = function(start, deleteCount, ...items) {
    let length = this.length >>> 0;
    let result = new MyArray();
    let actualStart = start < 0
        ? Math.max(length + start, 0)
        : Math.min(start, length);
    let actualDeleteCount = deleteCount === undefined
        ? length - actualStart
        : Math.min(Math.max(Number(deleteCount), 0), length - actualStart);

    let k = 0;

    // Copy elements before actualStart, treating holes as undefined
    for (let i = 0; i < actualStart; i++, k++) {
        result[k] = this[i]; // Holes will be assigned undefined
    }

    // Insert new items
    for (let i = 0; i < items.length; i++, k++) {
        result[k] = items[i];
    }

    // Copy elements after the deleted section, treating holes as undefined
    for (let i = actualStart + actualDeleteCount; i < length; i++, k++) {
        result[k] = this[i]; // Holes will be assigned undefined
    }

    // Set the length of the new array
    result.length = k;

    return result;
};


// Test Case 1: Basic usage with holes treated as undefined
let arr = new MyArray(1, 2, 3, 4, 5);
let splicedArr = arr.toSpliced(2, 2, 'a', 'b');
console.log(splicedArr); // [1, 2, 'a', 'b', 5]
console.log(arr);        // [1, 2, 3, 4, 5]

// Test Case 2: Deleting elements without adding new ones
let arr2 = new MyArray(1, 2, 3);
let splicedArr2 = arr2.toSpliced(1);
console.log(splicedArr2); // [1]
console.log(arr2);        // [1, 2, 3]

// Test Case 3: Inserting into a sparse array (holes treated as undefined)
let sparseArr = new MyArray(1, , 3); // [1, <empty>, 3]
let splicedSparseArr = sparseArr.toSpliced(1, 0, 'a');
console.log(splicedSparseArr); // [1, 'a', undefined, 3]
console.log(sparseArr);        // [1, <empty>, 3]

// Test Case 4: Deleting from a sparse array (holes treated as undefined)
let splicedSparseArr2 = sparseArr.toSpliced(1, 2);
console.log(splicedSparseArr2); // [1]
console.log(sparseArr);         // [1, <empty>, 3]

// Test Case 5: Negative start index
let arr3 = new MyArray('x', 'y', 'z');
let splicedArr3 = arr3.toSpliced(-2, 1, 'a', 'b');
console.log(splicedArr3); // ['x', 'a', 'b', 'z']
console.log(arr3);        // ['x', 'y', 'z']

// Test Case 6: Deleting more elements than remain
let arr4 = new MyArray(1, 2, 3, 4);
let splicedArr4 = arr4.toSpliced(2, 10);
console.log(splicedArr4); // [1, 2]
console.log(arr4);        // [1, 2, 3, 4]

// Test Case 7: Deleting zero elements
let arr5 = new MyArray(1, 2, 3);
let splicedArr5 = arr5.toSpliced(1, 0, 'a', 'b');
console.log(splicedArr5); // [1, 'a', 'b', 2, 3]
console.log(arr5);        // [1, 2, 3]

难点总结：

  • 处理稀疏数组：空槽将会被视为undefined。
  • 处理新数组赋值：不需要修改原始数组，直接拼接原始数组以及添加元素内容即可完成。
It'sMyGo
关注
专栏目录
数组 | Array_API（含手写原理）
weixin_49179577的博客
07-08 483
总结JavaScript中数组相关API包含手写原理，一起学习吧
_improve-1
loveX001的博客
02-26 595
1. JS内置类型JavaScript 的数据类型有下图所示JavaScript 中的数据是如何存储在内存中的？在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是、、。其中的代码空间主要是存储可执行代码的，原始类型()的数据值都是直接保存在“栈”中的，引用类型(Object)的值是存放在“堆”中的。因此在栈空间中(执行上下文)，原始类型存储的是变量的值，而引用类型存储的是其在"堆空间"中的地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，相当于多了一道
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
热门推荐
qq_54753561的博客
12-25 26万+
2022年最新前端面试题 热门题目 （面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 import export、箭头函数、generator函数、promise let cosnt ......
05.前端面经汇总javaScript篇
a2274001782的博客
06-04 931
前端js面经汇总，持续更新
前端 js实现模糊搜索
q4717529的博客
02-16 5863
前端 js实现模糊搜索
JavaScript工具类
stealPigs-youth的博客
10-03 230
JavaScript内置对象和模块
透彻研究Javascript类型转换
FareBlog
08-05 2696
Javascript 中有5种基本类型(不包括 symbol)，以及对象类型，他们在不同的运算中会被系统转化为不同是类型，当然我们也可以手动转化其类型。Javascript 类型转换中坑点极多，就连 Douglas Crockford 在 《Javascript: The Good Parts》一书中也极力 ‘吐槽’ 。下面我们来自习研究一下这个部分，希望不要把自己绕晕。typeof 运算在解释各个
JavaScript面试题（搜集版）
weixin_45572708的博客
06-28 903
✅ 官方说法：闭包就是指有权访问另一个函数作用域中的变量的函数。✅ MDN说法：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。深度回答。
再学javascript
我的博客简介
01-25 394
这里有一个坑，如果我创建一个对象，更改它的原型，constructor就会变得不可靠了。可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型；基于 ES6，会改变自身值的方法一共有 9 个，分别为。来调用，才能返回正确的类型信息。的原型方法，调用该方法，可以统一返回格式为。，不会改变自身的方法也有 9 个，分别为。可以很好地判断引用类型，甚至可以把。除外），但是引用数据类型中，除了。，以及两个 ES6 新增的方法。类型以外，其他的也无法判断。而对于其他对象，则需要通过。从上面这段代码可以看出，
Symbol.Iterator简单理解
m0_46525076的博客
07-10 6512
symbol 是什么？ Itertor是什么？ symbol的内置符号symbol.Iterator，有什么用？ 为什么会出现for..of? for..of怎么用? 首先symbol是es6新增的类型，它是一个基本类型，symbol英文翻译是符号的意思。 在叙述symbol之前，推出一个概念，“以操作目标为程序本身的行为特性的编程，我们称为元编程。” 我们已知symbol是es6新增类型，按照逻辑推演：作为新增的类型，symbol一定是为了弥补了之前的不足，所以才出现的
(result, consumed) = self._buffer_decode(data, self.errors, final) UnicodeDecodeError: ‘utf-8‘ c
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
09-01 4068
问题记录。
Can‘t pickle local object ‘get_transforms.＜locals＞.process‘
jacke121的专栏
10-17 5188
Can't pickle local object 'get_transforms.<locals>.process' 网上的答案： AttributeError: Can't pickle local object 'get_transform.<locals>.<lambda>' 还是这个错.. pytorch直接把num_workers 改成0就可以不用多线程了....之前tensorflow这样子不可以 参考：https://blog.csdn...
反向迭代器reverse_iterator与正向迭代器iterator之间的转换（list反向删除元素的方法）
onlysingleboy的专栏
07-05 8204
首先，本文的公众号地址为：你真的会清理std::list的元素吗？ 刚开通公众号，请求大家关注一下，谢谢大家。公众号二维码如下：有经验的程序员都知道，list是链表，可以遍历删除，删除的过程类似于以下代码（遍历删除521）：int key=521;//程序员就不要爱情了吧 list::iterator it=l.begin();//l为std::list for (; it != l.en
caffe深度学习【四】编译错误：Makefile:619: recipe for target '.build_release/tools/upgrade_net_proto_binary.bin'
volcano_Lin 的博客
08-03 1万+
问题： 今天在配置caffe-SSD时，准备编译caffe遇到了整屏的错误，但是别怕，简单改一下，就可以解决问题了。 有点看不清，我直接把错误列出来：   CXX/LD -o .build_release/tools/net_speed_benchmark.bin CXX/LD -o .build_release/tools/caffe.bin CXX/LD -o .build_re...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 838
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 407
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 565
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 304
【代码】如何使用Redisson的布隆过滤器？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值