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 相关文章推荐
关于jQuery object and DOM element
Apr 15 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
javascript 闭包详解
Jul 02 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 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
基于mysql的bbs设计(一)
2006/10/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python Collatz序列实现过程解析
2019/10/12 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
什么是接口(Interface)?
2013/02/01 面试题
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python