【js基础】js数组方法总结
补充：git
JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，一般被称为“上下文”（context），其做用和 bind(..) 同样，确保你的回调函数使用指定的 this。
function foo(el) {
console.log( el, this.id );
}
var obj = {
id: "awesome"
};
// 调用 foo(..) 时把 this 绑定到 obj
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome
es5部分
一、map [es5]
不改变原数组
须要一个函数做为参数， 依次处理数组内每一个元素，并返回新的值，无返回值则为undefined
使用全部的返回值组成新的数组es6
console.log(['a','b','c'].map((elem, index) => {
console.log(elem, index)
/*a 0
*b 1
*c 2
*/
if (elem === 'a') return 'this is a'
}))// (3) ["this is a", undefined, undefined]
二、filter [es5]
不改变原数组
须要一个函数做为参数， 依次便利每个值，根据返回值生成新数组
返回真值 便利到的元素添加至新数组github
console.log([ , 1, '', 2, undefined, 3, null, 4, 0, false, 5, true, 6, new Date()].filter((elem, index) => {
console.log(elem, index)
return elem
})) // [1, 2, 3, 4, 5, true, 6, Tue Nov 28 2017 08:29:52 GMT+0800 (中国标准时间)]
三、every [es5] some [es5]
语言太苍白，show you code
数组的every，和some方法，可参考下面两个函数实现的功能数组
const every = (fun, arr) => {
for (let i = 0; i = arr.length; i ++) {
if (!fun(arr[i], i)) return false // 有结果为false, 当即返回false，再也不继续遍历
}
}
const some = (fun, arr) => {
for (let i = 0; i < arr.length; i ++) {
if (fun(arr[i], i)) return true // 有结果为true, 当即返回true，再也不继续遍历
}
}
[0,1,2,3,4].filter(function (i) {if (i < 2){return 1}}) //[0, 1]
四、reduce [es5] reduceRight [es5]
功能描述参考下面代码函数
const reduce = (fun, arr, start) => {
arr = arr.slice()
start = start === undefined ? arr.shift() : start
for (let i = 0; i < arr.length; i++) { // 从左往右
start = fun(start, arr[i])
}
return start
}
const reduceRight = (fun, arr, start) => {
arr = arr.slice()
start = start === undefined ? arr.pop() : start
for (let i = arr.length - 1; i >= 0; i--) { // 从右往左
start = fun(start, arr[i])
}
return start
}
五、indexOf
返回某个指定的变量在数组中首次出现的位置this
const a = {}
const b = [0, {}, 2, 3, '4', 4, 5, a, 4]
console.log(b.indexOf(a)) // 7
console.log(b.indexOf(4)) // 5
console.log(b.indexOf(4, '6')) // 8
console.log(b.indexOf('4')) // 4
六、lastIndexOf
返回某个指定的变量在数组中最后一次出现的位置es5
const a = {}
const b = [0, {}, 2, 3, '4', 4, 5, a, 4]
console.log(b.lastIndexOf(a)) // 7
console.log(b.lastIndexOf(4)) // 8
console.log(b.lastIndexOf(4, '6')) // 5
console.log(b.lastIndexOf('4')) // 4
es3部分
一、join [es3]
将数组拼接为字符串．prototype
const b = [0, {}, 2, 3, '4', 4, 5, 4]
console.log(b.join()) // 0,[object Object],2,3,4,4,5,4
console.log(b.join(',')) // 0,[object Object],2,3,4,4,5,4 同b.join()
console.log(b.join('分割符')) //0分割符[object Object]分割符2分割符3分割符4分割符4分割符5分割符4
const a = [new Date(), null, undefined,[1, 2,3], [1, 2, 3], [[11, 12, 13], [21, 22, {a: [1,2,3]}]], {a: 1}]
console.log(a.join()) //Mon Nov 27 2017 15:39:01 GMT+0800 (中国标准时间),,,1,2,3,1,2,3,11,12,13,21,22,[object Object],[object Object]
console.log(a.toString()) //Mon Nov 27 2017 15:41:00 GMT+0800 (中国标准时间),,,1,2,3,1,2,3,11,12,13,21,22,[object Object],[object Object]
const testelema = new Date()
const testelemb = {}
const testelemc = []
testelema.toString = e => 1
testelemb.toString = e => 2
testelemc.toString = e => 3
console.log([testelema, testelemb, testelemc].join('-----')) //1-----2-----3
const notfunction = {}
notfunction.toString = 1212
console.log([notfunction].join()) //Uncaught TypeError: Cannot convert object to primitive value
我的猜想，join会依次调用数组内元素的toString方法，并拼接成字符串，没有toString方法的元素返回空''，相似code
const join =
(arr, delimiter = ',') =>
arr.reduce((last, next) => {
if (next === null || next === undefined) {
return last + delimiter
} else {
if (typeof next.toString !== 'function') {
throw new Error(`Cannot convert $ {typeof next}to primitive value `)
}
return last + delimiter + next.toString()
}
}, '')
.replace(delimiter, '')
二、reverse [es3]
将数组中的元素颠倒顺序
该方法会直接改变原数组排序
const b = [true,'1',2,3,4,5] b.reverse() console.log(b.join())
三、sort [es3]
将数组的元素按照必定规则排序
该方法会直接改变原数组
参数类型必须为function
无参数的时候数组元素默认按照字母表顺序排序.
let b = [0,'a', 3,'3', 4,5,false]
console.log(b.sort().join()) //0,3,3,4,5,a,false
b = [0,'a', 3,'3', 4,5,false]
console.log(b.sort((elema, elemb) => {
console.log(elema, elemb)
/*
* 0 "a"
* a 3
* 3 "3"
* 3 4
* 4 5
* 5 false
*/
console.log(typeof elema, typeof elemb) //虽然上面打印出的字符串变量有的没有带引号，可是类型没错
/*
* number string
* string number
* number string
* string number
* number number
* number boolean
*/
}).join()) //0,a,3,3,4,5,false 若是做为sort参数的方法，无返回值，则排序结果与不带参数相同
b = [10,'a',false, '20','11', 4,9]
console.log(b.sort((elema, elemb) => {
if (typeof elema === 'string' && typeof elemb === 'number') {
return -1 // 返回小于0的数则 elema在前 elemb在后
} else if (typeof elema === 'number' && typeof elemb === 'string') {
return 1 // 返回大于0的数 则 elema在后 elemb在前
}
return 0; // 默认返回0 不加return 0结果同样
}).join()) // a,10,false,20,11,4,9 将字符串排在数字前面
四、concat [es3]
拼接数组
返回新数组，不改变原数组
const a = [1, 2, {a: 3}]
const b = a.concat([1,2,3,4])
console.log(b) //(7) [1, 2, {…}, 1, 2, 3, 4]
const c = a.concat([[1,2,3,4]])
console.log(c) // (4) [1, 2, {…}, Array(4)]
console.log(a) // (3) [1, 2, {…}]
const d = a.concat()
console.log(d) // (3) [1, 2, {…}] 可使用concat进行浅拷贝
d[0] = 10
console.log(d) // (3) [10, 2, {…}]
console.log(a) // (3) [1, 2, {…}]
d[2].a = 10
console.log(a[2].a) //10
五、slice [es3]
返回数组的一个片断
返回新数组，不改变原数组
使用slice复制数组也是浅拷贝
两个参数时，包含序号为前一个参数的元素，不包含序号为后一个参数的元素
前一个参数默认为0
后一个参数默认为数组长度
const a = [0,1,2,3,4,5,6,7] console.log(a.slice()) // (8) [0, 1, 2, 3, 4, 5, 6, 7] console.log(a.slice(0)) // (8) [0, 1, 2, 3, 4, 5, 6, 7] console.log(a.slice(0, a.length)) // (8) [0, 1, 2, 3, 4, 5, 6, 7] console.log(a.slice(2)) // (6) [2, 3, 4, 5, 6, 7] console.log(a.slice(2, a.length)) // (6) [2, 3, 4, 5, 6, 7] console.log(a.slice(2, 3)) // [2] console.log(a.slice(2, 4)) // (2) [2, 3] console.log(a.slice(-2)) // (2) [6, 7] console.log(a.slice(-2, a.length)) // (2) [6, 7] console.log(a.slice(2, a.length - 1)) //(5) [2, 3, 4, 5, 6] console.log(a.slice(2, - 1)) // (5) [2, 3, 4, 5, 6]
六、splice [es3]
从数组中删除元素、插入元素、或者同时完成这俩种操做.
splice直接修改数组
let a = [0,1,2,3,4,5,6,7] a.splice() console.log(a) // (8) [0, 1, 2, 3, 4, 5, 6, 7] a = [0,1,2,3,4,5,6,7] a.splice(0) console.log(a) // [] a = [0,1,2,3,4,5,6,7] a.splice(0, a.length) console.log(a) // [] a = [0,1,2,3,4,5,6,7] a.splice(0, 1) console.log(a) // []
七、其他经常使用的es3方法这里就简单列一下，就不啰嗦了
push和pop
unshift和shift;
toString和toLocaleString
es6部分
一、copyWithin
这是一个我想不到应用场景的方法
大概我之后也不多用到
把数组本身的一部分复制到另外一部分
参考以下代码
const copyWithin = (arr, target, start = 0, end = arr.length) => {
const copy = arr.slice()
start = start < 0 ? (start + arr.length) : start
end = end < 0 ? (end + arr.length) : end
for (let i = start; i < end; i ++) { // 拷贝内容不包括end end 小与 start 什么操做都不作且不报错
arr[target + i - start] = copy[i] // copyWithin修改原数组
}
}
二、find
直接上polyfill
// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
}
});
}
未完待续
相关文章
- 1. js数组方法总结
- 2. js 数组方法总结
- 3. JS数组方法总结
- 4. JS基础篇--JS数组经常使用方法汇总
- 5. JS基础语法---数组基础知识总结
- 6. JS基础算法总结
- 7. JS基础语法---数组
- 8. JS 数组常用方法总结
- 9. js数组方法的总结
- 10. js数组去重方法总结
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • 算法总结-回溯法
- • 算法总结-双指针
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. js数组方法总结
- 2. js 数组方法总结
- 3. JS数组方法总结
- 4. JS基础篇--JS数组经常使用方法汇总
- 5. JS基础语法---数组基础知识总结
- 6. JS基础算法总结
- 7. JS基础语法---数组
- 8. JS 数组常用方法总结
- 9. js数组方法的总结
- 10. js数组去重方法总结