当前位置： 首页 > news >正文

前端进阶——ES6

news 来源：原创 2024/5/19 22:57:49

一、node.js

课件笔记_学相伴 - 大前端进阶 - 篇章学习
官网： http://nodejs.cn/

1、介绍：

  • Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
  • 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
  • Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2、入门：

案例一：模拟java中的servlet

参考：https://www.npmjs.com/package/mysql
1：安装mysql依赖

npm install mysql

// 导入模块是require 就类似于import java.io 
const http = require('http');
// 1: 创建一个httpserver服务
http.createServer(function(request,response){
    // 浏览器怎么认识hello server!!! 
    response.writeHead(200,{'Content-type':'text/plain'}); //这句话的含义是：告诉浏览器将
    // 以text-plain去解析hello server 这段数据。
    // 给浏览器输出内容
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 2: 监听一端口8888
// 3: 保存然后启动运行服务 node httpserver.js
// 4: 在浏览器访问http://localhost:8888

在这里插入图片描述

案例二：连接MySQL数据库并查询数据

//导入mysql依赖包，mysql属于第三方的模块就类似于java.sql一样的道理
// 1、创建一个MySQL的Connrction对象
var mysql = require("mysql");
// 2、配置数据连接的信息
var connection = mysql.createConnection({
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"1234qwer",
    database:"testdb"
});
// 3、开辟连接
connection.connect();
// 4、执行curd
connection.query("select * from student",function(error,results,fields){
    // 如果查询出错，直接抛出
    if(error)throw error;
    // 查询成功
    console.log("results=",results);
});
// 5、关闭连接
connection.end();
// 6、运行查看效果

在这里插入图片描述
遇到的问题：

Client does not support authentication protocol requested by server; consider upgrading MySQL client’

解决办法：
导致这个错误的原因是，目前，最新的mysql模块并未完全支持MySQL 8的“caching_sha2_password”加密方式，而“caching_sha2_password”在MySQL 8中是默认的加密方式。
登录上数据库
输入以下指令，重新修改数据库密码，并指定加密方式
alter user ‘root’@‘localhost’ identified with mysql_native_password by ‘password’;
flush privileges;

二、ES6的语法：

1、let和const命令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //let和const解决
        // 1、var的变量穿透问题
        // 2、常量修改的问题
        for(i=0;i<5;i++){
            console.log(i)
        }
        // 这里就会造成变量穿透,i=5
        console.log(i);

        for(let a=0;a<5;a++){
            console.log(a)
        }

        // 这里就bu会造成变量穿透,执行到这里时会报错
        console.log(a);

        // 这个Π的值，是固定的不用修改的，如果用var定义就可以被修改
        var PI = Math.PI;

        // 如果用const定义为常量就不能被修改如果强制修改会报错
        const PI1 = Math.PI;

        // 在实际开发和生产中，如果是下程序，uniapp或者一些脚手中，建议使用let和const
        // 但如果是web开发，建议使用var，因为一些低版本的浏览器还是不支持let和const

    </script>
</body>
</html>

2、模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 字符串会牵涉到动态部分
        var person = {
            name:"jjl",
            way:"上网自学",
            content:"前端"
        };

        let address = "传统拼接方式——我是"+person.name+"正在"+person.way+"后端开发和"+person.content;
        console.log(address);

        //es6的语法模板字符串语法
        let address2 = `ES6拼接方式——我是${person.name}正在${person.way}后端开发和${person.content}`;
        console.log(address2);
    </script>
</body>
</html>

在这里插入图片描述

3、函数默认参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //函数默认参数
        function sum(a,b){
            return a+b;
        }
        //调用函数并传参
        var result = sum(100,100);
        console.log("result = ",result);

        //由于参数的默认值为undefined,所以在没有传参时可能会报错，所以可以给一个默认参数值
        function sum2(a=100,b=100){
            return a+b;
        }
        //调用函数并传参，当没给参数传参时，就会走参数的默认值
        var result2 = sum2(100);
        console.log("result = ",result2);

    </script>
</body>
</html>

4、箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>箭头函数</title>
</head>
<body>
    <script>
        // 箭头函数
        // 它也是一种函数的定义，它简化定义仅此而已。
        // 步骤：1：去掉function  2: 括号后面加箭头。
        // 无参数的函数
        //var sum = function(){
        //}
        // 箭头改造如下
        //var sum = ()=>{}
        // 有参数
        // 第一种情况  一个参数的如下
        //var sum2 = function(a){
        //};
        // 箭头改造如下
        var sum2 = (a)=>{};
        var sum2 = a=>{
            return a;
        };
        // 第二种情况 二个参数的以上,记住括号一定要加
        //var sum3 = function(a,b){
        //    return a + b;
        //};
        // 箭头改造如下
        var sum3 = (a,b)=>{
            return a + b;
        };
        // 第三种情况，如果没有逻辑体，只有返回值可以简化如下
        //var sum4 = function(a,b){
        //    return a + b;
        //};
        // 箭头改造如下
        var sum4 = (a,b)=>a+b
        // 执行
        console.log(sum2(100));
        console.log(sum3(100,100));
        console.log(sum4(100,100));
    </script>
</body>
</html>

5、对象初始化简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //传统对象定义
        let info1 = {
            title : "xxb",
            link : "https://www.",
            go:function(){
                console.log("上班")
            }
        }

        //使用es6简写
        //因为对象是key：value存在
        // 1、如果key和变量的名字一致，可以指定定义一次即可
        // 2、如果value是一个函数，可以把 :function 去掉，只剩下（）即可
        var title = "xxb";
        var link = "https://www.";
        let info2 = {
            title,
            link,
            go(){
                console.log("上班");
            }
        };
    </script>
</body>
</html>

对象简写案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <p>账号</input>:</input><input type="text" id="account"></p>
        <p>mima</input>:</input><input type="password" id="password"></p>
        <p><input type="button" value="登陆" id="loginbtn"></p>
    </form>

    <script>
        // 使用jQuery的调用方式
        $("#loginbtn").on("click",function(){
            var account = $("#account").val();
            var account = $("password").val();
            // 对象简写的使用场景
            var params = {account,password};
            // 执行异步请求
            $.ajax({
                type:"post",
                url:"xxx",
                data:params,
                success:function(){
                    
                }
            })
        })
    </script>
</body>
</html>

6、对象结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var title = "xxb";
        var link = "https://www.";
        let info2 = {
            title,
            link,
            go(){
                console.log("上班");
            }
        };
        // 获取对象属性的方式
        // 方法一：通过.方式获取
        console.log(info2.link);
        // 方法二：通过[]的方式
        console.log(info2["title"]);

        // 方式三：es6对象结构获取
        // 获取info2对象中的title和link属性
        var {title,link} = info2;
    </script>
</body>
</html>

7、传播操作符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person = {
            name:"jjl",
            address:"成都",
            link:"https//",
            phone:177,
            go(){
                console.log("上班")
            }
        };

        // 使用se6传播操作符
        // var {name,address,...person3} 表示会将对象person里面的除name和address的其他属性全部传入到对象person3中
        var {name,address,...person3} = person;
    </script>
</body>
</html>

8、数组map和reduce()

1、map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [1,2,3,4,5,6,7];
        let newarr = [];
        // 用传统方式遍历数组
        for(let i=0;i<arr.length;i++){
            newarr.push(arr[i]*2)
        }

        // 使用map ————自带的循环，并且会把处理的值回填到对应的位置
        var newarr2 = arr.map(function(ele){
            return ele*2;
        })
        // 使用箭头函数简写
        var arr3 = arr.map(ele=>ele*2);

        // map处理对象的数据
        var users = [{age:10,name:"小米"},{age:13,name:"小鹏"},{age:15,name:"小刀"}];
        // 需求，将users对象中的每一个age加1
        var newusers = users.map(function(ele){
            ele.age=ele.age+1;
            return ele;
        });
        console.log(newusers);
    </script>
</body>
</html>

2、reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [1,2,3,4,5,6,7];
        var result = arr.reduce(function(a,b){
            return a+b;
        })
        // 这里的意思是：
        // 第一次循环：a=1,b=2
        // 第二次循环：a=3,b=3
        // 第三次循环：a=6,b=4
        // 依此类推，直到循环结束
        console.log("result = ",result);//结果55
    </script>
</body>
</html>

三、NPM包管理

1、npm：node package manager ，node包管理器，类似于maven
作用：
1、快捷构建node.js工程
终端运行node init，会生成一个package.json
{
“name”: “npm”, //工程名
“version”: “1.0.1”, //版本
“description”: “我的第一个node工程”, //描述
“main”: “index.js”, // 入口js
“scripts”: { // 运行脚本
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”, //开发者
“license”: “ISC” //授权协议
}
// 类似于 pom.xml 文件管理依赖

2、快捷安装和以来第三方模块，比如：npm install mysql等等
2-1：如何快捷安装
npm install XXX 或者npm i xxx
2-2：安装模块放在哪
安装的模块会放入到项目的node_modules文件夹中
2-3：使用模块
cont xxx
2-4：模块和package.json的关系
安装的模块会记录在package.json的dependencies中，以便于实现复用，如果要在其他工程中使用当前工程的第三依赖
就可以直接通npm install package.json
2-5：如果安装模块很慢？
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install xxx
2-6：如何运行
node xxx.js 运行过程中.js是可以省去的，终止的命令行：CTRL+C 多次执行
2-7：如何下载多个？
npm install jquery vue redis@版本号（不指定版本号，则就默认下载最新的版本）

3、卸载模块
npm uninstall vue

四、Babel

1、简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

2、Babel的使用

1、创建babel文件夹
2、初始化项目

npm init -y

3、创建文件 src/example.js ，下面是一段ES6代码：

//es6
let name = "jjl";
const title = "成都";
let arr = [1,2,3];
let newarr = arr.map(a=>a*2);
console.log(newarr);

4、配置 .babelrc

{
    "presets": [],
    "plugins": []
}

5、安装转码器，在项目中安装

cnpm install babel-preset-es2015 --save-dev
babel src -d dist
在这里插入图片描述
在这里插入图片描述

3、通过脚本的方式实现上面的操作

将“5、安装转码器，在项目中安装”中的“babel src -d dist”，添加到package.json中
在这里插入图片描述
打开cmd
运行：npm run dev
在这里插入图片描述

五、模块化

1、commons.js的模块化开发

1、创建工具类并导出

// 工具类
const sum = function(a,b){
    return a+b;
}
const sub = function(a,b){
    return a-b;
}
const mul = function(a,b){
    return a*b;
}
const di = function(a,b){
    return a/b;
}

//导出给别人使用
// 标准写法
// module.extends = {
//     sum:sum,
//     sub:sub,
//     mul:mul,
//     di:di
// }

// 当类名和方法名一致时，可以简写
module.exports = {
    sum,
    sub,
    mul,
    di
}

2、导入工具类并调用

// require
const m = require('./四则运算.js')
console.log(m.sum(1,2))
console.log(m.sub(1,2))
console.log(m.mul(1,2))
console.log(m.di(1,2))

2、使用es6的方式

1、单个方法导出导入
导出

export function getList(){
    console.log("获取数据列表");
}
export function save(){
console.log("保存数据");
}

导入

import {getList,save} from "./userApi";
getList()
save()

要使用babel转码之后才能运行

生成package配置文件：npm init -y
新建.babelrc

    {
        "presets": ["es2015"],
        "plugins":[]
    }

安装插件：npm install --save-dev babel-preset-es2015
转换：npm run build

2、导出整个类
导出

// 常用的方式
export default{
    getList(){
        console.log("获取数据列表");
    },
    save(){
    console.log("保存数据");
    }
}

导入

import user from "./userApi";
user.getList()
user.save()

使用babel转换
略：

六、webpack使用

1、安装webpack

cmd

C:\Windows\system32>cnpm install -g webpack webpack-cli

2、对js进行打包

1、创建一个node.js项目 npm init -y

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1"
  }
}

2、创建一个src目录
3、在src存放两个需要合并的util.js和common.js
util.js

// 相加函数
exports.add = (a,b)=> a+b;

common.js

// 输出
exports.info = function(str){
    // 往控制台输出
    console.log(str);
    // 王浏览器输出
    document.write(str);
}

4、准备一个入口文件main.js，其实就是模块化集中进行引入

// 导入util
const util = require("./util");
// 导入common
const common = require("./common");

// 将util的运输结果通过common输出
common.info("Hello"+util.add(100,3000));

5、在根目录下定义一个webpack.config.js文件配置打包的规则

// 导入path模块
const path = require("path");
// 定义js打包的规则
module.exports = {
    // 入口函数，从哪里开始开始编译打包
    entry:"./src/main.js",
    // 打包以后输出的位置
    output:{
        // 定义输出的目录_dirname当前项目的根目录，生成一个dist文件夹
        path:path.resolve(__dirname,"./dist"),
        // 生成一个bundle.js文件
        filename:"bundle.js"
    }
}

6、执行webpack查看效果
初次运行可能会出现：

webpack : 无法加载文件 C:\Users\17709\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置

解决办法：
在这里插入图片描述
运行：
webpack：直接加密压缩运行
webpack -w ：实时监控，当源码有变动时，会自动刷新加密压缩文件
在这里插入图片描述
查看生成的压缩加密文件：
在这里插入图片描述
引入测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

运行html

3、对css进行打包

1、安装插件：npm install --save-dev style-loader css-loader
2、在webpack.config.js中添加css打包的配置

// 导入path模块
const path = require("path");
// 定义js打包的规则
module.exports = {
    // 入口函数，从哪里开始开始编译打包
    entry:"./src/main.js",
    // 打包以后输出的位置
    output:{
        // 定义输出的目录_dirname当前项目的根目录，生成一个dist文件夹
        path:path.resolve(__dirname,"./dist"),
        // 生成一个bundle.js文件
        filename:"bundle.js"
    },
    // 打包css
    module:{
        rules:[{
            test:/\.css$/,  //把项目中所有的.css结尾的文件进行打包
            use:["style-loader","css-loader"]
        }]
    }
}

3、在src中新建测试的css文件

body{
    background: rgb(94, 94, 83);
    font-size: 20px;
    color: brown;
}

4、在入口文件main.js中引入css

// 导入util
const util = require("./util");
// 导入common
const common = require("./common");

// 导入css
require("./style.css");

// 将util的运输结果通过common输出
common.info("Hello"+util.add(100,3000));

5、运行webpack
在这里插入图片描述

相关文章：

  • （三）centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • 【Python+大数据】第一天：安装VMware及Centos，配置虚拟机网络，学习Linux命令。研究生开学10天的感受。
  • （2）关于RabbitMq 的 Topic Exchange 主题交换机
  • JAVA代码操作HDFS
  • web前端开发基础教程一
  • 原子尺度仿真对材料设计效率的提升，是未来材料研发的关键核心竞争力
  • CDH 10Cloudera Manager Kerberos安装配置CA配置(markdown新版三)
  • RedHat7无法安装Telnet
  • LeetCode刷题（二）：前言
  • 网络套接字实现TCP机制通信
  • 一个非教条式的TDD例子
  • Spring 整合 MyBatis
  • Verilog 有符号数详解(含代码验证）
  • 今天是圣诞节， 要打印一个漂亮的圣诞树送给想象中的女朋友，请你帮助他实现梦想。
  • 同样是测试工程师，月薪8k的功能测试和月薪14k的自动化测试，差在了那里？
  • 【Leetcode】101. 对称二叉树
  • 【React系列】如何构建React应用程序
  • 【腾讯Bugly干货分享】从0到1打造直播 App
  • Android 初级面试者拾遗（前台界面篇）之 Activity 和 Fragment
  • CentOS 7 修改主机名
  •  D - 粉碎叛乱F - 其他起义
  • ES6 学习笔记（一）let，const和解构赋值
  • Netty源码解析1-Buffer
  • Puppeteer：浏览器控制器
  • React16时代，该用什么姿势写 React ?
  • Redis在Web项目中的应用与实践
  • Selenium实战教程系列（二）---元素定位
  • webpack项目中使用grunt监听文件变动自动打包编译
  • windows下mongoDB的环境配置
  • 开发基于以太坊智能合约的DApp
  • 开源SQL-on-Hadoop系统一览
  • 面试总结JavaScript篇
  • 前端性能优化——回流与重绘
  • 如何实现 font-size 的响应式
  • 我与Jetbrains的这些年
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 中国人寿如何基于容器搭建金融PaaS云平台
  • 自动记录MySQL慢查询快照脚本
  • gunicorn工作原理
  • postgresql行列转换函数
  • 支付宝花15年解决的这个问题，顶得上做出十个支付宝 ...
  • ​ssh-keyscan命令--Linux命令应用大词典729个命令解读
  • #pragma data_seg 共享数据区（转）
  • （0）Nginx 功能特性
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • （react踩过的坑）Antd Select（设置了labelInValue）在FormItem中initialValue的问题
  • （附源码）spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • （附源码）springboot助农电商系统 毕业设计 081919
  • (过滤器)Filter和(监听器)listener
  • (一)认识微服务
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • .net 4.0发布后不能正常显示图片问题
  • .net CHARTING图表控件下载地址
  • .net FrameWork简介，数组，枚举
  • .NET/C# 使窗口永不获得焦点