// ---------- 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
*/
