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

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

(0)

相关推荐

  • JavaScript学习笔记之数组去重

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法. 下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处. 双重循环去重 这个方法使用了两个for循环做遍历.整个思路是: 构建一个空数组用来存放去重后

  • JavaScript继承学习笔记【新手必看】

    JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承.实现继承的方法很多,下面就只是其中的几种. 一. 原型链继承 function Person() { //被继承的函数叫做超类型(父类,基类) this.name='mumu'; this.age='18'; } Person.prototype.name='susu';//当属性名相同时需就近原则,先在实

  • Javascript基础学习笔记(菜鸟必看篇)

    什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin

  • JavaScript中的Number数字类型学习笔记

    使用IEEE754格式来表示整数和浮点数值. 浮点数值:该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字.浮点数值需要内存空间是保存整数值的两倍.最高精度是17为小数,但在进行算术运算时其精度远远不如整数. 各种数值类型:十进制,八进制(在严格模式下无效),十六进制 八进制字面量的第一位必须是0,然后是八进制数字序列(0~7).如果字面值中的数值超出了范围,那么前导0将被忽略,后面的数值将被当做十进制数来解析 070//56 079//79 十六进制字面值的前两位必须是0x,后跟十六

  • 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中没

  • javaScript知识点总结(必看篇)

    1.javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下: 1.javaScript主要用来向HTML页面找那个添加交互行为. 2.javaScript是一种脚本语言,语法和java类似. 3.javaScript一般用来编写客户端脚本. 4.javaScript是一种解释性语言,边执行边解释. 2.javaScript由核心语法ECMAScript.浏览器对象模型(

  • JavaWeb学习笔记分享(必看篇)

    自定义列表 <dl></dl>:表示列表的范围 **在里面 <dt></dt>:上层内容 **在里面 <dd></dd>:下层内容 有序列表 <ol></ol>:有序列表的范围 --属性 type:设置排序方式,1(默认),a,i.. **在ol标签里面 <li>具体内容</li> 无序列表 <ul></ul>:无序列表的范围 --属性 type:circle(空

  • 基于JavaScript Array数组方法(新手必看篇)

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表,但不同的是,ECMAScript数组中的每一项可以保存任何类型的数据,无论是数值.字符串或者是对象.同时,ECMAScript中的数组大小是可以动态调整的,即可以根据数据的添加自动增长以容纳新增的数据.下面总结一下JavaScript中数组常用的操作函数及用法. •创建数组 创建数组主要有构造函数和

  • JavaScript中闭包之浅析解读(必看篇)

    JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常用到闭包的,可是面试问的时候,回答又往往是我们经常搜到的答案,唉 不管是应付面试 还是真的想学点东西 ,我也用自己的理解跟大家分享一下,书面化就避免不了了的. 1.闭包是什么? 红宝书中曰:"是指有权访问另外一个函数作用域中的变量的函数." 简单的说,JavaScript允许使用内部函数-

  • Java中的循环笔记整理(必看篇)

    一.循环的类型: 1.for循环 class For{ public static void main(String[] args) { System.out.println("Hello World!"); System.out.println("Hello World!"); System.out.println("Hello World!"); System.out.println("Hello World!"); Sy

  • Java基本语法笔记(菜鸟必看篇)

    一.关键字&标识符 1.关键字:被Java语言赋予了特殊含义,用作专门用途的字符串(单词): 2.保留字:现有Java版本尚未使用,但以后版本可能会作为关键字使用.自己命名时要避免使用这些保留字: 3.标识符:凡是自己可以起名字的地方都叫标识符: 4.标识符命名规则(必须遵守): 1.由26个英文字母大小写,0-9,_或$组成: 2.数字不可以开头: 3.不可以使用关键字以及保留字,但能包含关键字以及保留字: 4.Java中严格区分大小写,长度无限制: 5.标识符不能包含空格: 5.Java中的

  • 常用Javascript函数与原型功能收藏(必看篇)

    如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function

  • JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

随机推荐