Веб-инструмент
Веб-мастерская
Если информация сохранена в массиве, JavaScript позволяет воспользоваться несколькими методами, определенными для управления данными. Рассмотрим методы объекта Array.
join – создает строку из элементов массива с указанным разделителем между ними; является строкой символов (возможно, пустой).
Синтаксис:
имя_массива.join(строка)
Возвращает строку символов. Единственным аргументом метода является строка из одного или нескольких символов. Чтобы перечислить элементы массива через запятую, используют следующий оператор.
var atrrayText = myArray.join(",");
Вызов метода не изменяет исходный массив, поэтому результат необходимо присвоить переменной или, свойству элемента формы.
array1 = new Array(1, 2, 3);
array1.join(",") //значение – строка "1, 2, 3")
array2 = new Array("a", "b", "c");
array2.join(" ") //значение – строка "a b c")
В окне веб-браузера это будет выглядеть ТАК.
А теперь давайте преобразуем массив названия планет в текстовую строку. На странице отображается поле, в котором можно ввести разделитель элементов массива в тексовой строке.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Методы Array.join</title>
<script language="JavaScript">
planets=new Array()
planets[0]="Меркурий - ";
planets[1]=" Венера - ";
planets[2]=" Земля - ";
planets[3]=" Марс - ";
function fobus (form) {
var truft=myForm.delim.value;
myForm.output.value=unescape(planets.join(truft));
}
</script>
</head>
<body>
<form action="" method="get" name="myForm">
<p>Введите название планеты<br>
<input name="delim" type="text" size="5">
<br>
<br>
<input name="" type="button" value="Дисплей" onClick="fobus (this.form)">
<input name="" type="reset">
</p>
<p>
<textarea name="output" cols="40" rows="4" wrap="virtual"></textarea>
</p>
</form>
</body
</html>
В окне веб-браузера это будет выглядеть ТАК.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Методы Array.reverse</title>
<script language="JavaScript">
planets=new Array()
planets[0]="Меркурий - ";
planets[1]=" Венера - ";
planets[2]=" Земля - ";
planets[3]=" Марс - ";
//отображение массива, находящегося в памяти
function fobus (form) {
var truft=myForm.delim.value;
myForm.output.value=unescape(planets.join(truft));
}
//изменение направления массива и представление его строкой
function revers (form) {
var truft=myForm.delim.value;
planets.reverse(); //изменение направления массива
myForm.output.value=unescape(planets.join(truft));
}
</script>
</head>
<body>
<form action="" method="get" name="myForm">
<p>Введите название планеты<br>
<input name="delim" type="text" size="5">
<br>
<br>
<input name="" type="button" value="Дисплей" onClick="fobus (this.form)">
<input name="" type="button" onClick="revers (this.form)" value="Revers">
<input name="" type="reset">
</p>
<p>
<textarea name="output" cols="40" rows="4" wrap="virtual"></textarea>
</p>
</form>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Нажмите на кнопку "Дисплей". В текстовой области отразится список элементов массива.При нажатии кнопки "Revers" порядок следования элементов изменится на противоположный.| Возвращаемое значение | Описание |
| меньше < 0 | b следует за a |
| 0 | Порядок следования a и b не изменяется |
| больше > 0 | a следует за b |
Рассмотрим пример.
myArray = new Array(14, 3, 450, 90); //числовой массив
function corms(a, b) { //функция сравнения
return a-b
}
myArray.sort(corms) //массив с элементами в порядке: 3, 14, 90, 450
В окне веб-браузера это будет выглядеть ТАК.
Массив содержит четыре числовых сравнения. Для правильной их сортировки (в порядке возрастания) определена функция сравнения corms(), которую вызывает метод sort(). Характерно то, что в отличии от обычного вызова функций, аргументом метода sort() является указатель на нее.
При вызове функции corms() JavaScript автоматически посылает ей два аргумента, приводя сравнение каждого элемента со всеми остальными. При каждом вызове corms() JavaScript передает переменным а и b два элемента массива. В предыдущем примере функция возвращает разность а и b. Если а больше b, метод sort() получает положительное значение, т.е а должно следовать после b(индекс элемента а должен быть больше индекса b). Поэтому b в итоге может оказаться элементом myArray[0], а а – элементом с большим индексом. Если же а меньше b, тогда возвращаемое значение отрицательно и метод sort() делает индекс элемента а меньшим чем b.
splice (индекс,количество[, элем 1[, элем2[, ... , элемN]]]) — удаляет из массива несколько элементов и возвращает массив из удаленных элементов или заменяет значения элементов.
Синтаксис:
имя_массива. splice (индекс,количество[, элем 1[, элем2[, ... , элемN]]])
Возвращает массив. Данный метод изменяет исходный массив.
Первые два параметра обязательны, а следующие — нет. Первый параметр является индексом первого удаляемого элемента, а второй — количеством удаляемых элементов.
Рассмотрим пример.
planets=new Array()
planets[0]="Меркурий - ";
planets[1]=" Венера - ";
planets[2]=" Земля - ";
planets[3]=" Марс - ";
a=planets.slice(0,3) //а- массив элементов: Меркурий - , Венера - , Земля
//planets-массив элементов Марс
document.write(a)
В окне веб-браузера это будет выглядеть ТАК.
Метод позволяет также заменить значения элементов исходного массива, если указаны третий и, возможно, последующие параметры. Эти параметры представляют значения, которыми следует заменить исходные значения элементов массива. При таком использовании метода splice() важен первый параметр (индекс), а второй (количество) может быть равным нулю. В любом случае, если количество элементов замены больше значения второго параметра, то
часть элементов исходного массива будет заменена, а часть элементов будет просто вставлена в него. При этом метод возвращает другой массив, состоящий из элементов исходного, индексы которых соответствуют первому и второму параметрам. Но это справедливо, если второй параметр не равен 0.
Обсудить на форуме