找到
8
篇与
前端
相关的结果
-
JavaScript中23个String方法(下) 简单介绍 JavaScript 中的String类型用于表示文本型的数据。它是由无符号整数值（16bit）作为元素而组成的集合。字符串中的每个元素在字符串中占据一个位置. 第一个元素的 index 值是 0，下一个元素的 index 值是 1，以此类推。字符串的长度就是字符串中所含的元素个数.你可以通过 String 字面值或者 String 对象两种方式创建一个字符串。 图片.png图片 方法介绍（下） 16、match() 检索返回一个字符串匹配正则表达式的结果。const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.'; const regex = /[A-Z]/g; const found = paragraph.match(regex); console.log(found); // expected output: Array ["T", "I"]17、replace() 返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?'; console.log(p.replace('dog', 'monkey')); // expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?" const regex = /Dog/i; console.log(p.replace(regex, 'ferret')); // expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?" 18、search() 执行正则表达式和 String 对象之间的一个搜索匹配var str = "hey JudE"; var re = /[A-Z]/g; var re2 = /[.]/g; console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J" console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation19、toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回。console.log('中文简体 zh-CN || zh-Hans'.toLowerCase()); // 中文简体 zh-cn || zh-hans console.log( "ALPHABET".toLowerCase() ); // "alphabet"20、toUpperCase() 将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。const sentence = 'The quick brown fox jumps over the lazy dog.'; console.log(sentence.toUpperCase()); // expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG." 21、normalize() 会按照指定的一种 Unicode 正规形式将当前字符串正规化。（如果该值不是字符串，则首先将其转换为一个字符串）const name1 = '\u0041\u006d\u00e9\u006c\u0069\u0065'; const name2 = '\u0041\u006d\u0065\u0301\u006c\u0069\u0065'; console.log(`${name1}, ${name2}`); // expected output: "Amélie, Amélie" console.log(name1 === name2); // expected output: false console.log(name1.length === name2.length); // expected output: false const name1NFC = name1.normalize('NFC'); const name2NFC = name2.normalize('NFC'); console.log(`${name1NFC}, ${name2NFC}`); // expected output: "Amélie, Amélie" console.log(name1NFC === name2NFC); // expected output: true console.log(name1NFC.length === name2NFC.length); // expected output: true22、repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本"abc".repeat(-1) // RangeError: repeat count must be positive and less than inifinity "abc".repeat(0) // "" "abc".repeat(1) // "abc" "abc".repeat(2) // "abcabc" "abc".repeat(3.5) // "abcabcabc" 参数 count 将会被自动转换成整数。 "abc".repeat(1/0) // RangeError: repeat count must be positive and less than inifinity ({toString : () => "abc", repeat : String.prototype.repeat}).repeat(2) //"abcabc",repeat 是一个通用方法，也就是它的调用者可以不是一个字符串对象。23、trim() 会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR 等）var orig = ' foo '; console.log(orig.trim()); // 'foo' // 另一个 .trim() 例子，只从一边删除 var orig = 'foo '; console.log(orig.trim()); // 'foo' 汇总一下 match, replace, search：通过正则表达式来工作。 toLowerCase, toUpperCase：分别返回字符串的小写表示和大写表示。 normalize：按照指定的一种 Unicode 正规形式将当前字符串正规化。 repeat：将字符串内容重复指定次数后返回。 trim：去掉字符串开头和结尾的空白字符。
-
JavaScript中23个String方法(中) 简单介绍 JavaScript 中的String类型用于表示文本型的数据。它是由无符号整数值（16bit）作为元素而组成的集合。字符串中的每个元素在字符串中占据一个位置. 第一个元素的 index 值是 0，下一个元素的 index 值是 1，以此类推。字符串的长度就是字符串中所含的元素个数.你可以通过 String 字面值或者 String 对象两种方式创建一个字符串。 图片.png图片 方法介绍（中） 9、concat() 将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。let hello = 'Hello, ' console.log(hello.concat('Kevin', '. Have a nice day.')) // Hello, Kevin. Have a nice day. let greetList = ['Hello', ' ', 'Venkat', '!'] "".concat(...greetList) // "Hello Venkat!" "".concat({}) // [object Object] "".concat([]) // "" "".concat(null) // "null" "".concat(true) // "true" "".concat(4, 5) // "45"10、fromCharCode() 静态 String.fromCharCode() 方法返回由指定的 UTF-16 代码单元序列创建的字符串。String.fromCharCode(65, 66, 67); // 返回 "ABC" String.fromCharCode(0x2014); // 返回 "—" String.fromCharCode(0x12014); // 也是返回 "—"; 数字 1 被剔除并忽略 String.fromCharCode(8212); // 也是返回 "—"; 8212 是 0x2014 的十进制表示11、fromCodePoint() String.fromCodePoint() 静态方法返回使用指定的代码点序列创建的字符串。String.fromCodePoint(42); // "*" String.fromCodePoint(65, 90); // "AZ" String.fromCodePoint(0x404); // "\u0404" String.fromCodePoint(0x2F804); // "\uD87E\uDC04" String.fromCodePoint(194564); // "\uD87E\uDC04" String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" String.fromCodePoint('_'); // RangeError String.fromCodePoint(Infinity); // RangeError String.fromCodePoint(-1); // RangeError String.fromCodePoint(3.14); // RangeError String.fromCodePoint(3e-2); // RangeError String.fromCodePoint(NaN); // RangeError12、split() 使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(' '); console.log(words[3]); // expected output: "fox" const chars = str.split(''); console.log(chars[8]); // expected output: "k" const strCopy = str.split(); console.log(strCopy); // expected output: Array ["The quick brown fox jumps over the lazy dog."] 13、slice() 提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串const str = 'The quick brown fox jumps over the lazy dog.'; console.log(str.slice(31)); // expected output: "the lazy dog." console.log(str.slice(4, 19)); // expected output: "quick brown fox" console.log(str.slice(-4)); // expected output: "dog." console.log(str.slice(-9, -5)); // expected output: "lazy"14、substring() 返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。var anyString = "Mozilla"; // 输出 "Moz" console.log(anyString.substring(0,3)); console.log(anyString.substring(3,0)); console.log(anyString.substring(3,-3)); console.log(anyString.substring(3,NaN)); console.log(anyString.substring(-2,3)); console.log(anyString.substring(NaN,3)); // 输出 "lla" console.log(anyString.substring(4,7)); console.log(anyString.substring(7,4)); // 输出 "" console.log(anyString.substring(4,4)); // 输出 "Mozill" console.log(anyString.substring(0,6)); // 输出 "Mozilla" console.log(anyString.substring(0,7)); console.log(anyString.substring(0,10)); 15、substr() 返回一个字符串中从指定位置开始到指定字符数的字符(注意：该方法可能会被废弃，使用substring代替)var str = "abcdefghij"; console.log("(1,2): " + str.substr(1,2)); // (1,2): bc console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi console.log("(-3): " + str.substr(-3)); // (-3): hij console.log("(1): " + str.substr(1)); // (1): bcdefghij console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab console.log("(20, 2): " + str.substr(20,2)); // (20, 2): 汇总一下 concat:连接两个字符串并返回新的字符串。 fromCharCode, fromCodePoint:从指定的 Unicode 值序列构造一个字符串。这是一个 String 类方法，不是实例方法。 split:通过将字符串分离成一个个子串来把一个 String 对象分裂到一个字符串数组中。 slice:从一个字符串提取片段并作为新字符串返回。 substring, substr:分别通过指定起始和结束位置，起始位置和长度来返回字符串的指定子集。
-
JavaScript中23个String方法(上) 简单介绍 JavaScript 中的String类型用于表示文本型的数据。它是由无符号整数值（16bit）作为元素而组成的集合。字符串中的每个元素在字符串中占据一个位置. 第一个元素的 index 值是 0，下一个元素的 index 值是 1，以此类推。字符串的长度就是字符串中所含的元素个数.你可以通过 String 字面值或者 String 对象两种方式创建一个字符串。 图片.png图片 方法介绍（上） 1、charAt() 字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 stringName.length - 1。 如果指定的 index 值超出了该范围，则返回一个空字符串var anyString = "Brave new world"; console.log("The character at index 0 is '" + anyString.charAt(0) + "'"); console.log("The character at index 1 is '" + anyString.charAt(1) + "'"); console.log("The character at index 2 is '" + anyString.charAt(2) + "'"); console.log("The character at index 3 is '" + anyString.charAt(3) + "'"); console.log("The character at index 4 is '" + anyString.charAt(4) + "'"); console.log("The character at index 999 is '" + anyString.charAt(999) + "'");输出 The character at index 0 is 'B' The character at index 1 is 'r' The character at index 2 is 'a' The character at index 3 is 'v' The character at index 4 is 'e' The character at index 999 is ''2、charCodeAt() 返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元"ABC".charCodeAt(0) // returns 65:"A" "ABC".charCodeAt(1) // returns 66:"B" "ABC".charCodeAt(2) // returns 67:"C" "ABC".charCodeAt(3) // returns NaN3、codePointAt() 如果在指定的位置没有元素则返回undefined。如果在索引处开始没有 UTF-16 代理对，将直接返回在那个索引处的编码单元。'ABC'.codePointAt(1); // 66 '\uD800\uDC00'.codePointAt(0); // 65536 'XYZ'.codePointAt(42); // undefined4、indexOf() 返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?'; const searchTerm = 'dog'; const indexOfFirst = paragraph.indexOf(searchTerm); console.log(`The index of the first "${searchTerm}" from the beginning is ${indexOfFirst}`); // expected output: "The index of the first "dog" from the beginning is 40" console.log(`The index of the 2nd "${searchTerm}" is ${paragraph.indexOf(searchTerm, (indexOfFirst + 1))}`); // expected output: "The index of the 2nd "dog" is 52"5、lastIndexOf() 返回调用String对象的指定值最后一次出现的索引，在一个字符串中的指定位置 fromIndex处从后向前搜索。如果没找到这个特定值则返回-1'canal'.lastIndexOf('a'); // returns 3（没有指明 fromIndex 则从末尾 l 处开始反向检索到的第一个 a 出现在 l 的后面，即 index 为 3 的位置） 'canal'.lastIndexOf('a', 2); // returns 1（指明 fromIndex 为 2 则从 n 处反向向回检索到其后面就是 a，即 index 为 1 的位置） 'canal'.lastIndexOf('a', 0); // returns -1(指明 fromIndex 为 0 则从 c 处向左回向检索 a 发现没有，故返回-1) 'canal'.lastIndexOf('x'); // returns -1 'canal'.lastIndexOf('c', -5); // returns 0（指明 fromIndex 为-5 则视同 0，从 c 处向左回向查找发现自己就是，故返回 0） 'canal'.lastIndexOf('c', 0); // returns 0（指明 fromIndex 为 0 则从 c 处向左回向查找 c 发现自己就是，故返回自己的索引 0） 'canal'.lastIndexOf(''); // returns 5 'canal'.lastIndexOf('', 2); // returns 26、startsWith() 用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 falseconst str1 = 'Saturday night plans'; console.log(str1.startsWith('Sat')); // expected output: true console.log(str1.startsWith('Sat', 3)); // expected output: false7、endsWith() 用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 falsevar str = "To be, or not to be, that is the question."; alert( str.endsWith("question.") ); // true alert( str.endsWith("to be") ); // false alert( str.endsWith("to be", 19) ); // true8、includes() 用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 falsevar str = 'To be, or not to be, that is the question.'; console.log(str.includes('To be')); // true console.log(str.includes('question')); // true console.log(str.includes('nonexistent')); // false console.log(str.includes('To be', 1)); // false console.log(str.includes('TO BE')); // false总结一下 上面介绍的8个方法，大致分为三类 字符串指定位置的字符或者字符编码:charAt, charCodeAt, codePointAt 返回字符串中指定子串的位置或最后位置:indexOf, lastIndexOf 字符串是否以指定字符串开始、结束或包含指定字符串:startsWith, endsWith, includes
-
JavaScript中Array对象方法(5) Array 数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。 图片.png图片 常用方法 concat() 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); console.log(array3); // expected output: Array ["a", "b", "c", "d", "e", "f"] copyWithin() 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。const array1 = ['a', 'b', 'c', 'd', 'e']; // copy to index 0 the element at index 3 console.log(array1.copyWithin(0, 3, 4)); // expected output: Array ["d", "b", "c", "d", "e"] // copy to index 1 all elements from index 3 to the end console.log(array1.copyWithin(1, 3)); // expected output: Array ["d", "d", "e", "d", "e"]entries() 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对const array1 = ['a', 'b', 'c']; const iterator1 = array1.entries(); console.log(iterator1.next().value); // expected output: Array [0, "a"] console.log(iterator1.next().value); // expected output: Array [1, "b"] every() 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected output: truefill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。const 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] filter() 创建一个新数组，其包含通过所提供函数实现的测试的所有元素。const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] at() 接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。// 数组及数组元素 const cart = ['apple', 'banana', 'pear']; // 一个函数，用于返回给定数组的最后一个项目 function returnLast(arr) { return arr.at(-1); } // 获取 'cart' 数组的最后一项 const item1 = returnLast(cart); console.log(item1); // 'pear' // 在 'cart' 数组中添加一项 cart.push('orange'); const item2 = returnLast(cart); console.log(item2); // 'orange' 总结一下 本系列到此结束，数组常用的增删改方法都考虑 length 的值。数组内置的几个方法（例如 join、slice、indexOf 等）都会考虑 length 的值。另外还有一些方法（例如 push、splice 等）还会改变 length 的值。
-
JavaScript中Array对象方法(4) Array 数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。 图片.png图片 常用方法 flat() 会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。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] //使用 Infinity，可展开任意深度的嵌套数组 var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefinedconst array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // expected output: 3findLast() 返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回undefinedconst array1 = [5, 12, 50, 130, 44]; const found = array1.findLast((element) => element > 45); console.log(found); // expected output: 130findLastIndex() 返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。const array1 = [5, 12, 50, 130, 44]; const isLargeNumber = (element) => element > 45; console.log(array1.findLastIndex(isLargeNumber)); // expected output: 3 (of element with value: 30)这个拥有很多语法 // Arrow function findLastIndex((element) => { /* ... */ } ) findLastIndex((element, index) => { /* ... */ } ) findLastIndex((element, index, array) => { /* ... */ } ) // Callback function findLastIndex(callbackFn) findLastIndex(callbackFn, thisArg) // Inline callback function findLastIndex(function(element) { /* ... */ }) findLastIndex(function(element, index) { /* ... */ }) findLastIndex(function(element, index, array){ /* ... */ }) findLastIndex(function(element, index, array) { /* ... */ }, thisArg) findLastIndex() 方法不会改变调用它的数组，但是提供的 callbackFn 可以。findLastIndex() 处理的元素是在第一次调用 callbackFn 之前设置的。因此： callbackFn 不会访问在调用 findLastIndex() 开始后才添加到数组中的任何元素。 给已访问过的索引重新赋值将不会被 callbackFn 重新访问。 给初始的范围外的索引赋值，其将不会被 callbackFn 访问。 如果 callbackFn 更改了数组中现有的、尚未访问的元素，则其传递给 callbackFn 的值将是 findLastIndex()访问该元素索引时的值。 仍然会访问已删除的元素。 使用箭头函数 const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; const index = fruits.findLastIndex(fruit => fruit === "blueberries"); console.log(index); // 3 console.log(fruits[index]); // blueberries
-
JavaScript中Array对象方法(3) Array 数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。 图片.png图片 常用方法 map() 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成const 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]lastIndexOf() 返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']; console.log(animals.lastIndexOf('Dodo')); // expected output: 3 console.log(animals.lastIndexOf('Tiger')); // expected output: 1 keys() 返回一个包含数组中每个索引键的Array Iterator对象。const array1 = ['a', 'b', 'c']; const iterator = array1.keys(); for (const key of iterator) { console.log(key); } // expected output: 0 // expected output: 1 // expected output: 2索引迭代器会包含那些没有对应元素的索引 var arr = ["a", , "c"]; var sparseKeys = Object.keys(arr); var denseKeys = [...arr.keys()]; console.log(sparseKeys); // ['0', '2'] console.log(denseKeys); // [0, 1, 2]join() 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('')); // expected output: "FireAirWater" console.log(elements.join('-')); // expected output: "Fire-Air-Water"如果一个元素为 undefined 或 null，它会被转换为空字符串。 var a = ['Wind', 'Rain', 'Fire']; var myVar1 = a.join(); // myVar1 的值变为"Wind,Rain,Fire" var myVar2 = a.join(', '); // myVar2 的值变为"Wind, Rain, Fire" var myVar3 = a.join(' + '); // myVar3 的值变为"Wind + Rain + Fire" var myVar4 = a.join(''); // myVar4 的值变为"WindRainFire"indexOf() 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。const 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: -1includes() 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。const array1 = [1, 2, 3]; console.log(array1.includes(2)); // expected output: true const pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // expected output: true console.log(pets.includes('at')); // expected output: falseforEach() 对数组的每个元素执行一次给定的函数。const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c"flatMap() 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。const arr1 = [1, 2, [3], [4, 5], 6, []]; const flattened = arr1.flatMap(num => num); console.log(flattened); // expected output: Array [1, 2, 3, 4, 5, 6]map() 与 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]]
-
JavaScript中Array对象方法(2) Array 数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。 图片.png图片 常用方法 some() 测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。const array = [1, 2, 3, 4, 5]; // checks whether an element is even const even = (element) => element % 2 === 0; console.log(array.some(even)); // expected output: truesort() 用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4]splice() 通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, 'May'); // replaces 1 element at index 4 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "May"]toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')]; const 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 varytoString() 返回一个字符串，表示指定的数组及其元素。const array1 = [1, 2, 'a', '1a']; console.log(array1.toString()); // expected output: "1,2,a,1a"unshift() 将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）。const array1 = [1, 2, 3]; console.log(array1.unshift(4, 5)); // expected output: 5 console.log(array1); // expected output: Array [4, 5, 1, 2, 3]values() 返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值const array1 = ['a', 'b', 'c']; const iterator = array1.values(); for (const value of iterator) { console.log(value); } // expected output: "a" // expected output: "b" // expected output: "c"另外数组迭代器是一次性的，如下： const arr = ['a', 'b', 'c', 'd', 'e']; const iterator = arr.values(); iterator.next(); // Object { value: "a", done: false } iterator.next().value; // "b" iterator.next()["value"]; // "c" iterator.next(); // Object { value: "d", done: false } iterator.next(); // Object { value: "e", done: false } iterator.next(); // Object { value: undefined, done: true } iterator.next().value; // undefined当 next().done=true 或 currentIndex>length 时， for..of 循环结束。 const arr = ['a', 'b', 'c', 'd', 'e']; const iterator = arr.values(); for (let letter of iterator) { console.log(letter); } //"a" "b" "c" "d" "e" for (let letter of iterator) { console.log(letter); } // undefined
-
JavaScript中Array对象方法(1) Array 数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。 图片.png图片 创建数组 let fruits = ['Apple', 'Banana'] console.log(fruits.length) // 2通过索引访问数组元素 let first = fruits[0] // Apple let last = fruits[fruits.length - 1] // Banana常用方法 Array.pop() 从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度const myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; const popped = myFish.pop(); console.log(myFish); // ['angel', 'clown', 'mandarin'] console.log(popped); // 'sturgeon'Array.push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。var sports = ["soccer", "baseball"]; var total = sports.push("football", "swimming"); console.log(sports); // ["soccer", "baseball", "football", "swimming"] console.log(total); // 4Array.reduce() 对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (previousValue, currentValue) => previousValue + currentValue, initialValue ); console.log(sumWithInitial); // expected output: 10 Array.reduceRight() 接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。const array1 = [[0, 1], [2, 3], [4, 5]]; const result = array1.reduceRight((accumulator, currentValue) => accumulator.concat(currentValue)); console.log(result); // expected output: Array [4, 5, 2, 3, 0, 1]Array.reverse() 将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。const array1 = ['one', 'two', 'three']; console.log('array1:', array1); // expected output: "array1:" Array ["one", "two", "three"] const reversed = array1.reverse(); console.log('reversed:', reversed); // expected output: "reversed:" Array ["three", "two", "one"] // Careful: reverse is destructive -- it changes the original array. console.log('array1:', array1); // expected output: "array1:" Array ["three", "two", "one"] Array.shift() 从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。const array1 = [1, 2, 3]; const firstElement = array1.shift(); console.log(array1); // expected output: Array [2, 3] console.log(firstElement); // expected output: 1Array.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"] console.log(animals.slice(-2)); // expected output: Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // expected output: Array ["camel", "duck"] console.log(animals.slice()); // expected output: Array ["ant", "bison", "camel", "duck", "elephant"]总结一下 今天就先这么多吧，主要介绍了JS数组Array常用方法汇总和实例,JavaScript中的Array的方法比较多，大家按需参考，希望可以给你带来帮助。
