join的应用和类数组

join应用,将字符串拼接在一起

var str = "alibaba";
var str1 = "baidu";
var str2 = "tencent";
var str3 = "toutiao";
//散列结构
var arr = [str,str1,str2,str3];
var newArr = arr.join("");

newArr = “alibababaidutencenttoutiao”

类数组:
1.可以利用属性名模拟数组的特性
2.可以动态的增长length属性
3.如果强行让类数组调用push方法,则会根据length属性值的位置进行属性的扩充
example:

 var obj = {
    "0":'a',
    "1":'b',
    "2":'c',
    "length":3,
    "push":Array.prototype.push,
    "splice":Array.prototype.splice
}

在这里插入图片描述
如果给对象增加数组的方法,它就可以调用数组的方法,成为类数组,length的长度也会跟着增长
属性要为索引(数字)属性,必须有length属性,最好加上push方法

例子分析:
example1:

var obj = {
    "2":"a",
    "3":"b",
    "length":2,
    "push":Array.prototype.push
}
newArray1 = obj.push('c');
newArray2 = obj.push('d');

执行newArray1语句时,因为obj的length的长度为2;所以c会顶替a的位置,第一次obj的变为

在这里插入图片描述
然后length的长度变为3

执行newArray2语句时,因为obj的length的长度为3;所以d会顶替b的位置,第二次obj的变为
在这里插入图片描述

<think>我们正在讨论JavaScript中的类数组对象。根据引用,类数组对象是“看上去像数组,又不是数组”的对象,它们具有数字下标属性、length属性,但没有数组的方法(如push, pop等)。常见的例子包括函数的arguments对象DOM操作返回的NodeList。 关键特征: 1. 有数字索引(下标)访问元素 2. 有length属性,表示元素个数 3. 没有数组的内置方法(如push, slice等) 使用方法: 1. 创建类数组对象:可以按照引用[2][3]的方法,创建一个空对象,然后添加数字下标属性,并设置length属性。 2. 将类数组对象转换为真正的数组:可以使用Array.prototype.slice.call()或Array.from()(ES6)方法,这样就能使用数组的方法了。 3. 借用数组方法:如引用[3][4]提到的,可以通过Function.call或Function.apply来借用数组的方法(例如Array.prototype.push.call)。 注意:引用[5]提到,转换后的数组会失去原有类数组对象的一些特性(比如用字符串作为属性名访问元素的能力)。 下面我们通过示例来详细说明。</think>### JavaScript 类数组对象详解 #### 1. **什么是类数组对象?** 类数组对象(Array-like Object)指**具有数字索引 `length` 属性,但缺乏数组方法(如 `push`, `pop`)的对象**。其核心特征: - **数字下标访问**:可通过 `obj[0]`、`obj[1]` 访问元素 - **`length` 属性**:标识元素数量 - **非真正数组**:无法直接调用 `Array.prototype` 方法[^1][^4][^5] 常见类数组对象:函数的 `arguments`、DOM 的 `NodeList`、字符串等。 --- #### 2. **创建类数组对象** 通过手动添加属性 `length` 实现: ```javascript // 步骤1:创建空对象 const arrayLike = {}; // 步骤2:添加数字下标属性 arrayLike[0] = "a"; arrayLike[1] = "b"; // 步骤3:设置lengthsplice(模拟数组行为) arrayLike.length = 2; arrayLike.splice = Array.prototype.splice; // 可选,使控制台输出类似数组 ``` 此时 `arrayLike` 可像数组一样迭代,但无法直接调用 `arrayLike.push()`[^1][^3]。 --- #### 3. **类数组对象的使用方法** ##### (1) **转换为真实数组** 使用 `Array.from()` 或 `Array.prototype.slice`: ```javascript // 方法1:ES6的Array.from const realArray1 = Array.from(arrayLike); // 方法2:借用数组的slice方法 const realArray2 = Array.prototype.slice.call(arrayLike); ``` 转换后可调用数组方法(如 `slice`, `push`)[^4][^5]。 ##### (2) **借用数组方法** 不转换直接调用数组方法: ```javascript // 类数组对象使用数组的push方法 Array.prototype.push.call(arrayLike, "c"); console.log(arrayLike.length); // 输出3 console.log(arrayLike[2]); // 输出"c" // 类数组对象使用数组的join方法 const str = Array.prototype.join.call(arrayLike, "-"); console.log(str); // 输出"a-b-c" ``` > ⚠️ 注意:部分方法(如 `concat`)可能不兼容类数组对象[^3][^4]。 --- #### 4. **典型应用场景** - **处理 `arguments` 对象**: ```javascript function sum() { const args = Array.prototype.slice.call(arguments); return args.reduce((a, b) => a + b); } console.log(sum(1, 2, 3)); // 输出6 ``` - **操作 DOM 集合**: ```javascript const divs = document.querySelectorAll("div"); // NodeList是类数组 const divArray = Array.from(divs); divArray.forEach(div => console.log(div)); ``` --- #### 5. **注意事项** - 类数组对象的 `length` 不会自动更新,需手动维护[^2]。 - 转换为真实数组后会丢失非数字键属性(如 `obj.name`)[^5]。 - 优先使用 `Array.from()`(ES6)代替 `slice.call()`,代码更简洁。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值