Warren's

[toc]

Array

  • .isArray(被判断的值) 判断是否是数组

伪数组(Array like)

arguments, getElementsByTagName, document.childNodes 之类返回 NodeList 对象都属于伪数组。不能应用 push , pop 等方法。

当给其定义了 push 方法后，是根据定义的length 在指定的下标处开始插入

将伪数组转化为数组

// A.prototype.slice.call(arguments) || [].slice.call(arguments) // 将带有length属性的对象转为数组
const obj={length:2,0:'first',1:'second'};
A.prototype.slice.call(obj);//  ["first", "second"]  返回的是 稀疏数组  也就是可能有 [1, empty, 2]  forEach 循环打印时输出空  直接访问输出 undefined

const args = A.from(arguments); // 有空的位置 赋值 undefined
const args = [...arguments];
  • .from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组；如：将字符串、Set、Map、arguments 转为数组
A.f('foo'); // [ "f", "o", "o" ]
A.f(new Set(['foo', 'bar', 'baz', 'foo'])); //  [ "foo", "bar", "baz" ]
A.f({length: 2}); // [undefined, undefined]
A.f([1, 2, 3], x => x + x)` // [2,4,6]
  • .reduce(callback, 初始值(如果不设置默认为数组第一个值)) 对数组中的每个元素执行一个提供的reducer函数，将结果汇总为单个返回值
var a = [2,5,8]
// accumulator 上一次返回的值 currentValue 当前值 index 当前正在处理的元素索引
console.log('result', a.reduce((accumulator, currentValue, index) => { 
    // accumulator 这里没有设置初始值，其值为数组第一个，也就是 2
    console.log('value', accumulator, currentValue, index); // index 从1开始，这里是没有设置初始值
    var r = accumulator
    return accumulator + currentValue * 10
}));
// 返回 132

展平数组

将一维数组转换为二维数组查看 docs\fe\tools\publicFn.md

flat(展平层级:数字(默认1)或 Infinity ) 会过滤数组中的空值 返回新数组

flatMap(() => {}): 对原数组执行一个map操作，然后再执行flat 只能展开一层数组 返回新数组

/* 方式一 */
[1,2,[3,,5,[6,7,,9]]].flat(Infinity) // [1, 2, 3, 5, 6, 7, 9]

/* 方式二 */
function flatArray(arr) {
    return arr.reduce((r, c) => {
        return Array.isArray(c) ? r.concat(flatArray(c)) : r.concat(c)
    }, [])
}

filter/map/forEach/some/every/find/findIndex/includes

.filter()   // 返回符合条件的新数组,没有赋值或删除了的项，会被跳过
.map()      // 返回新数组，数组项不变，但值可做修改
.forEach(function(v){console.log('v',v)}); // 返回undefind， 这里对 v 的操作是对原对象的操作
.some()     // 返回 Boolean； 回调函数有一个返回 true，则返回true, 有true返回则结束循环
.every()    // 返回 Boolean； 回调函数每一个返回 true，则返回true, 有false返回则结束循环
.find()     // 返回第一个符合的值
.findIndex(() => {}) // 返回第一个符合的值的数组下标(没有返回-1与indexOf一致) 与 indexOf 区别为传入的参数，前者为函数,函数有利于匹配数组项为对象
.indexOf(str) // 参数可以是字符或字符串
[].includes('some value') // return true/false ,与indexOf相比，可以避免返回的0，判断时的错误
.fill(value填充值[, start起使下标，默认0[, end结束下标默认length]])
.of(1,2,3) // `[1,2,3]`; 区别 `new Array(3)` 返回 `[ , , ]`
.at(-1)    // 参数：正整数、负整数，获取指定位置的成员  最后以为 at(-1)
.splice(x,y,z1,z2,z3,z4......) // 会直接对当前数组进行修改；  
// 取出从下标为x（下标从0开始）开始的y个数组值，进行修改；  
// z参数不加：就删除数组中的这几个数；相当于用空来替换这些数  
// y参数为0：在x前面插入z； 
// y参数为1：将x替换为z；  
// 该方法返回被删的数组值；


forEach: 是 for + callback 的 封装 所以和 async 搭配用时 也会出现异步，可以用 for of 替代，它是用迭代器实现的
  • .slice(start(包含),end(不包含，默认到最后且包含)) 返回新数组 'abcdef'.slice(-2,-1) // e

  • .join('!') 将数组的每个元素放到一个字符串中，不传参就用逗号隔开(此时与toString() 方法一样),传就用该符号

  • array.push(element1[, ...[, elementN]]); 末尾压栈，返回数组长度；通过索引值来添加比push方法更快

  • .pop() 末尾出栈，返回去掉的值

  • .shift() 对头出栈，返回去掉的值

  • .unshift() 对头入栈，返回数组长度

  • .reverse(); 逆向排序的数组 返回数组的引用

  • .sort()

const arr = [1,55,6,2]
function compare(a,b) { 
    // 取数组中的两个数 a, b
    return a-b; // 注意这里是 a-b 如果是 b-a ab的位置会相反
    // 重点关注返回值即刻
    // 返回0 位置不变
    // 返回负数 a放到b左边（简单理解为降序）nde
    // 返回正数 a放到b右边（简单理解为升序）
}
arr.sort(compare);
arr.sort((a,b) => { // 处理对象字符串 升序
    if(a.name > b.name) { return 1 } 
    else if (a.name === b.name) { return 0 } 
    else { return -1 }
})
// 默认小到大排列（即没有compare函数）按照数组元素对应的字符串的 Unicode 从小到大进行排序。  
// 比较数字可以简单的使用(升序)
function compareNumber(a,b) { 
    return a - b
}

reverse 和 sort 都是直接操作原数组 返回数组引用

arrayA.concat(arrayB); 返回拼接后的新数组，不会覆盖数组间重复的值

var newArray = [].concat(valueN,valueN,valueN) valueN 可以是值或数组

Set/Weakset Map/Weakmap

更多用法 参考open in new window

  • map 和 set 有 forEach 方法可以用
  1. Set: 和数组类似但是，但是成员唯一，不能使用下标方式获取值
var set=new Set(参数)   // 参数可以是数组或类似数组的对象{0:'a',1:'b',2:'c'}。  
// 在set内部两个NAN是相等的，两个对象总是不等的
// 四个方法：  
set.add(value) // 添加值 返回set结构本身  
set.delete(value) // 删除值 返回布尔值，表示是否成功  
set.has(value) // 检测是否为set成员 返回布尔值  
set.clear() // 清除所有成员 没有返回值

  1. WeakSet

    • 成员只能是对象
    • 构造函数可以接收一个数组为参数，数组的成员将被设置为 WeakSet 的成员，所以数成员必须为对象
    • WeakSet 中的对象都为弱引用，及当检测到值没有被其它地方引用时，会直接回收内存，不考虑 WeakSet 还在引用
    • 不能遍历

  2. Map 是键值对的形式的，但是键的形式不只是字符 可以遍历

const map = new Map([['name', 'hew'], ['code', 10001] ]) // 构造函数接受一个数组，数组的成员是表示键值对的数组
const obj = { key: 'kk' }
map.set(obj, 'add a object key')
console.log(map.get(obj))  // add a object key
console.log(map.get('name')) // hew
  1. WeakMap
    • 只接受对象作为键名
    • 键名所指向的对象，不计入垃圾回收机制
    • 不能遍历

数组空位

数组的某个位置没有值

产生

Array(3) // 三个空位数组
[ , , ] // 同上
[].length = 3 // 三个空位
a = [0,1,2];a[4] = 4; // a[3] 是空位
delete a[0] // a[0] 是空位

  • console 输出空位 会显示 undefined；但实质上是空位，不是 undefined

  • [undefined] 不是空位

  • forEach,filter,every,some 会跳过空位；map 会跳过空位，会保留这个值，但回调不会被调用

  • join，toString 会将 undefined null 处理成空字符串

  • .from, (...) 转成 undefined

Last Updated:
Contributors: Warren