JS Sunflower Collection Cheats Notes, чтобы сопроводить вас золото три серебро четыре

интервью JavaScript
JS Sunflower Collection Cheats Notes, чтобы сопроводить вас золото три серебро четыре

Читы в книге сокровищ подсолнуха, сопроводите вас золотом, тремя, серебряными, четырьмя

Источник на гитхабе:| Просите звездочки ✨ | Ставьте ❤️ подписку, ❤️ лайк, ❤️ поощряйте автора

Вывод предложения: чем усерднее ты работаешь, тем тебе повезло! При низком уровне усилий большинства людей сейчас вообще невозможно бороться за талант.

Поделитесь читами с интервью, надеясь помочь большему количеству друзей. Добавьте меня 😚 для обмена проблемами (не босс, учитесь друг у друга и создавайте хорошую среду для обучения). Что из перечисленного вам не понятно?

  • Сначала обратите внимание на публичный аккаунт: WeChat search: Programmer Doraemon
  • QQ группа 1: 711613774 (полный)
  • QQ группа 2: 634382181
  • ID в Wechat: xiaoda0423 (Заметки отправлены: следил за Нэчжа, дьяволом самородков)

одна сторона

С одной стороны вопрос несложный, но для получения достаточно высокой оценки от интервьюера все же нужно определенное умение выражать и понимать суть техники.Если при ответе на вопрос можно сделать какое-то соответствующее расширение, то естественно сделать интервьюера.У меня другое мнение о вас.

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

две стороны

Вопросы относительно просты, и ответ известен, если вы его знаете, а если вы его не знаете, вы не знаете. Эти вопросы частично базовые, а частично основаны на ваших профессиональных навыках.

Это нормально, что некоторые ответы не появляются во время интервью, но если вы можете сделать это сверх ожиданий интервьюера, это также очень важный бонус для интервьюера.

Три стороны

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

Как достичь определенного важного момента в проекте (требует глубоких технических принципов), с какими самыми большими трудностями столкнулись (в чем они заключаются) и как вы их решили? Если вам нужно расширить определенную функцию, как уменьшить степень связанности системы, если вы оптимизируете определенную функцию, как вы будете ее проектировать и оптимизировать.

четыре стороны

В основном это зависит от вашего потенциала (то есть от того, есть ли у вас ценность тренировок), но это все равно видно из вашей обычной учебы.

пять сторон

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

arguments[]массив параметров функции

arguments[]Массивы определены только в теле функции.

В теле функцииargumentsотносится к функцииArgumentsобъект. Этот объект имеет числовые свойства и может использоваться как массив, содержащий все параметры, переданные в функцию.argumentsИдентификатор по сути является локальной переменной, в каждой функции будетАвтоматически объявить и инициализировать переменную.

argumentsотносится только к телу функцииArgumentsобъект, в глобальном коде какundefined.

ArgumentsПараметры и другие свойства функций.

ArgumentsС технической точки зрения, объекты определяются только в телах функций.Argumentsобъект не является массивом, но имеет числовые свойства иlengthАтрибуты.

Числовые типы можно рассматривать как элементы массива,lengthСвойство представляет собой количество элементов массива, которые являются значениями параметров, передаваемых в метод. Элемент 0 — это первый аргумент, элемент 1 — второй аргумент и так далее.

Все значения, переданные в качестве параметров, становятсяArgumentsЭлементы массива объекта, даже если в объявлении функции не указаны имена параметров.

calleeиlengthАтрибуты.

  1. Атрибут callee относится к выполняемой в данный момент функции.
  2. свойство length Количество аргументов, переданных функции, и количество элементов массива в объекте Arguments.

Argumentsобъект

argumentsпредставляет собой массивоподобный объект, соответствующий аргументам, переданным функции.

Пример:

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

можно преобразовать в настоящий массив:

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
const args = [...arguments];

ArgumentsОсновное назначение объекта:

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

Текущая выполняемая функция Arguments.callee

arguments.callee,Относится квыполняющаяся в данный момент функция, через который можноссылка на саму анонимную функцию. Это свойство определено только в теле функции.

Пример:

// 在匿名函数内使用callee属性来引用匿名函数自身
var fn = function(x) {
 if(x<2) return 1;
 else return x * arguments.callee(x-1)
}
var y = fn(5); // 120

Arguments.length Количество аргументов, переданных функции.

arguments.length,ArgumentsобъектlengthАтрибут указывает количество аргументов, переданных текущей функции. Это свойство может быть определено только в теле функции.

Это свойство представляет фактическое количество переданных параметров, а не количество объявленных параметров.

Пример:

alert("实参长度：" +arguments.length);
alert("形参长度： " +arguments.callee.length);

// 使用Arguments对象来检查传入参数个数的正确性
function check(args) {
 var actual = args.length; // 实际的参数个数
 var expected = args.callee.length; // 期待的参数个数
 if( actual != expected ) {
  throw new Error("参数个数有误，期望值:" + expected + ";实际值:" + actual);
 }
}
function fn(x,y,z) {
 check(arguments); // 检查参数个数的正确性
 return x+y+z;
}

Object.keys()

Object.keys()Метод возвращает массив собственных перечислимых свойств данного объекта в том порядке, в котором имена свойств возвращаются в обычном цикле по объекту.

грамматика

Object.keys(obj)

параметр

obj

Объект, свойства которого должны быть возвращены для перечисления.

возвращаемое значение

Массив строк, представляющих все перечисляемые свойства данного объекта.

Пример:

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()Метод возвращает имя свойства всех собственных свойств указанного объекта (включая неперечислимые свойства, но исключаяSymbolзначение как свойство имени).

грамматикаObject.getOwnPropertyNames(obj)

параметр

obj

Возвращенный объект с именами собственных перечисляемых и неперечисляемых свойств.

возвращаемое значение

Массив строк, соответствующих собственным свойствам данного объекта.

Пример:

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

Object.create()

Object.create()метод создает новый объект, используя существующий объект, чтобы предоставить только что созданному объекту__proto__.

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

грамматикаObject.create(proto，[propertiesObject])

параметр

proto

Объект-прототип вновь созданного объекта.

propertiesObject

По желанию. Вам нужно передать объект, чьи собственные перечисляемые свойства (то есть свойства, определенные сами по себе, а не свойства перечисления в его цепочке прототипов) добавят указанное значение свойства и соответствующее значение свойства к вновь созданному дескриптору свойства объекта.

возвращаемое значение

Новый объект с указанным объектом-прототипом и свойствами.

исключение

еслиpropertiesObjectпараметрnullили объект-оболочка, не являющийся примитивным, выдаетTypeErrorаномальный.

использоватьObject.createРеализовать наследование классов

// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

Если вы хотите наследовать от нескольких объектов, вы можете использовать примеси.

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do a thing
};

Object.assignположитOtherSuperClassФункция прототипа копируется вMyClassпрототип, сделатьMyClassВсе экземпляры доступныOtherSuperClassМетоды.

использоватьObject.create 的 propertyObjectпараметр

var o;

// 创建一个原型为null的空对象
o = Object.create(null);


o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype);


o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: {
    writable:true,
    configurable:true,
    value: "hello"
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});


function Constructor(){}
o = new Constructor();
// 上面的一句就相当于:
o = Object.create(Constructor.prototype);
// 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码


// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: 42 } })

// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false

//创建一个可写的,可枚举的,可配置的属性p
o2 = Object.create({}, {
  p: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

image.png

vue подготовка

  • Научитесь понимать поток, дизайн каталога исходного кода Vuejs, построение исходного кода Vuejs, начиная с записи (понимание подготовки Vue).
  • FlowдаfacebookпроизведеноJavaScriptИнструмент статической проверки типов.
  • VueИсходный код используетflowВыполняется статическая проверка типов.

Как работает поток:

Обычно существует два типа проверки типов: первый: вывод типа, второй: аннотация типа.

Что такое вывод типа?

Тип переменной выводится из контекста, в котором она используется.

Что такое аннотации типов?

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

В основном каталоге Vuejs есть.flowconfigфайл, даflowфайл конфигурации,[libs]Раздел используется для описания каталога, содержащего определение указанной библиотеки.

flowКаталог папок:

  1. compiler.jsСвязанные с компиляцией
  2. component.jsструктура данных компонента
  3. global-api.jsглобальная структура API
  4. modules.jsОпределения сторонних библиотек
  5. options.jsвариант, связанный
  6. ssr.jsрендеринг на стороне сервера
  7. vnode.jsСвязанный с виртуальным узлом

Узнайте о исходном каталоге Vue.js src:

  1. compilerСвязанные с компиляцией
  2. coreосновной код
  3. platformsПоддержка разных платформ
  4. serverрендеринг на стороне сервера
  5. sfc-.vueразбор файла
  6. sharedобщий код

Исходный код Vuejs построен на Rollup.

Процесс инициализации Vue

рекомендовать:Процесс инициализации Vue

блок-схема инициализации

image.png

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

Иметь более глубокое понимание процесса рендеринга данных, начиная сnew Vue()В начале создается объект vue, который будет выполняться первымinit初始化——>$mount()——>compile(若已经是render则该过程不需要)——>render——>创建VNode——>patch过程——>生成真实的DOM

null

Если вы хотите любой типTвозможноnullилиundefined, просто напишите как?Tформат.

var foo: string = null
// 可以是字符串，也可以是null

Зачем писать ключ в компоненте списка в проекте Vue и какова его функция

Ключ — это уникальный идентификатор, присвоенный каждому vnode. Вы можете положиться на ключ, чтобы получить соответствующий узел vnode в oldVnode более точно и быстрее.

['1','2','3'].map(parseInt)

image.png

ответ[1,NaN,NaN],Почему нет[1,2,3]Шерстяная ткань?

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

arr.map(callback: (value:T, index: number, array: T[]) => U, thisArg?:any);
  • parseInt используется для синтаксического анализа строки, превращая строку в целое число по указанной системе счисления. Принимает два аргумента, первый — это значение, которое нужно обработать (строка), а второй — система счисления при синтаксическом анализе.
parseInt(string, radix);

parseINT('1', 0)Указывает, что если основание равно 0, а строковый параметр не начинается с «0x» и «0», он обрабатывается в соответствии с основанием 10, а возвращаемое значение равно 1.

parseInt('2',1), основание равно 1, (1 основание), максимальное значение представленных чисел меньше 2, поэтому оно не может быть проанализировано, а возвращаемое значение равно NaN.

image.png

Что такое анти-шейк и троттлинг

Anti-shake, буквально срабатывает дрожание рук.

onReachBottom() {
    this.timer && clearTimeout(this.timer)
    this.timer = setTimeout(this.getMoreList, 300)
},

Функция будет выполняться только один раз через n секунд после срабатывания высокочастотного события.Если высокочастотное событие запускается снова в течение n секунд, время необходимо пересчитать.

// 掘金：魔王哪吒
// 实现input实时搜索

function debounce(fn) {
 let timeout = null
 // 创建一个标记用来存放定时器的返回值
 return function() {
  clearTimeout(timeout)
  // 每当用户输入的时候把前一个setTimeout clear掉
  timeout = setTimeout(() => {
   // 创建一个新的setTimeout，这样就能保证输入字符串后的interval间隔内如果还有字符输入的话，就不会执行fn函数
   fn.apply(this, arguments);
  },500)
 }
}

function sayHi() {
 console.log('防抖成功')
}
var inp = document.getElementById('inp');
inp.addEventListener('input',debounce(sayHi)); // 防抖

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

// 掘金：魔王哪吒
function throttle(fn) {
 let canRun = true; // 通过闭包保持一个标记
 return function() {
  if(!canRun) return
  // 在函数开头判断标记是否为true，不为true则return
  canRun = false // 立即设置为false
  setTimeout(() => {
   fn.apply(this,argument);
   // 最后在setTimeout执行完毕后再把标记设置为true表示可以执行下一次循环了，当定时器没有执行的时候标记为false
   canRun = true
  },500)
 }
}

function sayHi(e) {
 console.log(e.target.innerWidth, e.target.innerHeight)
}
window.addEventListener('resize', throttle(sayHi));

Set, Map, WeakSet, WeakMap

набор, объекты позволяют вамХраните уникальные значения любого типа, либо примитивное значение, либо ссылка на объект

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

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

слабая карта,Принимать объекты только как имена ключей(кроме null), не принимать другие типы значений в качестве имен ключей,Имя ключа является слабой ссылкой, а значение ключа может быть произвольным.,Имя ключаУказываемый объект может бытьвывоз мусора, в настоящее время имя ключа недействительно и не может быть пройдено. Методы включают в себя get, set, has, delete

Обход в глубину и обход в ширину

обход в глубину

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

обход в ширину

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

//1.深度优先遍历的递归写法
function deepTraveral(node) {
 let nodes = []
 if(node != null) {
  nodes.push[node]
  let childrens = node.children
  for(let i=0; i<childrens.length; i++) deepTraversal(childrens[i])
 }
 return nodes
}

//2.深度优先遍历的非递归写法
function deepTraversal(node) {
 let nodes = []
 if(node != null) {
  let stack = []
  // 用来存放将来要访问的节点
  stack.push(node)
  while(stack.length != 0) {
   let item = stack.pop()
   // 正在访问的节点
   nodes.push(item)
   let childrens = item.children
   for(let i = childrens.length-1; i>=0; i--) stack.push(childrens[i])
   // 将现在访问点的节点的子节点存入stack，供将来访问
  }
 }
 return nodes
}

//3.广度优先遍历的递归写法
function wideTraversal(node) {
 let nodes = [], i = 0
 if(node != null) {
  nodes.push(node)
  wideTraversal(node.nextElementSibling)
  node = nodes[i++]
  wideTraversal(node.firstElementChild)
 }
 return nodes
}

//4.广度优先遍历的非递归写法
function wideTraversal(node) {
 let nodes = [], i=0
 while(node != null) {
  nodes.push(node)
  node = nodes[i++];
  let childrens = node.children
  for(let i=0; i<childrens.length; i++) {
   nodes.push(childrens[i])
  }
 }
 return nodes
}

Реализовать функцию копирования?

Object.prototype.toString()

toString()Метод возвращает строку, представляющую объект.

function Dog(name) {
  this.name = name;
}

const dog1 = new Dog('掘金魔王哪吒');

Dog.prototype.toString = function dogToString() {
  return `${this.name}`;
};

console.log(dog1.toString());
// expected output: "掘金魔王哪吒"

грамматика

obj.toString()
// 返回值
// 一个表示该对象的字符串。

Каждый объект имеетtoString()метод, вызываемый автоматически, когда объект представлен как буквальное значение или когда на объект ссылаются ожидаемым строковым способом. по умолчанию,toString()метод каждогоObjectНаследование объекта. Если этот метод не переопределен в пользовательском объекте,toString()возвращение"[object type]",вtypeявляется типом объекта.

var o = new Object();
o.toString(); // returns [object Object]

использоватьtoString()Тип объекта обнаружения

в состоянии пройтиtoString()чтобы получить тип каждого объекта. для каждого объекта, чтобы пройтиObject.prototype.toString()для обнаружения необходимоFunction.prototype.call()илиFunction.prototype.apply()форма для вызова, передавая объект для проверки в качестве первого параметра, вызываемогоthisArg.

Пример:

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

Function.prototype.call()

call()метод использует указанныйthisзначение и один или несколько аргументов, заданных отдельно для вызова функции.

call()Метод принимает список параметров

Пример:

// 掘金：魔王哪吒
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

грамматика

function.call(thisArg, arg1, arg2, ...)

thisArg

по желанию. существуетfunctionиспользуется при выполнении функцииthisценность. Обратите внимание, что это может быть не фактическое значение, видимое методом: если функция находится в нестрогом режиме, она указывается какnull 或 undefinedавтоматически заменяется указателем на глобальный объект, а исходное значение упаковывается.

arg1, arg2, ...

Указанный список параметров.

возвращаемое значение

использовать предоставленный вызывающим абонентомthisЗначение и аргументы возвращают значение вызова функции. Если метод не имеет возвращаемого значения, вернитеundefined.

описывать

call()Позволяет назначать и вызывать функции/методы, принадлежащие одному объекту, для разных объектов.

call()предоставить новыйthisЗначение присваивается вызываемой в данный момент функции/методу. ты можешь использоватьcallЧтобы реализовать наследование: напишите метод и позвольте другому новому объекту наследовать его (вместо повторного написания метода в новом объекте).

Вызвать родительский конструктор с помощью метода call

Пример:

// 掘金：魔王哪吒
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

Function.prototype.apply()

apply()метод вызывает метод с заданнымthisФункция значений и аргументов, представленных в виде массива (или массивоподобного объекта).

image.png

грамматика

// 掘金：魔王哪吒
func.apply(thisArg, [argsArray])

параметр

thisArg

Обязательный. Значение this, используемое при выполнении функции func. Обратите внимание, что это может быть не фактическое значение, видимое методом: если функция находится в нестрогом режиме, она указывается какnull 或 undefinedавтоматически заменяется указателем на глобальный объект, а исходное значение упаковывается.

argsArray

по желанию. Массив или похожий на массив объект, элементы массива которого будут переданы в качестве отдельных аргументов функции func. Если значение этого параметра равноnull 或 undefined, это означает, что параметры передавать не нужно. отECMAScript 5Для начала можно использовать массивоподобные объекты.

возвращаемое значение

вызов указанthisРезультат функции значений и аргументов.

описывать

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

Добавить элементы массива в другой массив с применением

// 掘金：魔王哪吒
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

Function.prototype.bind()

bind()метод создает новую функцию вbind()При вызове новая функцияthisОбозначен какbind()Первый параметр и остальные параметры будут использоваться как параметры новой функции для использования при вызове.

// 掘金：魔王哪吒
const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

грамматика

// 掘金：魔王哪吒
function.bind(thisArg[, arg1[, arg2[, ...]]])

возвращаемое значение

Возвращает копию исходной функции с указанным значением this и начальными параметрами.

image.png

Создать функцию привязки

// 掘金：魔王哪吒
this.x = 9;    // 在浏览器中，this 指向全局的 "window" 对象
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();
// 返回 9 - 因为函数是在全局作用域中调用的

// 创建一个新函数，把 'this' 绑定到 module 对象
// 新手可能会将全局变量 x 与 module 的属性 x 混淆
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

По умолчанию используйтеwindow.setTimeout()час,thisключевое слово будет указывать наwindow(илиglobal) объект. Когда метод класса требуетthisПри указании на экземпляр класса вам может потребоваться явно указатьthisПривязка к функции обратного вызова не приведет к потере ссылки на экземпляр.

Преобразование объекта, похожего на массив, в реальный массив

// 掘金：魔王哪吒
var slice = Array.prototype.slice;

// ...

slice.apply(arguments);

Array.prototype.slice()

slice()метод возвращает новый объект массива, который являетсяbegin 和 endНеглубокая копия определенного исходного массива (включаяbegin, без учетаend). Исходный массив не будет изменен.

// 掘金：魔王哪吒
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

грамматика

// 掘金：魔王哪吒
arr.slice([begin[, end]])

возвращаемое значение

Новый массив, содержащий извлеченные элементы.

описывать

slice не изменяет исходный массив, он просто возвращает новый массив с неглубокой копией элементов исходного массива. Элементы исходного массива копируются по следующим правилам:

Если элемент является ссылкой на объект (не фактический объект), slice скопирует ссылку на объект в новый массив. Обе ссылки на объекты ссылаются на один и тот же объект. Если объект, на который делается ссылка, изменяется, этот элемент в новом и исходном массивах также изменяется.

Для строк, чисел и логических значений (не объектов String, Number или Boolean) срез копирует значения в новый массив. Изменение этих строк, чисел или логических значений в другом массиве не повлияет на другой массив.

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

Массивоподобные объекты

Метод slice можно использовать для преобразования массива (Array-like) объект/коллекцию в новый массив. Вы просто привязываете метод к этому объекту. Аргументы в функции являются примером объекта, подобного массиву.

// 掘金：魔王哪吒
function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

Помимо использованияArray.prototype.slice.call(arguments), вы также можете просто использовать[].slice.call(arguments)вместо.

Вы можете использовать привязку, чтобы упростить процесс

// 掘金：魔王哪吒
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

Данные кольца

// 掘金：魔王哪吒
const obj = {
  foo: {
    name: 'foo',
    bar: {
      name: 'bar'
      baz: {
        name: 'baz',
        aChild: null  //待会让它指向obj.foo
      }
    }
  }
}
obj.foo.bar.baz.aChild = obj.foo // foo->bar->baz->aChild->foo 形成环
JSON.stringify(obj) // => TypeError: Converting circular structure to JSON

Копирование такой замкнутой круговой структуры данных приведет к бесконечному циклу.

Давайте поговорим о том, что такое глубокая копия и поверхностная копия.

image.png

Поверхностная копия: то есть копировать данные в объекте A, но не копировать подобъекты в объекте A.

Глубокая копия: объект будет клонирован с теми же данными, но с разными ссылочными адресами (то есть скопируйте данные в объект A и скопируйте в него подобъекты)

Разница между поверхностной копией и глубокой копией

image.png

рекомендовать:Пожалуйста, реализуйте функцию копирования с мышлением в глубину и в ширину соответственно? Серия вопросов дня (6)

uniapp реализует вход в WeChat для небольших программ

рекомендовать:Процесс регистрации корпоративной открытой платформы WeChat

рекомендовать:uniapp реализует вход в WeChat для небольших программ

<button open-type="getUserInfo"/>

Пополнить:appСоздать сертификат подписи

testalias 和 test.keystore中的'test'Все может быть изменено и может быть заменено именем в вашем собственном проекте. Введите следующееkeytool -genkeyкоманда для создания сертификата

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

Создание подписи с помощью инструмента генерации подписи

image.png

uniapp的mainfest.jsonконфигурация файла,appid必须是'_UNI_'в начале, поэтому ваш файл конфигурации должен быть'_UNI_'начало.

рекомендовать:Дизайн схемы тихого входа в небольшую программу

рекомендовать:Мини-программа Логин пользователя Архитектура Дизайн

Схема входа

  • Cookie + SessionАвторизоваться
  • TokenАвторизоваться
  • SSOвойти
  • OAuthВойти в систему с

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

добиться вертикального центрирования

// 掘金：魔王哪吒
flex
margin: 0 auto

Как холст может пропорционально заполнить весь экран

  • document.documentElement.clientWidth: ширина видимой области;
  • document.documentElement.clientHeight: Высота видимой области.
  • canvas.width = document.documentElement.clientWidth
  • canvas.height = document.documentElement.clientHeight
  • screen.availWidth: доступная ширина экрана;
  • screen.availHeight: видимая высота экрана.
  • canvas.width = screen.availWidth;
  • canvas.height = screen.availHeight;
  • screen.width：屏幕显示宽度
  • screen.height：屏幕显示高度
  • canvas.width = screen.width
  • canvas.height = screen.height
  • window.innerWidth：窗口的宽度
  • window.innerHeight：窗口的高度
  • canvas.width = window.innerWidth
  • canvas.height = window.innerHeight

Vue2.0

Папки в корневом каталоге исходного кода Vue:

  • buildУпаковка связанных файлов конфигурации, упакованных в разные файлы в соответствии с разными записями
  • distРасположение файла после упаковки
  • examplesНекоторые примеры
  • flow, потому что Vue используетFlowЧтобы выполнить проверку статического типа, вот определение объявления некоторых статических типов
  • packages, соответственно генерировать другиеnpmСумка
  • src, расположение основного исходного кода
  • compilerСвязанные файлы для разбора шаблона
  • codegenв соответствии сastгенерироватьrenderфункция
  • directivesОбщее поколениеrenderИнструкции, которые необходимо обработать перед функцией
  • parserРазбор шаблона
  • coreосновной код
  • componentsглобальный компонент
  • global-apiглобальный метод
  • instanceКонтент, связанный с экземпляром, включая методы экземпляра, жизненные циклы, события и т. д.
  • observerДокументы, связанные с двусторонней привязкой данных
  • utilинструментальный метод
  • vdomвиртуальныйdomСвязанный
  • entriesвходной файл, т.buildв папкеconfig.jsВходной файл настроен в
  • platformsКонтент, связанный с платформой
  • web,webуникальный файл
  • compilerИнструкции и модули, которые необходимо обработать на этапе компиляции
  • runtimeКомпоненты, директивы и модули, которые необходимо обработать на этапе запуска
  • serverрендеринг на стороне сервера
  • utilБиблиотека инструментов
  • weex,weexуникальный файл
  • sharedобщие инструменты
  • testпрецедент

Просмотр исходного кода Vue из входного файла

Первый взглядpackage.jsonСуществуют зависимости проекта, сценарии запуска, скомпилированные в среде разработки, производственной среде и т. д., а также информация о лицензии проекта. приди и посмотри:npm run dev:

// 掘金：魔王哪吒
"dev": "rollup -w -c build/config.js --environment TARGET:web-full-dev"

rollupЭто инструмент для упаковки, похожий на webpack, файл ввода:/src/entries/web-runtime-with-compiler.js

// 掘金：魔王哪吒
/src/entries/web-runtime-with-compiler.js   
--> /src/entries/web-runtime.js    
--> /src/core/index.js    
--> /src/core/instance/index.js

Определить объект Vue и его конструктор так же просто, как:

// 掘金：魔王哪吒
function Vue (options) {
 // 判断是不是生产环境
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    //如果不是通过new关键字来创建对象的话
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

Статические методы Vue и методы экземпляра:

// src/core/index.js
Vue.version = '__VERSION__'

// src/entries/web-runtime-with-compiler.js
Vue.compile = compileToFunctions    
// 把模板template转换为render函数

// src/core/global-api 
// 在目录结构中，Vue的静态方法大多都是在该文件夹中定义的

// src/core/global-api/index.js
Vue.config 
Vue.util 
Vue.set
Vue.delete
Vue.nextTick
Vue.options = {
  components: {KeepAlive: KeepAlive}
  directives: {},
  filters: {},
  _base: Vue
}

// src/core/global-api/use.js
Vue.use

// src/core/global-api/mixin.js
Vue.mixin

// src/core/global-api/extend.js
Vue.extend

// src/core/global-api/assets.js
Vue.component
Vue.directive
Vue.filter

vm._uid // 自增的id
vm._isVue // 标示是vue对象，避免被observe
vm._renderProxy // Proxy代理对象
vm._self // 当前vm实例

vm.$parent // 用于自定义子组件中，指向父组件的实例
vm.$root // 指向根vm实例
vm.$children // 当前组件的子组件实例数组
vm.$refs 

vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false // 标识是否已挂载
vm._isDestroyed = false // 标识是否已销毁
vm._isBeingDestroyed = false // 标识是否正在销毁

vm._events // 当前元素上绑定的自定义事件
vm._hasHookEvent // 标示是否有hook:开头的事件

vm.$vnode // 当前自定义组件在父组件中的vnode，等同于vm.$options._parentVnode
vm._vnode // 当前组件的vnode
vm._staticTrees // 当前组件模板内分析出的静态内容的render函数数组
vm.$el // 当前组件对应的根元素

vm.$slots // 定义在父组件中的slots，是个对象键为name，值为响应的数组
vm.$scopedSlots = emptyObject
// 内部render函数使用的创建vnode的方法
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// 用户自定义render方法时，传入的参数
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

vm._props // 被observe的存储props数据的对象
vm._data // 被observe的存储data数据的对象
vm._computedWatchers // 保存计算属性创建的watcher对象

Функция крючка:

  • beforeCreate, перед созданием
  • created,Создайте
  • beforeMount, перед монтажом
  • mounted, устанавливать
  • beforeUpdate, до обновления
  • updated,продлить
  • activated,курок
  • deactivated, запрещать
  • beforeDestroy, до разрушения
  • destroyed,разрушение
// vm.$options
declare type ComponentOptions = {
  // data
  data: Object | Function | void;  // 传入的data数据
  props?: { [key: string]: PropOptions }; // props传入的数据
  propsData?: ?Object;  // 对于自定义组件，父级通过`props`传过来的数据
  computed?: {  // 传入的计算属性
    [key: string]: Function | {
      get?: Function;
      set?: Function;
      cache?: boolean
    }
  };
  methods?: { [key: string]: Function }; // 传入的方法
  watch?: { [key: string]: Function | string };  // 传入的watch

  // DOM
  el?: string | Element;  // 传入的el字符串
  template?: string;  // 传入的模板字符串
  render: (h: () => VNode) => VNode;  // 传入的render函数
  renderError?: (h: () => VNode, err: Error) => VNode;
  staticRenderFns?: Array<() => VNode>;

  // 钩子函数
  beforeCreate?: Function;
  created?: Function;
  beforeMount?: Function;
  mounted?: Function;
  beforeUpdate?: Function;
  updated?: Function;
  activated?: Function;
  deactivated?: Function;
  beforeDestroy?: Function;
  destroyed?: Function;

  // assets
  directives?: { [key: string]: Object }; // 指令
  components?: { [key: string]: Class<Component> }; // 子组件的定义
  transitions?: { [key: string]: Object };
  filters?: { [key: string]: Function }; // 过滤器

  // context
  provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };
  inject?: { [key: string]: string | Symbol } | Array<string>;

  // component v-model customization
  model?: {
    prop?: string;
    event?: string;
  };

  // misc
  parent?: Component; // 父组件实例
  mixins?: Array<Object>; // mixins传入的数据
  name?: string; // 当前的组件名
  extends?: Class<Component> | Object; // extends传入的数据
  delimiters?: [string, string]; // 模板分隔符

  // 私有属性，均为内部创建自定义组件的对象时使用
  _isComponent?: true;  // 是否是组件
  _propKeys?: Array<string>; // props传入对象的键数组
  _parentVnode?: VNode; // 当前组件，在父组件中的VNode对象
  _parentListeners?: ?Object; // 当前组件，在父组件上绑定的事件
  _renderChildren?: ?Array<VNode>; // 父组件中定义在当前元素内的子元素的VNode数组（slot）
  _componentTag: ?string;  // 自定义标签名
  _scopeId: ?string;
  _base: Class<Component>; // Vue
  _parentElm: ?Node; // 当前自定义组件的父级dom结点
  _refElm: ?Node; // 当前元素的nextSlibing元素，即当前dom要插入到_parentElm结点下的_refElm前
}

Получите тип возвращаемого значения функции, используйте TS

const func = (): number => 1;
// 声明一个泛型类型别名，返回值与泛型类型相同，入参类型不限制。
type Reverse<T> = (arg: any) => T;
// 声明一个泛型方法，入参arg继承泛型约束，返回空对象并断言其类型为T
function returnResultType<T>(arg: Reverse<T>): T {
 return {} as T;
}
// 调用returnResultType,传入方法(arg: any) => 3，获得result返回值
const result = returnResultType((arg:any) => 3);
// 获取result类型并重名为ResultType
type ResultType = typeof result;

Array

Конструктор:

new Array()
new Array(size)
new Array(element0, element1, ..., elementn)
  • sizeУстановите количество элементов массива. возвращаемый массивlengthсвойство равноsize.
  • список параметров,element0,..,elementn,когдаArray()Когда конструктор вызывается с этими параметрами, вновь созданный экземпляр массива инициализируется с указанными значениями параметров и будетlengthСвойство устанавливается на количество параметров.
  • при вызове без параметровArray(), возвращаемый массив пуст,lengthсвойство равно 0.
  • concat(), объединить элементы в массив.
  • every(), который проверяет, верна ли функция утверждения для каждого элемента массива.
  • filter(), который возвращает элементы массива, удовлетворяющие функции предиката.
  • forEach(), который вызывает указанную функцию для каждого элемента массива.
  • indexOf(), находит соответствующий элемент в массиве.
  • join(), преобразует все элементы массива в строки и объединяет их.
  • lastIndexOf(), искать в массиве в обратном направлении.
  • map(), из элементов массива, вычисляет новый элемент массива.
  • pop(), удаляет последний элемент массива.
  • push(), добавляет элемент в конец массива.
  • reduce(), который вычисляет значение из элементов массива.
  • reduceRight(), уменьшая массив справа налево.
  • reverse(), который меняет порядок элементов в исходном массиве на обратный.
  • shift(), удаляет первый элемент массива.
  • slice(), который возвращает часть массива.
  • some(), проверяет, делает ли хотя бы один элемент массива функцию утверждения истинной.
  • sort(), сортирует элементы массива в исходном массиве.
  • splice(), вставлять, удалять или заменять элементы массива.
  • toLocaleString(), который преобразует массив в локальную строку.
  • toString(), который преобразует массив в строку.
  • unshift(), вставляет элемент в начало массива.

Array.concat()

array.concat(value, ...)

возвращаемое значение, новый массив, содержащийarrayэлементы и новые элементы, которые соединяются.

concat()свяжет параметры сarrayполучить новый массив и вернуть его, он не изменяетсяarray, если перейти кconcat()сам массив, элементы массива объединяются вarrayвместо самого массива.

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

Array.every()Проверьте, верна ли функция утверждения для каждого элемента

array.every(predicate)
array.every(predicate,o)

параметр:

  • predicate, функция утверждения для проверки элементов массива.

  • o,перечислитьpredicateпо желаниюthisценность.

Возвращаемое значение: если даarrayкаждый элемент вызоваpredicateвозвращает true, когда обаtrue, если какой-либо элемент вызываетpredicateвозвращает ложь, еслиfalse.

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

Когда пройденный массив пуст,every()возвращениеtrue

[1,2,3].every(function(x) { return x<5 ;}) // true
[1,2,3].every(function(x) { return x<3 ;}) // false
[].every(function(x) {return false;}); // true []总是返回true

Array.filter()Возвращает элемент массива, который передает утверждение

  • array.map(predicate)
  • array.map(predicate, o)
  • predicate, судитьarrayНужно ли включать нужные элементы в вызывающую функцию, которая возвращает массив
  • o,перечислитьpredicateпо желаниюthisценность

возвращаемое значение:

новый массив, содержащий только те, которые позволяютpredicateэлемент массива, который возвращает true

filter()создаст новый массив, содержащий теpredicateфункция возвращает истинуarrayЭлементы.filter()метод не модифицируетсяarrryсама, заметкаpredicateФункции могут быть изменены.

Возвращает только что созданный массив.

Array.forEach()вызвать функцию для каждого элемента массива

array.forEach(f)
array.forEach(f,o)

параметр

f 为array的每一个元素调用的函数
o 调用f时的可选this值

Возвращаемое значение: этот метод не имеет возвращаемого значения, обратите внимание, чтоforEach()нет возвращаемого значения, обратите особое внимание, оно не вернетсяarray.

forEach(), map(), filter(), every(), some()Принимает функцию в качестве первого аргумента и необязательный второй аргумент. Внутри тела функции значение this равно o.

Если второй параметр не указан, это значение является глобальным объектом в нестрогом режиме и в строгом режиме.null.

var a = [1,2,3];
a.forEach(function(x,i,a){ a[i]++; }); // [2,3,4]

Array.indexOf()найти массив

array.indexOf(value)
array.indexOf(value,start)

параметр:

value 要在array中查找的值

start 开始查找的可选数组序号，可以省略，则为0

Возвращаемое значение, индекс, если нет соответствующего элемента, возврат-1

判断是否相等使用的是"==="操作符

['a', 'b', 'c'].indexOf('b'); // 1
['a', 'b', 'c'].indexOf('d', 1); // -1

Array.join(), объединить элементы массива в строки

array.join()
array.join(separator)
  • separator, необязательный символ или строка, которая отделяет один элемент массива от следующего в возвращаемой строке. Если опущено, по умолчанию используется английская запятая.

Возвращаемое значение, строка.

a = new Array(1,2,3,"test");
s = a.join("+"); // 1+2+3+test

Array.lastIndexOf()массив обратного просмотра

array.lastIndexOf(value);
array.lastIndexOf(value,start);
  • value, быть вarrayзначение найдено в
  • start, необязательный номер массива для начала поиска, если он опущен, поиск начинается с последнего элемента

Array.lengthразмер массива

lengthСвойство представляет количество элементов в массиве

Если установленоlengthБольше, чем исходное значение, массив станет больше, и значение вновь добавленного элемента в конце будетundefined.

Array.map()Вычислить новое значение из элемента массива

array.map(f);
array.map(f,o);
  • fФункция, вызываемая для каждого элемента массива, возвращаемое значение которого становится элементом возвращаемого массива.
  • o-fнеобязательно при вызовеthisценность.

Возвращаемое значение: новый массив, возвращаемый функциейfРасчетный элементный состав.

[1,2,3].map(function(x) { return x*x }); // [1,4,9]

Array.pop()Удалить и вернуть последний элемент массива

array.pop()

возвращаемое значение:arrayпоследний элемент

pop()удалитarray, сокращает длину массива и возвращает значение удаленного элемента. Если массив уже пуст,pop()Массив не будет изменен, возвращаемое значение равноundefined.

pop()иpush(), функция стека FIFO:

var stack = []; // stack: []
stack.push(1,2); // stack: [1,2] 返回2
stack.pop(); // stack: [1] 返回2
stack.push([4,5]); // stack: [1, [4,5]] 返回2
stack.pop(); // stack: [1] 返回[4,5]
stack.pop(); // stack: [] 返回1

Array.push()Добавить элемент в массив

array.push(value,...);

Возвращаемое значение: новая длина массива после добавления указанного значения к массиву. (он изменяет массив напрямую, не создавая новый массив)

push()иpop(), функция стека "первым пришел - последним вышел".

Array.reduce()Вычислить значение из элемента массива

array.reduce(f);
array.reduce(f,initial);
  • fФункция, которая объединяет два значения и возвращает «уменьшенное» новое значение.
  • initial, необязательное начальное значение, используемое для сокращения массива, если указано,reduce()будет вести себя как вставка параметра вarrayто же, что голова.

Возвращаемое значение: уменьшенное значение массива

Пример:

[1,2,3,4].reduce(function(x,y) { return x*y; }) // 24

Array.reduceRight()Уменьшить массив справа налево

array.reduceRight(f)
array.reduceRight(f, initial)
  • fФункция, которая объединяет два значения и возвращает «уменьшенное» новое значение.
  • initialнеобязательное начальное значение для уменьшения массива, если указано,reduceRight()будет вести себя так, как если бы параметр был вставлен вarayто же, что хвост.

Возвращаемое значение: уменьшенное значение массива, который был последним вызовомfвозвращаемое значение, когда .

[2,10,60].reduceRight(function(x,y) { return x/y; }) // 3

Array.reverse()Обратный порядок элементов в массиве

array.reverse()

Arrayобъектreverse()метод для изменения порядка элементов массива. Он работает с исходным массивом, не создавая новый.

a = new Array(1,2,3);
a.reverse();

Array.shift()удалить первый элемент массива

array.shift()

Возвращаемое значение: Исходный первый элемент массива.

Если массив пуст,shift()ничего не делай, вернисьundefinedзначение, новый массив не создается.

var a = [1,[2,3],4];
a.shift(); // 1

Array.slice()вернуть часть массива

array.slice(start, end)

Возвращаемое значение: новый массив, включающий все элементы массива от начала до конца (включая элементы, указанные в start, но не включая элементы, указанные в end), если конец не указан, возвращаемый массив включает в себя начало и конец массива все элементы .

var a = [1,2,3,4,5];
a.slice(0,3); // 返回 [1,2,3]
a.slice(3); // 返回 [4,5]

Array.some()Проверить, удовлетворяет ли какой-либо элемент функции предиката

array.some(predicate)
array.some(predicate,o)
  • predicateФункция утверждения для проверки элементов массива
  • oперечислитьpredicateпо желаниюthisценность

Возвращаемое значение: еслиarrayимеет хотя бы один элемент с именемpredicateВозвращает true, если все элементы вызываютpredicateвозвращает false, когда оба возвращают false.

[1,2,3].some(function(x) { return x>5; }); //false
[1,2,3].some(function(x) { return x>2; }); // true
[].some(function(x) { return false; }); // false

Array.sort()Сортировать элементы массива

array.sort()
array.sort(orderfunc)
  • orderfuncнеобязательная функция, чтобы указать, как сортировать

Возвращаемое значение: ссылка на этот массив. Обратите внимание, что сортировка выполняется в исходном массиве, нового массива ключей нет. Неопределенные элементы в массиве всегда располагаются в конце массива.

function numberorder(a,b) {return a-b;}
a = new Array(3,2,4);
a.sort(); // 字母排序
a.sort(numberorder); // 数值排序

Array.splice()Вставка, удаление или замена элементов массива

array.splice(start,deleteCount,value,...)
  • startПорядковый номер элемента массива, с которого начинается вставка и удаление.
  • deleteCountКоличество удаляемых элементов, изstartзапускается и включаетstartЭлемент at , если указан 0, вставляет элемент без удаления какого-либо элемента.
  • value,...Чтобы вставить ноль или более значений в массив, начните сstartПорядковый номер начинает вставляться.

возвращаемое значение:

Если элементы были удалены из массива, вернуть новый массив, содержащий эти удаленные элементы,splice()будет напрямую изменять массив.

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

Array.toLocaleString()Преобразовать массив в локальную строку

array.toLocaleString()

Возвращаемое значение: локализованное строковое представление массива. (Исключение, которое возникает при вызове метода, если объект не является массивом.)

Array.toString()преобразовать массив в строку

array.toString()

возвращаемое значение:arrayСтроковое представление . (Исключение, которое возникает при вызове метода, если объект не является массивом.)

Array.unshift()Вставить элемент в начало массива

array.unshift(value,...)

параметр:value,..., вставитьarrayОдно или несколько значений для заголовка.

Возвращаемое значение: новая длина массива.unshift()Вместо создания нового массива непосредственно изменяется сам массив.

var a = [];
a.unshift(1); // a:[1];

Booleanподдержка логических значений

Конструктор:

new Boolean(value) // 构造函数
Boolean(value) // 转换函数

параметр:value,BooleanЗначение, которое содержит объект, или значение для преобразования в логическое значение.

  • Boolean()преобразует аргумент в логическое значение и вернетBooleanобъект.
  • 0,NaN,null,空字符串""和undefinedпревратится в ложь.
  • toString()в соответствии сBooleanВозвращается логическое значение, представленное объектом"true"或"false"нить.
  • valueOf()возвращениеBooleanПримитивное логическое значение, хранящееся в объекте.
  • BooleanОбъект — это объект, который инкапсулирует логическое значение.

Boolean.toString, преобразует логическое значение в строку

b.toString()
  • При вызове этого метода, если объект не имеет логического типа, будет выдано исключение.

Boolean.valueOf(), логическое значение логического объекта

Дата Дата и время операции

new Date()
new Date(milliseconds)
new Date(datestring)
new Date(year, month, day, hours, minutes, seconds, ms)

Без параметров,Date()Конструктор создаст его на основе текущей даты и времени.Dateобъект.

Date.getDate()Возвращает значение дня месяца в объекте Date.

Возвращает: значение дня в месяце данной даты объекта Date по местному времени. Возвращаемое значение находится в диапазоне от 1 до 31.

Date.getDay() , возвращаемое значение равно 0 (воскресенье) ~ 6 (понедельник).

Date.getFullYear(), возвращаемое значение представляет собой полный 4-значный год.

Date.getHours(), возвращает значение часа объекта Date, возвращаемое значение 0~23

Date.getMilliseconds(), возвращает миллисекундное значение объекта Date.

Date.getMinutes(), возвращает значение минуты объекта Date, возвращаемое значение находится в диапазоне от 0 до 59.

Date.getMonth() возвращает значение месяца объекта Date в диапазоне от 0 (январь) до 11 (декабрь).

Date.getSeconds() возвращает второе значение объекта Date в диапазоне от 0 до 59.

Date.getTime(), возвращает объект Date в миллисекундах

Date.getYear(), возвращает значение года объекта Date.

Date.now(), возвращает текущее время в миллисекундах

Date.parse(), анализирует строку даты или времени

Date.setDate() устанавливает значение даты в январе объекта Date.

Date.setFullYear() устанавливает значение года даты

Date.setHours() устанавливает часы, минуты, секунды и миллисекунды даты

Date.setMilliseconds() устанавливает миллисекундное значение даты

Date.setMinutes() устанавливает минуты, секунды и миллисекунды даты

Date.setMonth() устанавливает значение месяца и даты даты

Date.setSeconds() устанавливает секунды и миллисекунды даты

Date.setTime() устанавливает время с миллисекундным значением

Date.setYear() устанавливает значение года даты

Раздел decodeURI() кодирует символы в URI.

decodeURI(uri)
// uri
一个包含已编码的URI或其他待解码的文本的字符串

encodeURI() экранирует символы в URI

Экранирование символов в URI

Функция функция

// 构造函数
new Function(argument_names..., body)

// arguments_names...
任意多个字符串参数

// body
指定函数体的字符串

// 返回
新创建的Function对象

// 异常
SyntaxError
表示在body参数或某个argument_names参数中存在JavaScript语法错误

Атрибуты

arguments[]
传递给函数的参数数组，不推荐使用

caller
调用该函数的Function对象的引用，如果是全局调用，则该属性为null，不推荐使用

метод:

apply()
将函数作为指定对象的方法来调用。传递给它的是指定的参数数组。

bind()
返回一个新函数。

call()
将函数作为指定对象的方法来调用。传递给它的是指定的参数。

toString()
返回函数的字符串表示。

Function.apply()

function.apply(调用function的对象/函数体中this/如果参数为null，则使用全局对象，一个值数组)
// 返回
调用函数function的返回值
// 异常
如果调用该函数的对象不是函数，或者参数args不是数组和Arguments对象，会抛出异常

Пример:

Object.prototype.toString.apply(o);

var data=[1,2,3,4,5,34];
Math.max.apply(null,data);

Function.bind(), которая возвращает функцию, вызываемую как метод

function.bind(o)
function.bind(o,args...)
// o 
要绑定到函数上的对象
// args...
要绑定到函数上的零个或多个参数值
// 返回
一个新函数

Пример:

var g = f.bind(o, 1,2);

f.call(o, 1,2,3);

Function.arguments[] Аргументы, передаваемые функции, устарели.

Function.call() вызывает функцию как метод объекта

function.call(thisobj, args...)

// thisobj
调用function的对象，在函数体中，thisobj是关键字this的值，如果这个参数为null，则使用全局对象
// args..
任意多个参数
// 返回
调用函数function的返回值

Пример:

Object.prototype.toString().call(o);

Function.caller() вызывает функцию текущей функции, этот атрибут не обязателен и не должен использоваться

Количество параметров, объявленных функцией Function.length().

Function.prototype() прототип класса объекта

Function.toString() преобразует функцию в строку

Возвращает: строка, представляющая функцию

Глобальный глобальный объект

глобальные свойства

Глобальный объект не является классом, обратите внимание, что все глобальные переменные также являются свойствами глобального объекта:

  • Infinityчисловое значение, представляющее положительную бесконечность
  • NaNпредставляет значение, которое не является числовым значением
  • undefinedвыражатьundefinedценность

глобальная функция

  • decodeURI()Декодировать с помощьюencodeURI()экранированная строка
  • decodeURIComponent()Декодировать с помощьюencodeURIComponent()экранированная строка
  • encodeURI()Кодировать URI, экранируя определенные символы
  • encodeURIComponent()Кодируйте компоненты URI, экранируя определенные символы
  • escape()Кодировать строку, заменяя определенные символы escape-последовательностями
  • eval()Выполнить строку кода JavaScript и вернуть результат
  • isFinite()Определить, является ли значение бесконечным
  • isNaN()Определить, является ли значение нечисловым
  • parseFloat()Разобрать числовое значение из строки
  • parseInt()Разобрать целое число из строки
  • unescape()Декодировать с помощьюescape()закодированная строка

глобальный объект

  • Array
  • Boolean
  • Date
  • Error
  • EvalError
  • Function
  • JSON
  • Math
  • Number
  • Object
  • String
  • TypeError
  • URIError

Нечисловое свойство NaN

NaN — это глобальное свойство, указывающее на специальное нечисловое значение.NaNимущество недоступноfor/inПеречисление циклов, также нельзя использоватьdeleteоператор удалить.NaNНе константа, она не может быть установлена ​​в любое другое значение.

Чтобы проверить, является ли значение числом, используйте isNaN(), NaN всегда не равно другим значениям и не равно самому себе.

Object — это суперкласс, содержащий свойства всех объектов JavaScript.

new Object()
new Object(value)

Атрибут: конструктор, который ссылается на конструктор текущего объекта.

метод:

  • hasOwnProperty()

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

  • isPrototypeOf()

Проверить, является ли текущий объект прототипом указанного объекта

  • propertyIsEnumerable()

Проверяет, существует ли свойство с указанным именем и может ли оно быть перечислено с помощью цикла for/in

  • toLocaleString()

возвращает локализованное строковое представление этого объекта

  • toString()

возвращает строковое представление этого объекта

  • valueOf()

Возвращает исходное значение текущего объекта, если он существует.

статический метод:

  • Object.create()

Создает новый объект с указанным прототипом и свойствами

  • Object.defineProperties()

Создать или настроить одно или несколько свойств указанного объекта

  • Object.defineProperty()

Создать или настроить свойство указанного объекта

  • Object.freeze()

Сделать указанный объект неизменным

  • Object.getOwnPropertyDescriptor()

Запрос свойств указанного свойства указанного объекта

  • Object.getOwnPropertyNames()

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

  • Object.getPrototypeOf()

Возвращает прототип указанного объекта

  • Object.isExtensible()

Проверьте, можно ли добавить текущий объект к новому свойству

  • Object.isFrozen()

Проверить, не заморожен ли текущий объект

  • Object.isSealed()

Проверяет, закрыт ли указанный объект

  • Object.keys()

Возвращает массив, содержащий все ненаследуемые перечисляемые имена свойств указанного объекта.

  • Object.preventExtensions()

Запрещает добавление новых свойств к указанному объекту

  • Object.seal()

Предотвращает добавление новых свойств к указанному объекту или удаление существующих свойств

Класс Object — это встроенный тип данных языка JavaScript. Это надкласс всех других объектов JavaScript, поэтому все методы и поведение класса Object наследуются другими объектами.

Object.constructor конструктор объектов

Свойство конструктора всех объектов указывает на функцию, которая используется в качестве конструктора для текущего объекта. При использованииArray()Конструктор создает массив a, затем a.constructor представляет собойArray:

a = new Array(1,2,3); //创建一个对象
a.constructor == Array // 值为true

Проверьте, является ли это массивом:

function isArray(x) {
 return ((typeof x == "object") && (x.constructor == Array));
}

constructorСвойства часто используются для определения типа неизвестных объектов. Учитывая неизвестное значение, можно использоватьtypeofоператор, чтобы проверить, является ли это примитивным значением или объектом.

Если это объект, вы можете использоватьconstructorсвойство для проверки типа объекта.

Object.create() создает объект, используя указанный прототип и свойства.

Object.create(proto)
Object.create(proto,descriptors)

параметр:

// proto
新创建对象的原型，可为null
// descriptors
一个可选对象，把属性名映射到属性描述符
// 返回
一个新创建的对象，继承自proto，同时拥有descriptiors所描述的属性

Пример:

// 创建一个对象，有x,y属性，同时继承属性z
var p = Object.create({z:0},{
 x: {value:1,writable: false, enumerable: true, configurable: true},
 y: {value:2,writable: false, enumerable: true, configurable: true},
});

Object.defineProperties();

Создание или настройка нескольких свойств объекта

// o
要在其上创建或配置属性的对象
// descriptors
将属性名映射到属性描述符的对象
// 返回
对象o

Пример:

// 把只读属性x和y添加到新创建的对象中
var p = Object.defineProperties({},{
 x: {value:1,writable: false, enumerable: true, configurable: true},
 y: {value:2,writable: false, enumerable: true, configurable: true},
});

Object.defineProperty()

Создать или настроить свойство объекта

Object.defineProperty(o, name, desc)

параметр:

// o
将在其上创建或配置属性的对象
// name
将创建或配置的属性的名字
// desc
一个属性描述符对象，描述要创建的新属性或现有属性的修改
// 返回
对象o

Пример:

function constant(o, n, v) {
 // 定义一个值为v的常量o.n
 Object.defineProperty(o, n, {value: v, writable: false, enumerable: true, configurable: false});
}

Object.freeze()

Чтобы сделать объект неизменяемым, заморозка объекта является постоянной операцией, однажды замороженную, ее нельзя разморозить. Object.freeze() устанавливает только доступные для записи свойства свойств данных, эти свойства с соответствующими функциями установки не будут затронуты, а Object.freeze() не повлияет на унаследованные свойства.

Object.getOwnPropertyDescriptor()

Запрос свойств атрибута

Object.getOwnPropertyDescriptor(o,name)

параметр:

// o 
待查询其属性特性的对象
// name
待查询的属性名
// 返回
指定对象指定属性的一个属性描述符对象，如果不存在指定属性则返回undefined
// 描述
属性描述符是一个对象，描述该属性的特性和值

Атрибут данных имеет значение и три свойства:

  1. исчисляемый
  2. Прочитайте и напишите
  3. Конфигурируемость

Свойства доступа имеют методы получения и установки, а также возможность перечисления и настройки.

Дескриптор атрибута данных:

{
 value:
 writable:
 enumerable:
 configurable:
}

Дескриптор свойства доступа:

{
 get:
 set:
 enumerable:
 configurable:
}

Object.getOwnPropertyNames()

Возвращает имя ненаследуемого свойства

Object.getOwnPropertyNames(o);
// o 一个对象

Возвращает массив, содержащий имена многих ненаследуемых свойств o, включая те, которые не являются перечисляемыми.

Object.getOwnPropertyNames([]) // ["length"]: "length" 不可枚举

Object.getPrototypeOf()

Возвращает прототип объекта

var p = {}, // 一个原始对象
Object.getPrototypeOf(p); // Object.prototype
var o = Object.create(p); // 一个继承p的对象
Object.getPrototypeOf(o); // p

Object.hasOwnProperty()

Проверить, передается ли имущество по наследству

Пример:

var o = new Object(); // 创建一个对象
o.x = 3.14; // 定义一个非继承的本地属性
o.hasOwnProperty("x"); //返回true，x是o的本地属性
o.hasOwnProperty("y"); // false , o没有属性y
o.hasOwnProperty("toString"); //返回false，该属性是继承属性

Object.isExtensible()

Определить, можно ли добавить к объекту новое свойство

Пример:

var o = {}; // 新创建一个对象
Object.isExtensible(o); // true,它是可扩展的
Object.preventExtensions(o); // 将它设置为不可扩展的
Object.isExtensible(o); // false

Object.isFrozen() определяет, является ли объект неизменным.

  • Объект замораживается, если все его ненаследуемые свойства доступны только для чтения или если он закрыт
  • Объект называется закрытым, если к нему можно добавить новые свойства, а существующие свойства нельзя удалить.
  • Object.isFrozen() определяет, заморожен ли его параметр
  • После того, как объект заморожен, его нельзя разморозить снова.

Object.isPrototypeOf() определяет, является ли текущий объект прототипом другого объекта.

  • Возвращает true, если объект является прототипом o, и false, если o не является объектом или если объект не является прототипом o.
var o = new Object();
Object.prototype.isPrototypeOf(o); // true: o是一个对象
Function.prototype.isPrototypeOf(o.toString); // true，toString是一个函数
Array.prototype.isPrototypeOf([1,2,3]); // true
o.constructor == Object // true

Object.isSealed() определяет, можно ли добавлять или удалять свойства объекта.

  • Как только объект закрыт, его невозможно распечатать
  • Запечатать объект: Object.seal() или Object.freeze()

Object.keys() возвращает собственное перечисляемое имя свойства

Object.keys({x:1,y:2}); // ["x","y"]

Object.preventExtensions()

Запретить добавление новых свойств к объекту

  • Object.preventExtensions() устанавливает расширяемость o в false, после чего к нему нельзя добавлять новые свойства.
  • это постоянное изменение

Object.propertyIsEnumerable()

Проверьте, находится ли недвижимость вfor/inвидно в петле

var o = new Object();
o.x=12;
o.propertyIsEnumerable("x"); // true
o.propertyIsEnumerable("y"); // false
o.propertyIsEnumerable("toString"); // false

Object.seal() предотвращает добавление или удаление свойств объекта

Object.toLocaleString() возвращает локализованное строковое представление объекта.

Object.toString() определяет строковое представление объекта.

Object.valueOf() примитивное значение данного объекта

parseFloat() преобразует строку в число

parseInt() преобразует строку в целое число

String() поддержка строк

метод:

  • charAt()

Извлечь символ в указанной позиции в строке

  • charCodeAt()

Возвращает кодировку символа в указанной позиции в строке

  • concat()

Объединяет одно или несколько значений в строку

  • indexOf()

Найти символ или строку в указанной строке

  • lastIndexOf()

Найти символ или строку в указанной строке в обратном направлении

  • localCompare()

Сравните строки, используя локально определенный порядок

  • replace()

Поиск и замена операций с помощью регулярных выражений

  • search()

Найти строку, которая соответствует регулярному выражению в строке

  • slice()

Возвращает фрагмент или подстроку строки

  • split()

Разбивает указанную строку разделителя или регулярное выражение, разделяя строку на массив строк

  • substr()

Извлечь строку строк, вариант subString()

  • substring()

Извлечь строку строк

  • toString()

возвращает исходное строковое значение

  • valueOf()

возвращает исходное строковое значение

Оглядываясь назад на предыдущие высоко оцененные статьи автора, вы можете получить больше!

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️

Нравится, добавляете в избранное и комментируете

яJeskson(Dada front-end), спасибо за ваши таланты:Нравится, добавляете в избранное и комментируете, увидимся в следующий раз! (Если что-то не так с объяснением в этой статье, укажите ☞Спасибо, будем учиться вместе)

Увидимся в следующий раз!

Статья постоянно обновляется, вы можете искать в WeChat "Программист Дораэмон"Прочитайте ее впервые и ответьте на [Информацию] Я подготовил информацию о производителях первой линии, эта статьяwww.dadaqianduan.cn/#/был записан

githubвключено, добро пожаловатьStar:GitHub.com/веб-блог VUE/…

Категории