js声明数组 js数组如何获取真实对象 js数组处理null值情况 js数组通过下标赋值和push赋值的区别 loopback4的基础使用

问题来源

今天在开发过程中，遇到一个很奇怪的问题，由于公司微服务的部分网关使用loopback4。

LoopBack4是IBM主导的一个高度可扩展的开源的Node.js框架，基于流行的Express框架和TypeScript语言编写。

因而这里涉及到JavaScript的代码。

现在有一个特殊的场景，需要封装设备信息和放置点信息。

现有设备数组和放置点数组，外循环是设备数组，内循环是设备放置点数组，如果设备放置点Id等于放置点的Id，就向新数组Array中添加包含设备信息和放置点信息的json对象，但无论如何新数组的长度始终小于设备数组的长度，按道理说如果设备的放置点Id不等于放置点的Id，那么就将该位置存储为null，长度始终是相等的。

于是，使用下标添加值和push添加值的两种方式，去探讨这个问题：

js数组

使用如下几种方式声明js数组：

 //第一种
 var array=new Array();

 //第二种：规定了数组的长度为2  
 var arr2 = new Array(2);

 //第三种  
 var arr3 = new Array(true,123,false);

 //第四种
 var arr4 = [false,"aaa",123]; 

数组通过下标赋值

@get('/v1/test')
  async test(
  ): Promise<any> {
    var array=new Array(0);
    let arrayLength = 5;
    for (var i =0 ;i<arrayLength;i++){
      for (var j =3;j<8;j++){
        if (i == j){
          array[i] ={"index":i}
        }
      }
    }
    return {
      "arrayLength":array.length,
      "array":array
    };
  }

返回结果为

{
    "arrayLength": 5,
    "array": [
      null,
      null,
      null,
      {"index": 3},
      {"index": 4}
    ]
}

从返回结果可以看出，如果外循环的值不等于内循环的值，外循环对应的下标指向null，数组长度为外循环数组的长度，由于array的下标不是从0开始，而是从相等处开始，即i=3，因而，下标为0，1，2的值为null

数组通过push赋值

@get('/v1/test')
  async test(
  ): Promise<any> {
    var array=new Array(0);
    let arrayLength = 5;
    for (var i =0 ;i<arrayLength;i++){
      for (var j =3;j<8;j++){
        if (i == j){
          array.push({"index":i})
        }
      }
    }
    return {
      "arrayLength":array.length,
      "array":array
    };
  }

返回结果

{
    "arrayLength": 2,
    "array": [
    	{"index": 3},
        {"index": 4}
    ]
}

push的返回数组的长度为，其真实存储的对象只有两个，因为外循环和内循环只有3和4相等。

总结

因而，如是外循环和内循环同时存在，只有相等时才填充新数组时，下标形式的数组长度要大于等于push形式的数组，因为下标形式的数组可能存储null值。

loopback4

安装

运行命令，全局安装：

npm i -g @loopback/cli

创建项目

运行如下指令创建项目

lb4 app

输入项目相关的信息，等待安装完成：

Project name: loopback_demo
Project description: Demo
Project root directory: loopback-demo
Application class name: LoopbackDemoApplication
Select features to enable in the project Enable tslint, Enable prettier, Enable mocha, Enable loopbackBuild, Enable vs
code, Enable repositories, Enable services

项目启动

安装完成后，进入程序路径，运行如下指令：

npm start

等待程序启动成功。

访问项目

程序启动成功后，打开浏览器输入http://127.0.0.1:3000/ping，可以看到以下信息：

{
	"greeting": "Hello from LoopBack",
	"date": "2019-01-23T05:48:58.850Z",
	"url": "/ping",
	"headers": {
		"host": "127.0.0.1:3000",
		"connection": "keep-alive",
		"upgrade-insecure-requests": "1",
		"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36",
		"dnt": "1",
		"accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
		"accept-encoding": "gzip, deflate, br",
		"accept-language": "zh-CN,zh;q=0.9,en;q=0.8"
	}
}

创建HelloController

运行命令，输入controller名称，回车会自动执行，等执行完毕。

lb4 controller

执行完毕后进入创建的controller文件，粘贴以下内容：

import {get} from '@loopback/rest';

export class HelloController {
  @get('/hello')
  hello(): string {
    return 'Hello world!';
  }
}

运行访问HelloController

运行npm start，等待程序启动成功。

程序启动成功后，打开浏览器输入http://127.0.0.1:3000/hello，可以看到信息Hello world!。