JavaScript自学笔记(必看篇)


Posted in Javascript onJune 23, 2016

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+' '); // 依次输出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

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

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
range 标准化之获取
Aug 28 Javascript
js单例模式详解实例
Nov 21 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
js获取url传值的方法
Dec 18 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
React组件的三种写法总结
Jan 12 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
SVG实现时钟效果
Jul 17 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 #Javascript
JS使用JSON作为参数实例分析
Jun 23 #Javascript
浅析Bootstrap表格的使用
Jun 23 #Javascript
浅析Bootstrap验证控件的使用
Jun 23 #Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 #Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 #Javascript
You might like
typecho插件编写教程(一):Hello World
2015/05/28 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python内置数据类型之列表操作
2018/11/12 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python代码区分大小写吗
2020/06/17 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Python实现自动整理文件的脚本
2020/12/17 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
2014社区三八妇女节活动总结
2014/03/01 职场文书
天猫活动策划方案
2014/08/21 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
个人收入证明格式
2015/06/24 职场文书
培训计划通知
2015/07/15 职场文书
实验室安全管理制度
2015/08/05 职场文书
宿舍管理制度范本
2015/08/07 职场文书
《颐和园》教学反思
2016/02/19 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
python数字图像处理实现图像的形变与缩放
2022/06/28 Python