夯基础-JS篇-Array-初始化、类型转换、格式转换

181 阅读4分钟

作为一个前端,不论是具体哪条业务线,始终是绕不过 JS 的。
最近想夯实一下自己掌握的技术栈,所以就想着从 js 为开端慢慢的重温一下常用或不常用的一些内容。
数组作为 js 基础的不能再基础的东西,通常也是日常开发中的重中之重,各种各样的操作层出不穷,我将数组的操作分为四个部分:

  • 初始化、类型转换、格式转换:主要用来记录对数据本身进行的一些操作和检查
  • 遍历:搜集数组遍历的一些常规操作
  • CURD:主要是对数组进行增、删、改、查。
  • 排序、扩展、复杂数组的常规操作。

前言

本文主要是记录第一个部分的,即数组的初始化,类型转换,格式转换这样的操作。

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

一、数组的初始化

数组的初始化我是这样认为的,数组的初始化主要分为几种:

  • 由非数组类型转换而来,例如字符串、对象
  • 使用 new 关键字直接生成一个数组
  • 最常用的 使用 let/const/var 这样的关键字直接声明数组

1.关键字创建数组

(1) 使用 Array() 创建数组。

// 不带参数调用
var a = new Array(); // []

// 带参数调用
var a = new Array(2);  // [empty × 2]
var b = new Array('abc');  //  ['abc']
var c = new Array(1,2,3,4)  // [1,2,3,4]

(2) 使用 Array.from() 创建数组。该方法从一个类数组对象或可迭代对象中创建一个新的数组实例。

// 从数组中创建
var a = Array.from([1,2,3]); // [1,2,3]

// 从字符串中创建
var b = Array.from("abcd"); // ["a", "b", "c", "d"]

// 从集合中创建
const s = new Set(['foo', 1, false]);
var c = Array.from(s);  // ["foo", 1, false]

// 从 map 中创建
const m = new Map([[1, 2], [2, 4], [4, 8]]);
var d = Array.from(d);  //  [[1, 2], [2, 4], [4, 8]]

// 
var obj = {1: 2, 0: 2, 2: 0, length: 3};
var e = Array.from(obj);  // [2, 2, 0]

2.其他数据类型转换成数组

字符串和数字转换数组单独提出来主要是因为不使用 Array.from() 方法,进行创建数组。而是使用数字和字符串的方法得到一个由它们而来的一个数组。

(1) Stirng.split 方法,split 方法可以根据传入的标识符,将字符串转化成一个数组,如果不传参数,则将字符串单个字符进行分割为数组的每一项。

这个方法在日常开发中非常使用,例如下面的两个场景:

第一个为可以将一些有标识性的且和下标有对应关系的内容,以字符串的形式存起来,少点可能没有关系,但是常用的数据,可以节省初始化请求的资源。

第二个则是常用的菜单级别或者级联数据结果,使用连接符的方式提交则节省字段,且使数据更加清晰明了。

let str = 'ABC'
str.split()  // ['A','B','C']

let str1 = '1-2-1'
str1.split('-') // ['1','2','1']

(2) Object.entries()/Object.keys()/Object.values()

这三个方法都是Object的方法,

  • keys方法是将对象的键提出来,整理成一个数组
  • values方法是将对象的值提出来,整理成一个数组
  • entries方法是将键值对转换成一个二维数数组,第一层的每一项为键和值组成的数组
let obj = {
    a:1,
    b:true
}

Object.keys(obj)	// ['a','b']
Object.values(obj)	// [1, true]
Object.entries(obj)	// [['a', 1], [b, true]]

3. 随机一个新的数组(Mock Array)

我是一个经常去尝试一些demo的人,所以会偶尔兴趣一来就会建一个html测试一些东西,所以呢就经常遇到mock一个指定长度的数组的需求。短一点的可以let一个出来,但是长的呢?怎样使用最少的代码实现我所需要的数组结构就摆在面前的一个很急迫的事情。

// 最常用的方法
 Array(1024).fill('').map(item => 123)

// 比较有意思的另一个方法,最大长度357
Object.keys(window).map(item => 123)

// 我是个老实人
let arr = []
for(const i = 0;i< 1024; i++){
    arr.push(i)
}

二、数组的类型转换

这一部分和上一段刚好相反,这一段主要记录的是如何将数组转换成其他数据类型的数据。主要是转换成字符串。

第一种是使用 join 方法。

[1,2,3].join('-')   // '1-2-3'

第二种是 JSON.stringify()方法。

JSON.stringify([1,2,3])  // "[1,2,3]"

三、数组的非空检查

数组的非空检查严格模式主要是分为两步,第一步验证是数组,第二步验证长度大于0。

let a = []
Array.isArray(a) && a.length>0   //false

总结

这些内容都是很基础的东西,其实没什么可写的,但是本着颗粒归仓的念头,还是简单记录一下。

同时也为后面的东西做个简单的铺垫。