`

JavaScript学习笔记

 
阅读更多

一、初识javascript

1、javascript组成

  • ECMAscript
  • 文档对象（DOM）
  • 浏览器对象(BOM)

二、变量

  • javascript是一种弱类型的脚本语言
  • var c=3;变量声明
  • 变量命名规则:
  • 1）必须以字母或下划线_或“$”开头；
  • 2）长度不能超过255个字条；
  • 3）不允许使用空格；
  • 4）不使用关键字和保留字；

  • 5）区分大小写。

  • 全局变量

  • 在方法外部声明的变量；

  • 方法内部，没有加var关键字声明的变量

  • 局部变量

  • 方法内部，使用var声明的变量

示例：

<script type="text/javascript" charset="utf-8">
    var a = 3; //number 全局变量
    //两种变量：局部变量；全局变量
    function test()
    {
        var a = 2; //局部变量               
        document.write(a);
    }           
    test();
</script>

三、数据类型

  • ECMAScript中，数据类型分为基本类型和引用类型两大类；
  • 基本数据类型：Number、Boolean、String、Undefined、Null
  • -Number：整数和小数、NaN、Infinity，-Infinity
  • -Undefined：变量声明但未赋值
  • -Null：表示一个空的对象引用；
  • 引用类型：Object类型，如：对象、数组、RegExp、Date...
  • Typeof操作符
  • 基本类型和引用类型的值
  • -基本类型是按照值访问的，因为可以操作保存在变量中的实际值；
  • -引用类型则是按引用去访问

四、运算符

- 自动转换机制 - “==”表示可以经过自动转换比较的是数值； - “===”表示可以经过自动转换，先比较值，再比较数据类型

五、控制语句

六、引用类型

  • 掌握数组的概念、特性、常用方法
  • 掌握Object，学会使用对象
  • 了解其它引用类型对象

七、数组

  • 数据组是一种对象
  • 特点：“数组”是一组数据的集合；长度可变，元素类型也可以不同；数组长度随时可变，随时可以修改。(length属性)
  • 常用方法：
  • -push、pop
  • -shift、unshift
  • -splice、slice
  • -concat、join、sort、reverse等
         /**
         * js中数组类似于java中的map容器，长度可随意改变，元素类型任意。
         */
        //创建数组的形式
        var arr1 = new Array();//不建议使用
        var arr =[1,2,3,4,true,'abc',new Date()];

        arr.length = 5;
        document.write(arr);

        //push
        document.write("<br />");
        var arr = [];
        var result = arr.push(1,2,true);//返回值为新数组的长度
        document.write(arr);
        document.write("<br />");
        document.write(result);

        //pop
        var obj = arr.pop();//从数组的尾部移除一个元素,返回值移除的元素
        document.write(obj);//true

        //shift unshift 方法 
        document.write("<br />---shift--<br />");
        var arr = [1,2,3,true,new Date()];
        var obj = arr.shift();//从头部移除一个元素，返回移除的元素
        document.write(arr);
        document.write("<br />---unshift--<br />");
        arr.unshift(100,false);//从头部插入多个元素(返回新数组长度)
        document.write(arr);

        /**
         * splice:操作数组本身
         * 第一个参数：起始位置
         * 第二个参数：表示截取的个数
         * 第三个参数以后：表示追加的新元数
         */
        document.write("<br />--splice--<br />");
        var arr = [1,2,3,4,5];
        arr.splice(1,2,3,4,5);//134545 
        document.write(arr);
        //slice：不操作数组本身
        document.write("<br />--slice--<br />");
        var arr =[1,2,3,4,5];
        var result = arr.slice(2,4);//截取范围，左闭右开区间，返回截取的内容 
        document.write(result);
        document.write(arr);

        //操作数组的方法：concat join
        document.write("<br />--contcat--<br />");
        var arr1=[1,2,3];
        var arr2 = [4,5];
        document.write(arr1.concat(arr2));//合并连接，不操作数组本身

        //join  不操作数组本身
        document.write("<br />--join--<br />");
        var result = arr1.join('-');//在每个元素之间加入内容
        document.write(result); 

        /**
         * sort正序排序
         * reverse 倒序排序
         */
        document.write("<br />--sort--<br />");
        var arr1 = [5,2,1,4,3];
        var arr2 = [10,2,4,1,7];

        document.write(arr1.sort());
        document.write("<br />");
        document.write(arr1.reverse());//按照集合的位置进行倒序排序

        arr2.sort();//1 10 2 4 7

        function compare(value1,value2)
        {
            if(value1 < value2)
            {
                return -1;
            }else if(value1 value2){
                return 1;
            }
            else{
                return 0;
            }
        }

        arr2.sort(compare);//1 2 4 7 10

八、ECMA5数组新特性

  • -位置方法：indexOf、lastIndexOf
  • -迭代方法：every、filter、forEach、some、map
  • -缩小方法：reduce、reduceRight

1. indexof、lastIndexOf

  • indexOf按照索引的升序比较 searchElement 和数组里的元素们，它使用内部的严格相等比较算法 (11.9.6)，如果找到一个或更多这样的位置，返回这些位置中第一个索引；否则返回 -1。
  • 可选的第二个参数 fromIndex 默认是 0（即搜索整个数组）。如果它大于或等于数组长度，返回 -1，即不会搜索数组。如果它是负的，就把它当作从数组末尾到计算后的 fromIndex 的偏移量。如果计算后的索引小于 0，就搜索整个数组。
  • lastIndexOf 按照索引的降序比较 searchElement 和数组里的元素们，它使用内部的严格相等比较算法 (11.9.6)，如果找到一个或更多这样的位置，返回这些位置中最后一个索引；否则返回 -1。
  • 可选的第二个参数 fromIndex 默认是数组的长度减一（即搜索整个数组）。如果它大于或等于数组长度，将会搜索整个数组。如果它是负的，就把它当作从数组末尾到计算后的 fromIndex 的偏移量。如果计算后的索引小于 0，返回 -1。
        //1个参数时表示传值，返回索引位置（index从0开始）
        var arr = [1,2,3,4,5,4,3,2,1];
        var index = arr.indexOf(4);//3
        //2个参数时，第一个参数是值，第二参数是起始位置
        var index = arr.indexOf(2,2);//7

2. every

/** - * every ( callbackfn [ , thisArg ] ) - * callbackfn 应该是个函数，它接受三个参数并返回一个可转换为布尔值 true 和 false 的值。 - * every 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，直到他找到一个使 callbackfn 返回 false 的元素。 - * 如果找到这样的元素，every 马上返回 false，否则如果对所有元素 callbackfn 都返回 true，every 将返回 true。 - * callbackfn 只被数组里实际存在的元素调用；它不会被缺少的元素调用。 - 如果提供了一个 thisArg 参数，它会被当作 this 值传给每个 callbackfn 调用。如果没提供它，用 undefined 替代。 -调用 callbackfn 时将传入三个参数：元素的值，元素的索引，和遍历的对象。 - */

var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.every(function(item,index,array){
                return item >2;
            });//false

3. filter

  • callbackfn 应该是个函数，它接受三个参数并返回一个可转换为布尔值 true 和 false 的值。filter 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，并用使 callbackfn 返回 true 的所有值构造一个新数组。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。
var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.filter(function(item,index,array){
return item >2;
});//3,4,5,4,3

4.forEach

  • forEach ( callbackfn [ , thisArg ] )
  • callbackfn 应该是个函数，它接受三个参数。forEach 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。
            var arr = [1,2,3,4,5,4,3,2,1];
            arr.forEach(function(item,index,array){
                return document.write(item*2+",");;
            });//2,4,6,8,10,8,6,4,2,

5.map

  • map ( callbackfn [ , thisArg ] )
  • callbackfn 应该是个函数，它接受三个参数。map 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，并用结果构造一个新数组。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。
            var arr = [1,2,3,4,5,4,3,2,1];
            var result = arr.map(function(item,index,array){
                return item*2;
            });//2,4,6,8,10,8,6,4,2

5.some

  • some ( callbackfn [ , thisArg ] )
  • callbackfn 应该是个函数，它接受三个参数并返回一个可转换为布尔值 true 和 false 的值。some 按照索引的升序，对数组里存在的每个元素调用一次 callbackfn，直到他找到一个使 callbackfn 返回 true 的元素。如果找到这样的元素，some 马上返回 true，否则，some 返回 false。callbackfn 只被实际存在的数组元素调用；它不会被缺少的数组元素调用。
            var arr = [1,2,3,4,5,4,3,2,1];
            var result = arr.some(function(item,index,array){
                return item>2;
            });//true

6.reduce

  • reduce ( callbackfn [ , initialValue ] )
  • callbackfn 应该是个函数，它需要四个参数。reduce 按照索引的升序，对数组里存在的每个元素 , 将 callbackfn 作为回调函数调用一次。
        var arr = [1,2,3,4,5,4,3,2,1];
        var result = arr.reduce(function(previousValue,currentValue,index,array){
            return previousValue+currentValue;
        });//25

九、Object

  • Object类型的创建方式、使用
  • 对于Object类型应用for in 枚举循环

- Object实例有下例属性和方法：

  1. Constructor
  2. hasOwnProperty(propertyName)
  3. isPrototypeOf(Object)
  4. propertyIsEnumerablepropertyName)
  5. toLocaleString()
  6. toString()
  7. valueOf();

十、Object模拟Map

    > function Map(){

                var obj={};
                //
                this.put = function(key,value){
                    obj[key]=value;
                }
                //
                this.size = function(){
                    var count=0;
                    for(var attr in obj)
                    {
                        count++;
                    }
                    return count;
                }
                //
                this.get = function(key){
                    if(obj.hasOwnProperty(key))
                    {
                       return obj[key];
                    }else{
                        return null;
                    }
                };
                //
                this.remove = function(key)
                {
                    if(obj.hasOwnProperty(key))
                       delete obj[key];
                }
                //
                this.forEach = function(fn)
                {
                    for(var attr in obj){
                        fn(attr,obj[attr]);
                    }
                }
            }

十一、Object练习去掉数组的重复项

       >  var arr = [2, 1, 2, 10, 2, 3, 5, 5, 1, 10, 13];

        function toObject(arr){

            var obj = {};
            for (var i = 0; i < arr.length; i++) {
                obj[arr[i]] = true;
            }

            return obj;
        }

        function toArray(obj){
            var arr = [];
            for (var attribute in obj) {
                if (obj.hasOwnProperty(attribute)) {
                    arr.push(attribute);
                }
            }

            return arr;
        }

        function uniq(arr)
        {
            return toArray(toObject(arr));
        }
        document.write(uniq(arr));

十二、其它引用类型对象

  • 单体对象：
  • -Global对象：encodeURIComponent、encodeURI、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、escape、unescape
  • Math对象
  • Date对象
  • 基本包装类型
  • Function类型、RegExp类型

十三、函数

  • 学习目标：
  • -了解函数的基本概念
  • -函数的定义方式
  • -函数的参数
  • -this
  • -call、apply
  • -执行环境、作用域链
  • -垃圾收集、块级用命域
  • -closue

13.1 初识函数

  • Function类型，即函数类型。
  • 一个典型的javascript函数定义如下：
  • function 函数名称(参数表)
  • ｛
  • 函数执行部分；
  • ｝
  • 注意：参数列表直接写形参名称，不用写var。
  • 函数可以看做数据来进行传递。
  • 没有返回值类型。
  • 函数可以嵌套，但尽量少用。
function test(a,b){

                return a+b;
            }

            var c = test(10,20);

13.2 定义函数

  • function语句形式；只定义一次；具有静态属性；效率较高；优先解析。
  • 函数直接量形式；顺序解析，先声明再使用。
  • 通过Function构造函数形式定义函数；每次新建一个函数；具有动态属性，效率低；顺序解析，先声明再使用。顶级作用域
//1 function语句式
            function test1()
            {
                alert("I am test1");
            }
            //test1();

            //函数直接量形式
            var test2 = function()
            {
                alert("I am test2");
            }
            //test2();

            //Function构造函数式
            var test3 = new Function("a","b","return a+b");

13.3 函数参数

arguments:用得最多的是做递归操作，arguments.callee

    function fact(num)
    {
        if(num<=1) return 1;

        else return num*arguments.callee(num-1);
    }
    var F = fact;
    fact = null;    
    alert(F(5));

13.4 this

this是在运行时期基于函数的执行环境绑定。 this总是指向调用者，也就是说，谁调用了我，我就指向谁

        var k =10;           
        function test(){
            this.k = 20;                
         }
         test();
         alert(k);//20

13.5 call 和 apply

简单的用法：绑定一些函数用于传递参数

  function sum(x,y)
  {
    return x+y;
  }

  function call1(num1,num2)
  {
    return sum.call(this,num1,num2);
  }

  function apply1(num1,num2)
  {
    return sum.apply(this,[num1,num2])
  }

强大的用法：扩充作用域，最大的好处是对象不需要与方法有任何耦合关系

    window.color = 'red';       
    var obj = {color:'blue'};       
    function showColor(){
        alert(this.color);
    }       
    showColor.call(this);//red
    showColor.call(obj);//blue

13.6 执行环境、作用域链

//TODO

13.7 垃圾收集、块级作用域

//TODO

13.8 Closuer闭包

概念：一个函数可以访问另外一个函数作用域中的变量。封闭性：private 起到一个保护变量的作用

        //作用域1
        function f(x){
            //作用域2
            var temp = x;//局部变量，已经没有被使用
            return function(x){//作用域2
                temp += x;//temp又被使用
                alert(temp);
            }
        }

        var a = f(10);
        a(5);//15
        a(10);//25
        a(100);//125

十四 面向对象程序设计

  • 学习目标
  • -了解面向对象程序的特点
  • -学会JS模拟面向对象的方式
  • -理解prototype
  • -理解继承

14.1 类创建

//类的概念
//第一种形式 工厂模型                
function createPerson(name, sex, age){
var obj = [];
obj.name = name;
obj.sex = sex;
obj.age = age;
obj.sayName = function(){
alert(obj.name);
}
return obj;
}

var p1 = createPerson("z3", "男", "25");
var p2 = createPerson("lis", "女", "18");

p1.sayName();

//第二种形式 构造函数式 推荐
//函数的第一个字母大写（类的模板）
function Person(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
this.sayName = function(){
alert(this.name);
}
}

//构造一个对象: new 参数 执行模板代码 返回对象
var p1 = new Person("manager", 20, '男');
p1.sayName();

14.2 原型

prototype创建每一个函数都 有一个prototype属性，该属性其实是一个指针，总是指向一个对象，该对象的作用就是将特定的属性和方法包含在内，起到一个所有实例共享的作用。

        function Person(){

        }

        var obj = Person.prototype;            
        obj.name = "z3";
        obj.age = 20;
        obj.sayName = function(){
            alert(this.name);
        };
        var p1 = new Person();
        var p2 = new Person();

        alert(p1.sayName == p2.sayName);//true
  • 构造函数、原型对象、实例对象的关系
  • 构造函数.prototype == 原型对象
  • 原型对象.constructor ==构造函数
  • 实例对象.prototype ==原型对象
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
  • 大小: 7.6 KB
分享到：
| Spring Bean Scopes
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    个人Javascript学习笔记 精华版

    个人Javascript学习笔记 精华版 本资源为个人Javascript学习笔记的精华版，涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明： 1. 什么是JavaScript...

    javascript学习笔记

    ### JavaScript学习笔记精要 #### JavaScript简介 JavaScript是一种强大的、多用途的脚本语言，用于增强网站的交互性和用户体验。它是由Netscape公司的Brendan Eich在1995年发明的，并且迅速成为了Web开发的标准之...

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程，涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始，引导读者理解网页样式的设置与应用。 1. CSS（Cascading Style Sheets）样式表是用于控制...

    javascript学习笔记整理知识点整理

    这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料，涵盖了JavaScript的基础知识，旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中，变量用于存储数据。...

    JavaScript学习笔记.pdf

    JavaScript学习笔记是一本关于JavaScript编程语言的教材，该教材通过丰富的实例，系统地介绍了JavaScript的基础知识和实际应用技巧，帮助读者一步步掌握客户端编程技术。本书共分为九章，每一章都有其特定的主题，...

    我的javascript学习笔记

    根据提供的文件信息，可以看出这份“我的javascript学习笔记”主要涵盖了JavaScript中的几个关键概念和技术要点，包括正则表达式、AJAX以及一些JavaScript的核心语言特性。接下来将这些知识点进行详细的整理和解释。...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    JavaScript基础知识点总结 JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言，能实现网页的交互功能。下面是该资源中的重要知识点总结： 一、 JavaScript 基本概念 * ...

    JavaScript 学习笔记集和代码库

    JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和...

    Javascript学习笔记___自学实用

    JavaScript学习笔记——深入理解基础与函数 在JavaScript中，学习基础知识是至关重要的，因为它是所有进一步编程技巧的基础。首先，我们需要了解JavaScript中的数据类型。在JavaScript中，有五种简单的数据类型：...

    Javascript学习笔记（传智播客视频学习笔记+代码）

    "Javascript学习笔记（传智播客视频学习笔记+代码）"是一份全面介绍JavaScript基础知识的学习资源，适用于初学者。这份笔记结合了传智播客的web前端培训视频内容，提供了丰富的理论讲解和实践代码，帮助读者从零开始...

    JavaScript学习笔记讲解

    这只是JavaScript学习笔记的一小部分，JavaScript还有更多高级特性和概念，如对象、数组、函数、类、模块、闭包等，以及DOM操作、事件处理、Ajax异步请求等内容，需要进一步深入学习和实践才能掌握。

    javaScript学习笔记.rar

    这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录，对于初学者或者想要深入理解JavaScript的人来说，是一份宝贵的资源。 JavaScript与Java虽然名字相似，但两者实际上是不同...

    蓝杰JavaScript学习笔记

    《蓝杰JavaScript学习笔记》是一份综合性的JavaScript学习资料，主要涵盖了JavaScript在网页动态操作、DOM操作以及事件处理等方面的基础知识。这篇笔记通过多个实例文件，如`dynamicCreateTable.htm`、`...

Magicbox
Global site tag (gtag.js) - Google Analytics