后端项目搭建完毕,接下来就是前端页面了。不过在这之前需要一些准备工作。
我们需要学习ES6的语法标准。什么是ES6?就是ECMAScript第6版标准。
来看下前端的发展历程:
web1.0时代:
web2.O时代:
所以,ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript则是规范的具体实现。
而后,ECMAScript就进入了快速发展期。
这次的新规范,历时颜久,规范的新内容也有了很多争议。在制定ES4的时候,是分成了两个工作组同时工作的。
一边是以Adobe,Mozilla, Opera和Google为主的 ECMAScript 4工作组。一边是以 Microsoft和 Yahoo为主的 ECMAScript 3.1工作组。
ECMAScript 4的很多主张比较激进,改动较大。而ECMAScript 3.1则主张小幅更新。
最终经过TC39的会议,决定将一部分不那么激进的改动保留发布为ECMAScript 3.1,而ES4的内容,则延续到了后来的
ECMAScript56版本中
之前,js定义变量只有一个关健字: var
var士有一个问题,就是定义的安量有时会莫名其妙的成为全局变量.例如这样的一段代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> for(var i = 0; i < 5;i++){ console.log(i); } console.log("循环外"+i); </script> <body> </body> </html>
下打印的结果是什么了
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> for(let i = 0; i < 5;i++){ console.log(i); } console.log("循环外"+i); </script> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> const num = 1; console.log(num++); </script> </head> <body> </body> </html>
数组解构
比如有一个数组:
let arr = [ 1,2,3 ]
我想获取其中的值,只能通过角标。ES6可以这样:
const [ x,y,z] = arr;//x,y,z将与arr中的每个位置对应来取值 //然后打印 console.log(x,y,z);
打开谷歌浏览器
let arr = [2,5,-10,15]; let x = arr[0] , y = arr[1];
let arr = [2,5,-10,15]; let[x,y] = arr; x 2 y 5
let [,,a,b] = arr; undefined a -10 b 15
let [,...rest] = arr; undefined rest (3) [5, -10, 15]
let p = {name:"jack",age:21} undefined let {name,age} = p; undefined name "jack" age 21
let p = {name:"jack",age:21} undefined let {name:n} = p; undefined n "jack"
p = {name:"jack",age:21,girl:{name:"rose",age:"18"}} {name: "jack", age: 21, girl: {…}} let{girl:{name}} = p; undefined name "rose"
let {...obj} = p; undefined obj {name: "jack", age: 21, girl: {…}}
查看obj是否等同于p
obj == p false
定义函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function sum(a,b){ return a+b; } const add = (a,b) => a + b; </script> </head> <body> </body> </html>
浏览器控制台调用函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> const p = { name: "jack", age : 21, sayHello : function(){ console.log("hello"); } } p.sayHello();//调用方法 </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> const p = { name: "jack", age : 21, sayHello(){ console.log("hello"); } } p.sayHello(); </script> </head> <body> </body> </html>
运行结果
定义有参函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> const p = { name: "jack", age : 21, sayHello(){ console.log("hello"); } } p.sayHello(); const hello = function(person){ console.log(person.name,person.age); } hello(p); </script> </head> <body> </body> </html>
运行结果
继续优化上述方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> const p = { name: "jack", age : 21, sayHello(){ console.log("hello"); } } const hello = function({name,age}){ console.log(name,age); } hello(p); </script> </head> <body> </body> </html>
运行结果
继续优化
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> const p = { name: "jack", age : 21, sayHello(){ console.log("hello"); } } const hello = ({name,age}) => console.log(name,age); hello(p); </script> </head> <body> </body> </html>
运行结果
数组中新增了map和reduce方法。
map
map()∶接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
举例:有一个字符串数组,我们希望转为int数组
将字符数组变量int类型的数组
let arr = ['2','5','-10','15','-20']; undefined let arr2 = arr.map(s => parseInt(s)); undefined arr2 (5) [2, 5, -10, 15, -20]
let arr = ['2','5','-10','15','-20']; undefined let arr2 = arr.map(s => parseInt(s)); undefined arr2 (5) [2, 5, -10, 15, -20] arr2.reduce((a,b) => a+b ) -8