JavaScript自学笔记(必看篇)

时间:2021-05-26

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'); // 返回7s.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'); // truexiaoming.hasOwnProperty('toString'); // false

13-Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);//二维数组初始化法m.get('Michael'); // 95 var m = new Map();// 直接初始化一个空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.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个functionvar 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()); // 1alert(f2()); // 4alert(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());//1alert(c.add());//2alert(c.add());//3***在返回的对象中,实现了一个闭包,该闭包携带了局部变量n,并且,从外部代码根本无法访问到变量n。换句话说,闭包就是携带状态的函数,并且它的状态可以完全对外隐藏起来。 ⑤利用Math.pow(x, y)计算x^2或x^3 //Math.pow(x, y)-->x^yfunction make_pow(y){ return function(x){ return Math.pow(x,y); }} var pow2 = make_pow(2)var pow3 = make_pow(3) alert(pow2(3))//9alert(pow3(3))//27

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

var f = x => x*x*xalert(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);//1alert(g.next().value);//2alert(g.next().value);//3

以上就是小编为大家带来的JavaScript自学笔记(必看篇)全部内容了,希望大家多多支持~

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章