JavaScript自学笔记(必看篇)

0-判断变量、参数是否初始化

rush:js;"> if(x){} //变量被初始化了或者变量不为空或者变量不为零

1-声明函数不需要声明返回值、参数类型，句尾甚至都不需要';'

rush:js;"> function sum(i1,i2){return i1+i2}

2-直接声明匿名函数立即使用

rush:js;"> var f=function(i1,i2){return i1+i2;}; alert(f(1,2));//普通匿名函数

alert(function(i1,i2){return i1+i2;}(3,4));//直接声明,立即使用

3-js中没有类的概念，于是有些方法就长的像类了

rush:js;"> function Person(name,age){

this.Name=name;//动态增加属性，类似于C#里的dynamic A = new ExpendoObject();

this.Age=age;

this.SayHello=function(){alert('Hello,My name is '+name+' I am '+age+' years old.')};

}

var p1=new Person('lorry',21);

p1.SayHello(); //像类一样调用

p1.Gender='男'; //动态增加‘性别'属性

alert(p1.Gender);

4-Array对象就是数组，定义数组不用预先限定长度

rush:js;"> var arr=new Array();

arr[0]=0;

arr[1]=1;

arr[2]=2;

for(var i=0;i<=arr.length-1;i++){

alert(arr[i]);

}

5-Array是数组，也是Dictionary，也是Stack

dict['我']='wo';

dict['爱']='ai';

dict['你']='ni';

alert(dict['我']); //通过键值调用

alert(dict.爱); //像调用属性一样调用（动态语言的特性）

for(var k in dict){ //js中的遍历

alert(k); //'我'，'爱'，'你'-->打印出的是key

}

for(var k of dict){ //js中的遍历

alert(k); //'wo'，'ai'，'ni'-->打印出的是value

}

var arr = [1,2,3,4,5];//Array的简化创建方式

var arr = {"lorry":21,"cloud":20};//字典风格的创建方式

6-遍历当前页面能够调用的所有元素

rush:js;"> var s=null;

for(var k in document){//对象的属性都是以key的形式出现的

s+=k+" ;";

}

alert(s);

7-使用类似Array的下标操作获取字符串某个指定位置的字符

rush:js;"> var s = 'Hello,world!';

s[0]; // 'H'

s[6]; // ' '

s[12]; // '!'

s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果：

var s = 'Test';

s[0] = 'X';

alert(s); // s仍然为'Test'

8-改大写小写

rush:js;"> var s = 'Hello';

s.toupperCase(); // 返回'HELLO'

var s = 'Hello';

s.toLowerCase(); // 返回'hello'

9-搜索指定字符串出现的位置

rush:js;"> var s = 'hello,world';

s.indexOf('world'); // 返回7

s.indexOf('World'); // 没有找到指定的子串，返回-1

10-获取字符串指定索引区间的子串

rush:js;"> var s = 'hello,world'

s.substring(0,5); // 从索引0开始到5（不包括5），返回'hello'

s.substring(7);// 从索引7开始到结束，返回'world'

11-JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成

rush:js;"> var xiaoming = {

name: '小明',birth: 1990,school: 'No.1 Middle School',height: 1.70,weight: 65,score: null//最后一个键值对不需要在末尾加','

};

xiaoming.name; // '小明'

xiaoming.birth; // 1990

访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用[]括起来：

var xiaohong = {

name: '小红','middle-school': 'No.1 Middle School'

};

xiaohong['middle-school']; // 'No.1 Middle School'

xiaohong['name']; // '小红'

xiaohong.name; // '小红'

xiaohong.age; // undefined

12-检测xiaoming是否拥有某一属性，用in操作符：

rush:js;"> 'name' in xiaoming;// true

'grade' in xiaoming;// false

***如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

'toString' in xiaoming; // true

***要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnproperty()方法：

xiaoming.hasOwnProperty('name'); // true

xiaoming.hasOwnProperty('toString'); // false

13-Map

rush:js;"> var m = new Map([['Michael',95],['Bob',75],['Tracy',85]]);//二维数组初始化法

m.get('Michael'); // 95

var m = new Map();// 直接初始化一个空Map

m.set('Adam',67); // 添加新的key-value

m.set('Bob',59);

m.has('Adam'); // 是否存在key 'Adam': true

m.get('Adam'); // 67

m.delete('Adam'); // 删除key 'Adam'

m.get('Adam'); // undefined

var m = new Map([[1,'x'],[2,'y'],[3,'z']]);

for (var n of m) { // 遍历Map

alert(n[1] + '=' + n[0]);

}

14-iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。

rush:js;"> var a = ['A','B','C'];

a.forEach(function (element,index,array) {

// element: 指向当前元素的值

// index: 指向当前索引

// array: 指向Array对象本身

alert(element);

});

Set与Array类似，但Set没有索引，因此回调函数最多两个参数：

var s = new Set(['A','C']);

s.forEach(function (element,set) {

alert(element);

});

Map的回调函数参数依次为value、key和map本身：

var m = new Map([[1,'z']]);

m.forEach(function (value,key,map) {

alert(value);

});

var a = ['A','C'];

a.forEach(function (element) {

alert(element);

});

15-用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：

rush:js;"> var arr = [1,5,6,7,8,9];

arr.map(function(x){

return x*x;

}).forEach(function (element) {

alert(element);// [1,9,16,25,36,49,64,81]

});

16-用map()把Array的所有数字转为字符串：

rush:js;"> var arr = [1,9];

arr.map(String); // ['1','2','3','4','5','6','7','8','9']

17-用Array的reduce()做累积计算

rush:js;"> var arr = [];

for (var x = 1; x <= 100; x++) {

arr.push(x); //将1~100放入数组

}

alert(arr.reduce(function(x,y){

return x+y; //对arr的所有对象累积求和，返回求和结果

}));

18-用reduce()做一个牛逼的转换：把[1,0]变换成整数12580

rush:js;"> var arr = [1,0];

alert(arr.reduce(function(x,y){

return x*10+y;

}));

19-用filter()把Array的某些元素过滤掉

rush:js;"> var arr = [0,1,9];

alert(arr.filter(function(x){

return x%2===0;

}));//0,8 //返回true则保留

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

var arr = ['A','',null,undefined,'C',' '];

alert(arr.filter(function (s) {

return s && s.trim(); // 注意：IE9以下的版本没有trim()方法

})); // ['A','C']

20-Array的sort()方法默认把所有元素先转换为String再排序，于是...

rush:js;"> [10,20,2].sort(); // [1,10,20]

因此如果要按数字大小排序，可以这么写：

var arr = [];

for (var x = 1; x <= 10; x++) {

arr.push(x);

}

document.write(arr+"
");

document.write(arr.sort(function(x,y){

return x<y?true:false;

}));

若要忽略字母大小写影响，则要先转化为大写或小写

var arr = ['Google','apple','Microsoft'];

alert(arr.sort(function (s1,s2) {

var x1 = s1.toupperCase();

var x2 = s2.toupperCase();

return x1 < x2 ?false:true;

})); // ['apple','Google','Microsoft']

21-闭包（Closure）程序结构

<div class="jb51code">
<pre class="brush:js;">
①将函数作为返回值赋值给参数，调用该参数获得计算结果

var arr = [];

for(var n=1;n<101;n++){

arr.push(n);

}

function lazy_sum(arr){

var sum = function(){

return arr.reduce(function(x,y){

return x+y;

});

}

return sum;

}

var f = lazy_sum(arr);

alert(f());

②返回的函数并没有立刻执行，而是直到调用了f()才执行

function count() {

var arr = [];

for (var i=1; i<=3; i++) {

arr.push(function () {

return i * i;

});

}

return arr;

}

var results = count(); //results里存了3个function

var f1 = results[0];

var f2 = results[1];

var f3 = results[2];

f1(); // 16 返回的函数引用了变量i，但它并非立刻执行。

f2(); // 16 等到3个函数都返回时，它们所引用的变量i已经变成了4，

f3(); // 16 因此最终结果为16

***返回闭包时牢记：返回函数不要引用任何循环变量，或者后续会发生变化的变量!

③如果一定要引用循环变量怎么办？

方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，

无论该循环变量后续如何更改，已绑定到函数参数的值不变：

function count() {

var arr = [];

for (var i=1; i<=3; i++) {

arr.push(function(n){

return function(){

return n*n;

}

}(i));

}

return arr;

}

var results = count();

var f1 = results[0];

var f2 = results[1];

var f3 = results[2];

alert(f1()); // 1

alert(f2()); // 4

alert(f3()); // 9

④在没有class机制，只有函数的语言里，借助闭包，可以封装一个私有变量

function creat_counter(init){

var n = init||0;

return{

add:function(){

n+=1;

return n;

}

}

}

var c = creat_counter();

alert(c.add());//1

alert(c.add());//2

alert(c.add());//3

***在返回的对象中，实现了一个闭包，该闭包携带了局部变量n，并且，从外部代码根本无法访问到变量n。

换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。

⑤利用Math.pow(x,y)计算x^2或x^3 //Math.pow(x,y)-->x^y

function make_pow(y){

return function(x){

return Math.pow(x,y);

}

}

var pow2 = make_pow(2)

var pow3 = make_pow(3)

alert(pow2(3))//9

alert(pow3(3))//27