JavaScript知识总结

最新推荐文章于 2022-02-04 11:05:09 发布

? passionn�

最新推荐文章于 2022-02-04 11:05:09 发布

阅读量187

点赞数

分类专栏：训练营文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45747607/article/details/119916509

版权

训练营专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1 基础介绍

1.1 JavaScript 是一种具有面向对象的，解释型的程序设计语言
1.2 作用验证发往服务器端的数据，增加web互动，加强用户体验度等
1.3 JavaScript的组成；
ECMAScript 核心语法
BOM 浏览器对象模型
DOM 文档对象模型
1.4 js的基础使用方式
1.4.1行内js：js代码定义在HTML元素标签上
1.4.2内部js：通过script标签dui定义在html中
1.4.3外部js；定义在外部的一个js文件中，通过script标签对引入
一个script标签对只能用与：引入外部js或定义内部js代码
1.5 可以定义在html中的任意位置
1.5.1 在head中
一目了然，便于后期维护，有可能获取不到元素；
1.5.2在body结束之前
肯定能够获取到每一个元素，不便于观察

   <!--引入外部js-->
    <script src="js/first.js"></script>
</head>
<body>
    <button type="button" onclick="alert('网抑云!!!!')"  id="btn">按钮</button>
    <script>
        console.log("消愁~~~");
        console.log(document.getElementById("btn"));
    </script>
</body>

2 常见调试方式

2.1 alert 弹出框：
最先执行
不推荐做调试使用
2.2 document.write（“在文档页面中写入内容”）
当页面内容加载完毕之后，再触发document.write的执行，会覆盖原页面
2.3 console 控制台输出-》推荐使用
2.3.1 console.log()
2.3.2 console.info()
2.3.3 console.error()
2.3.4 console.warn()

<button type="button" onclick="document.write('聊天止于微笑!!!')">点击按钮</button>
    <script>
        alert("普通的弹出框1");
        alert("普通的弹出框2");
        alert("普通的弹出框3");

        document.write("聊天止于呵呵!!!!");

        console.log("日志");
        console.info("信息");
        console.error("错误");
        console.warn("警告");
    </script>

3 变量

3.1 变量：存储一个数据
3.2 数组：存储多个数据
3.3 变量的定义
通过var关键字声明
3.3.1 声明的同时赋值：
var 变量i名 = 赋值；
3.3.2 先声明后赋值：
var变量名；
变量名 = 赋值；
3.3.3 一行中通过定义多个变量
3.4 js中的变量的类型有值来决定
3.5 js是一门弱类型语言，java是强类型语言
3.6 js变量不赋值存在默认值 undefined
3.7 变量的作用域提升
把当前的通过var定义的变量的声明提升到当前作用域的最上面
3.8 在js中变量的定义可以省略var 关键字，但是就不存在变量的作用域提升

<script>
        //var age;
        console.log("--->"+age);
        console.log("--->"+a);
        console.log("--->"+haha);

        //1)声明的同时赋值
        var name = "zhangsan";
        console.log(name);

        //2)先声明后赋值
        var age;
        console.log(age);

        age = 18;
        console.log(age);

        //一行中通过定义多个变量
        var a = 1,b = false, c = "haha";

        console.log(a);
        a = "abc";
        console.log(a);
        console.log(a,b,c);

        haha = "哈哈";
        console.log(haha);
    </script>
</body>
</html>

4 数据类型

4.1 简单数据类型：
4.1.1 Number 数值型-》蓝色
a:整数，小数，
b:NaN not a number
b.1：直接赋值
b.2：通过运算无法得到一个正确的结果NaN
4.1.2 String 字符串-》黑色
a:可以通过一堆‘’，或者一对“”定义字符串
b:可以包含0~n个字符
c：如果字符串中出现特殊字符，可以通过转义字符进行转义
4.1.3 Boolean 布尔型蓝色 true false
a: 直接赋值
b: 表达式
4.1.4Null 空-》灰色
a:直接赋值null
b:获取不到元素得到null
4.1.5 Undefined 未定义灰色
a:直接赋值
b:变量以声明未赋值
4.1.6 Function 函数型
function 函数名（参数列表） {
函数体：
}
4.2 复杂数据类型
4.2.1对象型{}
a:键值对的集合
b:key：value
c:每个键值对之间使用，分隔
e：键与值之间用：
f：value可以为任意类型的值

script>
        /*Number*/
        var num1 = 1;
        var num2 = 1.2;
        //num1 = NaN;
        num2 = 4/'a';
        console.log(num1,num2);

        /*String*/
        var str1 = '1';
        var str2 = "你好";
        var str3 = "\"";
        console.log(str1,str2,str3);

        //Boolean
        var b1 = true;
        console.log(b1);

        //Null
        var n1 = null;
        console.log(n1);

        /*undefined*/
        var u1;
        console.log(u1);

        /*function*/
        function fn(){
            console.log("函数");
        }
        fn();

        //Object
        var obj = {
            name:"zhangsan",
            age:18
        };
        console.log(obj);
    </script>

5typeof

5.1 typeof 判断数据类型
a:typeof 数据
b：typeof（数据）
返回数据类型的小写字符串表现形式


    <script>
        console.log(typeof 123);
        console.log(typeof "123");
        console.log(typeof false);
        console.log(typeof(null));   //object
        console.log(typeof(undefined));
        function fn(){}
        console.log(typeof(fn));
        console.log(typeof({}));
    </script>

6类型转换

6.1 隐式类型装换自动
在进行一些其他操作运算的时候，目的不是为了发生类型转换，而在运算过程中会默认自动发生类型转换
一般为四则运算 ±*/
6.2 显式类型转换|强制
6.1.1 任意类型都可以转换为一下三种类型：String Number Boolean
a:Number（数据）；
b:String（数据）相当于在数据的两端添加一对引号；
c:Boolean（数据）；
！！！！对象类型，函数类型不参与类型转换

 <script>
        console.log(String(0));
        console.log(String(123));
        console.log(String(-1.5));
        console.log(String(NaN));

        console.log(String(false));
        console.log(String(true));

        console.log(String(undefined));
        console.log(String(null));

        /*隐式类型转换*/
        console.log(1+false);
        console.log(1+'a');
        console.log(false-'a');
    </script>
</body>

6.1.2 Number
a:String
‘’ 空串 -0
‘ ’空格字符串 -0
‘123’纯数字字符串数字
‘123abc’ 非纯数字字符串 NaN
b:Boolean
false -0
true -1
null -0
Undefined -NaN

 <script>
        console.log(Number(''));
        console.log(Number(' '));
        console.log(Number('123'));
        console.log(Number('123abc'));

        console.log(Number(true));  //1
        console.log(Number(false));  //0

        console.log(Number(null));  //0
        console.log(Number(undefined));  //NaN
    </script>

6.1.3 Boolean
a:String
‘’ false
‘ ’ true
其他字符串 true
b:Number
0，NaN -false
非0数字 -true
Null -false
Undefined -false

 <script>
        console.log(Boolean(''));
        console.log(Boolean(' '));
        console.log(Boolean('abc'));

        console.log(Boolean(0));
        console.log(Boolean(123));
        console.log(Boolean(-0.123));
        console.log(Boolean(NaN));

        console.log(Boolean(null));
        console.log(Boolean(undefined));
    </script>
</body>

7运算符

7.1 = 赋值
7.2 ==是否相等数据
7.3 ===是否相等数据+类型先比较类型后比较数据值
7.4 逻辑运算符
7.4.1 && a:两个都是真才是真，一个为假就是假
b:如果两端出现非boolean类型的操作数；先把第一个操作数转为boolean，如果为false，最终的结果为第一个操作数；如果为true，结果为第二个操作数
7.4.2 || a：一个为真就是真，两个都为假才是假
b:先把第一个操作数转为boolean，如果为true，最终的结果为第一个操作数，如果为false，结果为第二个操作数；
7.4.3 ！非

 <script>
        console.log(Boolean(''));
        console.log(Boolean(' '));
        console.log(Boolean('abc'));

        console.log(Boolean(0));
        console.log(Boolean(123));
        console.log(Boolean(-0.123));
        console.log(Boolean(NaN));

        console.log(Boolean(null));
        console.log(Boolean(undefined));
    </script>
</body>

8 数组Array

8.1 数组：存储多个数据
8.2 可变长，长度根据跟随数据的增删动态的改动
8.3 索引，可以根据索引操作数组中的数据
8.4 数组的索引可以跟随数据的改动进行动态修改
8.5 如果数组存在，索引位置存在，但是没有赋值，默认undefined
8.6 js中的数组中可以存放任意类型的数据

8.7创建方式：
8.7.1 字面量的创建方式【数据1，数据2。。。】
8.7.2 new Array（）空数组
8.7.3 new Array（值1，值2.。。）

8.8 数组的长度：数组名.length
8.9 操作数组汇总的数据：
8.9.1 跟随索引操作
8.9.2 数组名【索引值】
8.10 数组的遍历

 var arr1 = [1,2,3,4,5];
    console.log(arr1);

    var arr2 = new Array();


    //为空数组赋值
    arr2[0] = "哈哈";
    arr2[1] = "呵呵";
    arr2[5] = "嘻嘻";
    console.log(arr2);
    console.log(arr2[2]);

    var arr3 = new Array(false,123,"哈哈",null,undefined);
    console.log(arr3);

    //修改数组的长度
    arr3.length =  10;
    console.log(arr3.length);
    console.log(arr3);

    //自定义属性
    arr3["abc"] = "abc属性值";
    console.log(arr3);
    console.log(arr3["abc"]);

    //数组的遍历
    //1.普通for
    for(var i=0;i<arr3.length;i++){
        console.log(arr3[i]);
    }

    //2.for in   --> i作为索引
    for(var i in arr3){
        console.log(arr3[i]);
    }

    //foreach
    arr3.forEach(function (ele,index) {
        console.log(ele+"--->"+index);
    });
    //for.in  与  foreach 不能对为赋值的索引位置进行遍历
  </script>
</body>
</html>

9 数组常用方法；

9.1 slice 截取数组，原数组不发生变化
9.1.1 1个参数起始索引，默认截取到最后
9.1.2 2个参数起始索引结束索引结束索引位置不包含
9.2 splice 剪接数组，原数组变化，可以实现前后删除效果
9.2.1 1个参数起始索引实现删除与截取的效果
9.2.2 2个参数起始索引删除|截取个数实现删除与截取的效果
9.2.3 3个往上起始索引个数从第三个参数开始后面所有的参数为要替换的新数据，替换，截取

 var array = ["aaa","bbb","ccc","ddd","eee"];
    //slice()
    console.log(array);
    console.log(array.slice(1));
    console.log(array);

    console.log(array.slice(1,3));
    console.log(array);

    //splice
    console.log(array.splice(1,3,"嘻嘻","呵呵"));
    console.log(array);
  </script>

10 函数

10.1：定义功能的实现
10.2:：函数声明：
			function 函数名（参数列表） {
					函数体：
					return 返回值；
			}
10.3 函数的调用：
		a:函数名（实参）-》执行函数中的代码
		b:把函数声明转为函数表达式进行自调用
			转换方式：在函数声明的开始位置添加！，~，+，-
10.4 函数表达式
		var 变量名 = function 函数名（形参） {
		}；
注意：a:在js中所有的函数都存在返回值，没定义返回值默认undefined
			b:形参与实参可以不一一对象，如果没有对应的实参，形参的默认值undefined
			c：函数表达式中的函数名一般省略不写，不可用来调用函数，只有在发生递归的时候有用

 //函数声明
        function fn1(name){
            console.log(name);
            //return true;
        }

        //调用
        fn1(123,456);
        console.log(fn1("zhangsan"));

        !function fn2(){
            console.log("函数声明1");
        }();
        ~function fn3(){
            console.log("函数声明2");
        }();
        -function fn4(){
            console.log("函数声明3");
        }();

        /*函数表达式*/
        var f1 = function func(i){
            i++;
          console.log("函数表达式1");
            if(i==5){
                return;
            }
            func(i);
        };

        //根据变量名调用
        f1(1);

        //自调用
        var f2 = function (){
            console.log("函数表达式2");
        }();

        /*匿名函数*/
        (function(){
            console.log("匿名函数");
        })();

    </script>

10.5 作用域：函数
块：{}具有语义化的特点
10.5.1 函数的作用域提升：把函数声明方式定义的函数提升到当前作用域的最上面
10.5.2 变量的作用域提升：把通过var定义的变量的变量的声明，提升到当前作用域的最上面
js中的函数可以任意嵌套

<body>
  <!--
    作用域 : 函数
    块: {} 具有语义化的特点

    函数的作用域提升 : 把函数声明方式定义的函数提升到当前作用域的最上面
    变量的作用域提升 : 把通过var定义的变量的变量的声明,提升到当前作用域的最上面

    注意:
      js中的函数可以任意嵌套
  -->
  <script>
     func();

      // 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准
      function add2(a , a) {
        console.log(a);
      }
      add2(1,2);

      // 值传递
      var num = 12;
      function change(n) {
        n = 30;
      }
      change(num);
      console.log(num);  //12

      // 引用传递
      var obj = {name: "tom"};
      function paramter(o) {
        o.name = 2;
      }
      paramter(obj);
      console.log(obj.name); //2

      // 给形参o赋予了新的数组
      var obj2 = [1, 2, 3];
      function paramter2(o){
        o = [2, 3, 4];
        o[1] = 3;
      }
      paramter2 (obj2);
      console.log(obj2); //[1,2,3]

      //间接调用
      var obj = {
        name : "zhangsan",
        work : function(){
          console.log("每天都在写bug,找bug,解决bug");
        }
      };
      console.log(obj.name);
      console.log(obj.work);
      //调用
      obj.work();

      var ff= obj.work;
      ff();

      //块
      {
        var i = 1;
      }
      console.log(i);

      //函数
      function func(){
        /*变量的作用域提升
          var haha;
         */
        console.log("----->"+haha);
        //局部
        var haha = "haha";
      }
      func();
      //console.log(haha);

      //函数的嵌套
      function f1(){
        console.log("-----------f1---------");
        return function f2(){
           console.log("-----------f2---------");
           return "我是f2的返回值";
        };
      }
      var b = f1();
      b();

      f1()();
     console.log(f1()());
  </script>
</body>

11 内置对象

11.1 Arguments 旨在函数内部定义，保存了函数的实参
a:操作数组的方式操作arguments对象
11.2 Array 数组对象
11.3 Date 日期对象，用来创建和获取日期
a：getFullYear（）年 setYear()
b:getMonth（）月 setMonth() （0~11）
c：getDate（）日 setDate()
d：getHours（）时 setHours()
e：getMinutes （）分 setMinutes()
f：getSeconds（）秒 setSeconds()
g:toLocaleString() 转换成本地时间字符串
11.4 Math 数学对象
a:Math.random（）随机数
b:Math.ceil（）向上取整，大于最大整数
c:Math.floor() 向小取整，小于最小整数String
11.5 String 字符串对象，提供对字符串的一系列操作
a:charAt（idx）返回指定位置出的字符
b:indexOf（Chr）返回指定子字符串的位置，从左到右，找不到返回-1
c：substr（m，n）返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾
d：substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
e:toLowerCase() 将字符串中的字符全部转化成小写。
f: toUpperCase() 将字符串中的字符全部转化成大写。
g: length 属性，不是方法，返回字符串的长度

 * */
    function fn(x,y,z){
      console.log(x,y,z);
      console.log(arguments);
      console.log(arguments[1]);

      for(var i = 0;i<=arguments.length-1;i++){
        console.log(arguments[i]);
      }
    }

    fn(1,2,3,4,5);
    fn(false,true,false,true);

    //String
    console.log("abc".toUpperCase());

    //Math
    console.log(Math.round(Math.random()*(10-5)+5));

    //Date
    var date = new Date();
    date.setFullYear(2008);
    console.log(date);
    console.log(date.toLocaleString());
    console.log(date.toDateString());
    console.log(date.getFullYear());
    console.log(date.getMonth());
    console.log(date.getDate());
    console.log(date.getDay()); /*星期几 */

  </script>
</body>

12 Object

12.1 对象 Object
a:{}
b:键值对的集合
c:键：值
d:简直对之间通过，进行分隔
e:所有的键默认都是字符串“”
f：如果key符合标识符的命名规范，可以省略“”
g：value可以为js中任意类型
12.2 操作对象的属性
a:根据key获取value
a.1对象名.属性名
a.2对象名【“属性名”】
12.3 js中对象的创建方式：
a:字面上的创建放式{}
b:new Object（）空对象

13 JSON

13.1 json：json（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于及其解析和生成，并有效提高网络传输效率
13.2 JSON与JS对象的关系
JSON是JS对象的字符串表示法，他使用文本表示一个js对象的信息，本质是一个字符串。
13.3 常见的json数据：
* ‘{“name”: “John Doe”, “age”: 18, “address”: {“country” : “china”, “zip-code”: “10000”}}’
* key都是通过“”定义的字符串
* value：数值型，字符串，对象{}，数组【】，boolean，null
* js对象与json串之间的转化问题
* 序列化：将对象转为可存贮或者可传输的数据的形态的过程

var laopei = {
        name : "laopei",
        gender : "男",
        son : [
            {name : "小小裴一号",gender : "男"},
            {name : "小小裴二号",gender : "男"}
        ],
        fn : function(){
            console.log(123);
        },
        "wife haha" : true,
        car : null
    };
    //1)对象名.属性名 简单使用多
    console.log(laopei);
    console.log(laopei.name);
    console.log(laopei.son[0]);
    console.log(laopei.son[0].name);

    //2)对象名["属性名"] 功能最强大
    console.log(laopei["name"]);
    console.log(laopei["son"][1]["name"]);
    console.log(laopei["wife haha"]);

    var obj2 = new Object();
    obj2.name = "xixi";
    obj2["age"] = 18;
    console.log(obj2);

    var obj3 = Object.create(null);
    console.log(obj3);

    /*jsON串转为js对象*/
    var jsonStr = '{"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": []}}';
    //JSON解析器 : 通过解析json数据效率比其他方式高
    var jsObj = JSON.parse(jsonStr);
    console.log(jsObj);
    /*js对象转为JSON串*/
    console.log(JSON.stringify(obj2));
    console.log(JSON.stringify(laopei));
  </script>
</body>

? passionn�

关注

0
点赞
踩
0

收藏

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

1 基础介绍1.1 JavaScript 是一种具有面向对象的，解释型的程序设计语言1.2 作用验证发往服务器端的数据，增加web互动，加强用户体验度等1.3 JavaScript的组成；ECMAScript 核心语法BOM 浏览器对象模型DOM 文档对象模型1.4 js的基础使用方式1.4.1行内js：js代码定义在HTML元素标签上1.4.2内部js：通过script标签dui定义在html中1.4.3外部js；定义在外部的一个js文件中，通过script标签对引入一个scrip
复制链接

扫一扫