自学JavaScript语法的收获

转载请注明出处:http://blog.csdn.net/hnytdangyao/article/details/78331034.
本文出自 [ 党耀的博客 ]

笔者是做Android开的但是因为项目后面用到了weex，所以参照廖雪峰大神的官网自学了相关的前端技能，最近整理了下自己的学习笔记并把它分享出来，欢迎大家一起讨论一起进步。

关于在JS中对id 和class 的理解

id和class都可以在网页中任何标签内使用。一般比较重要的部分、比较特别的盒子使用id，而小局部不重要的或小结构使用class。id调用css中以“#”井号命名的样式选择器，class调用css中以“.”英文半角小写句号命名的样式选择器

关于对象：

1.JS的对象是动态类型，可以自由地给一个对象添加或删除属性，删除使用delete 删除一个不存在的school属性也不会报错

2.检测是否拥有某一属性，可以用in，但是不会判断是否是该对象独有属性，会将继承的属性也算作在内，如果判断独有的属性，用hasOwnProperty()

关于数组：

1.Array数组可以包含任意类型，获取Array的长度用length属性。
注意，直接给Array的length赋一个新的值会导致Array大小的变化

2.Array可以通过索引把对应的元素修改为新的值。
注意，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：
在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

3.slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array。这个方法一样遵循包左不包右的原则。
如果不给slice()传递任何参数，就会从头截取到尾，所以也可以当做复制Array的一种方式.

4.push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉.

5.如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉.

6.排序相关

sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序。

reverse()，倒序。splice()方法是修改Array的“万能方法”，// 从索引2开始删除3个元素,然后再添加两个元素:arr.splice(2, 3, ‘a’, ‘b’);// 只删除,不添加:arr.splice(2, 2);// 只添加,不删除:arr.splice(2, 0, ‘a’, ‘b’)

7.concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array。注意，concat()方法并没有修改当前Array，而是返回了一个新的Array。

8.join().它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串.

var arr = {‘A’,’B’,’C’,1,2};arr.join('-'); // ‘A-B-C-1-2’

如果Array的元素不是字符串，将自动转换为字符串后再连接.

数组的遍历详见ES6新增特性一篇

关于函数

1.函数实际上也是一种函数对象，可以通过Var abs = function (x){}; 赋值给变量abs，等价于Function abs(x){}

2.js允许传入任何参数而不影响调用。传入的参数比定义的参数多也没有问题，传入的参数比定义的少，返回NaN。
要避免收到undefined，可以对参数进行检查：

if (typeof x !== 'number') {        throw 'Not a number';}

3.arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：

利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

function abs() {    if (arguments.length === 0) {        return 0;    }    var x = arguments[0];    return x >= 0 ? x : -x;}abs(); // 0abs(10); // 10abs(-9);// 9

实际上arguments最常用于判断传入参数的个数

// foo(a[, b], c)// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：function foo(a, b, c) {    if (arguments.length === 2) {        // 实际拿到的参数是a和b，c为undefined        c = b; // 把b赋给c        b = null; // b变为默认值    }}

4.变量作用域

js中变量都是有各自的作用域，外部不可引用内部定义的变量。并且多重嵌套重名的情况下，js默认从内向外查找，内部的会屏蔽外部的同名变量。

• 变量提升
  JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部。习惯于java开发的就保持先声明再使用的原则就好了。

• 全局作用域
  js有一个默认的全局对象window，全局作用域的变量实际上就是window对象的一个属性。(只要不在函数内声明的变量就具有全局作用域)

• 名字空间
  不同的JS文件如果使用了相同的全局变量，或者相同命名的顶层函数都会造成命名冲突，减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。

例如：

// 唯一的全局变量MYAPP:var MYAPP = {};// 其他变量:MYAPP.name = 'myapp';MYAPP.version = 1.0;// 其他函数:MYAPP.foo = function () {    return 'foo';};

• 局部作用域
  由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量。
  为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量。

• 常量
  ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域

4.方法

为对象里的一个属性声明一个函数，叫做方法。如果方法里用到了this，那么this指向的是该对象，调用必须按照object.xxx()使用。

坑爹的是如果这样var fn = obj.xxx(); 执行fn(); 那么fn结果为NaN。

这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。

修复办法就是，在方法内我们用一个that变量首先捕获this，用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。可以参考廖雪峰大神的这篇文章。

要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数

另一个与apply()类似的方法是call()，唯一区别是：

* apply()把参数打包成Array再传入* call()把参数按顺序传入。
Math.max.apply(null, [3, 5, 4]); // 5Math.max.call(null, 3, 5, 4); // 5

对普通函数调用，我们通常把this绑定为null
利用apply()，我们还可以动态改变函数的行为。

5.高阶函数

其实就是复合函数——— 一个函数接收另一个函数作为参数。

• map/reduce
  如果把函数x * x 作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，可以使用map

function pow(x) {    return x * x;}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

map()传入函数pow作为参数

reduce()把结果继续和序列的下一个元素做累积计算

• filter
  用于把Array的某些元素过滤掉，然后返回剩下的元素。使用filter关键在于正确实现一个“筛选”函数。

把一个Array中的空字符串删掉：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];var r = arr.filter(function (s) {    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法});r; // ['A', 'B', 'C']

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身

var arr = ['A', 'B', 'C'];var r = arr.filter(function (element, index, self) {    console.log(element); // 依次打印'A', 'B', 'C'    console.log(index); // 依次打印0, 1, 2    console.log(self); // self就是变量arr    return true;});

• sort
  Array的sort()方法默认把所有元素先转换为String再按照ASCII的大小比较，贼坑。但是sort函数是一个高阶函数，可以接收一个比较函数来实现自定义排序。注意：sort()方法会直接对Array进行修改，它返回的结果仍是当前Array。

6.闭包

函数也可以作为返回值。在函数lazy_sum中又定义了函数sum，这时候接受函数sum的是一个局部变量。

function lazy_sum(arr) {    var sum = function () {        return arr.reduce(function (x, y) {            return x + y;        });    }    return sum;}

这时候每次调用都会返回一个新的函数

var f1 = lazy_sum([1, 2, 3, 4, 5]);var f2 = lazy_sum([1, 2, 3, 4, 5]);f1 === f2; // false 

未完待续