JavaScript自学笔记

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

if(x){}                                     //变量被初始化了或者变量不为空或者变量不为零

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

function sum(i1,i2){return i1+i2}

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

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

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

3-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对象就是数组,定义数组不用预先限定长度

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

var dict=new Array();//作为Dictionary使用

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-遍历当前页面能够调用的所有元素

var s=null;

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

s+=k+" ;";

}

alert(s);

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

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-改大写小写

var s = ‘Hello‘;

s.toUpperCase();             // 返回‘HELLO‘

var s = ‘Hello‘;

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

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

var s = ‘hello, world‘;

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

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

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

var s = ‘hello, world‘

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

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

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

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操作符:

‘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

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方法,它接收一个函数,每次迭代就自动回调该函数。

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‘, ‘B‘, ‘C‘]);

s.forEach(function (element, set) {

alert(element);

});

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

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

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

alert(value);

});

var a = [‘A‘, ‘B‘, ‘C‘];

a.forEach(function (element) {

alert(element);

});

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

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

arr.map(function(x){

return x*x;

}).forEach(function (element) {

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

});

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

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

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

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

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, 2, 5, 8, 0]变换成整数12580

var arr = [1, 2, 5, 8, 0];

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

return x*10+y;

}));

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

var arr = [0,1,2,3,4,5,6,7,8,9];

alert(arr.filter(function(x){

return x%2===0;

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

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

var arr = [‘A‘, ‘‘, ‘B‘, null, undefined, ‘C‘, ‘  ‘];

alert(arr.filter(function (s) {

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

})); // [‘A‘, ‘B‘, ‘C‘]

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

[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

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

var arr = [];

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

arr.push(x);

}

document.write(arr+"<br/>");

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)程序结构

①将函数作为返回值赋值给参数,调用该参数获得计算结果

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

22-箭头函数(目前仅firefox支持)                   //参数=>函数体

var f = x => x*x*x

alert(f(3))          //27

23-用generator产生斐波那契数列

function* fib(max){

var t,a=0,b=1,n=1;

while(n<=max){

yield a;

t=a+b;

a = b;

b = t;

n++;

}

return a;

}

for (var x of fib(10)) {                           //用for ... of循环迭代generator对象

document.write(x+‘&nbsp‘);                    // 依次输出0, 1, 1, 2, 3

}

用generator产生一个自增的ID(无需全局变量)

function* next_id(){

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

}

var g = next_id();

alert(g.next().value);                                    //1

alert(g.next().value);                                    //2

alert(g.next().value);                                    //3

时间: 2024-11-14 11:47:07

JavaScript自学笔记的相关文章

qml自学笔记------自己写相似于劲舞团的按键小游戏(中)

接上篇<qml自学笔记------自己写类似于劲舞团的按键小游戏(上)> 第三部分DisplayPart.qml 代码的其它部分都是渣,就这里花了点时间,整个小游戏就靠这个文件. 首先,屏幕上要随机的滑过空格或者箭头,每个图片就是一个项目,那么就要动态的创建项目. 动态创建项目方法有三种(我所知道的),第一种是通过JavaScript调用Qt.createComponent(),Qt.createQmlObject()来创建对象,这里要注意的是创建时必须传父对象,由于图形项目没有父对象是无法显

qml自学笔记------自己写类似于劲舞团的按键小游戏(中)

接上篇<qml自学笔记------自己写类似于劲舞团的按键小游戏(上)> 第三部分DisplayPart.qml 代码的其他部分都是渣,就这里花了点时间,整个小游戏就靠这个文件. 首先,屏幕上要随机的滑过空格或者箭头,每一个图片就是一个项目,那么就要动态的创建项目.动态创建项目方法有三种(我所知道的),第一种是通过JavaScript调用Qt.createComponent(),Qt.createQmlObject()来创建对象,这里要注意的是创建时必须传父对象,因为图形项目没有父对象是无法显

CSS自学笔记(14):CSS3动画效果

在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScript了. CSS3中新增的动画效果的属性以及主流浏览器支持情况 属性 浏览器支持 transition IE Firefox Chrome Safari(-webkit-) Opera @keyframes IE Firefox Chrome(-webkit-) Safari(-webkit-)

CSS自学笔记(9):CSS拓展(二)

CSS图片 当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我们就可以实现这些操作,下面是一个简单的例子: 内马尔破门瞬间 街舞助兴 激情墨西哥 梅西的任意球来 源代码是: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 &

Javascript读书笔记:函数定义和函数调用

定义函数 使用function关键字来定义函数,分为两种形式: 声明式函数定义: function add(m,n) { alert(m+n); } 这种方式等同于构造一个Function类的实例的方式: var add = new Function("m", "n", "alert(m+n);"); Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:&

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

斯坦福大学机器学习(Andrew [email&#160;protected])--自学笔记

今天学习Andrew NG老师<机器学习>之6 - 6 - Advanced Optimization,做笔记如下: 用fminunc函数求代价函数最小值,分两步: 1.自定义代价函数 function [jVal,gradient] = costFunction(theta)jVal = (theta(1)-5)^2 + (theta(2)-5)^2;gradient = zeros(2,1);gradient(1) = 2*(theta(1)-5);gradient(2) = 2*(the

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript进阶笔记(2)

js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函数式编程中,有一种函数称为匿名函数,也就是没有名称的函数,是js中的一个非常重要的概念.通常匿名函数的使用情况是,创建一个供以后使用的函数.比如将匿名函数保存在一个变量里面,或将其作为一个对象方法,更有甚者将其作为一个回调等等之类的. //保存在变量中,通过fn去引用 var fn=function