• JavaScript

    JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

    如何编写

    1、JavaScript代码存在形式

    1 <!-- 方式一 -->
2 <script type"text/javascript" src="JS文件"></script>
3   
4 <!-- 方式二 -->
5 <script type"text/javascript">
6     Js代码内容
7 </script>

    2、JavaScript代码存放位置

    • HTML的head中
    • HTML的body代码块底部(推荐)

    由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

    变量

    JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

     1 <script type="text/javascript">
 2  
 3     // 全局变量
 4     name = 'seven';
 5  
 6     function func(){
 7         // 局部变量
 8         var age = 18;
 9  
10         // 全局变量
11         gender = "男"
12     }
13 </script>

    数据类型

    JavaScript 中的数据类型分为原始类型和对象类型：

    原始类型

    1、数字（Number）

    JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

    转换：

    • parseInt(..)    将某值转换成数字，不成功则NaN
    • parseFloat(..) 将某值转换成浮点数，不成功则NaN

    特殊值：

    •  NaN，非数字。可使用 isNaN(num) 来判断。
    • Infinity，无穷大。可使用 isFinite(num) 来判断。
     1 常量
 2 
 3 Math.E
 4 常量e，自然对数的底数。
 5 
 6 Math.LN10
 7 10的自然对数。
 8 
 9 Math.LN2
10 2的自然对数。
11 
12 Math.LOG10E
13 以10为底的e的对数。
14 
15 Math.LOG2E
16 以2为底的e的对数。
17 
18 Math.PI
19 常量figs/U03C0.gif。
20 
21 Math.SQRT1_2
22 2的平方根除以1。
23 
24 Math.SQRT2
25 2的平方根。
26 
27 静态函数
28 
29 Math.abs( )
30 计算绝对值。
31 
32 Math.acos( )
33 计算反余弦值。
34 
35 Math.asin( )
36 计算反正弦值。
37 
38 Math.atan( )
39 计算反正切值。
40 
41 Math.atan2( )
42 计算从X轴到一个点的角度。
43 
44 Math.ceil( )
45 对一个数上舍入。
46 
47 Math.cos( )
48 计算余弦值。
49 
50 Math.exp( )
51 计算e的指数。
52 
53 Math.floor( )
54 对一个数下舍人。
55 
56 Math.log( )
57 计算自然对数。
58 
59 Math.max( )
60 返回两个数中较大的一个。
61 
62 Math.min( )
63 返回两个数中较小的一个。
64 
65 Math.pow( )
66 计算xy。
67 
68 Math.random( )
69 计算一个随机数。
70 
71 Math.round( )
72 舍入为最接近的整数。
73 
74 Math.sin( )
75 计算正弦值。
76 
77 Math.sqrt( )
78 计算平方根。
79 
80 Math.tan( )
81 计算正切值。
82 
83 Math
    更多数值计算

    2、字符串（String）

    字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

    常见功能：

     1 obj.length                           长度
 2  
 3 obj.trim()                           移除空白
 4 obj.trimLeft()
 5 obj.trimRight)
 6 obj.charAt(n)                        返回字符串中的第n个字符
 7 obj.concat(value, ...)               拼接
 8 obj.indexOf(substring,start)         子序列位置
 9 obj.lastIndexOf(substring,start)     子序列位置
10 obj.substring(from, to)              根据索引获取子序列
11 obj.slice(start, end)                切片
12 obj.toLowerCase()                    大写
13 obj.toUpperCase()                    小写
14 obj.split(delimiter, limit)          分割
15 obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
16 obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
17 obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
18                                      $数字：匹配的第n个组内容；
19                                      $&：当前匹配的内容；
20                                      $`：位于匹配子串左侧的文本；
21                                      $'：位于匹配子串右侧的文本
22                                      $$：直接量$符号

    3、布尔类型（Boolean）

    布尔类型仅包含真假，与Python不同的是其首字母小写。

    • ==      比较值相等
    • !=       不等于
    • ===   比较值和类型相等
    • !===  不等于
    • ||        或
    • &&      且

    4、数组

    JavaScript中的数组类似于Python中的列表

    常见功能：

     1 obj.length          数组的大小
 2  
 3 obj.push(ele)       尾部追加元素
 4 obj.pop()           尾部获取一个元素
 5 obj.unshift(ele)    头部插入元素
 6 obj.shift()         头部移除元素
 7 obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
 8                     obj.splice(n,0,val) 指定位置插入元素
 9                     obj.splice(n,1,val) 指定位置替换元素
10                     obj.splice(n,1)     指定位置删除元素
11 obj.slice( )        切片
12 obj.reverse( )      反转
13 obj.join(sep)       将数组元素连接起来以构建一个字符串
14 obj.concat(val,..)  连接数组
15 obj.sort( )         对数组元素进行排序

    其他

    1、序列化

    • JSON.stringify(obj)   序列化
    • JSON.parse(str)        反序列化
    1 var a="ss";
2 ret = JSON.stringify(a);//序列化
3 console.log(ret);
4  
5 console.log(JSON.parse(ret));//反序列化

    2、转义

    • decodeURI( )                   URl中未转义的字符
    • decodeURIComponent( )   URI组件中的未转义字符
    • encodeURI( )                   URI中的转义字符
    • encodeURIComponent( )   转义URI组件中的字符
    • escape( )                         对字符串转义
    • unescape( )                     给转义字符串解码
    • URIError                         由URl的编码和解码方法抛出
    1 var a='http://www.baidu.com?name=民资';
2 console.log(encodeURI(a));
3 console.log(decodeURI(encodeURI(a)));
4 console.log(encodeURIComponent(a));
5 console.log(decodeURIComponent(encodeURIComponent(a)))

    3、eval

    JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

    • eval() 
    • EvalError   执行字符串中的JavaScript代码
    1 console.log(eval('1+2*5'));
2 console.log(eval(a = 1));

    4、正则表达式

    1、定义正则表达式

    • /.../  用于定义正则表达式
    • /.../g 表示全局匹配
    • /.../i 表示不区分大小写
    • /.../m 表示多行匹配

    JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)

    1 var pattern = /^Javaw*/gm;
2 var text = "JavaScript is more fun than 
JavaEE or JavaBeans!";
3 result = pattern.exec(text)
4 result = pattern.exec(text)
5 result = pattern.exec(text)

    注：定义正则表达式也可以  reg= new RegExp()

    2、匹配

    JavaScript中支持正则表达式，其主要提供了两个功能：

    test(string)     检查字符串中是否和正则匹配

    1 n = 'uui99sdf'
2 reg = /d+/
3 reg.test(n)  ---> true
4  
5 # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$

    exec(string)    获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。

     1 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
 2  
 3 非全局模式
 4     获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
 5     var pattern = /Javaw*/;
 6     var text = "JavaScript is more fun than Java or JavaBeans!";
 7     pattern.exec(text) 8  
 9     var pattern = /Java(w*)/;
10     var text = "JavaScript is more fun than Java or JavaBeans!";
11     pattern.exec(text)12  
13 全局模式
14     需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
15     var pattern = /Javaw*/g;
16     var text = "JavaScript is more fun than Java or JavaBeans!";
17     pattern.exec(text)18  
19     var pattern = /Java(w*)/g;
20     var text = "JavaScript is more fun than Java or JavaBeans!";
    21     pattern.exec(text)

    5、时间处理

    JavaScript中提供了时间相关的操作，时间操作中分为两种时间：

    • 时间统一时间
    • 本地时间（东8区）
    1 var now = new Date();
2 now.getFullYear(); //2016
3 now.getMonth(); // 月份，注意月份范围是0~11，6表示7月
4 now.getDate(); // 日期
5 now.getDay(); // 表示星期几
6 now.getHours(); // 24小时制
7 now.getMinutes(); // 分钟
8 now.getTime(); // 以number形式表示的时间戳

    语句与异常

    1、条件语句

    JavaScript中支持两个中条件语句，分别是：if 和 switch

    1 if(条件){
2  
3     }else if(条件){
4          
5     }else{
6  
7     }
8 
9 if语句
    if语句
     switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }
    switch语句

    2、循环语句

    JavaScript中支持三种循环语句，分别是：

    1 var names = ["alex", "tony", "rain"];
2  
3 for(var i=0;i<names.length;i++){
4     console.log(i);
5     console.log(names[i]);
6 }
7 
8 方式一
    方式一
    var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}
    方式二
    1 while(条件){
2     // break;
3     // continue;
4 }
    方式三

    3、异常处理

     1 try {
 2     //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
 3 }
 4 catch (e) {
 5     // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
 6     //e是一个局部变量，用来指向Error对象或者其他抛出的对象
 7 }
 8 finally {
 9      //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
10 }

    注：主动跑出异常 throw Error('xxxx')

    函数

    1、基本函数

    JavaScript中函数基本上可以分为一下三类：

    // 普通函数
    function func(arg){
        return true;
    }
          
// 匿名函数
    var func = function(arg){
        return "tony";
    }
  
// 自执行函数
    (function(arg){
        console.log(arg);
    })('123')

    2、作用域

    作用域在许多程序设计语言中非常重要。

    通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

    作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。

    首先，了解下其他语言的作用域：

    其他语言：以代码块为作用域，即：大括号也是一个作用域

    1 public static void main ()
2 {
3     if(1==1){
4         String name = "seven";
5     }
6     System.out.println(name);
7 }
8 // 报错

    python：以函数作为作用域

     1 情况一：
 2     def func():
 3         if 1==1:
 4             name = 'alex'
 5         print(name)
 6          
 7     func()
 8     // 成功
 9 情况二：
10     def func():
11         if 1==1:
12             name = 'alex'
13         print(name)
14          
15     func()
16     print(name)
17     // 报错

    javascript作用域的特点：

    以函数作为作用域

    1 var name='cc';
2 function func(){
3     if(1==1){
4         var name = 'dd';
5     }
6     console.log(name);
7 }
8 func()

    函数的作用域在函数未被调用之前已经创建

    1 function func(){
2     if(1==1){
3         var name = 'cc';
4     }
5     console.log(name);
6 }

    函数的作用域存在作用域链，并且也在函数未被调用前创建

     1 xo = "cc";
 2 function func(){
 3     var xo = 'eric';
 4     function inner(){
 5         var xo = 'tony';
 6         console.log(xo);
 7     }
 8      
 9     inner()
10 }
11  
12 func()

    输出：tony;

    注释掉var xo='tony';一行，输出：eric;

    同时注释掉var xo='tony';和var xo='eric';输出cc；

    同时注释var xo='tony';、var xo='eric';和xo="cc";报错

     1 xo = "cc";
 2      
 3     function func(){
 4         var xo = 'eric';
 5         function inner(){
 6              
 7             console.log(xo);
 8         }
 9          
10         return inner;
11     }
12      
13     var ret = func()
14     ret()

    输出 eric

     1  xo = "alex";
 2     function func(){
 3         var xo = 'eric';
 4         function inner(){       
 5             console.log(xo);
 6         }
 7         var xo = 'tony';     
 8         return inner;
 9     }
10     var ret = func()
11     ret()

    输出 tony

    函数类局部变量声明提前

     1 function func(){
 2     console.log(name);
 3 }
 4  
 5 func();
 6 // 程序直接报错
 7  
 8 function func(){
 9     console.log(name);
10     var name = 'cc';
11 }
12 //解释过程中：var name;
13  
14 func();
15 // undefined

    JavaScript词法分析

    js运行前有一个类似编译的过程即词法分析，词法分析主要有三个步骤：

    • 分析参数；

    • 再分析变量的声明；

    • 分析函数说明；

    具体步骤如下：

    • 函数在运行的瞬间，生成一个活动对象（Active Object），简称AO；

    • 分析参数

    1. 函数接收形式参数，添加到AO的属性，并且这个时候值为undefine,例如AO.age=undefined;

    2. 接收实参，添加到AO的属性，覆盖之前的undefined;

    • 分析变量声明，如var age;或var age=23;

    1. 如果上一步分析参数中AO还没有age属性，则添加AO属性为undefined，即AO.age=undefined;

    2. 如果AO上面已经有age属性了，则不作任何修改;

    • 分析函数的声明，如果有function age(){}；把函数赋给AO.age ,覆盖上一步分析的值;

    这样说可能大家不是很理解，下面结合具体的例子看下：

     1 <script>
 2     function t1(age) {
 3         console.log(age);
 4         var age = 27;
 5         console.log(age);
 6         function age() {}
 7         console.log(age);
 8     }
 9     t1(3);
10 </script>

    词法分析阶段：

    1）首先形成active object对象，即AO对象；

    2）第一步分析形参：

    AO.age=undefined；

    传入实参即对AO.age=undefined进行覆盖：AO.age=3；

    3）第二步分析局部变量：

    存在var age=27;

    这个时候遵循如果AO.age存在值则不作任何修改.按照第一步分析的最后结果AO.age = 3,所以这里不作任何修改即：AO.age = 3

    4）第三步：分析函数的声明：

    因为函数中存在function age(){}函数

    所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 3即：

    AO.age = function age(){}

    执行阶段：

    执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){},所以会打印：

    function age(){}

    var age=27；给age赋值27

    到第二个console.log（age）这个时候age已经重新被赋值27，所以这个时候会打印：

    27

    function age() 并没有调用所以并不会执行

    到第三个console.log（age）这个时候age的值并没有被再次修改，所以这个时候会打印：

    27 

    运行js查看结果如下与我们分析的完全相符：

    例2

    1 function t1(age) {
2         var age;
3         console.log(age);
4         var age = 23;
5         console.log(age);
6         function age() {}
7         console.log(age);
8     }
9 t1(22)

    词法分析阶段：

    • 首先形成Active Object即AO对象

    • 第一步：分析形式参数

    AO.age = undefine

    传入实参即对AO.age=undefine进行覆盖：

    AO.age = 22

    • 第二步：分析局部变量

    第一步中最后得到AO.age = 22

    所以这里var age；以及var age =23 ，因为AO.age属性已经存在值，所以这个时候遵循如果存在则不作任何修改，即：

    AO.age = 22

    • 第三步：分析函数的声明，

    因为函数中存在function age(){}函数

    所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 22即：

    AO.age = function age(){}

    执行阶段：

    执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){},所以会打印：

    function age(){}

    var age=23；给age赋值23

    到第二个console.log（age）这个时候age已经重新被赋值23，所以这个时候会打印：

    23

    function age() 并没有调用所以并不会执行

    到第三个console.log（age）这个时候age的值并没有被再次修改，所以这个时候会打印：

    23

    运行js查看结果如下与我们分析的完全相符：

    例3

     1 function t1(age) {
 2     var age;
 3     console.log(age);
 4     age = 23;
 5     console.log(age);
 6     function age() {
 7         console.log(age);
 8     }
 9     age();
10     console.log(age)
11 }
12 t1(22)

    词法分析阶段：

    • 首先形成Active Object即AO对象

    • 第一步：分析形式参数

    AO.age = undefine

    传入实参即对AO.age=undefine进行覆盖：

    AO.age = 22

    • 第二步：分析局部变量

    第一步中最后得到AO.age = 22，所以这里遵循，如果AO.age存在值则不作任何修改即：

    AO.age = 22

    • 第三步：分析函数的声明

    因为函数中存在function age(){console.log(age)}函数

    所以按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 22即：

    AO.age = function age(){console.log(age)}

    执行阶段：

    执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){console.log(age)},所以会打印：

    function age(){console.log(age)}

    age = 23，这个时候会覆盖原来的function age(){console.log(age)}，所以第二个console.log(age)会打印：

    23

    function age() 是一个函数表达式，所以不会做任何操作

    age() 这个时候的age还是23,并不是函数表达式，所以这里会报错

    运行js查看结果如下与我们分析的完全相符：

    面向对象

    function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
  
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

    对于上述代码需要注意：

    • Foo充当的构造函数
    • this代指对象
    • 创建对象时需要使用 new
    • 上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：

    为了解决上述问题，javascript引入了一个prototype-原型；

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个对象;

    用途:包含可以由特定类型的所有实例共享的属性和方法;

    理解:prototype是通过调用构造函数创建的那个对象的原型对象;

    使用原型的好处是可以让所有对象实例共享它所包含的属性和方法;

    也就是说,不必在构造函数中定义对象信息(属性/方法),而是可以直接将这些信息添加到原型中;

     1 function Foo(n){
 2     this.name = n;
 3 }
 4 # Foo的原型
 5 Foo.prototype = {
 6     'sayName': function(){
 7         console.log(this.name)
 8     }
 9 }
10  
11 obj1 = new Foo('we');
12 obj1.sayName()
13  
14 obj2 = new Foo('wee');

    具体可参照http://www.jb51.net/article/63876.htm
  • 相关阅读:
    CreateProcess逆向分析3环用户层逆向分析(一)
    CVE20112005(MS11080)漏洞分析
    vmware安装Windows 11虚拟机
    SAP SD 常用配置事物代码
    Java学习笔记02面向对象
    Java学习笔记01基本语法
    Java学习笔记03枚举和注解
    openssl3.0 加密算法库编程精要 06 详解 EVP API 公开密钥密码算法 非对称加密、签名
    零基础实现微信小程序云开发的无人机管理系统项目实例系列教程简述（一）
    chrome安装vuedevtools遇到的常见问题及解决方法
  • 原文地址：https://www.cnblogs.com/kxsph/p/9383427.html
Copyright © 2020-2023  润新知