一些看起来高大上的数组操作方法

修改数组的性质

• 以数组长度length为例
• 数组对象的length属性是一个数据属性,该属性的值始终从数值上大于所属数组的任何一个索引号.
• length属性的特性为{ [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: false }

只读性 writable

const list = [1, 2, 3, 4];
list.length  // 4
list.length = 5;
list  // [1, 2, 3, 4, empty]

Object.defineProperty(list,"length", {
    writable: false;  // 对象属性是否可修改，false为不可修改，默认值为true
    
});  // 修改数组长度为只读
list.length = 1;
list // [1, 2, 3, 4, empty]

可配置性 configurable

const array = [5, 4, 3, 2];
Object.defineProperty(array, 'length', {value: 3});
array  // [5, 4, 3];

Object.defineProperty(array, 'length',{
    configurable:false,  // 能否使用delete、修改属性特性、修改访问器属性，false为不可重新定义，默认值为true
    writable:false,
    value:'1',
});
array  // [5]

array.length = 5; //  [5]
Object.defineProperty(array, 'length', {value: 3})  // Cannot redefine property: length

可枚举性 enumerable

const array = ['zhao', 'qian', 'sun', 'li'];
for (let i in array) {
    console.log(array[i])  // zhao qian sun li
}

Object.defineProperty(array, 'length', {
    enumerable:false,  // 对象属性是否可for-in循环，false为不可循环，默认值为true
})
for (let i in array) {
    console.log(array[i])  // undifined
}

数组的方法

Array.from() 将 伪数组 or 可迭代对象 转化为数组

//  String
Array.from('hello');  // ["h", "e", "l", "l", "o"]

// Set or Map
let set = new Set(['hello', 'world']); 
Array.from(set);  // ["hello", 'world']

// 指定第二个参数进行成员处理
Array.from([1, 2, 3], x => x * 2);  // [2, 4, 6]

Array.prototype.some/every() 至少有一个 / 所有成员是否都通过指定函数的测试

[90, 85, 25, 55.9, 100, 61].some(score => score > 60)  // true
[90, 85, 25, 55.9, 100, 61].every(score => score > 60)  // false

// 模仿includes
const family = ['father', 'mother', 'son', 'doggy'];

const isExist = (arr, checkItem) => {
  return arr.some(member => checkItem === member);
}

isExist(family, 'father');  // true
isExist(family, 'catty');  // false

Array.prototype.flat() 以指定深度递归遍历数组，并返回一维数组（扁平化）

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();  // 默认为1，展开1层
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

// 使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]


// 数组去重扁平化
const arr4 = [1, [2, 3],[[4, [5, 6]], 7]];

const filter = arr => Array.from(new Set(arr.flat(Infinity)));
filter(arr4);  // [1, 2, 3, 4, 5, 6, 7];

Array.prototype.reduce() 累加器 数组成员生序执行所提供函数

var array = [0, 1, 2, 3].reduce(
  ( acc, currentVal ) => acc + currentVal,  // reducer函数
  0  // 初始值
);
// 6

// 工具类管道函数
const double = val => val * 2;
const triple = val => val * 3;
const quadruple = val => val * 4;

// 管道
const pipe = (...functions) => input => functions.reduce(
    (acc, fn) => fn(acc),
    input
);

// 连接
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// 使用
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240

关于本文

• 文章非摘录，经浏览文档，以自己的理解进行，代码测试，手打书写。
• 用作记录自己曾经学习、思考过的问题的一种笔记。
• 用作前端技术交流分享。
• 阅读本文时欢迎随时质疑本文的准确性，将错误的地方告诉我。本人会积极修改，避免文章对读者的误导。

关于我

• 是一只有梦想的肥柴。
• 觉得算法、数据结构、函数式编程、js底层原理等十分有趣的小前端。
• 志同道合的朋友请关注我，一起交流技术，在前端之路上共同成长。
• 如对本人有任何意见建议尽管告诉我哦～ 初为肥柴，请多多关照～
• 前端路漫漫，技术学不完。今天也是美(diao)好(fa)的一天（ 跪了...orz