// ---------- JavaScript Array ---------- // Array方法: 每行为一类（自己分的） // 5 fill from isArray keys valueOf // 2 join toString // 3 indexOf lastIndexOf includes // 2 find findIndex // 5 every forEach filter map some // 2 reduce reduceRight // 9 concat uhshift push shift pop slice splice sort reverse // Array.prototype // 向数组Array中添加属性和方法 // Array.prototype.name = value Array.prototype.myUcase = function () { for (i = 0; i < this.length; i++) { this[i] = this[i].toUpperCase() } } var fruits = ["Banana", "Orange", "Apple", "Mango"] fruits.myUcase() console.log(fruits) // [ 'BANANA', 'ORANGE', 'APPLE', 'MANGO' ] // contact // 合并数组 // array1.concat(array2, array3,..., arrayX) const a_contat = [1, 4, 7] const b_contat = [2, 5, 8] const c_contat = [3, 6, 9] // 注意顺序 console.log(a_contat.concat(b_contat)) // [ 1, 4, 7, 2, 5, 8 ] console.log(b_contat.concat(a_contat)) // [ 2, 5, 8, 1, 4, 7 ] console.log(b_contat.concat(c_contat)) // [ 2, 5, 8, 3, 6, 9 ] console.log(c_contat.concat(b_contat)) // [ 3, 6, 9, 2, 5, 8 ] // 多合一 console.log(a_contat.concat(b_contat, c_contat)) // [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] // every // 判断数组中每一项是否符合条件, 当检测到第一个不符合条件时则返回false,且停止检测 // array.every(function(currentValue,index,arr), thisValue) const a = [32, 33, 12, 40] // 两种写法 const aa = a.every((currentValue,index,arr) => { return currentValue > 12 }) console.log(aa); // false console.log(a.every(age => age > 0)); // true // fill // 使用固定值填充数组 // array.fill(value, start, end) let a_fill = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] a_fill.fill(10) console.log(a_fill) // [ 10, 10, 10, 10, 10, 10, 10, 10, 10 ] a_fill.fill(0, 2, 4) console.log(a_fill) // [ 10, 10, 0, 0, 10, 10, 10, 10, 10 ] // filter // 根据条件检测数组,并返回所有符合条件的新数组 // array.filter(function(currentValue,index,arr), thisValue) let a_filter = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] const new_a_filter = a_filter.filter((item, i, arr) => item >= 6) const new_a_filter1 = a_filter.filter((currentValue, index, arr) => (currentValue >= 6 && index >= 6)) console.log(a_filter) // [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] console.log(new_a_filter) // [ 7, 8, 6, 9 ] console.log(new_a_filter1) // [ 6, 9 ] // find // 根据条件检测数组,并返回第一个符合条件的 值 // array.find(function(currentValue, index, arr),thisValue) let a_find = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] const new_a_find = a_find.find((currentValue, index, arr) => currentValue >= 6) const new_a_find1 = a_find.find((currentValue, index, arr) => currentValue >= 10) const new_a_find2 = a_find.find((currentValue, index, arr) => (currentValue >= 6 && index >= 6)) console.log(new_a_find) // 7 console.log(new_a_find1) // undefined console.log(new_a_find2) // 6 // findIndex // 根据条件检测数组,并返回第一个符合条件的 下标 // array.findIndex(function(currentValue, index, arr), thisValue) let a_findIndex = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] const new_a_findIndex = a_findIndex.findIndex((currentValue, index, arr) => currentValue >= 6) console.log(new_a_findIndex) // 2 // forEach // 循环遍历数组 // array.forEach(callbackFn(currentValue, index, arr), thisValue) let a_forEach = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] a_forEach.forEach((currentValue, index, arr) => { console.log(currentValue) // 1 4 7 2 5 8 3 6 9 }) let num = 0 a_forEach.forEach((currentValue, index, arr) => { num += currentValue }) console.log(num) // 45 // 会 改变原数组 a_forEach.forEach((currentValue, index, arr) => { arr[index] = currentValue * 10 }) console.log(a_forEach) // [ 10, 40, 70, 20, 50, 80, 30, 60, 90 ] /* forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。 使用 return 语句实现 continue 关键字的效果： */ // continue - forEach a_forEach.forEach((currentValue, index, arr) => { if (currentValue < 6) return console.log(currentValue) }) // continue - forEach a_forEach.some((currentValue, index, arr) => { if (currentValue < 6) return console.log(currentValue); }) // break a_forEach.every((currentValue, index, arr) => { // console.log(currentValue); // 1 4 7 2 return currentValue !== 2 // true }) // from // 用于通过拥有 length属性的对象或可迭代的对象来 返回一个数组。 // Array.from(object, mapFunction, thisValue) // 字符串 转 数组 const myArr = Array.from('afa') console.log(myArr); // Set 转 数组 console.log( Array.from(new Set([1, 2, 3, 4, 5, 1, 2])) ); // 伪数组 转 数组 const myObjFrom = { "0": 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 6 } console.log(Array.from(myObjFrom)); // includes // 判断指定一个数组中是否包含一个指定的数值 // arr.includes(searchElement) // arr.includes(searchElement, fromIndex) let a_includes = [ 1, 4, 7, 2, 5, 8, 3, 6, 9 ] console.log(a_includes.includes(2)) console.log(a_includes.includes(2, 5)) // indexOf // 返回数组中某一个值的第一次出现的具体位置, 没有则返回 -1 // array.indexOf(item,start) let a_indexOf = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_indexOf.indexOf(2)); console.log(a_indexOf.indexOf(2, 5)); // lastIndexOf // 返回数组中某一个值最后一次出现的具体位置, 没有则返回 -1 // array.lastIndexOf(item,start) let a_lastIndexOf = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_lastIndexOf.lastIndexOf(2)) // 4 console.log(a_lastIndexOf.lastIndexOf(2, 5)) // 4 console.log(a_lastIndexOf.lastIndexOf(2, 3)) // 3 console.log(a_lastIndexOf.lastIndexOf(12)) // -1 // isArray // 判断一个对象是否为数组 // Array.isArray(obj) let a_isArray = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(Array.isArray(a_isArray)) // true console.log(Array.isArray({})) // false // join // 将数组转换为一个字符串 // array.join(separator) separator默认为逗号 let a_join = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_join.join()) // 1,4,7,2,2,5,8,3,6,9 console.log(a_join.join(',')) // 1,4,7,2,2,5,8,3,6,9 console.log(a_join.join(' ')) // 1 4 7 2 2 5 8 3 6 9 console.log(a_join.join('-')) // 1-4-7-2-2-5-8-3-6-9 // keys // 用于从数组创建一个包含数组键的可迭代对象。 // array.keys() let a_keys = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const x = a_keys.keys() console.log(a_keys) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(x) // Object [Array Iterator] {} console.log(x.next()) // { value: 0, done: false } console.log(x.next()) // { value: 1, done: false } console.log(x.next()) // { value: 2, done: false } console.log(x.next()) // { value: 3, done: false } console.log(x.next()) // { value: 4, done: false } console.log(x.next()) // { value: 5, done: false } console.log(x.next()) // { value: 6, done: false } console.log(x.next()) // { value: 7, done: false } console.log(x.next()) // { value: 8, done: false } console.log(x.next()) // { value: 9, done: false } console.log(x.next()) // { value: undefined, done: true } // map // 遍历数组,并返回新数组 // array.map(function(currentValue,index,arr), thisValue) let a_map = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] let new_a_map = a_map.map((currentValue, index) => { return currentValue * 10 }) console.log(new_a_map) // [ 10, 40, 70, 20, 20, 50, 80, 30, 60, 90 ] let numMap = 0 a_map.map((currentValue, index) => { numMap += currentValue }) console.log(numMap) // 47 // shift // 删除并返回数组的第一个元素 // array.shift() let a_shift = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const a_shift1 = a_shift.shift() console.log(a_shift); // [ 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_shift1); // 1 // pop // 删除并返回数组的最后一个元素 // array.pop() let a_pop = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const a_pop1 = a_pop.pop() console.log(a_pop); // [ 1, 4, 7, 2, 2, 5, 8, 3, 6 ] console.log(a_pop1); // 9 // unshift // 向数组开头添加一个或多个新的元素,并返回新数组的长度 // array.unshift(item1,item2, ..., itemX) let a_unshift = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const a_unshift_len = a_unshift.unshift(10, 12) console.log(a_unshift); // [ 10, 12, 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_unshift_len); // 12 // push // 向数组末尾添加一个或多个新的元素,并返回新数组的长度 // array.push(item1, item2, ..., itemX) let a_push = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const a_push_len = a_push.push(10, 12) console.log(a_push); // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9, 10, 12 ] console.log(a_push_len); // 12 // ------ // reduce // 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 // array.reduce(function(total, currentValue, currentIndex, arr), initialValue) let a_reduce = [ 1, 2.2, 3, 4, 5, 6.6, 7, 8.6, 9 ] const new_a_reduce = a_reduce.reduce((pre, curVal, curIndex, arr) =>{ // console.log(pre, curVal, curIndex) return pre + curVal }) // console.log(new_a_reduce) // 49.4 const new_a_reduce1 = a_reduce.reduce((pre, curVal, curIndex, arr) =>{ console.log(pre, curVal, curIndex) return pre + curVal }, 3) console.log(new_a_reduce1) // 48 // reduceRight // 与reduce相同, reduceRight是数组 从右向左 开始计算 // array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) let a_reduceRight = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const new_a_reduceRight = a_reduceRight.reduceRight((pre, curVal, curIndex, arr) => { console.log(pre, curVal, curIndex); return pre }) console.log(new_a_reduceRight) // reverse // 颠倒数组中元素的顺序, 改变原数组 // array.reverse() let a_reverse = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] console.log(a_reverse) a_reverse.reverse() console.log(a_reverse) // slice // 从已有的数组中返回选定的元素。 // array.slice(start, end), 接收负数 let a_slice = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const new_a_slice = a_slice.slice(1, 3) console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(new_a_slice) // [ 4, 7 ] const new_a_slice1 = a_slice.slice(2) console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(new_a_slice1) // [ 7, 2, 2, 5, 8, 3, 6, 9 ] const new_a_slice2 = a_slice.slice(-5) console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(new_a_slice2) // [ 5, 8, 3, 6, 9 ] const new_a_slice3 = a_slice.slice(-3, -1) console.log(a_slice) // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(new_a_slice3) // [ 3, 6 ] // some // 检测数组中的元素是否满足指定条件(函数提供) // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 // 如果没有满足条件的元素，则返回false。 // array.some(function(currentValue,index,arr),thisValue) let a_some = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const new_a_some = a_some.some((currentValue, index, arr) => { console.log(currentValue); // 1 4 7 // 检测是否有 >= 6 的元素 return currentValue >= 6 }) console.log(new_a_some); // true, 表示包含 >= 6 的元素 // sort // 对数组进行排序. 排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。 // array.sort(sortfunction) var a_sort = ["Banana", "Orange", "Apple", "Mango"] a_sort.sort() console.log(a_sort) // [ 'Apple', 'Banana', 'Mango', 'Orange' ] let a_sort1 = [ 1, 40, 7, 20, 50, 8, 32, 65, 19 ] a_sort1.sort() console.log(a_sort1) // [ 1, 19, 20, 32, 40, 50, 65, 7, 8 ] // 注意数字排序 let a_sort2 = [ 1, 40, 7, 20, 50, 8, 32, 65, 19 ] a_sort2.sort((a, b) => { return a - b }) console.log(a_sort2); // [ 1, 7, 8, 19, 20, 32, 40, 50, 65 ] // 注意数字排序 // splice // 向数组中添加或删除元素 // array.splice(index,howmany,item1,.....,itemX) // 从何处删 删多少 要添加的元素 let a_splice = [ 1, 6, 8 ] const new_a_splice = a_splice.splice(1, 0, 2) console.log(new_a_splice) // [] console.log(a_splice) // [ 1, 2, 6, 8 ] const new_a_splice1 = a_splice.splice(1, 1, 3, 4) console.log(new_a_splice1) // [ 2 ] console.log(a_splice) // [ 1, 3, 4, 6, 8 ] const new_a_splice2 = a_splice.splice(2, 3, 5, 7) console.log(new_a_splice2) // [ 4, 6, 8 ] console.log(a_splice) // [ 1, 3, 5, 7 ] // toString // 将数组转换为字符串 // array.toString() let a_toString = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] const new_a_to_string = a_toString.toString() // 等同 a_toString.join() console.log(new_a_to_string); // 1,4,7,2,2,5,8,3,6,9 console.log(new_a_to_string.length); // 19 // valueOf // 返回Array队形原始值 (貌似不怎么用得到) // array.valueOf() let a_valueOf = [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_valueOf.valueOf()); // [ 1, 4, 7, 2, 2, 5, 8, 3, 6, 9 ] console.log(a_valueOf.valueOf() === a_valueOf); // true // 其他说明 /* 1、every 和 some 总结： every() 方法用于检测数组元素是否都满足指定条件，都满足时才返回 true；有一个不满足时，返回 false，剩余元素不再进行检测。对于空数组，不会检测，直接返回 true some() 方法用于检测数组中是否有元素满足指定条件，有一个满足就返回 true；内部遍历数组时，遇到满足指定条件的元素，就返回 true，剩余元素不再进行检测，对于空数组，不会检测，直接返回 false */