东营网站app建设,汕头网页模板建站,国内免费的建网站平台,护肤品主题网站怎么做es6新语法
1 什么是ES6 JS语法分三块 ECMAScript : 基础语法BOM 浏览器对象 history location windowDOM 文档对象 document 编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA#xff08;一个类似W3C的标准组织#xff09;参与进行标准化的语法规范。ECMAS…es6新语法
1 什么是ES6 JS语法分三块 ECMAScript : 基础语法BOM 浏览器对象 history location windowDOM 文档对象 document 编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA一个类似W3C的标准组织参与进行标准化的语法规范。ECMAScript定义了
语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
ECMAScript标准不定义HTML或CSS的相关功能也不定义类似DOM文档对象模型的Web API这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景无论是浏览器环境还是类似node.js的非浏览器环境。
ECMAScript标准的历史版本分别是1、2、3、5。
那么为什么没有第4版其实在过去确实曾计划发布提出巨量新特性的第4版但最终却因想法太过激进而惨遭废除这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统。
ES4饱受争议当标准委员会最终停止开发ES4时其成员同意发布一个相对谦和的ES5版本随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”因此ES5规范中包含这样两句话 ECMAScript是一门充满活力的语言并在不断进化中。 未来版本的规范中将持续进行重要的技术改进 2009年发布的改进版本ES5引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。
ECMAScript 6.0以下简称ES6是JavaScript语言的下一代标准2015年6月正式发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序成为企业级开发语言。
可以参考
http://es6.ruanyifeng.com/
回顾之前的es6语法
1.定义变量let 变量名数据;
2.定义常量const 常量名数据;
3.箭头函数(参数,参数,...){函数体}
4.模板字符串let sdef;let s1 abc; 方便拼接字符串let s2${s}${s1};defabc
2. 对象初始化简写
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleTitle/title
/head
body/body
script//es5function people (username,age){//usernameRose,age18return {username:username,age:age}}//打印console.log(people(Rose,18));//es6function people2 (username,age){return {//如果key的名字和变量参数名一致则可以简化写username,age}}//打印console.log(people2(Jack,88));
/script
/html小结
创建对象格式
function people2 (name,age){return {//如果key的名字和变量参数名一致则可以简化写name,age}}3.解构
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleTitle/title
/head
body/body
script//目标从json对象中取值const people {username: Rose, age: 18};//es5//好处直观缺点如果你要取多个值就代码多了一些/* let usernamepeople.username;let age people.age;console.log(username --- age);*///es6//等号左边的大括号中的变量必须和等号右边对象中的key一致//例如等号左边的username那么等号右边people中的key必须有username// const {username,age}people;// const {age,username}people;const {age} people;// console.log(username , age)console.log(age);////数组const color [red, blue];//es5// let first color[0];// console.log(first);//red// //es6//等号左边中括号中的变量随便定义const [first,second]color;console.log(first);console.log(second);
/script
/html小结
解构就是简化获取对象和数组的数据。
1.获取对象const people{username:Rose,age:18};const {username,age}people;//要求等号左边大括号中的变量必须和等号右边对象中key一致console.log(username , age);2.获取数组const color [red, blue];const [first,second]color;//等号左边中括号中的变量随便定义console.log(first);console.log(second);4. 延展操作符(掌握)
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleTitle/title
/head
body/body
script//目标扩展对象的值//原来的对象const peopleOld{username:Rose,age:18};//需要重新生成一个对象并基于之前的对象扩展const peopleNew{...peopleOld,address:上海};console.log(peopleOld);//{username: Rose, age: 18}console.log(peopleNew);//{username: Rose, age: 18, address: 上海}//原来的数组const colorOld[red, yellow];//需要重新生成一个数组并基于之前的数组扩展const colorNew[...colorOld,blue,green];console.log(colorOld);//[red, yellow]console.log(colorNew);// [red, yellow, blue, green]
/script
/html小结
作用对原来的js对象和数组进行数据的扩展。
1.扩展js对象const peopleOld{username:Rose,age:18};const peopleNew{...peopleOld,address:上海};
2.扩展数组const colorOld[red, yellow];const colorNew[...colorOld,blue];5. import 和 export【重点】
模块功能主要由两个命令构成export和import。export命令用于规定模块的对外接口import命令用于输入其他模块提供的功能。
在ES6中每一个模块即是一个文件在文件中定义的变量函数对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容就必须使用export来对其进行暴露输出,然后以import的形式将这个变量进行引入
import导入模块、export导出模块
lib.js
// 方式1
let addfunction(){console.log(add...);
}
let removefunction(){console.log(remove...);
}
export {add,remove}// 方式2 还可以写成
// export default {
// add(){
// console.log(add...);
// },
// remove(){
// console.log(remove...);
// }
// }demo09.js
// 方式1
import {add,remove} from ./lib.js;
add();
remove();//方式2 还可以写成
// import jsApi from ./lib.js // 使用这种方式 必须要使用export default {} 导出
// jsApi.add()
// jsApi.remove()html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body/bodyscript typemodule srcjs/demo09.js/script/html小结 1.使用导入导出的好处是我们可以将上述lib.js理解为源码然后在demo09.js文件中导入源码的内容并使用使用起来较方便 2.对于在html文件中使用标签引入具有导入导出的js代码要求必须书写typemodule属性表示模块化因为在js中导入导出只能使用在模块化中 3.引入模块化就是为了降低系统的可维护性把成本降低把一个复杂的项目解耦成为一个细小单一的模块这样好维护好开发出现问题也可以快速的锁定。可以将上述不同的代码书写在不同的模块中的js文件中就是模块化思想 4.使用vscode演示导入和导出模块化报错解决方案 说明主要是加载js文件时使用了file协议该协议会导致跨域而使用http、https等协议时则没有跨域问题。 解决方案在vscode中安装插件Live Server这是一个具有实时重载功能的小型开发服务器。用它来热加载你的HTML / JavaScript / CSS文件主要是有了live server之后就不在vscode中使用file协议直接使用live server打开不会涉及到跨域问题
