이전 글 "JS(공유)의 Object 객체 동작 방법을 설명하는 글"에서 JS의 Object 객체 동작 방법에 대해 알아보았습니다. 다음 글은 JS에서 Array 객체의 몇 가지 작동 방식을 이해하는 데 도움이 될 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
javascript
javascript
中Array
一些高效的操作方法
方法从一个类似数组或可迭代对象中创建一个新的数组实例。
console.log(Array.from("foo")); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], (x) => x + x)); // expected output: Array [2, 4, 6]
用于确定传递的值是否是一个Array
。
Array.isArray([1, 2, 3]); // true Array.isArray({ foo: 123 }); // false Array.isArray("foobar"); // false Array.isArray(undefined); // false
用于异步监视数组发生的变化
已被废弃 语法:Array.observe(arr, callback)
方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3] //es5 if (!Array.of) { Array.of = function () { return Array.prototype.slice.call(arguments); }; }
方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
var array1 = ["a", "b", "c"]; var array2 = ["d", "e", "f"]; console.log(array1.concat(array2)); // expected output: Array ["a", "b", "c", "d", "e", "f"]
方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。
var array1 = [1, 2, 3, 4, 5]; // place at position 0 the element between position 3 and 4 console.log(array1.copyWithin(0, 3, 4)); // expected output: Array [4, 2, 3, 4, 5] // place at position 1 the elements after position 3 console.log(array1.copyWithin(1, 3)); // expected output: Array [4, 4, 5, 4, 5]
方法返回一个新的Array Iterator
对象,该对象包含数组中每个索引的键/值对。
var array1 = ["a", "b", "c"]; var iterator1 = array1.entries(); console.log(iterator1.next().value); // expected output: Array [0, "a"] console.log(iterator1.next().value); // expected output: Array [1, "b"]
方法测试数组的所有元素是否都通过了指定函数的测试。
var array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every((x) => x < 40)); //out true
方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止
var array1 = [1, 2, 3, 4]; // fill with 0 from position 2 until position 4 console.log(array1.fill(0, 2, 4)); // expected output: [1, 2, 0, 0] // fill with 5 from position 1 console.log(array1.fill(5, 1)); // expected output: [1, 5, 5, 5] console.log(array1.fill(6)); // expected output: [6, 6, 6, 6]
方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; const result = words.filter((word) => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"]
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined
。
var array1 = [5, 12, 8, 130, 44]; var found = array1.find((x) => x > 10); console.log(found); // expected output: 12
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
。
var array1 = [5, 12, 8, 130, 44]; var index = array1.findIndex((x) => x > 10); console.log(index); // expected output: 1
方法会递归到指定深度将所有子数组连接,并返回一个新数组。
var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] var arr4 = [1, 2, , 4, 5]; arr4.flat(); // [1, 2, 4, 5]
方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与map
和深度值1
的flat
几乎相同,但flatMap
通常在合并成一种方法的效率稍微高一些。
var arr1 = [1, 2, 3, 4]; arr1.map((x) => [x * 2]); // [[2], [4], [6], [8]] arr1.flatMap((x) => [x * 2]); // [2, 4, 6, 8] // only one level is flattened arr1.flatMap((x) => [[x * 2]]); // [[2], [4], [6], [8]]
方法对数组的每个元素执行一次提供的函数。
var array1 = ["a", "b", "c"]; array1.forEach((value, index, arr) => console.log(value)); // output 'a' // output 'b' // output 'c'
方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true
,否则返回false
。
var array1 = [1, 2, 3]; console.log(array1.includes(2)); // expected output: true var pets = ["cat", "dog", "bat"]; console.log(pets.includes("cat")); // expected output: true console.log(pets.includes("at")); // expected output: false
方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
。
/var beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // expected output: 1 // start from index 2 console.log(beasts.indexOf('bison', 2)); // expected output: 4 console.log(beasts.indexOf('giraffe')); // expected output: -1
方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符
var elements = ["Fire", "Wind", "Rain"]; console.log(elements.join()); // expected output: Fire,Wind,Rain console.log(elements.join("")); // expected output: FireWindRain console.log(elements.join("-")); // expected output: Fire-Wind-Rain //数组[1,2,3,3,4,5]求和 eval([1, 2, 3, 3, 4, 5].join("+")) = 18;
方法返回一个新的Array
迭代器,它包含数组中每个索引的键。
var array1 = ["a", "b", "c"]; var iterator = array1.keys(); for (let key of iterator) { console.log(key); // expected output: 0 1 2 }
方法返回指定元素(也即有效的JavaScript
值或变量)在数组中的最后一个的索引,如果不存在则返回-1
。从数组的后面向前查找,从fromIndex
处开始。
var animals = ["Dodo", "Tiger", "Penguin", "Dodo"]; console.log(animals.lastIndexOf("Dodo")); // expected output: 3 console.log(animals.lastIndexOf("Tiger")); // expected output: 1
方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
var array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map((x) => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32]
方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
var plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"]; console.log(plants.pop()); // expected output: "tomato" console.log(plants); // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"] plants.pop(); console.log(plants); // expected output: Array ["broccoli", "cauliflower", "cabbage"]
方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。
var animals = ["pigs", "goats", "sheep"]; console.log(animals.push("cows")); // expected output: 4 console.log(animals); // expected output: Array ["pigs", "goats", "sheep", "cows"] animals.push("chickens"); console.log(animals); // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]
方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15
方法接受一个函数作为累加器(accumulator
Array
의 일부 효율적인 작업 방법은 유사 배열 또는 반복 가능한 객체에서 새 객체를 생성합니다. 배열 인스턴스. const array1 = [ [0, 1], [2, 3], [4, 5], ].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue)); console.log(array1); // expected output: Array [4, 5, 2, 3, 0, 1]
배열
인지 확인하는 데 사용됩니다. var array1 = ["one", "two", "three"]; console.log("array1: ", array1); // expected output: Array ['one', 'two', 'three'] var reversed = array1.reverse(); console.log("reversed: ", reversed); // expected output: Array ['three', 'two', 'one'] /* Careful: reverse is destructive. It also changes the original array */ console.log("array1: ", array1); // expected output: Array ['three', 'two', 'one']
var array1 = [1, 2, 3]; var firstElement = array1.shift(); console.log(array1); // expected output: Array [2, 3] console.log(firstElement); // expected output: 1
var 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"]
var array = [1, 2, 3, 4, 5]; var even = function (element) { // checks whether an element is even return element % 2 === 0; }; console.log(array.some(even)); // expected output: true
Array Iterator
개체를 반환합니다. 🎜var months = ["March", "Jan", "Feb", "Dec"]; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] var array1 = [1, 30, 4, 21]; array1.sort(); console.log(array1); // expected output: Array [1, 21, 30, 4]
var months = ["Jan", "March", "April", "June"]; months.splice(1, 0, "Feb"); // 增 console.log(months); // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June'] months.splice(4, 1, "May"); // 改 console.log(months); // expected output: Array ['Jan', 'Feb', 'March', 'April', 'May'] // 删 months.splice(4, 1); console.log(months); //output: ["Jan", "Feb", "March", "April"]
var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")]; var localeString = array1.toLocaleString("en", { timeZone: "UTC" }); console.log(localeString); // expected output: "1,a,12/21/1997, 2:12:00 PM", // This assumes "en" locale and UTC timezone - your results may vary var prices = ["¥7", 500, 8123, 12]; prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" }); // "¥7,¥500,¥8,123,¥12"
var alpha = new Array("a", "b", "c"); alpha.toSource(); //返回["a", "b", "c"]
정의되지 않음
이 반환됩니다. 🎜var array1 = [1, 2, "a", "1a"]; console.log(array1.toString()); // expected output: "1,2,a,1a"
-1
이 반환됩니다. 🎜var array1 = [1, 2, 3]; console.log(array1.unshift(4, 5)); // expected output: 5 console.log(array1); // expected output: Array [4, 5, 1, 2, 3]
const array1 = ["a", "b", "c"]; const iterator = array1.values(); for (const value of iterator) { console.log(value); // expected output: "a" "b" "c" }
1
인 map
및 flat
과 거의 동일하지만 일반적으로 flatMap
은 다음과 같이 결합됩니다. 한 가지 방법이 약간 더 효율적입니다. 🎜rrreee🎜Array.forEach()🎜🎜 메서드는 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다. 🎜rrreee🎜Array.includes(value,index)🎜🎜메서드는 배열에 지정된 값이 포함되어 있는지 확인하는 데 사용되며, 포함되어 있으면 true
를 반환하고 그렇지 않으면 반환합니다. false</code code>를 반환합니다. 🎜rrreee🎜Array.indexOf()🎜🎜 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나, 존재하지 않는 경우 <code>-1
를 반환합니다. 🎜rrreee🎜Array.join()🎜🎜메서드는 배열(또는 배열과 유사한 객체)의 모든 요소를 문자열로 결합하고 이 문자를 반환합니다. 🎜rrreee🎜Array.keys()🎜🎜메서드는 새로운 배열을 반환합니다.
배열의 각 인덱스에 대한 키를 포함하는 반복자입니다. 🎜rrreee🎜Array.lastIndexOf(item, index)🎜🎜 메서드는 배열의 마지막 요소(즉, 유효한 JavaScript
값 또는 변수)의 인덱스를 반환하거나, 해당하는 경우 -1
. fromIndex
부터 배열의 뒤에서 앞으로 검색합니다. 🎜rrreee🎜Array.map()🎜🎜 메서드는 배열의 각 요소에 대해 제공된 함수를 호출한 결과인 새 배열을 만듭니다. 🎜rrreee🎜Array.pop()🎜🎜 메서드는 배열에서 마지막 요소를 제거하고 해당 요소의 값을 반환합니다. 이 메서드는 배열의 길이를 변경합니다. 🎜rrreee🎜Array.push()🎜🎜 메서드는 배열 끝에 하나 이상의 요소를 추가하고 새 배열의 길이를 반환합니다. 🎜rrreee🎜Array.reduce()🎜🎜 메서드는 누산기와 배열의 각 요소(왼쪽에서 오른쪽으로)에 함수를 적용하여 단일 값으로 줄입니다. 🎜rrreee🎜Array.reduceRight()🎜🎜 메서드는 함수를 누산기(accumulator
)로 받아들이고 배열의 각 값(오른쪽에서 왼쪽으로)을 단일 값으로 줄입니다. 🎜rrreee🎜Array.reverse()🎜🎜 메서드는 배열의 요소 위치를 반대로 바꿉니다. 🎜rrreee🎜Array.shift()🎜🎜 메서드는 배열에서 첫 번째 요소를 제거하고 해당 요소의 값을 반환합니다. 이 메서드는 배열의 길이를 변경합니다. 🎜rrreee🎜Array.slice()🎜🎜 메서드는 선택한 배열 부분의 처음부터 끝까지(제외) 부분의 얕은 복사본을 새 배열 객체로 반환합니다. 그리고 원래 배열은 수정되지 않습니다. 🎜rrreee🎜Array.some()🎜🎜 메서드는 배열의 일부 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 🎜var array = [1, 2, 3, 4, 5]; var even = function (element) { // checks whether an element is even return element % 2 === 0; }; console.log(array.some(even)); // expected output: true
方法用原地算法对数组的元素进行排序,并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode
码点。
var months = ["March", "Jan", "Feb", "Dec"]; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] var array1 = [1, 30, 4, 21]; array1.sort(); console.log(array1); // expected output: Array [1, 21, 30, 4]
方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
var months = ["Jan", "March", "April", "June"]; months.splice(1, 0, "Feb"); // 增 console.log(months); // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June'] months.splice(4, 1, "May"); // 改 console.log(months); // expected output: Array ['Jan', 'Feb', 'March', 'April', 'May'] // 删 months.splice(4, 1); console.log(months); //output: ["Jan", "Feb", "March", "April"]
返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString
方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",
")隔开。
var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")]; var localeString = array1.toLocaleString("en", { timeZone: "UTC" }); console.log(localeString); // expected output: "1,a,12/21/1997, 2:12:00 PM", // This assumes "en" locale and UTC timezone - your results may vary var prices = ["¥7", 500, 8123, 12]; prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" }); // "¥7,¥500,¥8,123,¥12"
返回一个字符串,代表该数组的源代码。
该特性是非标准的,请尽量不要在生产环境中使用它!
var alpha = new Array("a", "b", "c"); alpha.toSource(); //返回["a", "b", "c"]
返回一个字符串,表示指定的数组及其元素。
var array1 = [1, 2, "a", "1a"]; console.log(array1.toString()); // expected output: "1,2,a,1a"
方法将一个或多个元素添加到数组的开头,并返回新数组的长度。
var array1 = [1, 2, 3]; console.log(array1.unshift(4, 5)); // expected output: 5 console.log(array1); // expected output: Array [4, 5, 1, 2, 3]
方法返回一个新的Array Iterator
对象,该对象包含数组每个索引的值。
const array1 = ["a", "b", "c"]; const iterator = array1.values(); for (const value of iterator) { console.log(value); // expected output: "a" "b" "c" }
推荐学习:JavaScript视频教程
위 내용은 JS의 Array 객체의 일부 작동 방법에 대한 간략한 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!