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 const arr = [1, 2, 3, 5, 'a', 'b'] /** * * length
阅读背景：
JS 中 原生方法 (二) --- 数组 (修---添加ES6新增)
来源：互联网
分享到：
