JavaScript初级篇(一)

前言

由于目前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循环）：

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的关系。
  ===：是严格意义上的全部相同，值，地址，类型等。
  而==:只是比较值。

  未完待续