diff --git a/10-ES6/01-ES5的严格模式.md b/10-ES6/01-ES5中的严格模式.md similarity index 100% rename from 10-ES6/01-ES5的严格模式.md rename to 10-ES6/01-ES5中的严格模式.md diff --git a/10-ES6/03-ES6的介绍和环境配置.md b/10-ES6/03-ES6的介绍和环境配置.md new file mode 100644 index 0000000..8fd01a3 --- /dev/null +++ b/10-ES6/03-ES6的介绍和环境配置.md @@ -0,0 +1,227 @@ + +> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + + +## 前言 + +ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。 + +PS：严格来说，ECMAScript 还包括其他很多语言的语言标准。 + + +很多人在做业务选型的时候，会倾向于选jQuery。其实jQuery的语法是偏向于ES3的。而现在主流的框架 Vue.js 和React.js的语法，是用的ES6。 + +ES6中增加了很多功能上的不足。比如：**常量、作用域、对象代理、类、继承**等。这些在ES5中想实现，比较复杂，但是ES6对它们进行了封装。 + +### ECMAScript 发展历史 + +- 1995年：ECMAScript 诞生。 + +- 1997年：ECMAScript 标准确立。 + +- 1999年：ES3 出现，与此同时，IE5 风靡一时。 + +- 2009年，ES5 出现，例如 foreach、Object.keys、Object.create 和 json 标准。 + +- 2015年6月，ES6正式发布。 + +ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。 + +### ECMAScript 的各大版本 + +- ES5 : 09年发布。 + +- ES6：ECMAScript 2015年6月 + +- ES7：ECMAScript 2016 + +- ES8：ECMAScript 2017 + + + +### ES6 的其他优势 + +- 使用 babel 语法转换器，支持低端浏览器。 + +- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。 + + +### + +## ES6的环境配置 + +掌握 ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 `Babel`将 ES6 转换为 ES5。 + +但是，在这之前，我们需要配置一下相关的环境。 + +### 建立工程目录 + +（1）先建立一个空的工程目录 `ES6Demo`，并在目录下建立两个文件夹 `src`和 `dist`： + +- `src`：书写ES6代码，我们写的 js 程序都放在这里。 + +- `dist`：利用 Babel 编译生成的 ES5 代码。**我们在 HTML 页面需要引入 dist 里的 js 文件**。 + +（2）在 src 里新建文件 `index.html`： + +```html + + + + + + + Document + + + + + + + +``` + +**注意**，上方代码中，我们引入的是`dist`目录下的 js 文件。 + +然后我们新建文件 `src/index.js`： + +```javascript +let a = 'smyhvae'; +const b = 'vitateam'; + +console.log(a); +console.log(b); +``` + + +这个文件是一个 ES6语法 的js文件，稍后，我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。 + +PS：我们在写代码时，能用单引号尽量用单引号，而不是双引号，前者在压缩之后，程序执行会更快。 + +### 全局安装 Babel-cli + +（1）初始化项目： + +在安装Babel之前，需要先用 npm init 先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入如下命令： + + +```bash + npm init -y +``` + +上方代码中，`-y` 代表全部默认同意，就不用一次次按回车了（稍后再根据需要，在文件中手动修改）。命令执行完成后，会在项目的根目录下生成package.json文件： + +```json +{ + "name": "es6demo", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "smyhvae", + "license": "ISC" +} + +``` + + +PS：VS Code 里打开终端的快捷键是：`Contol + ~`。 + +（2）全局安装 Babel-cli： + +在终端中输入以下命令： + +```bash + npm install -g babel-cli +``` + + +![](http://img.smyhvae.com/20180304_1305.png) + +如果安装比较慢的话，Mac 下可以使用`cnpm`进行安装 ，windows 下可以使用`nrm`切换到 taobao 的镜像。 + + +（3）本地安装 babel-preset-es2015 和 babel-cli： + +```bash + npm install --save-dev babel-preset-es2015 babel-cli +``` + +![](http://img.smyhvae.com/20180304_1307.png) + +安装完成后，会发现`package.json`文件，已经多了 devDependencies 选项： + +![](http://img.smyhvae.com/20180304_1308.png) + +（4）新建.babelrc： + +在根目录下新建文件`.babelrc`，输入如下内容： + +``` +{ + "presets":[ + "es2015" + ], + "plugins":[] +} +``` + + +（5）开始转换： + +现在，我们应该可以将 ES6 的文件转化为 ES5 的文件了，命令如下：（此命令略显复杂） + +``` + babel src/index.js -o dist/index.js +``` + +我们可以将上面这个命令进行简化一下。操作如下： + +在文件 `package.json` 中修改键 `scripts`中的内容： + + +```json + "scripts": { + "build": "babel src/index.js -o dist/index.js" + }, +``` + +修改后的效果如下： + +![](http://img.smyhvae.com/20180304_1315.png) + +目前为止，环境配置好了。以后，我们执行如下命令，即可将`src/index.js`这个 ES6 文件转化为 `dist/index.js`这个 ES5 文件： + + +```bash + npm run build +``` + + +我们执行上面的命令之后，会发现， dist目录下会生成 ES5 的 js 文件： + +index.js： + +```javascript + 'use strict'; + + var a = 'smyhvae'; + var b = 'vitateam'; + + console.log(a); + console.log(b); + +``` + +当我们打开网页后，就可以在浏览器的控制台，看到代码的输出结果。 + +本段内容的参考链接： + +- [技术胖带你玩转ES6视频教程 (共18集)](http://jspang.com/2017/06/03/es6/) + + + diff --git a/10-ES6/03-ES6的介绍和常用语法.md b/10-ES6/04-ES6：变量、函数扩展.md similarity index 70% rename from 10-ES6/03-ES6的介绍和常用语法.md rename to 10-ES6/04-ES6：变量、函数扩展.md index 29d4f23..b279467 100644 --- a/10-ES6/03-ES6的介绍和常用语法.md +++ b/10-ES6/04-ES6：变量、函数扩展.md @@ -1,231 +1,4 @@ -> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 - -> 以下是正文。 - - -## 前言 - -ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。 - -PS：严格来说，ECMAScript 还包括其他很多语言的语言标准。 - - -很多人在做业务选型的时候，会倾向于选jQuery。其实jQuery的语法是偏向于ES3的。而现在主流的框架 Vue.js 和React.js的语法，是用的ES6。 - -ES6中增加了很多功能上的不足。比如：**常量、作用域、对象代理、类、继承**等。这些在ES5中想实现，比较复杂，但是ES6对它们进行了封装。 - -### ECMAScript 发展历史 - -- 1995年：ECMAScript 诞生。 - -- 1997年：ECMAScript 标准确立。 - -- 1999年：ES3 出现，与此同时，IE5 风靡一时。 - -- 2009年，ES5 出现，例如 foreach、Object.keys、Object.create 和 json 标准。 - -- 2015年6月，ES6正式发布。 - -ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。 - -### ECMAScript 的各大版本 - -- ECMAScript 2015年6月：ES6 - -- ECMAScript 2016：ES7 - -- ECMAScript 2017：ES8 - - - - -### ES6 的其他优势 - -- 使用 babel 语法转换器，支持低端浏览器。 - -- 流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 标准开发。 - - -### - -## ES6的环境配置 - -掌握 ES6 之后，如果要考虑 ES5 的兼容性，可以这样做：写 ES6 语法的 js 代码，然后通过 `Babel`将 ES6 转换为 ES5。 - -但是，在这之前，我们需要配置一下相关的环境。 - -### 建立工程目录 - -（1）先建立一个空的工程目录 `ES6Demo`，并在目录下建立两个文件夹 `src`和 `dist`： - -- `src`：书写ES6代码，我们写的 js 程序都放在这里。 - -- `dist`：利用 Babel 编译生成的 ES5 代码。**我们在 HTML 页面需要引入 dist 里的 js 文件**。 - -（2）在 src 里新建文件 `index.html`： - -```html - - - - - - - Document - - - - - - - -``` - -**注意**，上方代码中，我们引入的是`dist`目录下的 js 文件。 - -然后我们新建文件 `src/index.js`： - -```javascript -let a = 'smyhvae'; -const b = 'vitateam'; - -console.log(a); -console.log(b); -``` - - -这个文件是一个 ES6语法 的js文件，稍后，我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。 - -PS：我们在写代码时，能用单引号尽量用单引号，而不是双引号，前者在压缩之后，程序执行会更快。 - -### 全局安装 Babel-cli - -（1）初始化项目： - -在安装Babel之前，需要先用 npm init 先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入如下命令： - - -```bash - npm init -y -``` - -上方代码中，`-y` 代表全部默认同意，就不用一次次按回车了（稍后再根据需要，在文件中手动修改）。命令执行完成后，会在项目的根目录下生成package.json文件： - -```json -{ - "name": "es6demo", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "smyhvae", - "license": "ISC" -} - -``` - - -PS：VS Code 里打开终端的快捷键是：`Contol + ~`。 - -（2）全局安装 Babel-cli： - -在终端中输入以下命令： - -```bash - npm install -g babel-cli -``` - - -![](http://img.smyhvae.com/20180304_1305.png) - -如果安装比较慢的话，Mac 下可以使用`cnpm`进行安装 ，windows 下可以使用`nrm`切换到 taobao 的镜像。 - - -（3）本地安装 babel-preset-es2015 和 babel-cli： - -```bash - npm install --save-dev babel-preset-es2015 babel-cli -``` - -![](http://img.smyhvae.com/20180304_1307.png) - -安装完成后，会发现`package.json`文件，已经多了 devDependencies 选项： - -![](http://img.smyhvae.com/20180304_1308.png) - -（4）新建.babelrc： - -在根目录下新建文件`.babelrc`，输入如下内容： - -``` -{ - "presets":[ - "es2015" - ], - "plugins":[] -} -``` - - -（5）开始转换： - -现在，我们应该可以将 ES6 的文件转化为 ES5 的文件了，命令如下：（此命令略显复杂） - -``` - babel src/index.js -o dist/index.js -``` - -我们可以将上面这个命令进行简化一下。操作如下： - -在文件 `package.json` 中修改键 `scripts`中的内容： - - -```json - "scripts": { - "build": "babel src/index.js -o dist/index.js" - }, -``` - -修改后的效果如下： - -![](http://img.smyhvae.com/20180304_1315.png) - -目前为止，环境配置好了。以后，我们执行如下命令，即可将`src/index.js`这个 ES6 文件转化为 `dist/index.js`这个 ES5 文件： - - -```bash - npm run build -``` - - -我们执行上面的命令之后，会发现， dist目录下会生成 ES5 的 js 文件： - -index.js： - -```javascript - 'use strict'; - - var a = 'smyhvae'; - var b = 'vitateam'; - - console.log(a); - console.log(b); - -``` - -当我们打开网页后，就可以在浏览器的控制台，看到代码的输出结果。 - -本段内容的参考链接： - -- [技术胖带你玩转ES6视频教程 (共18集)](http://jspang.com/2017/06/03/es6/) - - - - -接下来，我们讲一下 ES6的常见语法。 ## ES6 的变量声明 @@ -786,17 +559,6 @@ ES5中，this指向的是函数被调用的对象；而ES6的箭头函数中，t - - - - - - - - - - - 更多 ES6 的语法，本文会陆续更新。 ## 参考链接： diff --git a/10-ES6/04-ES6的常用语法.md b/10-ES6/05-ES6：promise、async等.md similarity index 100% rename from 10-ES6/04-ES6的常用语法.md rename to 10-ES6/05-ES6：promise、async等.md diff --git a/10-ES6/06-ES6：字符串、数组、对象的扩展.md b/10-ES6/06-ES6：字符串、数组、对象的扩展.md new file mode 100644 index 0000000..e9551f3 --- /dev/null +++ b/10-ES6/06-ES6：字符串、数组、对象的扩展.md @@ -0,0 +1,218 @@ + + +## 字符串的扩展 + +ES6中的字符串扩展，用得少，而且逻辑相对简单。如下： + +- `includes(str)`：判断是否包含指定的字符串 + +- `startsWith(str)`：判断是否以指定字符串开头 + +- `endsWith(str)`：判断是否以指定字符串结尾 + +- `repeat(count)`：重复指定次数 + + +举例如下： + +```javascript + let str = 'abcdefg'; + + console.log(str.includes('a'));//true + console.log(str.includes('h'));//false + + //startsWith(str) : 判断是否以指定字符串开头 + console.log(str.startsWith('a'));//true + console.log(str.startsWith('d'));//false + + //endsWith(str) : 判断是否以指定字符串结尾 + console.log(str.endsWith('g'));//true + console.log(str.endsWith('d'));//false + + //repeat(count) : 重复指定次数a + console.log(str.repeat(5)); +``` + +打印结果： + +20180402_1050.png + +## 数值的扩展 + +- 二进制与八进制数值表示法: 二进制用`0b`, 八进制用`0o`。 + +举例： + +```javascript + console.log(0b1010);//10 + console.log(0o56);//46 +``` + +- `Number.isFinite(i)`：判断是否为有限大的数。比如`Infinity`这种无穷大的数，返回的就是false。 + +- `Number.isNaN(i)`：判断是否为NaN。 + +- `Number.isInteger(i)`：判断是否为整数。 + +- `Number.parseInt(str)`：将字符串转换为对应的数值。 + +- `Math.trunc(i)`：去除小数部分。 + +举例： + +```javascript + //Number.isFinite(i) : 判断是否是有限大的数 + console.log(Number.isFinite(NaN)); //false + console.log(Number.isFinite(5)); //true + console.log(Number.isFinite(Infinity)); //false + + //Number.isNaN(i) : 判断是否是NaN + console.log(Number.isNaN(NaN));//true + console.log(Number.isNaN(5));//falsse + + //Number.isInteger(i) : 判断是否是整数 + console.log(Number.isInteger(5.23));//false + console.log(Number.isInteger(5.0));//true + console.log(Number.isInteger(5));//true + + //Number.parseInt(str) : 将字符串转换为对应的数值 + console.log(Number.parseInt('123abc'));//123 + console.log(Number.parseInt('a123abc'));//NaN + + // Math.trunc(i) : 直接去除小数部分 + console.log(Math.trunc(13.123));//13 +``` + +## 数组的扩展 + +### 扩展1 + + +```javascript + Array.from(伪数组/可遍历的对象) +``` + +**作用**：将伪数组对象或可遍历对象转换为真数组。 + +**举例：** + +```html + + + + + + + + + +``` + +上面的布局中，有三个button标签，我们通过`getElementsByTagName`获取到的`btnArray`实际上是**伪数组**，并不是真实的数组： + +20180402_1116.png + +既然`btnArray`是伪数组，它就不能使用数组的一般方法，否则会报错： + +20180402_1121.png + +解决办法：采用`Array.from`方法将`btnArray`这个伪数组转换为真数组即可： + +```javascript + Array.from(btnArray); +``` + +然后就可以使用数组的一般方法了： + +20180402_1125.png + +### 扩展2 + + +```javascript + Array.of(value1, value2, value3) +``` + +**作用**：将一系列值转换成数组。 + +**举例**： + + +```javascript + //Array.of(value1, value2, value3) : 将一系列值转换成数组 + let arr = Array.of(1, 'abc', true); + console.log(arr); +``` + + +### 扩展3 + + +- 3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素 + +- 4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素的index + + + + + + + + + + +```javascript + +``` + + + + + + + + + + + + + +```javascript + +``` + + + + + + + + + + +```javascript + +``` + + + + + + + + + + +```javascript + +``` + + + + + diff --git a/18/00-准备.md b/18-前端面试/00-准备.md similarity index 100% rename from 18/00-准备.md rename to 18-前端面试/00-准备.md diff --git a/18/01-页面布局.md b/18-前端面试/01-页面布局.md similarity index 100% rename from 18/01-页面布局.md rename to 18-前端面试/01-页面布局.md diff --git a/18/02-CSS盒模型及BFC.md b/18-前端面试/02-CSS盒模型及BFC.md similarity index 100% rename from 18/02-CSS盒模型及BFC.md rename to 18-前端面试/02-CSS盒模型及BFC.md diff --git a/18/03-DOM事件的总结.md b/18-前端面试/03-DOM事件的总结.md similarity index 100% rename from 18/03-DOM事件的总结.md rename to 18-前端面试/03-DOM事件的总结.md diff --git a/18/04-HTTP协议.md b/18-前端面试/04-HTTP协议.md similarity index 100% rename from 18/04-HTTP协议.md rename to 18-前端面试/04-HTTP协议.md diff --git a/18/05-01.创建对象和原型链.md b/18-前端面试/05-01.创建对象和原型链.md similarity index 100% rename from 18/05-01.创建对象和原型链.md rename to 18-前端面试/05-01.创建对象和原型链.md diff --git a/18/05-02.面向对象：类的定义和继承的几种方式.md b/18-前端面试/05-02.面向对象：类的定义和继承的几种方式.md similarity index 100% rename from 18/05-02.面向对象：类的定义和继承的几种方式.md rename to 18-前端面试/05-02.面向对象：类的定义和继承的几种方式.md diff --git a/18/06-跨域通信类.md b/18-前端面试/06-跨域通信类.md similarity index 100% rename from 18/06-跨域通信类.md rename to 18-前端面试/06-跨域通信类.md diff --git a/18/07-安全问题：CSRF和XSS.md b/18-前端面试/07-安全问题：CSRF和XSS.md similarity index 100% rename from 18/07-安全问题：CSRF和XSS.md rename to 18-前端面试/07-安全问题：CSRF和XSS.md diff --git a/18/08-算法问题.md b/18-前端面试/08-算法问题.md similarity index 100% rename from 18/08-算法问题.md rename to 18-前端面试/08-算法问题.md diff --git a/18/09-01.浏览器渲染机制.md b/18-前端面试/09-01.浏览器渲染机制.md similarity index 100% rename from 18/09-01.浏览器渲染机制.md rename to 18-前端面试/09-01.浏览器渲染机制.md diff --git a/18/09-02.js运行机制：异步和单线程.md b/18-前端面试/09-02.js运行机制：异步和单线程.md similarity index 100% rename from 18/09-02.js运行机制：异步和单线程.md rename to 18-前端面试/09-02.js运行机制：异步和单线程.md diff --git a/18/10-01.页面性能优化.md b/18-前端面试/10-01.页面性能优化.md similarity index 100% rename from 18/10-01.页面性能优化.md rename to 18-前端面试/10-01.页面性能优化.md diff --git a/18/10-02.前端错误监控.md b/18-前端面试/10-02.前端错误监控.md similarity index 100% rename from 18/10-02.前端错误监控.md rename to 18-前端面试/10-02.前端错误监控.md diff --git a/18/11-00.JavaScript高级面试：前言.md b/18-前端面试/11-00.JavaScript高级面试：前言.md similarity index 100% rename from 18/11-00.JavaScript高级面试：前言.md rename to 18-前端面试/11-00.JavaScript高级面试：前言.md diff --git a/18/11-01.ES6：模块化的使用和编译环境.md b/18-前端面试/11-01.ES6：模块化的使用和编译环境.md similarity index 100% rename from 18/11-01.ES6：模块化的使用和编译环境.md rename to 18-前端面试/11-01.ES6：模块化的使用和编译环境.md diff --git a/18/11-02.ES6.md b/18-前端面试/11-02.ES6.md similarity index 100% rename from 18/11-02.ES6.md rename to 18-前端面试/11-02.ES6.md diff --git a/18/15-虚拟DOM.md b/18-前端面试/15-虚拟DOM.md similarity index 100% rename from 18/15-虚拟DOM.md rename to 18-前端面试/15-虚拟DOM.md diff --git a/18/16-01.MVVM.md b/18-前端面试/16-01.MVVM.md similarity index 100% rename from 18/16-01.MVVM.md rename to 18-前端面试/16-01.MVVM.md diff --git a/18/21-面试题整理 by smyhvae.md b/18-前端面试/21-面试题整理 by smyhvae.md similarity index 100% rename from 18/21-面试题整理 by smyhvae.md rename to 18-前端面试/21-面试题整理 by smyhvae.md diff --git a/18/22-网友面经.md b/18-前端面试/22-网友面经.md similarity index 100% rename from 18/22-网友面经.md rename to 18-前端面试/22-网友面经.md diff --git a/18/23-面试技巧 by smyhvae.md b/18-前端面试/23-面试技巧 by smyhvae.md similarity index 100% rename from 18/23-面试技巧 by smyhvae.md rename to 18-前端面试/23-面试技巧 by smyhvae.md diff --git a/18/web安全.md b/18-前端面试/web安全.md similarity index 100% rename from 18/web安全.md rename to 18-前端面试/web安全.md diff --git a/18/其他.md b/18-前端面试/其他.md similarity index 100% rename from 18/其他.md rename to 18-前端面试/其他.md diff --git a/18/推荐文章.md b/18-前端面试/推荐文章.md similarity index 100% rename from 18/推荐文章.md rename to 18-前端面试/推荐文章.md diff --git a/18/计算机网络.md b/18-前端面试/计算机网络.md similarity index 100% rename from 18/计算机网络.md rename to 18-前端面试/计算机网络.md