Статьи

Введение, тестовые случаи и таблицы совместимости веб-браузера для JavaScript 1.6, JavaScript 1.7 и JavaScript 1.8

Октябрь 15, 2017

В последнее время я изучал новые версии JavaScript и их поддержку веб-браузера. И, как обычно, когда я создаю что-то полезное, я хочу поделиться этим с миром.
:-)

Как развивался JavaScript

Жизнь веб-разработки для большинства из нас основана на JavaScript 1.5 или соответствующей поддержке в JScript для IE и ECMAScript 3 (дополнительную информацию можно найти в версиях JavaScript Джона Резига ). Но что за этим? Mozilla, особенно из-за того, что создатель JavaScript Брендан Айх (Brendan Eich) на борту, продвигает поддержку JavaScript.

Я посмотрел на три последние выпущенные версии JavaScript: 1.6, 1.7 и 1.8, протестировал код в различных веб-браузерах и оценил результаты.

Тесты JavaScript и таблицы совместимости

Для этого я создал мини-сайт для тестирования JavaScript и совместимости с веб-браузером , который предлагает вам:

  • Тесты JavaScript, которые запускаются сразу в вашем веб-браузере
  • Таблицы совместимости веб-браузера
  • Примеры кода вместе с ожидаемыми результатами (когда тесты были успешными)

В настоящее время он содержит три подраздела для каждой версии JavaScript:

Следует также отметить, что для тех, кто ищет поддержку в Internet Explorer, ни IE 6, ни IE 7, ни IE 8 не поддерживают ничего из этого…

Ниже я перечислю новые функции для каждой версии языка JavaScript этих трех и примеры кода. Весь этот исполняемый код также доступен на тестовом сайте, но приведен здесь для удобства тех, кто хочет получить обзор новых функций.

JavaScript 1.6

  • Массив дополнений

    • индекс
    • LastIndexOf
    • каждый
    • фильтр
    • для каждого
    • карта
    • некоторые
  • Обобщения и массивы

    • Дженерики массивов
    • Струнные дженерики

(Для полной информации и документации прочитайте Новое в JavaScript 1.6 .)

Массив дополнений

Новые функции для повышения удобства использования объектов массива.

Метод indexOf

Возвращает индекс первого вхождения элемента.

var arr = ["Microsoft", "Mozilla", "Apple"];
arr.indexOf("Mozilla");

Метод lastIndexOf

Возвращает индекс последнего вхождения элемента.

var arr = ["Firefox", "<acronym title="Internet Explorer">IE</acronym>", "Chrome", "Firefox"];
arr.lastIndexOf("Firefox");

Каждый метод

Запускает функцию для каждого элемента в массиве и возвращает true.

var arr = [4, 7, 10];
arr.every(function (value) {
    return value > 5;
});
var arr = [6, 7, 10];
arr.every(function (value) {
    return value > 5;
});

Метод фильтра

Запускает функцию для фильтрации массива и возвращает все элементы, для которых функция вернула значение true.

var arr = [4, 7, 10];
arr.filter(function (value) {
    return value > 5;
});

Метод forEach

Запускает функцию для каждого элемента в массиве.

var arr = ["Firefox", "<acronym title="Internet Explorer">IE</acronym>", "Chrome", "Opera", "Safari"]
    resultValues = [];
arr.forEach(function (value) {
    resultValues.push(value.toUpperCase());
});

Метод карты

Запускает функцию для каждого элемента и возвращает результаты в массиве.

var arr = [4, 7, 10];
arr.map(function (value) {
    return value + 5;
});

Какой-то метод

Запускает функцию для каждого элемента в массиве и возвращает false.

var arr = [4, 7, 10];
arr.some(function (value) {
    return value > 5;
});

var arr = [1, 2, 4];
arr.some(function (value) {
    return value > 5;
});

Обобщения и массивы

Использование методов из других типов объектов для улучшения существующего. Т.е. использовать методы String для объектов Array и методы Array для объектов String.

Дженерики массивов

var words = "These are just words";
Array.filter(words, function (value) {
    return value.indexOf("s") === -1;
});

Струнные дженерики

var arr = ["Firefox", "Safari", "Opera"];
String.replace(arr, /[aoueiy]/g, "");

JavaScript 1.7

  • Генераторы и итераторы

    • Генераторы
    • итераторы
  • Массив пониманий
  • Использование let для области видимости блока

    • позвольте заявлению
    • пусть выражение
    • давай определение
  • Разрушающее задание
  • Разрушающее присваивание с оператором let

(Для полной информации и документации прочитайте Новое в JavaScript 1.7 .)

Генераторы и итераторы

Вспомогательные функции для перебора элементов.

Генераторы

Создание генераторов итераторов с ключевым словом yield, чтобы иметь переменные состояния.

function double5() {
    var i=0, j=5, k;
    while (true) {
        yield i;
        k = i;
        i = j;
        j += i;
    }
}
 

var g = double5(),
    resultValues = [];
for (var i=0; i<5; i++) {
    resultValues.push(g.next());
}

итераторы

Специальный объект, облегчающий итерацию определенного объема информации.

var lostInfo = {
    name : "Lost",
    location : "Island",
    numbers : "4 8 15 16 23 42"
};
var iteratorObj = Iterator(lostInfo),
    resultValues = [],
    next;
try{
    while (true) {
        next = iteratorObj.next();
        resultValues.push(next[0] + ": " + next[1]);
    }
}
catch (err if err instanceof StopIteration) {
    resultValues.push("END OF LIST");
}
catch (err) {
    resultValues.push("UNKNOWN ERROR");
}

var lostInfo = {
    name : "Lost",
    location : "Island",
    numbers : "4 8 15 16 23 42"
};
 // Notice true below - will return only parameter names and not values, as opposed to the example above
var iteratorObj = Iterator(lostInfo, true),
    resultValues = [];
try{
    while (true) {
        resultValues.push(iteratorObj.next());
    }
}
catch (err if err instanceof StopIteration) {
    resultValues.push("END OF LIST");
}
catch (err) {
    resultValues.push("UNKNOWN ERROR");
}

Массив пониманий

Мощная инициализация массивов.

function setVal (start, end) {
   for (let i=start; i<end; ++i) {
       yield i;
   }
}
var evenValues = [i for each (i in setVal(0, 15)) if (i % 2 == 0)];

Использование let для области видимости блока

Соединение определенных переменных с операторами или блоками, эффективное создание переменных области видимости блока.

позвольте заявлению

var x = 5,
    y = 7,
    resultValues = ["Before let statement: " + x + ", " + y];
 
let (x=15, y=12) {
    resultValues.push("In let statement: " + x + ", " + y);
}
 
resultValues.push("After let statement: " + x + ", " + y);

пусть выражение

var x = 1,
    y = 3,
    resultValues = ["Before let expression: " + x + ", " + y];
 
let (x=7, y=8) resultValues.push("In let expression: " + x + ", " + y);
 
resultValues.push("After let expression: " + x + ", " + y);

давай определение

var letDefinitionResults =
        document.getElementById("results-let-definition"),
    item;
for (var i=0; i<5; i++) {
    item = document.createElement("div");
    item.innerHTML = "Click me - I will say " + i;
    let j = i;
    item.onclick = function () {
        alert("I am " + j);
    };
    letDefinitionResults.appendChild(item);
}

Разрушающее задание

Позволяет получать данные из массивов и менять значения между различными объектами массива.

var a = 1,
    b = 2;
// Value swapping
[a, b] = [b, a];

var a = 1,
    b = 2,
    c = 3,
    d = 4;
// Value swapping
[a, b, c, d] = [d, c, b, a];

var a = 1,
    b = 2;
 
function newValues () {
    return [10, 20];
}                  
 
// Assigning new values
[a, b] = newValues();

var a = 1,
    b = 2;
 
function newValues () {
    return [10, 20, 30];
}                  
 
// Assigning new values, ignoring the second one
[a, , b] = newValues();

Разрушающее присваивание с оператором let

Разрушающие назначения могут стать еще более мощными в сочетании с операторами let.

var griffins = {
    father : "Peter",
    mother : "Lois",
    son : "Chris",
    daugher : "Meg",
    baby : "Stewie",
    dog : "Brian"
},
    resultValues = [];
 
for (let [type, name] in Iterator(griffins)) {
    resultValues.push(type + ": " + name);
}

JavaScript 1.8

  • Закрытие выражений
  • Выражения генератора
  • Массив дополнений

    • уменьшить
    • reduceRight

(Для полной информации и документации прочитайте Новое в JavaScript 1.8 .)

Закрытие выражений

В основном, просто сокращенная запись для функций.
// Обратите внимание на пропуск фигурных скобок и инструкцию возврата
Функция expressionClosure () «Да, хорошо»

Выражения генератора

Использование выражений генератора для дополнения генераторов, представленных в JavaScript 1.7.

var animals = {
    dog : "Nice",
    cat : "Independent",
    horse : "big"
},
    resultValues = [],
    iterating = (i + 3 for (i in animals));
try {
    while (true) {
        resultValues.push(iterating.next());
    }
}
catch (err if err instanceof StopIteration) {
    resultValues.push("END OF LIST");
}

Массив дополнений

уменьшить

Запускается для каждого элемента в массиве, собирая результаты предыдущей итерации.

var numbers = [1, 2, 3, 4, 5],
    returnValues = [];
 
numbers.reduce(function (prev, current, index, array) {
    returnValues.push("Previous: " + prev + ", current: " + current + ", index: " + index);
    return current;
});

reduceRight

Запускается для каждого элемента в массиве, собирая результаты предыдущей итерации, но в обратном порядке.

var numbers = [1, 2, 3, 4, 5],
    returnValues = [];
 
numbers.reduce(function (prev, current, index, array) {
    returnValues.push("Previous: " + prev + ", current: " + current + ", index: " + index);
    return current;
});

Мои собственные дубли

Лично я очень взволнован новыми функциями, введенными в JavaScript, и особенно некоторые из них (например, оператор let) изменят и упростят много кода. Приятно видеть, что ряд других поставщиков веб-браузеров работают по крайней мере с некоторыми функциями, хотя (как обычно) обескураживает, что Internet Explorer фактически не получил ни одной из этих функций…

31
Share: