大前端基础 2

发表于 更新于 分类于 本文字数： 1.5k 阅读时长 ≈ 6 分钟
本文主要介绍 ES6 中的新特性，以及 NPM 的使用。

对象初始化简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ES5
var info = {
    title: '大前端基础',
    link: 'https://www.baidu.com',
    description: '大前端基础知识'
    go: function() {
        console.log('go');
    }
}

// ES6
var title = '大前端基础';
var link = 'https://www.baidu.com';
var description = '大前端基础知识';
let info = {
    title,
    link,
    description
    go() {
        console.log('go');
    }
}

案例

点击展开案例
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象初始化简写</title>
</head>
<body>
    
    <form action="" id="form">
        <p>Account: <input type="text" name="account" id="account"></p>
        <p>Password: <input type="password" name="password" id="password"></p>
        <p><input type="button" value="Submit" id="loginbtn"></p>

    <script>

        // document.getElementById('loginbtn').onclick = function() {}

        $('#loginbtn').click(function() {
            let account = $('#account').val();
            let password = $('#password').val();
            // async request
            $.ajax({
                url: 'http://localhost:8080/login',
                method: 'POST',
                data: {
                    account,
                    password
                },
                success: function(data) {
                    console.log(data);
                }
                // 这里也能简写
                // success(data) {
                //     console.log(data);
                // }
            });
        });

    </script>

</body>
</html>

在以后的 vue.js 中，我们会经常使用这种简写方式。

对象结构

对象结构是 ES6 中的一个新特性，可以让我们快速的从一个对象中获取属性值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 对象以 key-value 的形式存储数据，获取对象属性和方法的方式有两种
// 1. 点语法
// 2. 方括号语法 []

// 通过点语法获取对象属性
console.log(info.title);
// 通过方括号语法获取对象属性
console.log(info['title']);

// ES6 中的对象结构
// 通过对象结构获取对象属性（一种快速获取对象属性的方式）
let { title, link, description } = info;
// 而在 ES5 中，我们需要这样获取对象属性
// let title = info.title;
// let link = info.link;
// let description = info.description;
console.log(title, link, description);

为什么对象取值要使用两种方式？

因为对象的属性名不一定是一个合法的标识符，比如：info['title']，这种方式就可以获取到对象的属性值。

对象传播操作符

对象传播操作符是 ES6 中的一个新特性，可以让我们快速的将一个对象的属性和方法传播到另一个对象中。

1
2
3
4
5
6
7
8
9
// 对象传播操作符
let person = {
    name:"Yuzhii"
    addres:"China"
    id:"0718"
}

// 解构
let { name, addres, ...person2 } = person;

案例

点击展开案例

在 java 后台

1
2
3
4
5
// 数据格式： 
var userPage = {page: 10, users: [{}, {}],pageNo: 1, pageSize: 100, total: 100}
async request
$.post('http://localhost:8080/user/serch', function(res) {
    res = {page: 10, users: [{}, {}],pageNo: 1, pageSize: 100, total: 100}})

前端

1
2
var userPage = {page: 10, users: [{}, {}],pageNo: 1, pageSize: 100, total: 100}
let { page, users, ...userPage2 } = userPage;

数组 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
// 对 arr 每个元素进行 *2 操作
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(function(item) {
    return item * 2;
});

// 传统的 for 循环
let arr3 = [];
for (let i = 0; i < arr.length; i++) {
    arr3.push(arr[i] * 2);
}

// map 处理对象数据
let users = [{age: 18, id: 1}, {age: 19, id: 2}, {age: 20, id: 3}];
let users2 = users.map(function(ele) {
    ele.age = ele.age + 1;
    return ele;
});
// 这样就可以将 users 中的每个用户的年龄都加 1
// 以下是简写
let users3 = users.map(ele => {
    ele.age = ele.age + 1;
    return ele;
});

数组 Reduce

什么是 reduce？

1
2
3
4
5
6
7
8
9
10
11
let arr = [1, 2, 3, 4, 5];
// reduce 方法接收两个参数
arr.reduce(function(prev, cur) {
    // prev 是上一次调用回调函数时的返回值
    // cur 是当前正在处理的数组元素
    // reduce 方法的返回值会作为下一次调用回调函数的 prev
    return prev + cur;
}, 0);
// 0 是 reduce 方法的第二个参数，表示 prev 的初始值
// 如果不传第二个参数，prev 的初始值就是数组的第一个元素
// reduce 方法的返回值就是最后一次调用回调函数的返回值

例子

1
2
3
4
5
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr2.reduce(function(prev, cur) {
    return prev + cur;
}, 0);
console.log(sum); // 55

NPM

NPM (Node Package Manager) 是 Node.js 的包管理工具，可以用来下载和管理第三方包。

作用：

  • 快速构建项目

  • 快速安装第三方包

官网

快速构建项目

打开要构建项目的文件夹，然后在命令行中输入以下命令

1
2
3
4
# 初始化项目
npm init
# 会要求输入项目名称、版本号、描述等信息
# 初始化完成后，会生成一个 package.json 文件

快速管理第三方包

这里以 jquery 为例在项目文件夹下，打开命令行

安装

1
2
3
4
# 安装第三方包
npm install jquery
# 安装完成后，会在当前目录下生成一个 node_modules 文件夹
# node_modules 文件夹中存储了 jquery 包的所有文件

通过 npm 安装的第三方包，会被记录在 package.json 文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "npm demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" 
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1"
  }
}

不用去记住 json 的语法，只需要知道 dependencies 中存储了当前项目中安装的第三方包的信息即可。

技巧

因为 npm install abc abd abe adf ... 安装多个包需要很久，我们可以直接编辑 package.json 到当前项目的根目录，然后在命令行中输入 npm install，这样就可以快速安装项目中的所有第三方包。

或许有人疑问为何不直接拷贝 node_modules 文件夹到项目中，这样不就可以了吗？这样做是不行的，因为 node_modules 文件夹中存储的不仅仅是第三方包，还有第三方包的依赖包，这些依赖包也是必须的。其次，这些文件数量相当巨大。

使用

require() 函数用来加载第三方包

1
2
// 加载 jquery 包
let $ = require('jquery');

技巧

国内使用 npm 下载第三方包速度很慢，或因为 DNS 污染甚至无法安装，我们可以使用淘宝镜像来下载第三方包。cnpm 是淘宝镜像提供的命令行工具，可以用来下载第三方包。阿里系为数不多的良心产品。😉

1
2
3
4
# 全局安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装完成后，就可以使用 cnpm 命令来下载第三方包了
cnpm install jquery

其他命令

更多命令可以通过 npm --help 查看

卸载

1
2
# 卸载 jquery 包
npm uninstall jquery

更新

1
2
# 更新 jquery 包
npm update jquery

查看

1
2
# 查看 jquery 包的版本
npm view jquery version

查看当前项目中安装了哪些第三方包

1
2
# 查看当前项目中安装了哪些第三方包
npm list

指定版本号

1
2
# 安装 jquery 3.4.1 版本
npm install [email protected]