ES6-学习笔记-12

最新推荐文章于 2024-07-22 09:00:32 发布
最新推荐文章于 2024-07-22 09:00:32 发布
阅读量110 收藏
点赞数
文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pakho_lin/article/details/119570728
版权

文章目录

Babel与Webpack

一、Babel

1、Babel是什么

Babel 是一个 JavaScript 编译器。
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

2、Babel的使用方式

有很多，选择其中的命令行使用方式。

3、使用Babel前的准备工作

在这里插入图片描述
node.js中包含npm。
在这里插入图片描述
在这里插入图片描述

4、使用Babel编译ES6代码

在这里插入图片描述

二、Webpack入门

1、Webpack是什么

在这里插入图片描述

2、Webpack初体验

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、Webpack的核心概念

1、entry和output

entry：指定入口文件；有单入口，多入口
output:出口文件；
在这里插入图片描述

2、loader

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、plugins

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、Webpack应用

1、处理CSS文件

loader配置
在这里插入图片描述
在这里插入图片描述

2、使用file-loader处理CSS中的图片

在这里插入图片描述
在这里插入图片描述

3、使用html-withimg-loader处理html中的图片

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、使用file-loader处理JS中的图片

在这里插入图片描述
在这里插入图片描述

5、使用url-loader处理图片

在这里插入图片描述
在这里插入图片描述

6、使用webpack-dev-server搭建开发环境

在这里插入图片描述
在这里插入图片描述

总结

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wuyi~lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6-ES10--学习笔记
qq_45728623的博客
08-06 400
一、概述 1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 2、什么是ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言； 百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978 3、什么是
ES6 学习笔记
fmk1023的博客
01-06 270
文章目录ES6 学习笔记一、ES6介绍二、ES6兼容性三、变量 let 和 常量 const四、函数4.1 箭头函数4.1.1 箭头函数没有单独的this五、参数展开符六、解构赋值6.1 对象的解构赋值6.2 数组的解构赋值七、数组方法7.1 map 映射7.2 reduce 汇总7.3 filter 过滤7.4 forEach 循环迭代八、字符串方法8.1 startsWith8.2 endsWith8.3 字符串模版九、Symbol十、Map 与 Set10.1 Map 对象10.2 Maps 和 Ob
ES6-学习笔记-8
Pakho_lin的博客
08-08 85
文章目录ES6新增方法一、字符串的新增方法1、includes()2、padStart()和padEnd()3、trimStart()和trimEnd()二、数组的新增方法1、includes()2、Array.from()3、find()和findlndex()三、对象的新增方法1、Object.assign()2、Object.keys()、Object.values()、Object.entries() ES6新增方法 一、字符串的新增方法 1、includes() 2、padStart()和p
ES6-学习笔记-4
Pakho_lin的博客
08-05 81
文章目录对象字面量的增强与函数参数的默认值一、对象字面量的增强1、属性和方法的简洁表示法2、方括号语法二、函数参数的默认值1、函数参数的默认值是什么2、函数参数默认值的注意事项3、函数参数默认值的应用 对象字面量的增强与函数参数的默认值 一、对象字面量的增强 1、属性和方法的简洁表示法 2、方括号语法 二、函数参数的默认值 1、函数参数的默认值是什么 2、函数参数默认值的注意事项 3、函数参数默认值的应用 ...
es6-notes:ES6+ 学习笔记 https
05-07
ES下一个学习笔记 数字 大批 目的 功能 班级 象征 放 地图 正则表达式 代理人 反映 承诺 发电机 迭代器 模块 ES2016（ES7） Array.prototype.includes（） 求幂运算符 ES2017（ES8） 细绳 目的 异步等待 尾随...
ES6-learning：学习ES6的笔记
02-05
ES6 《深刻理解ES6》学习笔记本文用于汇总链接到各个子章节的内容，欢迎大家题issues和PR，如果对你有帮助，也可以给star支持:) ，感谢原作者以及社区里提供翻译人员。目录 思维导图第一章块级绑定第二章弦和正则...
ES6-基础学习笔记
08-24
ES6 基础学习笔记 ES6 是 ECMAScript 的第六版，发布于 2015 年 6 月，作为 JavaScript 的标准规范。ES6 的出现极大地改变了 JavaScript 的发展方向，引入了许多新的语法特性和功能，提高了 JavaScript 的编程能力...
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
es6-for-everyone
05-02
**ES6 for Everyone 学习笔记** ES6（ECMAScript 2015）是JavaScript语言的一个重要更新，引入了大量新特性，提升了代码的可读性和编写效率。Wes Bos的“ES6 for Everyone”课程是学习这些新特性的绝佳资源。以下是...
01 ES6的箭头函数
gt8011的博客
07-20 322
箭头函数提供了一种更简洁、更易于理解的方式来编写函数，特别是在那些不需要完整函数体的简单场景中。然而，它们也有一些限制，需要根据具体的使用场景来选择是否使用箭头函数。箭头函数是 ECMAScript 6 (ES6) 引入的一种新的函数书写方式，它提供了更简洁的语法和一些独特的行为。对象，如果需要使用类似的功能，可以使用剩余参数（rest parameters）。箭头函数通常用于函数赋值，而不是函数声明。箭头函数的调用方式与传统函数相同，根据其赋值的变量名进行调用。的方法，如对象的方法或需要使用。
04 ES6中对象的简写
gt8011的博客
07-20 433
在 ES6 中，对象字面量的书写方式进行了一些简化，使得对象的创建更加简洁。当对象的属性名和属性值的变量名相同时，可以省略属性值，只写属性名。这些简写特性使得在 ES6 中创建和操作对象更加方便和直观。可以合并多个对象，或将对象中的属性复制到新对象中。如果访问的对象属性名和变量名相同，可以省略属性名。直接作为属性名，它们的值由解构赋值提供。如果属性名是动态生成的，可以使用方括号。关键字，直接写方法名和函数体即可。对象中的方法定义不再需要使用。在上述 ES6 的例子中，如果对象的某个属性可能是。
05 ES6中的Set类型
gt8011的博客
07-20 470
ES6 中引入的Set对象是一种集合数据结构，它存储不重复的值，类似于数组，但数组可以包含重复的元素，而Set不会。以下是Set。
07 ES6的解构赋值
gt8011的博客
07-21 423
ES6（ECMAScript 2015）引入了解构赋值（Destructuring assignment）的概念，它允许我们以一种简洁的方式从数组或对象中提取值，并赋值给变量。
02 ES6的函数参数默认值
gt8011的博客
07-20 450
函数参数的默认值是 ECMAScript 2015 (ES6) 引入的功能，它允许你在函数定义时为参数指定默认值。当函数被调用时，如果没有为某个参数提供值，或者提供了undefined，那么就会使用这个默认值。
10 ES6的模板字符串
最新发布
gt8011的博客
07-22 870
ES6模板字符串（Template Literals）是一种新的字符串表示方式，它提供了一种更为强大和灵活的方式来构建字符串。
ES6 字符串的新增方法（二十）
qq_35876316的博客
07-19 596
特性：用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。特性：用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。特性：返回一个码点值的字符串，该码点值位于给定位置的 Unicode 字符。特性：返回一个新字符串，它是原字符串重复指定次数的结果。特性：判断字符串是否以指定的子字符串开始。特性：判断字符串是否以指定的子字符串结束。特性：提供一个模板字符串的原始字符串形式。特性：判断字符串是否包含指定的子字符串。用法：检查字符串的开始部分。用法：左填充字符串。
03 ES6的扩展运算符
gt8011的博客
07-20 383
扩展运算符（Spread Operator）是 ECMAScript 2015 (ES6) 引入的一种语法，用三个点...表示。它提供了一种优雅的方式来扩展数组或对象中的元素或属性。
09 ES6的模块化语法
gt8011的博客
07-22 462
ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，其中引入了许多新特性，包括模块化语法。ES6的模块化语法允许开发者将代码分割成独立的模块，每个模块可以包含变量、函数和其他资源，并且可以在不同的文件中进行导入和导出。
尚硅谷es6-es11笔记
09-10
尚硅谷ES6-ES11笔记是关于ES6到ES11版本的学习笔记。其中包括了ES6引入的类的写法，实际上ES6的Class是一个语法糖，让我们写起来更像传统的类。 此外，ES6还引入了Symbol值，除了可以定义自己使用的Symbol值，还有11...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值