const arr = [1, 2, 3, 5, 'a', 'b']
/**
*
* length
* 这个只能被 称之为 数组的原生属性, 返回 一个 number
* arr.length
*/
console.log(arr.length) // 6
/**
* 按照方法类型 来方便记忆 栈方法(后进先出) 1
* push
* 这个方法是向数组末尾添加一个新的元素, 返回的是数组的 新长度, 并改变了原来的数组
* arr.push()
*/
const resArr1 = arr.push(1)
console.log(resArr1) // 7
console.log(arr) // [1, 2, 3, 5, "a", "b", 1]
/**
* 栈方法(后进先出) 2
* pop
* 这个方法是 删除数组中最后一个元素并且返回该元素 (如果数组为空 则返回什么呢) 并且原数组已被修改
* arr.pop()
*/
console.log(arr.pop()) // 1
console.log(arr) // [1, 2, 3, 5, "a", "b"]
console.log([].pop()) // undefined
/**
* 按照列队方法 (先进先出) 1
* shift
* 这个方法是 删除数组中 第一 个元素并且返回该元素 (如果数组为空 则返回什么呢) 并且原数组已被修改
* arr.shift()
*/
console.log(arr.shift()) // 1
console.log(arr) // [2, 3, 5, "a", "b"]
console.log([].shift()) // undefined
/**
* 按照列队方法 (先进先出) 2
* unshift
* 这个方法是 想数组中 的 首位添加 元素 并返回新数组的 长度 (如果数组为空 则返回什么呢) 并且原数组已被修改
* arr.unshift()
*/
console.log(arr.unshift()) // length 5
console.log(arr) // [2, 3, 5, "a", "b"]
console.log([].unshift()) // length 0
console.log(arr.unshift([11])) // 6
console.log(arr) // [11, 2, 3, 5, "a", "b"]
/**
* 按照转换方法来区分
* join
* 该方法 用于将数组中的所有 元素放入一个字符串中, 元素通过制定的 分隔符 进行分割。 返回一个字符串
* arr.join()
*/
console.log(arr.join()) // 11,2,3,5,a,b
console.log(arr.join(".")) // 11.2.3.5.a.b
console.log(arr.join("-")) // 11-2-3-5-a-b
/**
* 重排序方法 1
* reverse
* 该方法 会对反转数组项的顺序, 并改变原 数组
* arr.reverse()
*/
arr.shift()
console.log(arr.reverse()) // ["b", "a", 5, 3, 2]
console.log(arr) // ["b", "a", 5, 3, 2]
/**
* 重排序方法 2
* sort
* 该方法 会对数组进行从小到大的 排序, 并改变原 数组
* 因为 在使用 sort 方法时候, 该方法 会先 使用 tostring 方法,将数组中每一项转换成字符串,
* 然后 字符串 之间的 大小的 比较是 通过 Unicode 字符编码来比较的。
* arr.sort()
*/
console.log(arr.sort()) // [2, 3, 5, "a", "b"]
console.log('5'.charCodeAt()) // 55
console.log('15'.charCodeAt()) // 49
// 所以我们 常常 会封装一个 比较大小的函数
function compare (m, n) {
return m - n
}
console.log(arr.sort(compare))
/**
*
* 操作方法 1
* concat()
* 该方法 用于 连接 两个 或者多个 数组
* arr.concat(arr1)
*/
console.log(arr.concat([11,22,33])) // [2, 3, 5, "a", "b", 11, 22, 33]
/**
*
* 操作方法 2
* slice(start, end)
* 该方法 用于 连接 两个 或者多个 数组
* arr.slice(start, end)
* 如果 start 或者 end 小于 0
* -1 指最后一个元素,-2 指倒数第二个元素,以此类推。
*/
console.log(arr.slice(1,5)) // [3, 5]
console.log(arr)
/**
*
* 操作方法 3
* splice(start, length, eleX) 起始位置、0(要删除的项数)和要插入的项
* 该方法 有删除,插入,替换的功能
* arr.splice(start, length, eleX)
* 如果 start 小于 0 start = 0
* eleX 为 添加的 元素
*/
console.log(arr.splice(1, 0, 222)) // [2, 222, 5, "a", "b", 11, 22, 33]
/**
*
* ************************ 以下为 ES5 中新增的 9 个方法(可能会和上面的有重复) *****************************
*
*/
/**
*
* forEach()
* 功能: 从头到尾遍历数组,为每个元素调用 指定函数
* forEach( function(value, index, arr) {} )
* value 为 数组中被遍历的每个值, index 为 数组索引, arr 为数组本身
*/
arr.forEach( (v, i, arr) => {
arr[i] = v + 1
})
console.log(arr) // [3, 223, 4, 6, "a1", "b1"]
/**
*
* map()
* 功能: 调用数组中的每一个元素 并 传递给制定的函数,返回一个新数组. 并不会改变原数组
* forEach( function(v) {} )
* value 为 数组中被遍历的每个值
*/
let b = arr.map( function(v) {
return v - 1
} )
console.log(b) //[2, 222, 3, 5, NaN, NaN]
// 为什么会有 NaN 呢? 'a1' - 1 = NaN 可以思考下
/**
*
* filter()
* 功能: 将数组元素执行特定函数,而返回一个子集。
* filter( function(v) {} )
* value 为 数组中被遍历的每个值
*/
let f = arr.filter( function(v) {
return typeof v === 'number'
} )
console.log(f) //[3, 223, 4, 6]
/**
*
* some() every()
* 功能: 对数组元素进行指定函数的逻辑判断 返回 true or false
* some( function(v) {} )
* value 为 数组中被遍历的每个值
*/
let s = arr.some( function(v) {
return v > 4
})
let s1 = arr.every( function(v) {
return v > 4
})
console.log(s,s1) // true false
// 那么我们就可以 判断处, some方法, 是只要数组中有部分 值达到 指定函数的要求,那么久返回 true
// every 方法则是需要 数组中的每一个值必须 达到指定函数的方法。才会返回ture 否则 返回 falses
/**
*
* reduce() reduceRight()
* 功能: 使用指定的函数将数组元素进行组合,生成单个值。
* reduce( function(pre,cur) {} )
* pre 为 数组中的前一个值, cur 为当前值
*/
let max = [1,2,33,12].reduce( function(pre, cur) {
return pre > cur ? pre : cur
})
let sum = [1,2,33,12].reduce( function(pre, cur) {
return pre + cur
})
let right = [1,2,33,12].reduceRight( function(pre, cur) {
return pre + ':' + cur
})
console.log(max, sum) // 33 48
console.log(right) // 12:33:2:1
// 用reduce 的方式来 获取道数组中的最大值。以及 数组数值求和
/**
*
* *************************华丽分割ES6扩展*************************
*
*/
/**
*
* Array.from()
* 功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象
*
* Array.from(arrayLike)
*/
let arrayLike = {
'0':'a',
'1':'b',
'2':'c',
length:3
};
let arr2 = Array.from(arrayLike)
console.log(arr2) // ["a", "b", "c"]
/**
*
* Array.of()
* 功能:将一组值 转换成数组
*
* Array.of(1,223)
*/
let Numbers = '1,2,344,44'
let numArr = Array.of(Numbers)
console.log(numArr) // ["1,2,344,44"]
/**
*
* copyWithin()
* 功能:在当前数组内部,将指定位置的成员复制到其他位置,返回当前数组
*
* copyWithin(replaceStartLoca, startIndex)
*/
let resArr = [1,2,222,2222,33].copyWithin(0, 3)
console.log(resArr) // [2222, 33, 222, 2222, 33]
/**
*
* find()和findIndex()
* 功能:找到第一个符合条件的数组成员 并返回改 成员
*
* find(value, index, arr)
*/
let fs = [1,2,222,2222,33].find(function(value, index, arr) {
return value > 100
})
console.log(fs) // 222
/**
*
* entries()、keys()、values()
* 功能:用于遍历数组,可以用for…of循环进行遍历。
* 区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历
*
* for (let xxx of [],keys()) {}
*/
for (let index of [2,33,444,555].keys()) {
console.log(index) // 0 1 2 3
}
// for (let elem of [2,33,444,555].values()) {
// console.log(elem) // 2,33,444,555
// }
for (let [index, elem] of [2,33,444,555].entries()) {
console.log(index + '=>' + elem)
}
// 0=>2
// 1=>33
// 2=>444
// 3=>555
/**
*
* includes()
* 功能:表示某个数组是否包含给定的值
* includes(v, index)
* v 表示你需要查找的值,index 表示开始查找的开始索引,负数表示 从后往前数。
*
* 返回 布尔值
*
* 注意 这个和 indexOf 的区别, indexOf 无法识别 NaN 类型。 但是 includes 可以
*/
console.log([1,22,333,444,3].includes(1)) // true
console.log([1,22,33,NaN].includes(NaN)) // ture
console.log([1,22,33,NaN].indexOf(NaN)) // -1