JavaScript的知识点总结(一)

雾眠气泡水@

于 2021-08-26 20:19:08 发布

阅读量161

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_60489011/article/details/119871571

版权

javascript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

一、发展历史

    1995年：各个浏览器厂商   验证数据的合法性（年龄范围）   提示交互的信息   用户体验度
    2012年：由ECMA组织统一javascript核心语法。发布了javascript5.1版本，简称ES5。
        ES5：注释、变量、分支、逻辑、数组、对象
    2015年：发布了ES6版本。在核心语法之上增加了高级语法（箭头函数、反射）。

二、javascript的介绍

1. javascript: 是编程语言。作用：前后台交互。
2. javascript的组成(三要素)：

        ECMAScript：js的核心语法
        DOM: 文档对象模型，document object model   html、xml文件的节点操作
        BOM：浏览器对象模型

浏览器中重要的弹出框：
1.alert(弹出的内容) :弹出框

<script>
   var popup=alert("哈哈哈哈");//定义一个变量popup
   console.log(popup);
</script>

2.prompt() ：输入框

<script>
    var username = window. prompt("请输入姓名","张三");
    //交互式 输入框 取消（null）确定（输入框）
    console.log(username);
</script>

3.confirm() ：确认框，文本区，取消，确定按钮

<script>
    var bool =window. confirm("确认要删除吗？")//选择取消（false） 确定（true）
    console.log(bool);
</script>

三、javascript特征

    1.解释性语言：只要有运行环境，就能执行结果。运行环境：浏览器、nodejs
    2.弱数据类型语言：隐式的数据类型转换。
    3.顺序执行
    4.既可以作为前端语言，服务器端语言，取决于运行环境

四、变量的定义与使用

1.变量的使用

        1.声明 var message;
        2.初始化 message = "hello" 相当于赋值。
        3.声明并初始化 var message = "hello";
        4.定义多个变量 var message= “hello”,found=false, age = 29;

三种声明的区别：

1.变量的声明：var a;   变量声明的提升，可以重复声明
         （1）变量的提升：使用var声明的变量会提升到当前作用域的最顶部。
           特点：全局作用域，在全局范围内都能访问到这个变量。
console.log(a);//undefined  变量声明的提升
var a=1;
2. let a; 不能声明提升，不能重复声明局部定义
3.const a; 在声明的时候也要初始化，不能变量提升，不能重复声明。

【后面两种声明式es6中的】

2.变量名的命名规则

        1.变量名由字母，数字，下划线以及$组成。
        2.不要使用下划线或者数字作为变量名的开头
        3.变量名应该具有一定的意义，使用驼峰是命名规则

            前端的变量的定义规范：
            1.变量全小写：由下划线开头的变量是系统级别的变量_proto
            var pckg="sss";
            var userpwd
            2.函数名称是第一个单词首字母小写的驼峰：小驼峰
            function sayName()
            function printProductOrderList()
            3.构造函数：大驼峰：每个单词首字母大写
            function Amial()
            function ProductList()

4.不要使用关键字或是保留字

五、数据类型

1.五种基本数据类型

        1.Undefined：未定义类型 "undefined"
            var a ; var a = "undefined";(一般是声明了变量，但没有定义时，输出的结果是undefined)
        2.Null：空引用数据类型 "null"
            var a = null;    == 值相等   ===完全相等
        3.Boolean：布尔类型，取值为 true/false，通常用于条件判断
            关键词：true/false
        4.Number：数字类型。整数/浮点数 (nan: not number，当只声明了，会得到结果为NAN)
            数值范围： var a=9/0; 9除以0为无穷大(infinity)
            isNaN()判断函数：判断参数是否是非数值。如果是，返回true。
            isFinte()函数：判断参数是否在最大值和最小值之间。如果在，返回true。
        5.String
            字符串类型，需要使用单引号或者双引号括起来
            var a ='true';
            var a ="hello";
            字符字面量：\n 换行    \t 制表    \b 退格    \r 回车    \\ 斜杠    \' 单引号    \" 双引
            a. length：a代表的字符的长度。
            a. charAt(3)：指定字符中的第几个字母，从0开始。

2.三种引用数据类型

        1.对象 Object：对象是模拟现实生活的对象，对象由键值对组成，通过使用大括号将所有键值对括起来。
            （1）构造函数：var   obj=new Object();   console.log(obj);
            （2）对象字面量：var dog = { name : 'Spot', breed : 'Dalmatian' };（属性名：属性值）
        2.数组 Array：数组是一个特殊的对象，包含了多个值，值与值之间使用逗号分隔开，所有的值通过中括号括起来。
        3.函数 Function：函数是代码执行单元，用于实现某些特殊的功能。

3.数据转换类型

        1.其他类型转换为String
            1.+'' 两边如果都是基本数据类型就进行字符串的拼接
            2.String()包装器
            3.toString()函数除了null和undefined，其余均有
        2.其他类型转换为Boolean
            1.!!
            2.Boolean()包装器
            转换为boolean为false的值是'' 0 NaN null
            undefined 假性值
            '' false 空字符串
            ' ' true 空格字符串
        3.其他类型转换为Number
            1.+ - +'123'   一元运算符，本质上是使用了Number包装器
            2.Number()包装器

4.检测数据类型：typeof

null的检测类型是Object var a=null; console.log(typeof a)

六、操作符

    1.算数运算符： + - * /   %
        递增操作符：a++   后置++ ；++a   前置++
    2.比较操作符: <    >    <=     >=

===与==的区别：

        ===是否恒相等（比较的是值和数据类型）   !==是否恒不相等
        ==是否值相等（比较的是数值）   ！=是否不相等

    3.逻辑操作符：&&    ||     ！
        （1）逻辑与&& 表达式(同真才真，有假则假)
                    如果第一个数是假性值，直接输出第一个值。
                    如果两个值都为真，直接返回第二个数。
        （2）逻辑或 || 表达式(有真则真，同假才假)
                    如果两个值都为真，直接返回第一个值。
                    如果第一个值为假性值，直接输出第二个值。
        （3）非（NOT）！表达式
    4.三目运算符：    ？   ：   ；
        如果第一个表达式为真，则执行？后面的，如果第一个表达式为假，就执行:后面的。

七、流程控制语句

1.顺序

2.分支

1.if
2.switch:只能恒等值比较

3.循环

        1.for
        2.while
        3.do while

八、对象及函数

1.对象

        1.创建对象
            （1）字面量
                不同的属性之间用','分割，属性名和属性值之间用':'分割。【当最后一个属性写完之后不能写任何符号。】

var obj={
     name:"猪八戒",
     age:18,
     gender:"男",
     test:{name:"沙和尚"}
 };
 console.log(obj);

        （2）构造函数
                var obj2 =newObject();
                主要功能是生产实例化的对象（个体）只要用到new就是引用类型（栈中保存的是地址值，数据存放到堆中）。

var obj=new Object();
obj.name="孙悟空";
obj.age=18;
obj.gender="男";
console.log(obj);
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
//如果读取对象中的没有的属性，不会报错而是返回undefined。

        2.对象的访问
            1.属性的访问：
                （1）点表示法：person.name
                （2）中括号表示法：person["first name"] 属性名中有语法错误或属性名是关键字和保留字。比如单词中间有空格。
                    var frank={name: 'Frankenstein'};
                    console.log(frank.name);
                    console.log(frank['name']);
            2.方法的访问

                        obj.sayName; //function
                        obj.sayName();//方法的使用执行函数内部内容
        3.对象属性的操作
            1.删除：delete 对象名.属性名
            2.遍历：for in
                for 属性名 in 对象名
            3.修改：直接对象名.属性名=属性值
            4.新增   obj.newproname=”value”

5.【in】检查对象是否包含一个属性：检测某属性是否是某对象的自有属性或者是继承属性
语法：'key' in obj

var obj={key:'value'};
console.log(key  in   obj);//true
console.log('value'  in   obj);//false

2.函数

        1.函数的创建
           （1）函数声明：
                function 函数名称(形参列表){函数体}
                函数名称(实参);//必须要调用

function fun2(){
    console.log("这是我的第二个函数~~~");
    alert("哈哈哈哈");
    document.write("呜呜呜呜");
}
fun2();

        （2）函数表达式：
                var 函数名=function(形参列表){//函数体}
                函数名();//调用

实参与形参：

         1.形参数：当形参列表用[]括起来，表示可选。声明形参就相当于在函数内部声明了对应的变量，但不赋值，也不用写数据类型。
         2.实参数：实参将会赋值给函数中对应的形参。实参可以是一个对象，也可以是一个函数。

         3.实参数和形参是一一对应的
//求任意两个数的和
function sum(a,b){
    console.log(a+b);
 }
sum(1,2);//3
函数的调用：

       1. 调用函数时解析器不会检查实参的类型：所以要注意是否是可能会接受到非法的参数，如果有肯则需要堆参数进行类型转换。
       2.调用函数时，解析器不会检查实参的数量：多余的实参不会被赋值。
       3. 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。

2.函数的作用

                函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）。在需要的时候调用。
            1.引用类型：
                var a=function(){
                    //属性和方法   函数体
                    var result=a+b;//【有var定义的变量是局部变量没有var定义变量是全局变量】
                    return result;//return在函数中的代码不执行
                    console.log(1);
                }
            2.函数声明的提升
                变量可以重复使用、可以重复定义
                有两个同名的变量：【提升函数高于提升变量的声明】
                    console.log(say);//[Function say]
                    say();//可以直接执行函数
                    function say(){console.log('say');}
                    var say='name';
                    console.log(say);//name
        3.函数的内部属性
            1.arguments

                （1）定义：是类数组对象，包含着传入函数中参数(实参)，arguments主要用途是保存函数参数，arguments对象还有一个callee的属性，用来指向拥有这个arguments对象的函数
                    console.log(arguments. callee);
                （2）length：声明式希望的参数的个数
                    function add(a,b){
                        var result=a+b;
                        return result;
                    }
                    console.log(add.length);//表示函数希望接受的参数个数   2
                （3）函数的重载：相同的函数名称，不同的返回值类型，不同的参数个数，不同的参数类型。
                    形参与实参第一次绑定关系
                    函数值内部：形参变量名就与arguments[key]就有绑定关系

2. this：指向的是函数赖以执行的环境对象

                1.当单独使用this 指定是全局
                    浏览器中-->window对象
                    node-->globe对象
                2.在函数中使用this
                    函数中，函数的所属者默认绑定到 this 上。
                3.在事件中使用this
                    在 html 事件句柄中， this 指向了接受事件的html元素。

4.改变this指向：

                （1）函数名.call(执行环境对象，实参列表);
                （2）函数名.apply(执行环境对象，实参列表数组);
                （3）bind(执行环境对象)(实参列表);

call和apply的功能与区别：
功能：反建立函数与对象之间的关系
区别：apply中的第二个参数要放数组。

var name="小王",age=17;
var obj={
     name:"小张",
     objAge:this.age,//17
     myFun:function(){
           onsole.log(this.name+'年龄'+this.age);
     }
}
var db={
    name:'德玛';
    age:21;
}
obj.myFun.call(db);
obj.myFun.apply(db);

        4.函数的返回
            可以使用return来设置函数的返回值。可以定义一个变量，来接收该结果。
            在函数中，return之后的值都不执行。
            return可以返回任意类型的值。
            eg.function sum(a,b,c){
                var d=a+b+c;
                return d;
            }
            //调用函数：变量result的值就是函数的执行结果，函数返回什么result的值就是什么。
            var result=sum(4,7,8);
            console.log("result ="+result);

        5.函数的跳出循环
            1.break：可以退出当前的循环，会输出当前循环的值，再结束整个循环。
            2.continue：可以跳出当前循环，不会输出当前循环的值。
            3.return：可以结束整个函数。

        8.闭包：【重点面试题】
            1.闭包：可以在一个函数内包含另外函数，作用域链得不到释放，造成消耗内存。
            2.作用域链：在一个函数中，有个变量没有被定义（自由变量），那样的话，我们可以一级一级的向上找该变量，就近原则。

           3.闭包的优缺点：
            缺点：（1）被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
                       （2）其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响
            优点：（1）保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突。

（2）在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）。

（3）匿名自执行函数可以减少内存消耗。（function（）{}）{}
4.闭包解决方法：立即执行函数，创建函数后就立即执行。

        9.立即执行函数
                   IIFE：
                - 页面加载完成后只执行一次的设置函数。
                - 将设置函数中的变量包裹在局部作用域中，不会泄露成全局变量。

九、内存区

    1.栈与堆
        对于基本数据类型来说，栈中可以直接操作保存在变量中的实际值。
        对于引用数据类型来说，新建一个引用数据类型变量后，就会开辟新的内存空间，但栈中存放的是变量的指针，指针指向堆中的内存地址，根据内存地址存放对应内容。
    2.栈空间：方法调用时保存变量对象的引用或变量实例。
    3.堆空间：所有存活的对象在此分配。
    4.栈内存与堆内存：

           1、栈内存
            在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配。当在一段代码块中定义一个变量时，java就在栈中为这个变量分配内存空间，当超过变量的作用域后，java会自动释放掉为该变量分配的内存空间，该内存空间可以立刻被另作他用。
           2、堆内存
            栈中存放的是指针，有了指针后去堆中找对应的内存空间地址。
            堆内存用于存放由new创建的对象和数组。在堆中分配的内存，由java虚拟机自动垃圾回收器来管理。在堆中产生了一个数组或者对象后，还可以在栈中定义一个特殊的变量，这个变量的取值等于数组或者对象在堆内存中的首地址，在栈中的这个特殊的变量就变成了数组或者对象的引用变量，以后就可以在程序中使用栈内存中的引用变量来访问堆中的数组或者对象，引用变量相当于为数组或者对象起的一个别名，或者代号。

雾眠气泡水@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的知识点总结(一)

一、发展历史1995年：各个浏览器厂商验证数据的合法性（年龄范围）提示交互的信息用户体验度2012年：由ECMA组织统一javascript核心语法。发布了javascript5.1版本，简称ES5。 ES5：注释、变量、分支、逻辑、数组、对象2015年：发布了ES6版本。在核心语法之上增加了高级语法（箭头函数、反射）。二、javascript 的介绍1. javascript: 是编程语言。作用：前后台交互。2.ja...
复制链接

扫一扫