你应该 console.log(add(...b))

String/Number和数组相加，会把数组转换成字符串然后执行‘+’
所以最后结果是String类型

console.log(sun)得到的不还是[1,2,3,4,5,6,7,8,9,20]

首先，let b并不是你所想的[0，1，...，20，4]，而是变成了[[0，1，...,20,4]]。所以在你console.log(values)输出的就是`[ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 20, 4 ] ],而在

for (var val of values) {
            sum += val;
          }
          中，只执行了一次循环，拿到的val其实是一个list，执行sum+=val的时候转换成了string类型所以就变成了拼接字符串操作

let sun = [1, 2, 3, 4, 5, 6, 7, 8, 9, 20]
let b = [0, ...sun, 4];
//运行扩展运算符  将b转换成数组：[0,1,2,3...20];
function add(...values) {
    //这里的...values是rest 操作符，将形参转换为一个数组。
    //传入b转换为[[0,1,2,3,4]]
    let sum = 0;
    for (var val of values) {
        sum += val;
        //val为数组，0+[1,2,3,4,5...20];执行隐式转换，会把b转换为'0,1,2...20'
    }

    return sum;
}
console.log(add(b))

设计到三个问题，1是扩展操作符，2是rest操作符，3是隐式转换
参考

楼上回答的都是些什么奇怪的东西。。。
关键点难道不是因为你 add()方法定义的时候展开了数组了吗（...values）
所以你函数里面获取的value已经是一个二维数组了。简单来讲就是add函数内部获取的values已经变成这个了：
[[0,1,2,3,4,5,6,7,8,9,20,4]]

你把values前面的展开运算符去掉就是你要的结果了。

这里有解释

ES6 引入 rest 参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

给 add() 传参数要这样写：

add(2, 5, 3);

另外一种写法给你参考：

function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}

var a = [];
push(a, 1, 2, 3)