Fun современный массив JavaScript, это один достаточно

Подводя итог игры современный массив яваскрипта .

Массив упоминаемого здесь, основаны на знаниях es5+, вы можете использовать хром и другой современный браузер непосредственно запускать примеры в этой статье, или для выполнения поста-столпотворения кодирования.

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

конструктор

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

let list = new Array(6,6,6);

Конструкторы , чтобы мы знали , что вы можете, потому что Arrayразличные параметры формы будут генерировать множество различных форматов, странное поведение, в целом, или использование буквального , чтобы инициализировать массив более надежно:

let list = [6,6,6];

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

Расширенный оператор

Расширенный оператор ES6 + нового материала, играя конец передней должны быть знакомы. Новый оператор выглядел как три очка ..., все данные могут быть использованы в конструкции итератора, сказал популярный пункт JS массивы и объекты могут использовать расширенный оператор. Расширенный оператор может быть расширен в массив, он , как правило , используется в сочетании с другими выражениями. С массивом расширенного оператора на самом деле , как утка, эксплуатационная гибкость массива также поднялась на новую высоту.

Расширенная реализация оператора с мелкой копией:

let arr1 = [1,5,6];
let arr2 = [...arr2]; //arr2独立存在

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

Более быстро передать параметры функции:

// 示例1
let params = ['小明',18,'大学生'];
printInfo(...params); // 等于 printInfo('小明',18,'大学生')

// 示例2
let params2 = [98,35,21,54,78,3,26];
Math.max(...params2); // 等于 Math.max(98,35,21,54,78,3,26)

Массив слияния:

let params = [55,78,69,88];
let params2 = [98,35,21,54,78,3,26];
let params3 = [...params,...params2]; // [55,78,69,88,98,35,21,54,78,3,26]

Назначение Деконструкция:

let [leader,...apprentices] = ['王重阳','马钰','丘处机','谭处端','王处一','郝大通','刘处玄','孙不二'];
console.log(leader); // '王重阳'
console.log(apprentices); // ['马钰','丘处机','谭处端','王处一','郝大通','刘处玄','孙不二']

## три статические методы

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

`Array.isArray()`

Array.isArray()Он используется, чтобы определить, является ли переменная массивом, простым и интуитивно понятным, само собой разумеется.

Помните оригинальный судья, как переменный печатают это массив? Вы, конечно, не забыть его в следующей редакции:

var arr = ['小明',18,3000];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true

До прибытия ES5 такой подход является самым безопасным, но теперь так что мы можем написать:

var arr = ['小明',18,3000];
console.log(Array.isArray(arr)); // true

`Array.from()`

Array.from()Класс массив объектов может быть преобразован в реальный массив. Так что считается класс массив объектов? Короче говоря, если объект содержит свойство длины, мы рассматриваем их как массив объектов класса. Объект класса с массивом Array.from()после преобразования, способ может использовать экземпляр массива. Вот несколько примеров небольшого случайного чувства:

// 示例1 将类数组对象转换为数组
let userInfo = {
    '0': '小明',
    '1': '18',
    '2': '3000',
    length: 3
};
let userInfoArr = Array.from(userInfo); // ['小明',18,3000]

// 示例2 函数中的预置变量arguments也是个类数组对象
function foo() {
  var args = Array.from(arguments);
}

// 示例3 dom节点也是一个类数组对象
Array.from(document.querySelectorAll('div'))
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

Array.from()Прием второго параметра функции обратного вызова, в частности, после того, как массив генерируется, то операции по карте:

Array.from(obj,val=>val);
//等同于
Array.from(obj).map(val=>val);

`Array.of()`

Array.of()Он может быть использован для создания массива, его роль и конструктор массива же, но те же модели поведения и буквальное утверждение, рекомендуется создать массив, используя этот метод.

var arr = Array.of('小明',18,3000);
//等同于
var arr = ['小明',18,3000];

`length`недвижимость

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

// 示例1 
var arr = ['小明',18,3000];
console.log(arr.length); // 3

// 示例2
var arr2 = ['小明',18,3000];
arr2.length = 1;

// 示例3
var arr3 = ['小明',18,3000];
arr3.length = 5;

Ворс метод экземпляра массива

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

Метод класса Мутация

1. `push()`,`pop()`

push()Может быть добавлены к концу элементов массива pop(), чтобы удалить элемент из конца массива, push()способ может быть получен на множество параметров. Эти два метода изменяет значение самого массива и возвращает последний элемент / удалить добавил.

// 示例1 push方法
var arr = [1];
console.log(arr.push(2,3)); // 3
console.log(arr); // [1,2,3]

// 示例2 pop方法
var arr2 = [1,2,3];
console.log(arr2.pop()); // 3
console.log(arr2); // [1,2]
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

2. `shift()`,`unshift()`

unshift()Можно добавлять элементы к головке массива, shift()массив , чтобы удалить элементы из головки, unshift()способ может быть получен на множество параметров. Эти два метода изменяет значение самого массива и возвращает последний элемент / удалить добавил. Эти два метода и push(), pop()последовательное поведение.

// 示例1 unshift方法
var arr = [1];
console.log(arr.unshift(2,3)); // 3
console.log(arr); // [2,3,1]

// 示例2 shift方法
var arr2 = [1,2,3];
console.log(arr2.shift()); // 1
console.log(arr2); // [2,3]

3. `reverse()`

reverse()Метод, используемый для обратного массива, метод возвращает массив инвертированных, в то время как сам массив будет меняться.

var arr = [1, 2, 3];
console.log(arr.reverse()); // [3,2,1]
console.log(arr); // [3,2,1]

4. `splice()`

splice()Способ, чтобы удалить или вставить элемент массива в заданном месте. Параметры в диапазоне от одного до более чем чувствовать формулы:

arr.splice(以0为起点的初始位置<如果是负数则从尾部开始计数>,需要删除元素的数量<可选,不填写则表示删到数组尾部>,插入元素<可选>,插入元素<可选>...);

splice()Метод изменяет массив и возвращает массив элементов, которые будут удалены.

// 示例1 从某位置删除元素
var arr = [1, 2, 3];
console.log(arr.splice(0,1)); // [1]
console.log(arr); // [2,3]

// 示例2 从某位置删到底
var arr2 = [1, 2, 3];
console.log(arr2.splice(1)); // [2,3]
console.log(arr2); // [1]

// 示例3 从倒数某位置删到底
var arr3 = [1, 2, 3];
console.log(arr3.splice(-1)); // [3]
console.log(arr3); // [1,2]

// 示例4 从某位置插入元素
var arr4 = [1, 2, 3];
console.log(arr4.splice(3,0,4,5)); // []
console.log(arr4); // [1,2,3,4,5]

// 示例5 从某位置开始替换并增加元素
var arr5 = [1, 2, 3];
console.log(arr5.splice(2,1,4,5)); // [3]
console.log(arr5); // [1,2,4,5]

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

5. `sort()`

sort()Метод может отсортировать элементы массива, sort()словарь сортировки по умолчанию упорядочен, такого рода вынудит элементы в строку, размер побитового сравнения. Например, таким образом, 15 должны быть отсортированы перед тем 121. sort()Как вы можете получить в зависимости от итератора. Итератор функции до и после нажатия порядка двух элементов, функция возвращает значение , если бывший больше 0, за последний, или наоборот.

// 示例1 普通情况
var arr = [3,2,1];
console.log(arr.sort()); // [1,2,3]
console.log(arr); // [1,2,3]

// 示例2 特殊情况
var arr2 = [10,3,2,1];
console.log(arr2.sort()); // [1,10,2,3]
console.log(arr2); // [1,10,2,3]

// 示例3 迭代器
var arr3 = [10,3,2,1];
console.log(arr3.sort(function (prev, next) {
  return prev-next;
})); // [1,2,3,10]
console.log(arr3); // [1,2,3,10]

// 示例4 对象元素排序
var arr4 = [{name:'小赵',age:10},{name:'小钱',age:3},{name:'小孙',age:2},{name:'小李',age:1}];
console.log(arr4.sort(function (prev, next) {
  return prev.age-next.age;
})); // [{name:'小李',age:1},{name:'小孙',age:2},{name:'小钱',age:3},{name:'小赵',age:10}]
console.log(arr4); // [{name:'小李',age:1},{name:'小孙',age:2},{name:'小钱',age:3},{name:'小赵',age:10}]

6. `copyWithin()`

copyWithin()Метод может быть воспроизведен массивом других внутренних элементов текущей позиции. Посмотрите, используя формулу:

arr.copyWithin(以0为起点的被替换位置,复制元素的起点<可选,默认值为0>,复制元素的终点<可选,默认值为数组长度>);

Несколько См Пример кода:

// 示例1 普通复制
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 4);
console.log(arr); // [5, 2, 3, 4, 5]

// 示例2 倒序复制
var arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(0, -2, -1);
console.log(arr2); // [4, 2, 3, 4, 5]

7. `fill()`

fill()Метод может указать значение, чтобы заполнить весь массив. В коде:

// 示例1 普通填充
var arr = [1, 2, 3, 4, 5];
arr.fill(6);
console.log(arr); // [6, 6, 6, 6, 6]

// 示例2 指定位置填充
var arr2 = [1, 2, 3, 4, 5];
arr2.fill(6, 2, 3);
console.log(arr2); // [1, 2, 6, 4, 5]

Метод класса Non-мутации

1. `valueOf()`

valueOf()Метод возвращает сам массив, внимание не копировать! Ссылка на следующие коды:

var arr = [1,2];
var arr2 = arr.valueOf();
arr[0]=5;
console.log(arr2) // [5,2]

Этот метод представляет собой массив, а не использовать.

2. `toString()`

toString()Метод массива будет уплощенная, и возвращает текущий массив строк, разделенных запятыми между элементами:

var arr = [1, 2, ['a', function foo() { alert(123123) }, 5, 7]];
console.log(arr.toString()); // 1,2,a,function foo() { alert(123123) },5,7

3. `join()`

join()Метод может быть указан разделитель строки в массив, если разделитель не указан, по умолчанию через запятую.

// 示例1 不指定分隔符
var arr = [1, 2, 3, 4, 5];
console.log(arr.join()); // 1,2,3,4,5

// 示例2 指定分隔符
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2.join('|')); // 1|2|3|4|5
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

4. `concat()`

concat()Метод используется в основном для объединения массива, где находится неглубоко копия слияния.

// 示例1 数组和数组合并
var arr = [1, 2, 3, 4, 5];
console.log(arr.concat([6,7,8,9])); // 1,2,3,4,5,6,7,8,9

// 示例2 数组和其他元素合并
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2.concat('a','b',7)); // 1,2,3,4,5,a,b,7

5. `slice()`

slice()Метод может быть использован для перехвата массива, сам массив без изменений. Какая формула выглядит следующим образом:

arr.slice(截取的开始位置<默认为0，可以为负数>, 截取的终止位置<可选，默认是数组长度>);

slice()Общий код:

// 示例1 普通截取
var arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1,3)); // [2,3]

// 示例2 倒序截取
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2.slice(-3,5)); // [3,4,5]

// 示例3 1个入参的普通截取
var arr3 = [1, 2, 3, 4, 5];
console.log(arr3.slice(1)); // [2, 3, 4, 5]

// 示例4 开始位置大于结束位置
var arr4 = [1, 2, 3, 4, 5];
console.log(arr4.slice(2,1)); // []

6. `indexOf()`,`lastIndexOf()`

indexOf()Возвращает позицию первого вхождения элемента, lastIndexOf()возвращает позицию последнего вхождения указанного элемента. Если нет поиска, возвращается -1.

// 示例1 普通用法
var arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(5)); // 4

// 示例2 指定开始搜索的位置
var arr2 = [2, 2, 3, 4, 5];
console.log(arr2.indexOf(2,1)); // 1

// 示例3 倒序搜索
var arr3 = [1, 4, 3, 4, 5];
console.log(arr3.lastIndexOf(4)); // 3

// 示例4 NaN永远返回-1
var arr4 = [NaN, NaN, NaN, NaN, NaN];
console.log(arr4.indexOf(NaN)); // -1

7. `entries()`, `keys()`,`values()`

entries()Возвращает текущая итерация завершения структуры массива, keys()возвращает индекс текущего массива, values()возвращаемого значения текущего массива.

// 示例1 entries()用法
var arr = [1, 2, 3];
var iterator=arr.entries();
console.log(iterator); // Iterator
console.log(iterator.next().value); // [0,1]
console.log(iterator.next().value); // [1,2]
console.log(iterator.next().value); // [2,3]

// 示例2 keys()用法
var arr2 = [1, 2, 3];
var iterator2=arr2.keys();
console.log(iterator2); // Iterator
console.log(iterator2.next().value); // 0
console.log(iterator2.next().value); // 1
console.log(iterator2.next().value); // 2

// 示例3 values()用法
var arr3 = [1, 2, 3];
var iterator3=arr3.values();
console.log(iterator3); // Iterator
console.log(iterator3.next().value); // 1
console.log(iterator3.next().value); // 2
console.log(iterator3.next().value); // 3

8. `includes()`

includes()Метод поиска ли заданное значение в массиве, возвращает истину, если он присутствует, в противном случае ложно. Вы можете передать второй параметр указывает местоположение, чтобы начать поиск.

// 示例1 常规用法
var arr = [1, 2, 3];
console.log(arr.includes(2)); // true

// 示例2 指定搜索位置
var arr2 = [1, 2, 3];
console.log(arr2.includes(2,2)); // false

// 示例3 可以检索出NaN
var arr3 = [1, NaN, 3];
console.log(arr3.includes(NaN)); // true

9. `flat()`

flat()Метод может быть уплощенной массив, который получает параметр, показывающий количество слоев массива должны быть выровнены, по умолчанию один.

// 示例1 常规用法
var arr = [1, 2, [3, 4]];
console.log(arr.flat()); // [1,2,3,4]

// 示例2 拉平2层
var arr2 = [1, 2, [3, 4, [5, 6,[7,8]]]];
console.log(arr2.flat(2)); // [1,2,3,4,5,6,[7,8]]

// 示例3 无论多少层都拉平
var arr3 = [1, 2, [3, 4, [5, 6,[7,8]]]];
console.log(arr3.flat(Infinity)); // [1,2,3,4,5,6,7,8]

метод итератора

1. `map()`

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

let arr = [1, 2, 3, 4];
console.log(arr.map(item=>item*2)); // [2,4,6,8]

2. `forEach()`

forEach()Работа каждого элемента массива не может быть, но не возвращает значения.

let tmp = [];
let arr = [1, 2, 3, 4];
arr.forEach(item=>tmp.push(item*2))
console.log(tmp); // [2,4,6,8]

3. `filter()`

filter()Каждая операция может быть элементом массива, каждый результат операции истинно элемента массива, вставленным в окончательный ответ.

let arr = [1, 2, 3, 4];
console.log(arr.filter(item=>item >2)); // [3,4]

4. `some()`

some()Используется для определения, является ли текущий массив элементов, которые соответствуют условиям, не совпадает, то возвращает ложь, правда, в противном случае.

// 示例1 没有匹配
let arr = [1, 2, 3, 4];
console.log(arr.some(item=>item >5)); // false

// 示例2 匹配
let arr2 = [1, 2, 3, 4];
console.log(arr2.some(item=>item===4)); // true
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

5. `every()`

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

// 示例1 全匹配
let arr = [1, 2, 3, 4];
console.log(arr.every(item=>item < 5)); // true

// 示例2 匹配
let arr2 = [1, 2, 3, 4];
console.log(arr2.every(item=>item < 2)); // false

6. `reduce()`,`reduceRight()`

reduce()Способ выполняется последовательно слева направо работы функции от текущего массива и возвращает накопленное значение операции. reduceRight()Он выполняется справа налево.

var arr = [1,2,3,4,5];
console.log(arr.reduce(function(prev,cur){
  return prev+cur;
})) // 15

7. `find()`

find()Метод, используемый, чтобы найти первый элемент, соответствующий возвращаемое значение элемента, если значения условия согласования, определено не возвращается.

let arr = [1,2,3,4,5];
console.log(arr.find(item=>item>3)); // 4

8. `findIndex()`

findIndex()Метод, используемый, чтобы найти первый соответствующий элемент, элемент возвращает серийный номер, если никакого условия согласования значения, оно возвращает -1.

let arr = [1,2,3,4,5];
console.log(arr.findIndex(item=>item>3)); // 3

9. `flatMap()`

flatMap()Во- первых оригинальный метод выполнения массива map()операции, то массив был подвергнут flat()выравнивающих операций, где только один факел.

let arr = [1,2,3,4,5];
console.log(arr.flatMap(item=>[item,item*2])); // [1,2,2,4,3,6,4,8,5,10]

резюме

Это самые современные знания массив расслоение плотной, который использует массив уровня мастерства, переднего конца бизнеса , безусловно , может на следующий уровень. Слева вы здесь проблема: Использование выше массив знаний, чтобы извлечь повторяющиеся значения в массиве, а также формирование нового массива .

Программирование Мира - Облако

Опубликовано 247 оригинальных статей · вона похвала 9 · просмотров 7978

私信关注