• 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

  • 相关阅读:
    beta冲刺3/7
    案例分析
    beta冲刺2/7
    beta冲刺1/7
    烟头的待办项
    Spring框架原理概述
    Spring源码环境搭建
    BeanFactory的启动流程
    Spring容器的原理
    Spring Framework 概述
  • 原文地址:https://www.cnblogs.com/luoxiaoxi/p/4769350.html
Copyright © 2020-2023  润新知