Сравнение массивов в js

Потому что сравниваются их строковые представления:

console.log( 
  [2, 6, 10].toString(),  
  [2, 10, 0].toString(),  
  [2, 6, 10] > [2, 10, 0] 
);

А почему тогда [1,1,1] не идентичен и не равен [1,1,1]?

Почему не равен? Равен:

var a = [1,1,1]; 
var b = [1,1,1]; 
 
console.log(!(a > b) && !(a < b));

А как правильно их сравнить тогда?

Поэлементно.

При сравнении на > и < объекты приводятся к примитивам - в случае массивов это строки, в которых перечислены все элементы массива через запятую. Поэтому [2,6,10]>[2,10,0] - это то же самое, что "2,6,10">"2,10,0", а строки сравниваются лексикографически. Первые 2 символа 2, здесь совпадают, а вот дальше сравнивается 6 и 1 - очевидно, что первое больше - вот и получается true.

Если требуется сравнить массивы поэлементно, надо написать собственную функцию, которая сравнивает их в цикле.

PS: Немного не по теме, но может пригодиться.

Данная функция вернет номер (начиная с 1) большего массива и 0 если они равны

function compareArrays(m1, m2) 
{ 
for(let i=0; i<m1.length && i<m2.length; i++) 
{ 
   if(m1[i]>m2[i]){ return 1; } 
   if(m1[i]<m2[i]){ return 2; } 
} 
if(m1.length>m2.length){return 1;} 
if(m1.length<m2.length){return 2;} 
if(m1.length==m2.length){return 0;} 
 
return false; 
} 
 
console.log(compareArrays([5,6,4], [5,10,0]));