• 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
  • 相关阅读:
    人脸识别算法初次了解
    Linux守护进程的编程实现
    Groovy新手教程
    Matlab画图-非常具体，非常全面
    拓扑排序
    Ubuntu下很给力的下载工具
    NYOJ-289 苹果
    使用PHPExcel导入导出excel格式文件
    Visual Studio 2010 中的 Web 开发
    mysql 加入�列，改动列，删除列。
  • 原文地址：https://www.cnblogs.com/kxsph/p/9383427.html
Copyright © 2020-2023  润新知