不是你记忆中的join，但致命的程度没两样

join方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

前端群里有人问了个问题，想将数组中的地址转成成字符存储：['static.qianduanka.com/imgs/a.jpg', 'static.qianduanka.com/imgs/b.jpg', 'static.qianduanka.com/imgs/c.jpg', ob: Observer]在控制台报错，这是个啥__ob__: Observer？我从哪里来，我在那，发生了什么，一愣懵有没有。

悄悄告诉你，答案在最后哦！

一、将数组转字符串以下划线链接

['friends', 'welcome', 'to', 'qianduanka', 'website'].join('_');
//  => friends_welcome_to_qianduanka_website

二、数组元素是基本类型String、Number、Boolean、Null、undefined、Symbol、BigInt

1. null、undefined 会转换成空字符串
2. Symbol类型不支持转换字符串，Uncaught TypeError: Cannot convert a Symbol value to a string
3. bigint 转换成数值字符串，没有n标记，将字符转换成数组时无法区分是通过Number还是BigInt转换

[1, 'a', true, null, undefined, BigInt(1), Infinity, NaN].join('_');
//  => 1_a_true___1_Infinity_NaN

三、数组元素是引用类型

1. 引用类型会调用自身的toString方法。例如：new Object().toString() 返回'[object Object]'，new Number(1).toString() 返回'1'

[new Object(), new Number(1), new String('a'), new Boolean(true), {}, ['a', 'b', 'c']].join('_');
//  => [object Object]_1_a_true_[object Object]_a,b,c

四、数组元素中索引只对大于等于零的整数有效

let arr = ['a', 'b', 'c'];
arr[-1] = 'q';
arr[3] = 'd';
arr.x = 'x';

arr;  // => ['a', 'b', 'c', 'd', -1: 'q', x: 'x']
arr.join('_');  // => a_b_c_d
arr.length;  // => 4

五、类数组调用join方法，类数组一般特点索引和length

1. 类数组中的索引只对大于等于零并且小于length的整数有效

[].join.call({ 
    '-1': 'q', 
    '0': 'a', 
    '1': 'b', 
    '2': 'c', 
    '6': 'g', 
    'x': 'x', 
    'y': 'y', 
    length: 5 
}, '_');
//  => a_b_c__

六、函数参数arguments调用join方法冷门，但是Array.prototype.slice.call(arguments)很常见哈

function fn(){
    arguments;  // ['a', 'b', 'c', callee: ƒ, Symbol(Symbol.iterator): ƒ]
    [].join.call(arguments, '_');  // => a_b_c
}
fn('a', 'b', 'c');

七、群里的一个问题（Vue重写数组），与例四一样

// 定义一个Observer类
class Observer{
    constructor(value = [], count = 0){
        this.value = value;
        this.count = count;
    }
}

// 定义一个QdkArr类继承了Array
class QdkArr extends Array{
    constructor(){
        super();
        this.__ob__ = new Observer();
    }
}

let arr = new QdkArr();
arr.push('a');
arr.push('b');
arr.push('c');

arr;  // => ['a', 'b', 'c', __ob__: Observer]
arr.join('_');  // => a_b_c
arr.length;  // => 3

实际项目中遇到的问题需要精简化模拟，也许你问例七与例四哪里一样？需要你品，你细品

原文：不是你记忆中的join

来源：前端咖网站