ES6新特性以及ReactJS入门.zip资源-CSDN文库

共3个文件

zip：2个

pdf：1个

版权申诉

react.js

99 浏览量 2023-10-10 22:01:30 上传评论收藏 1.54MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ES6新特性以及ReactJS入门.zip （3个子文件）

ES6新特性以及ReactJS入门

itcast-es6.zip 15KB

itcast-reactjs.zip 237KB

ES6新特性以及ReactJS入门.pdf 1.39MB

课程介绍

ES6新特性

ReactJS入门学习



1、ES6 新特性

现在使用主流的前端框架中，如ReactJS、Vue.js、angularjs等，都会使用到ES6的新特性，作为一名高级工程师而

言，ES6也就成为了必修课，所以本套课程先以ES6的新特性开始。

说明：如果已经掌握ES6语法的同学，可以跳过这一节。

1.1、了解ES6

ES6，是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，己于 2015 年 6 月正式发布。

它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序，成为企业级开发语言。

1.1.1.什么是ECMAScript？

来看下前端的发展历程：

web1.0时代：

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人

员也只关心页面的样式和内容即可。

web2.0时代：

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。

1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。

1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了

ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者，随后各大浏览器厂商纷纷实现

了 ECMAScript 标准。

所以，ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。

1.1.2.ECMAScript的快速发展

而后，ECMAScript就进入了快速发展期。

1998年6月，ECMAScript 2.0 发布。

1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的

事情，就比较悲剧了。

2007年10月。。。。ECMAScript 4.0 草案发布。

这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作

的。

一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。

一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会

议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的

ECMAScript5和6版本中

2009年12月，ECMAScript 5 发布。

2011年6月，ECMAScript 5.1 发布。

2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。并且从 ECMAScript 6 开始，开始采用年号

来做版本。即 ECMAScript 2015，就是ECMAScript6。

2016年 6月，小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布，这个版本可以看作是 ES6.1

版，因为两者的差异非常小(只新增了数组实例的 includes 方法和指数运算符)，基本上可以认为是同一个标

准。

2017 年 6 月发布了ES2017 标准。

因此， ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的 JavaScript 的下一代标准，涵盖了

ES2015、 ES2016、 ES2017 等，而 ES2015 则是正式名称，特指当年发布的正式版本的语言标准。

1.2、let 和 const 命令

var

之前，我们写js定义变量的时候，只有一个关键字： var

var 有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。

例如这样的一段代码：

运行打印的结果是如下：

可以看出，在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的

问题。



let

for(var i = 0; i < 5; i++){

 console.log(i);

}

console.log("循环外：" + i)

let 所声明的变量，只在 let 命令所在的代码块内有效。

我们把刚才的 var 改成 let 试试：

结果：

这样，就把变量的i的作用域控制在了循环内部。

const

const 声明的变量是常量，不能被修改，类似于java中ﬁnal关键字。

可以看到，变量a的值是不能修改的。

1.3、字符串扩展

在ES6中，为字符串扩展了几个新的API：

includes() ：返回布尔值，表示是否找到了参数字符串。

startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

for(let i = 0; i < 5; i++){

 console.log(i);

}

console.log("循环外：" + i)

 const a = 1;

 console.log("a = ", a);

 //给a重新赋值

 a = 2;

 console.log("a = ", a);

实验一下：



字符串模板

ES6中提供了`来作为字符串模板标记。我们可以这么玩：

在两个`之间的部分都会被作为字符串的值，可以任意换行。



 let str = "hello heima";

 console.log(str, " 中是否包含了heima => ", str.includes("heima"));

 console.log(str, " 中是否包含了baima => ", str.includes("baima"));

 console.log(str, " 中是否以h开头 => ", str.startsWith("h"));

 console.log(str, " 中是否以a开头 => ", str.startsWith("a"));

 console.log(str, " 中是否以a结束 => ", str.endsWith("a"));

 console.log(str, " 中是否以h结束 => ", str.endsWith("h"));

</script>

 let str = `

 hello

 itheima

 itcast

 `;

 console.log(str);

</script>

1.3、解构表达式

什么是解构？ -- ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构 (

Destructuring)。

1.3.1、数组解构

比如有一个数组：

之前，我想获取其中的值，只能通过角标。ES6可以这样：

结果：



1.3.2、对象解构

例如有个person对象：

我们可以这么做：

let arr = [1,2,3]

 let arr = [1,2,3]

 const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值

 // 然后打印

 console.log(x,y,z);

 const [a] = arr; //只匹配1个参数

 console.log(a);

const person = {

 name:"jack",

 age:21,

 language: ['java','js','css']

}

// 解构表达式获取值

const {name,age,language} = person;

// 打印

console.log(name);

console.log(age);

console.log(language);

评论收藏

内容反馈

版权申诉

小小哭包

粉丝: 1900
资源: 3864

ES6新特性以及ReactJS入门.zip

MooNkirA#code-learning-note#Day01-ES6新特性以及ReactJS入门1

ES6 新特性示例代码.zip

vue最新实战项目，vue2+vuex+webpack+es6干货多多，新手福利.zip

es6-promise.auto.min.js

angular-es6, 在ES6的1.x 中使用特性的实验.zip

下一代的 ES6 模块打包器（？.zip

ES6新特性小小简单总结.md

基于vue、vue-router、vuex、axios、element-ui、ESLint、ES6的电商网项目.zip

ES6从入门到放弃PPT.zip

663752 JavaScript ES6函数式编程入门经典.zip

redis-5&MQ3&ES6全家桶tar.gz.zip

ES6-ES11学习指南.zip

es6-promise.auto.js

es6入门.zip

三ES6新特性.pdf

react-sweeper, 在ES6中使用反应/不变.zip

js-loaders, 建议的ES6模块加载器的Pseudoimplementation.zip

vow, ES6兼容和承诺的node.js 和浏览器的a 实现.zip

Java第十五届蓝桥杯大赛软件JavaB组真题

SwitchHosts

安卓期末大作业（AndroidStudio开发），垃圾分类助手app，分为前台后台，代码有注释，均能正常运行

Notepad++安装包

2024北森能力测评题库.7z

微信小程序源码-合集1.rar

Java面试八股文2023最新版

Linux Centos7 升级最新版OpenSSH-9.6p1 有脚本（支持离线）

ruoyi-vue-pro 芋道源码项目的表结构

JDK1.8 windows 64位

myeclipse 10.7.1 windows 安装包

最新资源