Vue Prop

在组建基础中，我们讲解了 Prop是作为一个DOM属性绑定，而不是属性绑定，如果有不了解或不知道的读者可以阅读下前面几章的内容最后来阅读本章。

大小写

通常情况下，HTML中的属性名称是不存在大小写敏感的，所以浏览器大多都会将大写字母解释为小写字母，这也就意味着驼峰命名的方式需要使用其段横线分割的命名方式。

类型

通常的情况下，我们的Props类型都会为字符串类型，对此，Vue为我们提供了一个多种类型的选择方式，如：

对此，我们的 code 可以将之前单纯的定义属性之后，在指定其类型，如:

1

props: ['title', 'age']

改为：

1
2
3

props: {
    title: String,
    age: Number,

如：

1
2
3
4
5
6
7
8
9
10
11
12

<script>
    Vue.component("props", {
        props: {
            title: String,
            age: Number,
        },
        template: '<h1>{{title}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

传递静态和动态

当一切执行完成之后你会发现，即使我使用的是 age，但vue并没有起到什么实质性的效果，甚至还可以输入Hello,world字符串类型的数据。在这个时候，由于我们传递给 prop中是静态 Prop即：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="props">
    <props age="10"></props>
</div>
<script>
    Vue.component("props", {
        props: {
            title: String,
            age: Number,
        },
        template: '<h1>{{age}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

如果想传递一个动态 Prop，需要使用v-bind或:即v-bind的缩写来让其成为一个动态的 prop：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="props">
    <props :age="10"></props>
</div>
<script>
    Vue.component("props", {
        props: {
            title: String,
            age: Number,
            text: [String, Number]
        },
        template: '<h1>{{age}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

当使用过v-bind来传递 Prop的时候，那么所有的数据都将是动态的 prop，所以 vue 也可以根据所定义的属性来进行判断 Prop数据是否符合所定义的Prop 类型

验证

除了指定 Prop 的类型之外，我们也可以使用 vue 为我们所提供的 Prop 验证，（虽然这一点有点像是 Laravel 所提供的表单验证，但在Vue中也被发挥的琳琳尽至）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="app">
    <props-component :title-data="titleData"></props-component>
</div>
<script>
    var propsComponent = {
        props: {
            titleData: {
                type: String,
                required: true
            }
        },
        template: '<h1>{{titleData}}'
    };

    var vm = new Vue({
        components: {
            'props-component':propsComponent
        },
        el: '#app',
        data: {
        }
    })
</script>

在上图之中，主要来验证titleData属性是否存在数据，如果存在数据则进行显示，但如果没有数据则会在控制台中输出错误。

默认值

在通常的情况下，如果你不指定相关数据，那么将会被输出为null即空，且不可见，对于这种情况，我们可以使用 vue 所提供的default方法来设置一个组件的默认值，而默认值的数据则是其属性内的信息，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="props">
    <props :age="101"></props>
    <props></props>
</div>
<script>
    Vue.component("props", {
        props: {
            age: {
                type: Number,
                default: 1
            }
        },
        template: '<h1>{{age}}</h1>'
    })
    new Vue (
        {el: '#props'}
    )
</script>

Vue 组建注册

组建名

关于 Vue 的组建名特别是全局组件的注册格式：

1
2
3

Vue.component('components-name', {
    // ……
})

其中在全局组件注册中第一个参数是全局组件的名称，而第二参数则为组件中的code。

组件名的命名方式

组建名的定义主要命名方式为 kebab-case即“短横线分割命名方法”还有驼峰式命名，他们的命名方式主要体现在：

1
2
3

Vue.component("component-name", {
    // ……
})

以及驼峰式命名方法：

1
2

Vue.component("componentName" , {
})

短横线命名以及驼峰式命名主要区分在component-name和componentName，通常使用短横线明明更加的明显但在一些语言中并不支持，所以驼峰式命名方法受众更多。

在官方文档中，虽然短横线分割以及驼峰式命名方式都会被接受，但是直接在DOM中使用时只支持以短横线分割即Kebab-case是有效的

全局注册与局部注册

全局注册

通过全局注册通常会使用Vue.component来创建一个全局组件即：

1
2
3

Vue.component('component-name', {
    // ……
})

在他们注册之后可以用在任何新的Vue实例中，就比如：

1
2
3
4
5
6
7
8
9
10

Vue.component('componente-one', {
    // …… 
})
Vue.component('componente-two', {
    // …… code
})

new Vue ({
    el: '#app'
})

之后可以可以用过使用下放实例直接使用刚刚所注册的全局组件:

1
2
3
4

<div id="id">
    <componente-one></componente-one>
    <componente-two></componente-two>
</div>

局部注册

全局注册通常往往都不会是太于理想的，如果你有很多的组件，但是你用到的只有那一两个，则会造成很多的代码行数增加（经管全局注册的初始结构会比局部注册的少几行），通过局部注册，即有多少，注册多少，但全局注册则是尽管来，趁热，来者不惧的的方式进行组件的注册。通过上述的对比我们可以更快的理解全局注册与局部注册相互之间的差异以及区别，读者可根据在开发项目中时自行进行使用两种方法来构建一个项目。

Vue 基础

Vue 是由尤雨溪所开发的一种前端js框架，以vue为中心的vue 库最为出名，其中知名的有vue-data、vue-table……分别运用在数据大屏以及表格处理方面，其中vue主要用于构建用户界面的渐进式框架，核心库只支持前端显示。而渐进式框架主要是：“一开始不需要完全掌握全部功能，到后面会慢慢的提升”，就以vue-data为例，即使光通过官方文档也可以快速上手，这与vue.js的成功密切相关。

vue.js 的官方文档是写的最为详细的框架文档之一，这与其vue.js发展之出的Laravel 社区文档出现了对比，如果按照通俗的话来讲就是“教你造车但不教你开车”，这也是vue.js如此成功的关键因素之一，其二就是由于vue.js是由国人所开发的，这也增加了vue.js在国内的受欢迎程度不同类框架第一影响更好。

安装

Vue的安装非常的简单，本文主要使用vue所提供的cdn来引入项目内进行演示，vue为开发者提供了两种方式，分别为开发环境版以及生产环境版本，两者的区别就是一个含有了帮助以及命令行警告，而另一个主要优化了尺寸和处理速度，我们分别可以使用以下 CDN进行引入 ：

输出

Vue.js允许使用较为简洁的模板语法以声明式的将数据渲染到HTML DOM（HTML Document Object Model，文档对象模型）内，使得数据可以任意的进行编辑，以及实时预览，HTML DOM用于将元素看作对象，从而使得元素可以被进行编辑以及获取，就比如我们声明一个message对象：

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    {{message}}
</div>
<script>
    var app =new Vue({
        el: '#app',
        data: {
            message: 'hello,world!'
        }
    }) 
</script>

绑定元素属性

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    <p v-bind:title="message">绑定标题</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "绑定属性为toLocaleDateString " + new Date().toLocaleDateString() 
        }
    })
</script>

此时如果将鼠标移动到<p>元素内，则会提示信息为绑定属性为 toLocaleDateString()方法，这里所用到的v-bind为vue所提供的指令：

ID	DA	FA
v-bind	将这个元素点的标题属性和message 实例内的消息属性 绑定在一起
toLocaleDateString	区域日期字符串
toLocaleTimeString	区域时间字符串
toLocaleString	区域字符串

条件

vue.js支持提交语法的写入，本章主要先介绍下vue的特点以及语法等基础功能的实现，在后续我们会详细介绍vue的条件以及循环指令：

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    <p v-if="message">Hello,world！</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: true
        }
    })
</script>

与上述一样，vue不仅仅可以将数据绑定到DOM文本或属性，还可以绑定DOM的结构，这意味着你在控制台中将app.message=false可以将Hello,wirkd!所隐藏。

循环

在vue内，循环可以通过使用v-for指令来实现，与上述一样，vue也会将此绑定到DOM对象内，都可进行控制台内输入app.todos.push({text : "Hello,vue"})进行修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="app">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            todos: [
                { text: 'Hello,world'},
                { text: 'Hello,china'}
            ]
        }
    })
</script>

双向绑定

1
2
3
4
5
6
7
8
9
10
11
12

<div id="app">
    <p>{{message}}</p>
    <input v-model="message">
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'Hello,world'
        }
    })
</script>

通过使用v-model指令，我们可以非常方便的获取表单所输入的内容来实现双向绑定。

Node.js TCP Server

TCP Server 通过 Node 中的 net 模块来实现 TCP 四层模型（应用层、传输层、网络层、链路层）

对于每个网络层次，Node 都提供了相应的模块，如 http、net、tls/crypto、dgram 等，其中 net、http、dgram 模块分别实现和提供 TCP、HTTP 的通信，其中 http 为应用层模块，而 net 为传输层模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

1. net.Server：通过其内部的 ```socket``` 来提供客户端的通信
2. net.Socket：TCP/Localhost socket 的实现，并提供了全双工的 stream 接口

> Network socket （网络套接字）是指网络中不同主机上应用程序之间的通信端点对象，一个套接字就是一个的另一端，也就是以 IP 及端口所组成的地址被称之为套接字地址（socket address）

## Create TCP Server

```js
var net = require('net')

var server = net.createServer(function (socket) {
    console.log('someone sonnects')
})

server.listen(8210, function () {
    console.log('Create server on http://127.0.0.1:8210')
})

创建一个 TCP 服务可以通过 net.createServer 方法进行创建，可通过 server.listen 来设置服务的监听端口以及，当然一旦运行服务时除发的还是 server 下的 listening 事件，因此也支持另一种写法：

net.Server()

1
2
3
4
5
6
7
8
9
10
11

var net = require('net')

var server = net.createServer(function (socket) {
    console.log('someone sonnects')
})

server.listen(8210)

server.on("listening", function () {
    console.log("Create server on http://127.0.0.1:8210/")
})

除此之外 server 还支持另外几种 TCP 事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var net = require('net')

var server = new net.Server()

// 监听新的请求时返回回调函数
server.on("connection", function (socket) {
    console.log("connects someone")
})

server.listen(8210)

// 监听时触发
server.on("listening", function () {
    console.log("Create server on http://127.0.0.1:8210/")
})

// 关闭触发回调函数
server.on("close", function () {
    console.log("close server")
})

// 错误时返回
server.on("error", function (err) {
    console.log("server error!")
})

server.address()

如果需要监听 IP 套接字，也就是套接字地址（socket address），可以通过 server.address() 方法来实现，他主要提供了三个服务器绑定的 address 以及 family 和 port

1
2
3
4
5
6
7
8
9
10
11
12

var net = require('net')

var server = net.createServer(function (socket) {
    console.log("connects someone")
})

server.listen(8210, function () {
    var address = server.address()
    console.log("TCP Server 所监听的端口号：" + address.port)
    console.log("TCP Server 所监听的地址：" + address.address)
    console.log("TCP Server IPv4 or IPv6：" + address.family)
})

需要注意的是如果监听的端口号是 IPv6 地址，那么 address 则返回 ::

server.getConnections()

.server.getConnections 方法用于异步获取服务器上的并发连接数，回调参数分为 err 和 count

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const net = require("net")

/*
    Create server on http://127.0.0.1:8210
    someone connects
    This is client count: 1
 */
var server = net.createServer(function (socket) {
    console.log('someone connects')

    server.maxConnections=3
    server.getConnections(function (err,count) {
        console.log("This is client count: " + count)
    })
})

server.listen(8210, function () {
    console.log("Create server on http://127.0.0.1:8210")
})

之后我们分别通过 GET 请求 http://127.0.0.1:8210/ 并通过代理访问 uri 则有三个 IP 访问，因此分别依次循环输出 This is Client count: 1~3

Server at Client 之间的通信

Server

服务端主要用于接收客户端所发送的消息，因此只需要通过 data 事件来接收数据时进行输出，在收到数据之前首先通过 address() 来将转换为 JSON 格式并输出，并通过 socket.bytesWritten 来计算客户端所发送的字节数，最后通过 socket.bytesRead 方法来统计书数据的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const net = require('net')

/*
    Create server on http://127.0.0.1/8210
    The is address is {"address":"::","family":"IPv6","port":8210} 以发送
    消息大小为 62
    Massage from client
    数据的大小为：19
 */
var server = net.createServer(function (socket) {
    var addresss = server.address()
    var message = "The is address is " + JSON.stringify(addresss)

    socket.write(message,function () {
        var writeSize = socket.bytesWritten
        console.log(message + " 以发送")
        console.log("消息大小为 " + writeSize)
    })

			// 收到数据时回调
    socket.on('data', function (data) {
        console.log(data.toString())
        var readSize = socket.bytesRead
        console.log("数据的大小为：" + readSize)
    })
})

server.listen(8210,function () {
    console.log("Create server on http://127.0.0.1/8210")
})

Client

在 Server 与 Client 建立链接的过程中，客户端扮演的是数据发送者的身份，而他主要的作用就是与服务端建立链接并发送数据，之后监听服务端的状态，在这期间主通过 client.connect 来链接服务，之后使用其 client.write 来写入数据并发送。

net.Socket 类

API

对于 net.Socket 相关的 API Node 提供了多种方法：

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const net = require('net')

/*
    Connnect to Server
    The is address is {"address":"::","family":"IPv6","port":8210}
*/
var client = new net.Socket()

// 链接服务器，"connect" 是指当成功建立连接时触发
client.connect(8210,'127.0.0.1', function () {
    console.log("Connnect to Server")

    // 与 Server 建立链接
    client.write("Massage from client")
})

client.on("data", function (data) {
    console.log(data.toString())
})

// 当套接字另一端断开链接时出发回调，从而结束套接字可读端
client.on("end", function () {
    console.log("end Server")
})

Node.js Express at ejs

express 是一个高度包容和快速包容且极简的 Node.js Web 框架，主要用于其 API 路由以及对数据的集成支持，可通过 express 模块完成各种使用程序方法和中间件，方便快捷的创建一个强大的 API。

通过 express 和模板引擎 ejs 的配合，以 ejs 十分简单以及对 express 良好的集成，可以充分的完成前后端的相关开发需求，并以此来完成一个非常规范的 node start 写法，在此之前我们需要安装 express 以及 ejs 模块

npm install ejs \ npm install express

路由用于确定应用程序特定端点的客户端请求，主要通过 express 来进行实现，而这其中 app 与 HTTP 方法相对应的 Express 对象方法来定义路由，如 app.get() 用于处理 GET 请求，而 app.post 则用于处理 POST 请求。

Express

这些路由方法都指定了回调函数（或者：“处理程序函数”），当程序接收到指定的路由（端点）的时候（也就是说 HTTP 方法请求时被调用），来调用回调函数，换句话说就是应用程序监听与指定路由和方法匹配的请求，当检测到匹配时，他会调用对应的回调函数。

比如我们要创建一个非常符合 node 风格的项目并搭配 ejs 进行开发，可以目录结构可以为：

1
2
3
4
5
6
7
8

node/
├── server.js
├── package.json
├── package-lock.json
├── route
│   └── index.js
└── views
    └── index.ejs

除去 node_modules 目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var path = require('path')
var express = require('express')
var app = express()

var indexRoute = require('./route/index')

// app.set(name, value)，将 set name 分配给 value，因此他可以存储任何想要的值
app.set('views', path.join(__dirname, 'views'))

// 指定渲染引擎使用使用 ejs
app.set('view engine', 'ejs')

// 路由将匹与 path 相同的路径
app.use('/', indexRoute)

app.listen(8021)

路由参数

接下来在 route/ 目录里面添加 use 所对应的文件，并引入 express 库，并通过 express.Router 创建模块化，之后以 router.get 实例来检测端点参数的访问，之后通过 res.render 将 HTML 字符串发送到客户端：

• res.render(view[, locals][, callback])
  • view 参数是一个字符串，是视图文件，用于渲染文件的路径
  • locals，一个对象，其属性定义了视图的局部变量。
  • callback，回调函数。如果提供，该方法将返回可能的错误和呈现的字符串，但不执行自动响应。当发生错误时，该方法会在next(err)内部调用。

1
2
3
4
5
6
7
8
9
10

var express = require('express')
var router = express.Router()

router.get('/:name', function (req,res) {
    res.render('index', {
        name: req.params.name
    })
})

module.exports = router

在上述 code 中，在 router.get 监控路由端点中所使用的路由参数（:name）是一个包含映射命名路由，其作用是捕获 URL 中位置所指定的值，并填充在 req.params 对象中，你可以随意定义：

1
2
3
4
5
6
7
8
9
10
11

var express = require('express')
var router = express.Router()

router.get('/user/:username/uid/:userid', function (req,res) {
    res.render('index', {
        username: req.params.username,
        userid: req.params.userid
    })
})

module.exports = router

http://localhost:8021/user/kunlun/uid/20

当然如果不需要 ejs 进行交互也可以通过其 res.render 方法 options参数来进行实现：

1
2
3
4
5
6
7
8
9
10

var express = require('express')
var router = express.Router()

router.get('/:name', function (req,res) {
    res.render('index', function (err,html) {
        res.send(html)
    })
})

module.exports = router

http://localhost:8021/hehe

在这其中 res.send 是一个用于发送 HTTP 响应的方法，所描述的 body 可以是 buffer、string\boolean\array 对象等。

Ejs

在 ejs 试图中非常简单，我们只需要掌握 ejs 是那个非常关键的几个语法就可以进行使用：

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<head>
    <title>DOCTYPE</title>
</head>
<body>
    <h1>User: <%= username%></h1>
    <p>Uid: <%= userid%></p>
</body>
</html>

Node.js HTTP Server

HTTP（Hyper Text Transfer Protocol）即浏览器和服务器之间的传输协议，用于浏览器和服务器之间的通信问题，从握手开始处理 TCP 链接，为实现解析 HTTP 的问题，Node 可以通过其内置的 http 模块来解决此问题。

应用程序并不可以直接和 HTTP 进行一些操作，因此可以通过其 http 模块中所提供的 require（请求） 以及 response（响应） 来将 HTTP 响应返回服务器。

因为 require 封装了 HTTP 请求，因此可以通过使用 require 对象属性方法获取所有的 HTTP 请求信息

同样的因为 response 对象封装了 HTTP 响应，也可以通过此对象方法将 HTTP 响应返回给浏览器

因此 http 模块也可以有两种方式进行使用，服务端创建 HTTP 服务器以此来监听客户端的请求并返回响应，而作为客户端，将发起一个 HTTP 请求（客户端）来获取服务端的响应。

Request at Response

Request

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const http = require('http')

// 创建本地服务器来从其接收数据
var server = http.createServer(function (req,res) {
    // 获得 HTTP 请求的 method + url
    console.log(req.method + ':' + req.url)
    req.on('data', function (chunk) {
        body.push(chunk)
    })

    // 向请求发送响应头
    res.writeHead(200, {'Content-Type':'text/html'});
    // 完成并发送请求
    res.end('<h1>Hello,world!</h1>')
})

server.listen(8081)

console.log('Server is running at http://localhost:8081/');

HTTP 请求的本质上就是 Headers 以及 body 两者组成，因此我们首先通过了 http.createServer 来创建一个服务器，然后通过 server.listen() 的方法监听端口，当客户端发出请求时，服务器就会的回调函数就会i被调用，因此输出：

1
2
3
4
5

Server is running at http://localhost:8081/
GET:/
GET:/favicon.ico
GET:/
GET:/favicon.ico

HTTP 请求在发送服务器时，是一个字节一个字节的以数据流方式发送，HTTP 模块创建的 HTTP 服务器接受到完整的请求头后会调用函数，因此除了可以使用 request 对象访问请求头数据以外，还可以将此当作一个只读数据流来访问请求数据提

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const http = require('http')

http.createServer(function (req,res) {
    var body = []

    console.log(req.method)
    console.log(req.headers)

    req.on('data', function (chunk) {
        body.push(chunk)
    })

    req.on('end', function () {
        body = Buffer.concat(body)
        console.log(body.toString())
    })
}).listen(8081)

因此输出的是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

GET
{ host: 'localhost:8081',
  connection: 'keep-alive',
  'sec-ch-ua':
   '"Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"',
  'cache-control': 'no-cache',
  'sec-ch-ua-mobile': '?0',
  'user-agent':
   'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
  'postman-token': '9c86d3ea-3df2-9485-75e6-f8d2af8c0b03',
  accept: '*/*',
  'sec-fetch-site': 'none',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh-TW;q=0.9,zh;q=0.8,en-US;q=0.7,en;q=0.6' }

Response

客户端发送请求并接受到完整的服务端响应头时，就会调用回调函数，在回调函数中，可以通过 response 对象访问响应头外，还可以将 Response 当作一个只读数据流，其中最为主要的是 http.ServerResponse 所提供的类方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const http = require('http')

/*
    HTTP 状态码:  200
    <h1>Hello,world!</h1>
    请求头: true
 */
http.get('http://localhost:8081/', function (response) {
    var body = []

    console.log("HTTP 状态码: ",response.statusCode)

    response.on('data', function (chunk) {
        body.push(chunk)
    })

    response.on('end', function () {
        body = Buffer.concat(body)
        console.log(body.toString())
        console.log("是否已经接收完整的 HTTP 信息:" ,response.complete)
    })
})

HTTP/2

HTTP/2 是于 19999 年的 HTTP 1.1 的改进版（RFC 2616）后在 2014 年 12 月由 互联网工程任务组（IETF）内的 HTTPBIS（Hypertext Transfer Protocol Bis） 小组进行开发，并由 IETF 递交给 IESG 进行讨论，在 2015 年 5 月 正式批准（RFC 7540）

于 HTTP 1.1 相比支持了多路复用（Multiplexing）、首部压缩（Headers）、服务推送（Server Push） 等特点，有效减少了大量的开销。

服务器推送即允许服务器在客户端缓存中填充数据，通过服务器推送的机制来提前进行请求，但需要安装 http 2 模块

由于 http2 是一个内置模块，与 npm 上的 http2 无关

1
2
3
4
5
6
7
8
9
10

node/
├── package.json
├── package-lock.json
├── public
├── src
│   └── server.js
└── ssl
    ├── localhost-cert.pem
    └── localhost-privkey.pem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const http2 = require('http2');
const express = require('express')
const fs = require('fs');

const server = http2.createSecureServer({
    key: fs.readFileSync('./ssl/localhost-privkey.pem'),
    cert: fs.readFileSync('./ssl/localhost-cert.pem')
});
server.on('error', (err) => console.error(err));

server.on('stream', (stream, headers) => {
    // stream is a Duplex
    stream.respond({
        'content-type': 'text/html; charset=utf-8',
        ':status': 200
    });
    stream.write("<h1>Hello,world!</h1>")
    stream.end();
});

server.listen(8443);

之后即可通过 https://localhost:8443/ 直接进行访问，当然由于使用了 ssl 的原因 node 关闭了 http 的访问，因此只可以通过 https 进行，如果是自己生成的证书可能会报错，点击继续访问即可。

可直接通过 openssl 生成自己的本地证书

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj ‘/CN=localhost’
-keyout localhost-privkey.pem -out localhost-cert.pem

Node.js File System

Node.js fs(file system) 即是内置的文件系统模块，用于负责文件的到做以及读取等，可通过 console fs = require("fs") 直接进行引入，因此为了更详细的分清该模块所提供的 API，主要分为：“文件属性读写、文件内容读写、文件操作” 等三种。

fs 模块所提供的方法最大不同之处在于同时还提供了 异步、同步 两个方法，这体现在了 fs.readFile() 和 fs.readFileSync()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

```fs.readFileSync(path[, options])``` 用于返回 path 内容即同步 | Id | Name | Info | Type | | --- | ------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------- | | 1 | fs.readFile(path[, options], callback) | 用于异步读取文件 | 文件内容读写 | | 2 | fs.readFileSync(path[, options]) | 同步读取文件 | 文件内容读写 | | 3 | fs.read(fd, buffer, offset, length, position, callback) | 在异步模式下更加合理的读取文件 | 文件内容读写 | | | fd | 通过 ```fs.open()``` 所返回的文件描述 | | | | buffer | 数据写入缓冲区 | | | | offset | 缓冲区写入数据写入的偏移量 | | | | length | 需要读取的字节数 | | | | position | 文件读取的起始位置 | | | | callback | 回调函数 | | | | | err | 返回错误信息 | | | | bytesRead | 所读取的字节数 | | | | buffer | 缓冲区对象 | | 4 | fs.open(path[, flags[, mode]], callback) | 异步打开文件 | 底层文件操作 | | | path | 文件路径 | | | | flags | 文件的打开行为 | | | | | ```a``` | 如果文件不存在则创建文件 | | | | ```ax``` | 在 ```a``` 的基础上，如果文件路径不存在，就失败 | | | | ```a+``` | 如果文件不存在就创建 | | | | ```ax+``` | 在 ```a+``` 的基础上，如果文件路径不存在，则读取失败 | | | | ```r``` | 以读取的方式打开文件，如果文件不存在则异常 | | | | ```r+``` | 以读写模式打开文件，如果文件不存在就抛出异常 | | | | ```rs``` | 以同步的方式读取文件 | | | | ```rs+``` | 以同步的方式读取和写入文件 | | | | ```w``` | 以写入模式打开文件，文件不存在则创建 | | | | ```wx``` | 在 ```w``` 的基础上，如果文件路径存在，文件将会写入失败 | | | | ```w+``` | 以读写模式打开文件，如果文件不存在则创建 | | | | ```wx+``` | 在 ```w+``` 的基础上，如果文件路径存在，则文件写入失败 | | | mode | 打开的权限 | | | | callback | 回调参数 | | | 5 | fs.writeFile(file, data[, options], callback) | 通过异步的方式写入文件 | 文件内容读写 | | | file | 文件名 | | | | data | 需要写入的数据 | | | | options | 一个参数对象，包含了编码模式（utf-8）以及 flags（w，写入模式打开文件，文件不存在则创建） | | | 6 | fs.writeFileSync() | 通过同步的方式写入文件 | 文件内容读写 | | 7 | fs.stat() | 用于读取文件属性 | 文件属性读写 | ## readFile at readFileSync 读取文件 ### fs.readFile() ```js const fs = require('fs') fs.readFile('data.txt', 'utf-8', function (err, data) { if (err) { console.log(err) } else { // File system! console.log(data.toString()) } })

data.txt

File system!

1
2
3
4
5
6
7
8
9
10
11
12

这主要涉及到 ```err``` 和 ```data``` 两个参数，后者为 ```undefined```，也就是其 ```path``` 内的数据以字符串的形式进行读取，当发生错误时将会输出 ```err``` 对象。

### fs.readFIleSync()

```js
const fs = require('fs')

var data = fs.readFileSync('data.txt', 'utf-8')

// File system!
console.log(data)

通常默认情况下单个 fs.readFIleSync() 参数是不支持输出错误的，因此我们还需要输出函数的方式输出数据，可配合 try...catch 的方式来实现错误输出：

1
2
3
4
5
6
7
8

const fs = require('fs')

try {
    var data = fs.readFileSync('data.txt', 'utf-8')
    console.log(data)
} catch (err) {
    console.log(err)
}

fs.read(fd, buffer, offset, length, position, callback) at fs.open and fs.close

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

```js
const fs = require('fs')
const buf = new Buffer.alloc(1024)

/*
    准备打开文件
    文件打开成功
    开始准备读取文件
    文件内容为： Hello, File system
    文件关闭成功
 */

console.log("准备打开文件")

fs.open('data.txt', 'r+', function (err,fd) {
    if (err) {
        console.log(err)
    }
    console.log('文件打开成功\n开始准备读取文件')
    fs.read(fd, buf, 0, buf.length, 0, function (err, bytesRead) {
        if (err) {
            console.log(err)
        }

        if (bytesRead>0) {
            console.log('文件内容为：',buf.slice(0,bytesRead).toString())
        }

        fs.close(fd, function (err) {
            if (err) {
                console.log(err)
            }
            console.log('文件关闭成功')
        })
    })
})

fs.open()

1
2
3
4
5
6
7
8
9

const fs = require('fs')

// 文件打开成功
fs.open('data.txt', 'r+', function (err, fd) {
    if (err) {
        return console.error(err)
    }
    console.log("文件打开成功")
})

fs.writeFile()

1
2
3
4
5
6
7
8
9

// 写入成功： Hello, File system
fs.writeFile('data.txt', data, function (err) {
    if (err) {
        console.log(err)
    } else {
        var write = fs.readFileSync('data.txt', 'utf-8')
        console.log('写入成功：' ,write)
    }
})

fs.writeFileSync()

.fs.writeFileSync() 是 fs.writeFile() 的同步方法，同样也可以使用 try...catch 来支持返回 err 信息。

1
2
3
4
5
6
7
8
9
10
11
12
13

const fs = require('fs')

var data = "Hello, File system"

fs.open('data.txt','r+', function (err,fd) {
    if (err) {
        return console.error(err)
    } else {
        fs.writeFileSync('data.txt', data)
					// 写入成功 Hello, File system
        console.log('写入成功', data )
    }
})

获取文件属性 (fs.stat())

“获取文件属性”是指文件的大小、创建时间、修改时间等信息，可以通过 fs.stat(path[, options], callback) 来进行实现，在这个方法中存在着 fs.stats 类，用于获取文件的属性，常用的为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const fs = require('fs')

/*
    是否是文件: true
    文件大小: 18
    创建时间: 2021-09-01T02:23:04.637Z
    修改时间: 2021-09-01T02:23:04.637Z
    最后访问: 2021-09-01T02:23:04.949Z
 */
fs.stat('data.txt', function (err, stat) {
    if (err) {
        console.log(err)
    } else {
        console.log("是否是文件:", stat.isFile())
        if (stat.isFile()) {
            console.log('文件大小:', stat.size)
            console.log('创建时间:', stat.birthtime)
            console.log('修改时间:', stat.mtime) // stat.ctime
            console.log('最后一次访问时间:', stat.atime)
        }
    }
})

Node.js Buffer

Buffer

缓冲区是内存区域，和直接与内存交互的编程语言 C、C++、Go 等相比，JavaScript 对这个操作很微乎其微，因此为了实现与内存区域打交道，Buffer 由此而生。

Buffer class

Buffer 类主要的作用就是一个专门用于存放二进制数据的缓存区，是 Node 专门定义的一个类，用于弥补 JavaScript 自由的字符串类型无法满足大量二进制数据处理。

Buffer 是 Node 的一个核心库，因此为 Node 带来了另一种原始的数据存储方法（二进制），让 Node 处理 二进制数据。

所以 Buffer 库主要的用处就是需要 Node 处理 I/O 的时候，就可以通过 Buffer 库进行一个处理，当然也可以进行字符编码或数据类型的转换。

缓冲区可以通过使用 Buffer.[form(),alloc(),allocUnsafe()] 方法进行构建，这也涉及到了 Buffer 方法：

buffer.alloc

1
2
3
4
5
6
7
8
9
10

const buf = Buffer.alloc(10, 1)

// <Buffer 01 01 01 01 01 01 01 01 01 01>
console.log(buf)

// 返回字节的长度
var buflen = Buffer.byteLength(buf)

// 10
console.log(buflen)

创建一个大小为 10 的缓存区，且用 1 进行填充，并通过 Buffer.byteLength 来查询字节的长度。

与 length 的区别是 byteLength 不会考虑用于将字符串转换为字节编码

buffer.fill(arrayBuffer[, byteOffset[, length])

1
2
3
4
5
6
7
8
9
10
11
12
13

// 通过 Unit8Array 创建一个数组
const arrA = Uint8Array.from([0x61, 0x62, 0x63, 0x64])

const arrB = new Uint8Array(arrA.buffer, 0,3)

const buf = Buffer.from(arrB.buffer)

// abcd
console.log(buf.toString())

// or
const buff = Buffer.from([0x61, 0x62, 0x63, 0x64])
console.log(buff.toString())

buf.toJSON()

1
2
3
4
5
6
7
8
9
10
11
12
13

// 通过 Unit8Array 创建一个数组
const arrA = Uint8Array.from([0x61, 0x62, 0x63, 0x64])

const arrB = new Uint8Array(arrA.buffer, 0,3)

const buf = Buffer.from(arrB.buffer)

// { type: 'Buffer', data: [ 97, 98, 99, 100 ] }
console.log(buf.toJSON())

// or
const buff = Buffer.from([0x61, 0x62, 0x63, 0x64])
console.log(buff.toJSON())

buffer.compare(target[,target1,target…])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const buf1 = Buffer.alloc(10,1)
const buf2 = Buffer.alloc(10,1)

// 0
var com = Buffer.compare(buf1,buf2)
console.log(com)

const buf3 = Buffer.alloc(10)
const buf4 = Buffer.alloc(10,1)

// -1
var com1 = Buffer.compare(buf3,buf4)
console.log(com1)

const buf5 = Buffer.alloc(10,1)
const buf6 = Buffer.alloc(10,1)

// 1
var com2 = Buffer.compare(buf5,buf6)
console.log(com2)

buffer.concat()

1
2
3
4
5
6
7
8
9
10

const buf = Buffer.alloc(3)
const buf1 = Buffer.alloc(1)
const buf2 = Buffer.alloc(1)

var arr = [buf, buf1, buf2]

var con = Buffer.concat(arr)

// 5 <Buffer 00 00 00 00 00>
console.log(Buffer.byteLength(con), con)

buffer.entries()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const buf = Buffer.from('hello,world!')

/*
    [ 0, 104 ]
    [ 1, 101 ]
    [ 2, 108 ]
    [ 3, 108 ]
    [ 4, 111 ]
    [ 5, 44 ]
    [ 6, 119 ]
    [ 7, 111 ]
    [ 8, 114 ]
    [ 9, 108 ]
    [ 10, 100 ]
    [ 11, 33 ]
 */
for (var point of buf.entries()) {
    console.log(point)
}

// 104
console.log(buf[0])

1
2
3
4
5
6
7
8
9
10
11
12
13

#### buffer.fill

```js
const buf = Buffer.alloc(5).fill('hello')

// hello
console.log(buf.toString())

// or
const buf2 = Buffer.alloc(5,'hello')
console.log(buf2.toString())

buffer.includes(values)

1
2
3
4
5

const buf = Buffer.from('This is Buffer')

// true false
console.log(buf.includes('is'), buf.includes('as'))

buf.slice(start[,end])

1
2
3
4
5

const buf = Buffer.from('abcd')
const sli = buf.slice(0, 2)

// ab
console.log(sli.toString())

buf.write(string[,offset,length,encoding])

1
2
3
4

const buf = Buffer.alloc(6);
const len = buf.write('buffer',0,6, 'utf8')

console.log(`byte: ${buf} length: ${len}`)

字符编码转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const buffer = Buffer.from('hello,world!', 'ascii')

// hello,world!
console.log(buffer.toString('ascii'))

/**
 * 104 101 108 108
 * h -> 104
 * e -> 101
 * l -> 108
 * l -> 108
 */
console.log(buffer[0],buffer[1],buffer[2],buffer[3])

缓冲区是一个字节数据，因此可以像数组一样进行访问，除此它还支持数种编码的转换：

可以通过使用 buffer.isEncoding 方法来进行判断 Buffer 是否支持该编码类型。

Node.js Model 引入流程

Node model 可以相互进行调用，Node.js 为此提供了一个简单的模块系统，这可以内置的也可以是通过 npm 进行安装的，因此 Node.js 提供了 exports 和 require 两个对象，其中 exports 用于模块公开的接口，而 require 则用于获取模块的 exports 对象：

1
2
3
4
5
6
7
8
9
10

function Hello() {
    var name;
    this.setName = function (thyName) {
        name = thyName;
    };
    this.sayHello = function () {
        console.log('Hey,' + name);
    }
}
module.exports = Hello;

通过 exports 对象将 Hello 对象本身，因此在通过 require 对象进行引入的时候，就会输出 Hello 函数。

1
2
3
4

var Hello = require('./modelName')
hello = new Hello()
hello.setName('This is vievs file!')
hello.sayHello()

在 Node.js 模块中，模块主要分为 核心模块，这是 Node.js 所提供的模块，而另一个则是用户所编写的模块，被称之为 文件模块。这之间的区别就是核心模块部分在 Node 编译的过程中，同时编译了二进制的执行文件，所以在 Node 进程启动时，核心模块就会被加载到内存中，因此和因模块在引入的时候，文件定位以及编译执行就会被省略掉。

但用户所编写的文件模块则需要通过 查找路径，文件定位，编译执行 这三个流程，并在运行时进行动态加载，因此比较慢。所以和核心模块比起来，速度是自然赶不上人家内置的。

require 文件查找策略

文件缓存区

对于 require 的文件缓存区主要的作用就是会优先从文件模块中加载已经存在的模块这也就说明了 Node 对引入过的模块都会进行缓存，以减少第二次使用时的加载时间。

但与浏览器缓存静态脚本文件不同的是，Node.js 所缓存的是编译之后的对象，无论是核心模块还是文件模块，对于二次加载都一律采用缓存优先的方式进行。

不同之处在于核心模块的检查优于文件模块的缓存检查

原生模块加载

原生模块的加载仅次于检查文件缓存区是否存在，因此通过 require 解析完文件名之后，检查该模块是否在原生模块中。

如 http 模块，虽然会在项目目录下存在 http/http.js/http.node/http.json 文件，但 http 模块不会从这些文件中加载，而是从原生模块中进行加载。

因此原生模块内同样有也有一个缓存区，如缓存区没有被加载过，就会调用原生模块的加载方式进行加载和执行。

文件加载

当文件模块在缓存中并不存在是，而且还是原生模块的时候，require 方法所传入的参数就会被 Node.js 解析，并从文件系统中加载到实际的文件。对于没一个被加载的文件模块，创建这个模块对象的时候就会生成一个 paths 属性，也就是 /node_modules，因此我们可以直接通过 console.log(module.paths) 来根据当前文件的路径计算得到 module path。

1
2
3
4
5
6
7

[ '/home/kunlun/Development/Web/Demo/node/node_modules',
  '/home/kunlun/Development/Web/Demo/node_modules',
  '/home/kunlun/Development/Web/node_modules',
  '/home/kunlun/Development/node_modules',
  '/home/kunlun/node_modules',
  '/home/node_modules',
  '/node_modules' ]

从当前文件目录内开始查找 node_modules 目录，然后依次进入查找父目录下的 node_modules，以此循环迭代到根目录下的 node_modules 目录。

如果 ```require`` 指向的是绝对路径的文件，查找时就直接作为当前的路径进行使用，如果不是则进入查找的流程。以 module_path 中取出地一个目录作为查找的基准：

1. 直接尝试从当前目录进行查找，如果存在则结束流程，反而继续进行查找，并进入下一阶段
2. 尝试添加扩展名后缀进行查找，如果存在就结束查找，否则进入下一个阶段
3. 尝试将 require 的参数作为一个包进行查找，读取项目目录下的 package.json 文件
4. 尝试添加扩展名或查找文件，如果存在就结束流程，否则进入下一个阶段
5. 如果继续失败，则取出 module path 中下一个目录作为查找的基准，循环 1～5 步骤
6. 如果仍然失败，则一直循环 1～6 步骤，知道 module path 中最后一个值
7. 如果持续失败，则抛出异常。

Node.js at ECMAScript

首先我们需要知道 ECMAScript 是一种由 Ecma 国际（Ecma International）根据其标准定义的脚本语言规范，主要在 JavaScript 上运用广泛，而 ECMAScript 是在 2015 年 6 月所正式发布，这使得 JavaScript 可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 前身为欧洲计算机制造商协会（European Computer Manufacturers Association，ECMA），是一个国际性会员制度的信息和电信标准组织。

因此遵循 ES6 中的 JS 语法也是 Node.js 基础之一，因为 Node.js 本质上还是 JavaScript 所以通过了解并学习 ES6 中的方法可以快速掌握 JS。

数组

array.push

1
2
3
4
5
6
7
8
9
10

const arr = ['One','Two','Three']

// 3
console.log(arr.push())

// To arr add Four
arr.push('Four')

// [ 'One', 'Two', 'Three', 'Four' ]
console.log(arr)

array.pop

1
2
3
4
5
6
7
8
9
10

const arr = ['One','Two','Three']

// [ 'One', 'Two', 'Three' ]
console.log(arr)

// 删除最后一个元素
arr.pop()

// 访问最后一个元素：Two
console.log(arr + ' 当前数组最后一个元素是：' + arr.pop())

array.shift

1
2
3
4
5
6
7
8
9
10

const arr = ['One','Two','Three']

// [ 'One', 'Two', 'Three' ]
console.log(arr)

// 删除 One
arr.shift()

// 第一个元素为 Two
console.log(arr + ' 当前数组第一个元素是：' + arr.shift())

array.unshift

1
2
3
4
5
6
7

const arr = ['One','Two','Three']

// 4
console.log(arr.unshift('Start'))

// [ 'Start', 'One', 'Two', 'Three' ]
console.log(arr)

array.splice(start,deleteCount)

1
2
3
4
5
6
7

const arr = ['One','Two','Three']

// [ 'Two', 'Three' ]
console.log(arr.splice('1','3'))

// [ 'One' ]
console.log(arr)

array.concat

1
2
3
4
5
6
7
8
9
10

const arr = ['One','Two','Three']

// 新增 Four,Five
const arr__ = ['Four','Five']

// 合并两个数组
const __arr = arr.concat(arr__)

// [ 'One', 'Two', 'Three', 'Four', 'Five' ]
console.log(__arr)

array.split

1
2
3
4

const arr = 'Hello,world!'

// [ 'Hello,world!' ]
console.log(arr.split())

array.sort()

采用了原地算法（in-place algorithm），即不需要借助额外的数据结构就可以对输入的数据进行变幻，而 array.sort() 是根据 UTF-16 代码单元值序列进行构建的，因此还是取决与代码值的顺序，无法保证排序时间和空间的复杂性。

1
2
3
4
5
6
7
8
9
10

const arr = ['1','3','2','4','5','6']

// 默认情况下是从小到大进行排序
console.log(arr.sort())

// 将排序顺序改为从大到小
const arr__ = arr.sort((a,b) => b-a);

// [ '6', '5', '4', '3', '2', '1' ]
console.log(arr)

array.reverse

1
2
3
4
5
6
7
8
9
10

const arr = ['One','Two','Three','Fire','Five']

// Array:  [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
console.log('Array: ', arr)

// 将数组反转
const reversed = arr.reverse()

// Reverse:  [ 'Five', 'Fire', 'Three', 'Two', 'One' ]
console.log('Reverse: ', reversed)

array.forEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const arr = ['One','Two','Three','Fire','Five']
const arr_ = ['One','Two','Three','Fire','Five']

/*
index:0 value:One  array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:1 value:Two  array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:2 value:Three  array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:3 value:Fire  array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:4 value:Five  array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
 */
arr.forEach((value, index, array) => {
    console.log(`index:${index} value:${value}  array:`, array)
})

/*
index:0 value:One array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:2 value:Two array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:4 value:Three array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:6 value:Fire array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
index:8 value:Five array: [ 'One', 'Two', 'Three', 'Fire', 'Five' ]
 */
arr_.forEach((value, index, array) => {
    index = index * 2
    console.log(`index:${index} value:${value} array:`, array)
})

array.map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

const arr = ['One','Two','Three','Fire','Five']
const arr_ = [1,2,3,4,5,6]

/*
index:0 value:1  array: NaN
index:1 value:2  array: NaN
index:2 value:3  array: NaN
index:3 value:4  array: NaN
index:4 value:5  array: NaN
index:5 value:6  array: NaN
undefined
 */
const foreach = arr_.forEach((value, index, array) => {
    array = array * 2
    console.log(`index:${index} value:${value}  array:`, array)
})

console.log(foreach)

/*
index:0 value:1 array: NaN
index:1 value:2 array: NaN
index:2 value:3 array: NaN
index:3 value:4 array: NaN
index:4 value:5 array: NaN
index:5 value:6 array: NaN
[ undefined, undefined, undefined, undefined, undefined, undefined ]
 */
const map = arr_.map((value, index, array) => {
    array = array * 2
    console.log(`index:${index} value:${value} array:`, array)
})

console.log(map)

array.filter

1
2
3
4
5
6
7
8
9
10
11
12

const arr = ['One','Two','Three','Fire','Five']
const arr_ = [1,2,3,4,5,6]

// [ 1, 2, 3 ]
let starr = arr_.filter((i,v) => i <= 3)

console.log(starr)

// [ 'One' ]
let starr_ = arr.filter((i,v) => v <= 0)

console.log(starr_)

array.slice(start,end)

1
2
3
4
5
6
7

const arr = ['One','Two','Three','Fire','Five']

// [ 'Three', 'Fire', 'Five' ]
console.log(arr.slice(2))

// [ 'One', 'Two', 'Three' ]
console.log(arr.slice(0,-2))

array.every(i,v)

1
2
3
4
5
6

const arr = ['One','Two','Three','Fire','Five']

// true
let ifarr = arr.every((i,v) => v < 10)

console.log(ifarr)

array.some(i,v)

1
2
3
4
5
6
7
8
9
10
11

const arr = ['One','Two','Three','Fire','Five']

// false
let ifarr = arr.some((i,v) => i < 30)

console.log(ifarr)

const arr_ = [1,2,3,4,5,6,7,8,9,10]

// true
console.log(arr_.some(arr_ => arr_ >= 10 ))

array.reduce(previousValue, currentValue)

1
2
3
4
5
6
7
8

const arr = [1,2,3,4,5]

// 20
let arr_ = arr.reduce((previousValue, currentValue) =>
    previousValue + currentValue,5
)

console.log(arr_)

Array

Array.from()

1
2
3
4

const arr = 'hey'

// [ 'h', 'e', 'y' ]
console.log(Array.from(arr))

Array.of()

1
2
3
4

const arr = 'hey'

// [ 'hey' ]
console.log(Array.of(arr))

array.copyWithin(target, start, end)

1
2
3
4
5
6
7
8
9

const arr = ['One','Two','Three','Fire','Five']

/** 用于将当前位置的元素复制到目标位置，并覆盖原来的元素
 * target 为目标位置（0为开始） ·「1」
 * start 是最初的位置 ·「0」
 * end 是结束的位置   ·「1」
 * [ 'One', 'One', 'Three', 'Fire', 'Five' ]
 */
console.log(arr.copyWithin(1,0,1))

array.find(index, value, array)

1
2
3
4
5
6
7
8
9
10
11

const arr = ['One','Two','Three','Fire','Five']

/** 根据表达式找出符合条件的数组成员
 * @type {string}
 * @private index   索引
 * @private value   元素
 * @private array   数组
 * @return One
 */
let arr_ = arr.find((index, value, array) => index => 1)
console.log(arr_)

array.findIndex(index, value, array)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const arr = ['One','Two','Three','Fire','Five']

/** 根据表达式找出符合条件的数组成员，如果未找符合要求的则返回 "-1"
 * @type {number}
 * @private index   索引
 * @private value   元素
 * @private array   数组
 * @return -1
 */
let arr_ = arr.findIndex((index, value, array) => value > 199)
console.log(arr_)

/** 根据表达式找出符合条件的数组成员
 * @type {string}
 * @private index   索引
 * @private value   元素
 * @private array   数组
 * @return undefined
 */
let arr_find = arr.find((index, value, array) => value > 199)
console.log(arr_find)

array.fill(value, start, end)

1
2
3
4

const arr = ['One','Two','Three','Fire','Five']

// [ 'Start', 'Two', 'Three', 'Fire', 'End' ] [ 'Start', 'Two', 'Three', 'Fire', 'End' ]
console.log(arr.fill('Start',0,1),arr.fill('End',4,5))

array.includes(Value)

1
2
3
4
5
6
7

const arr = ['One','Two','Three','Fire','Five']

/** 判断数组中是否包含 Value
 * One: true
 * Start: false
 */
console.log('One:',arr.includes('One'),'\nStart:', arr.includes('Start'))

for……in

array.keys()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const arr = ['One','Two','Three','Fire','Five']

let toarr = arr.keys()

/** 遍历数组键名
     0
     1
     2
     3
     4
 */
for (let keys of toarr) {
    console.log(keys)
}

array.values()

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const arr = ['One','Two','Three','Fire','Five']

let toarr = arr.values()

/** 遍历数组键值
     One
     Two
     Three
     Fire
     Five
 */
for (let values of toarr) {
    console.log(values)
}

array.entries()

1
2
3
4
5
6
7
8
9
10
11
12
13
14