前言
由于目前H5被炒的火热以及公司目前项目中也用到H5页面的情况,不得不让我对目前从事的Android工作有点担忧,生怕哪天一不小心就被炒了。鉴于此,楼主我决心学习下H5了(程序员基本的Html都是知道的^_^).下面就让我们一起来学习吧!
提纲
- 1,JavaScript基本语法;
- 2,JavaScript类定义;
- 3,什么是ECMAScript及ECMAScript基础用法;
- 4,WebApp
附上公司前端工程师学习线路
- 1,HTML5教程
- 2,CSS3教程
- 3,ECMAScript 6 入门
- 4,React 入门实例教程
- 5,Reflux学习心得
- 6,React-router(英文)
注:因为ES6被称为JavaScript的下一代,所以下面我会重点学习下ES6.
正文:
一、ES6 入门
- 1.1、箭头函数
其表现方式为:=>,这有点像Java里面的lambda表达式(->),指向函数主体,
与function不同的是,箭头函数在上下文中共享相同的this关键字。
语法:
定义自变量,然后是箭头和函数主体
例如:var test = value => value + 1;
看不习惯,看不懂没关系,先让我们用javascript来写下上面式子:
javascript:
//1.只传一个参数
var test = function(value){
return value + 1;
}
因此上面的ES6表达式就可以理解了:第一个等号后面的value就相当于function(value),箭头(=>)后面的value + 1就对应function中的函数主体{ return value + 1;},这是只传一个参数的情况,那么当有2个或2 个以上传参该怎么办?
先看传多个参数的javascript表现手法:
//2.传2个参数的javascript写法
var test = function(value1,value2){
value1 += 1;
value2 += 2;
return value2 - value1;
}
传多个参数时的ES6写法:
//3.传2个参数的ES6写法
var test = (value1,value2) => (value2+2)-(value1 + 1);
- 1.2、let命令
第一次见,不明白意思,没关系,这是一个过程。
let是ES6新增的特性,用法类似于var,用来声明变量。但有根本的区别:
- 1.2.1: let只能用来声明局部变量,或者说let声明的变量只能在局部内使用。
而var正好与之相反。
let使用场景事例(for循环):
- 1.2.1: let只能用来声明局部变量,或者说let声明的变量只能在局部内使用。
var arr = [1,2,3,4];
for(let i=0;i<arr.length;i++){
document.write(i+"");
}
1.2.2:var 声明的变量可以先使用后声明,虽然不会报错,但会打印:undefined。而let则只能先声明后使用,根java一样,否则会报ReferenceError
例如:console.log(test1);
console.log(test2);
var test1=10;
let test2 = 100;1.2.3: let 变量的暂时性死区
从上可知,let声明的变量只能在局部有用。外部不能调用。
ES6明确规定,如果代码块中存在let和const命令,则这些被let 和 const声明的变量,从一开始就形成了封闭的作用域。在let声明变量前,使用该变量都会报ReferenceError。此即:暂时性死区。1.3 : 数组的解构赋值
定义:从数组或对象中提取值,对变量进行赋值的过程被称为解构赋值。
在ES6以前,假如要定义三个变量,做法如下:
var a = 10;
var b = 11;
var c = 12;
有了ES6后,简化成这样:
var [a,b,c] = [10,11,12];
这就叫:从数组中提取值,对号入座的对变量进行赋值。
如果对不上,则相应位置上的变量的值为undefined.1.4:对象的解构赋值
上面讲了数组的解构赋值,它是根据数组元素的排列次序来的,变量的值取决于元素的位置。
那么对象是不是也一样呢?看个例子:
var {foo,bar} = {foo:"aaa",bar:"bbb"};
foo//aaa
bar//bbb
对象的解构是指对象的属性解构,即遍历对象所声明的所有属性。只有当变量与属性名一样时,才能取正确的值 。
var {bar,foo1} = {foo:"aaa",bar:"bbb"};
foo1//undefined
bar//bbb
1.5: 等同运算符(===)
这是ES6里面特有的等同运算符,与相等运算符(==)是不一样的,如果会java的同学估计就很清楚了,其实===与==的关系就好比 java中==与equals的关系。
===:是严格意义上的全部相同,值,地址,类型等。
而==:只是比较值。未完待续