Дьявол в Javascript

внешний интерфейс JavaScript

намерение письма

Эта статья используется для обобщения некоторых общих моментов путаницы в языке JavaScript.

call | apply | bind

В js самое странное и непредсказуемое вот что: если понимание недостаточно глубокое или сценарий приложения немного усложнен, при его использовании будут возникать различные непредвиденные ошибки. Поэтому во многих случаях нам нужно вручную указать контекст, чтобы исправить указание this.
Самый простой способ судить об окружающей среде в окружающей среде - найти фактический абонент этого.

типичная ошибка

    var a = {
        name: 'ein',
        sayName: function () {
            console.log(this.name);
        }
    }

    var b = a.sayName;
    b();  //undefined

Изначально мы хотели присвоить sayName объекта a переменной b и вызвать, чтобы узнать, каково имя a? Результат не определен. Причина этого исключения в том, что при вызове функции b это в sayName больше не указывает на объект a, а на окно глобального объекта.Поскольку в окне нет атрибута name, выводится undefined.

Ниже мы будем использовать три вышеуказанных метода для решения этой проблемы.

использовать вызов

    var b = a.sayName;
    b.call(a);  //ein

Используя метод call, первый параметр является контекстом вызова функции, задайте для него объект a, чтобы он указывал на объект a, чтобы можно было получить атрибут имени в объекте a и вывести нужное значение.

использовать применять

    var b = a.sayName;
    b.apply(a); //ein

С помощью метода Apply, входящего в контекстную среду, можно добиться такого же эффекта.

Разница между вызовом и применением

Так в чем же разница между вызовом и применением? Их отличие заключается в последующих параметрах. Давайте изменим приведенный выше код, чтобы увидеть эффект.

    var a = {
        name: 'ein',
        sayName: function (fistname, lastname) {
            console.log(`${fistname} ${this.name} ${lastname}`);
        }
    }

    var b = a.sayName;

    b.call(a,'nick','snow');  //nick ein snow
    b.apply(a,['nick','snow']);  //nick ein snow

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

использовать привязку

bind также можно использовать для исправления указания this.. Разница между ним и двумя предыдущими заключается в том, что функция не будет выполняться сразу после привязки bind.

    var b = a.sayName;
    b.bind(a);

После привязки контекста a к b, b не выполняется немедленно.

    b.bind(a,'nick','snow')();  //nick ein snow
    var c = b.bind(a);
    c('nick','snow');  //nick ein snow

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

splice | slice | split

У вас кружится голова, когда вы видите эти три метода? Поскольку эти трое так похожи на тройняшек, их очень трудно отличить друг от друга. Во-первых, давайте выучим или повторим эти три слова.

splice  拼接  
slice   片，切片  
split   分裂，裂开

Большинство API на самом деле имеют свои названия, связанные с их использованием.Эти три API являются классическими случаями.

  • splice означает объединение, его цель состоит в том, чтобы разделить массив, а затем повторно соединить его вместе определенным образом.
  • Срез означает срез, мы можем использовать его, чтобы нарезать нужный раздел в массиве или строке.
  • split означает разделение, он может разделить строку на массив.

использовать сращивание

    var a = [1,2,3,4,5];
    a.splice(1,2,4,4);
    console.log(a);
    //[1,4,4,4,5]

Метод splice(starts, count, item1, ..., itemx) принимает несколько параметров. Первый параметр — это начальный элемент для удаления, второй параметр — количество удалений, а следующий — вставляемое содержимое.
УведомлениеМетод : splice изменяет исходный массив и возвращает удаленный массив содержимого.

использовать срез

    var a = [1,2,3,4,5];
    var b = '12345';
    a.slice(1,3);  //[2,3]
    a.slice(1);  //[2,3,4,5]
    a.slice(2,-1)  //[3,4]
    b.slice(1,2);  //'2'
    console.log(a);  //[1,2,3,4,5]
    console.log(b);  //'12345'
  • Метод среза можно применять как к массивам, так и к строкам.
  • Метод slice(stats, beforeEnds) принимает до двух параметров. Порядковый номер, представленный первым параметром, должен быть меньше, чем второй параметр. Второй параметр — это конечная позиция среза. Если второй параметр опущен, он будет быть перехвачены до конца данных по умолчанию.Если аргумент отрицательный, совпадение ищется в обратном порядке.
    УведомлениеМетод: Slice не изменяет исходный массив и возвращает нарезанные выдержки.

использовать разделение

    var a = '123456';
    a.split('');  //['1','2','3','4','5','6']
    a.split('',3);  //['1','2','3']
    console.log(a);  //'123456'

Метод split(separator, count) принимает два параметра. Первый параметр — разделитель, который используется для указания правила разделения строки. Второй параметр — максимальная длина возвращаемого массива. Возвращаемая выходная длина не будет больше этого параметра.
Уведомление: split не изменяет исходную строку, возвращаемое значение — новый массив.

map | forEach | reduce | filter | every | some

Эти шесть методов обычно используются для управления API массивов, и все они являются родными методами Array.prototype. Таким образом, все массивы могут использовать эти методы для обхода каждого элемента массива операций.Эти методы будут представлены один за другим ниже.

map

    var arr = [
        {'name': 'ein'},
        {'name': 'zwei'},
        {'name': 'drei'}
    ];

    let newarr = arr.map((item, index) => {
        return (
            {
                'name': item.name,
                'order': index
            }
        )
    });
    console.log(arr);
    // [{'name': 'ein'},{'name': 'zwei'},{'name': 'drei'}] 
    console.log(newarr);
    // [{'name': 'ein','order': 0},{'name': 'zwei','order': 1},{'name': 'drei','order': 2}]

Метод map(fn(item, index)) получает функцию в качестве параметра, эта функция получает два параметра, первый параметр — это содержимое массива каждого элемента, а второй параметр — индекс массива.
Уведомление: метод map возвращает новый массив.Если в операции нет возвращаемого значения, по умолчанию возвращается массив со значением undefined.
Возврат по умолчанию: [не определено, не определено, не определено]

forEach

    arr.forEach((item, index) => {
        item.old = true;
        delete item.name;
    })
    console.log(arr);
    //  [{'old': true},{'old': true},{'old': true}]

Метод forEach(fn(item, index)) получает в качестве параметра функцию, эта функция получает два параметра, первый параметр — это содержимое массива каждого элемента, а второй параметр — индекс массива.
УведомлениеМетод : forEach работает непосредственно с исходным массивом и ничего не возвращает.

reduce

Простой вариант использования

    var arr1 = [1,2,3,4,5];
    var res = arr1.reduce((curr, next) => {
        return curr + next
    });
    console.log(res);  //15
    console.log(arr1);  //[1, 2, 3, 4, 5]

сложный вариант использования

    var res1 = arr1.reduce((curr, next,index,arr) => {
        console.log('content',curr,next,index,arr);
        return curr + next
    },10);
    console.log(res1);
content начальная стоимость (текущая) текущий элемент (следующий) индекс текущего элемента (index) Массив, которому принадлежит текущий элемент (arr) начальное значение функции
content 10 1 0 [1, 2, 3, 4, 5] 10
content 11 2 1 [1, 2, 3, 4, 5] 10
content 13 3 2 [1, 2, 3, 4, 5] 10
content 16 4 3 [1, 2, 3, 4, 5] 10
content 20 5 4 [1, 2, 3, 4, 5] 10

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

filter

    var res = arr1.filter((item, index) => {
        console.log('data:',index,item);
        return item > 3
    });
    console.log(res);
    //  [4, 5]

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

every

    var res = arr1.every((item, index) => {
        return item > 3
    });
    console.log(res);
    // false

Каждый метод используется для проверки того, соответствует ли каждый элемент массива условиям, и возвращает true, когда все условия выполняются, в противном случае возвращает false.

some

    var res = arr1.some((item, index) => {
        return item > 3
    });
    console.log(res);
    // true

Метод some используется для проверки наличия в массиве элемента, удовлетворяющего условию, и возвращает true, если он существует, иначе возвращает false.

Кроме того

Яркая и интересная иллюстрация, каждый день будет лучше!

pic

Категории