前端_JavaScript

Posted 2021-01-21 徘徊的游鱼

javascript

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

JavaScript存在形式

• 存在Script标签内部

<script type"text/javascript">
     Js代码内容
</script>    

•  外部JS文件

<script type"text/javascript" src="JS文件"></script>

src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>

注：src="JS文件"，JS文件可以是本地文件，也可以是web上的文件

JavaScript代码位置选择

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

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

语句以分号" ; "结束（推荐），因为JavaScript代码通常为一行
*/

注释

• 单行：     //
• 多行：  /*  */

变量

变量定义：下划线，数字，字母，$组成，不能以数字开头。变量名区分大小写，保留字不能用做变量名。

变量声明

• 局部变量必须一个 var 开头
• 如果未使用var，则默认表示声明的是全局变量。

<script type="text/javascript">
    // 全局变量
    name = \'seven\';
    function func(){
        // 局部变量
        var age = 18;
        // 全局变量
        gender = "男"
    }
</script>

ES6新增命令用于声明变量

// 所声明的变量只在let命令所在的代码块内有效
for (let i=0;i<arr.length;i++){...}

// ES6新增const用来声明常量。一旦声明，其值就不能改变。
const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

数据类型

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

/*
原始类型：
    数字
    字符串
    布尔值
对象类型
    数组
    “字典”
    ...
注：
1、数字、布尔值、null、undefined、字符串是不可变
2、null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”
3、undefined是一个特殊值，表示变量未定义
*/

数字

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

• parseInt(..)         将某值转换成数字，不成功则NaN；相当于Number(n)
• parseFloat(..)     将某值转换成浮点数，不成功则NaN
• NaN，非数字；可使用 isNaN(num) 来判断
• Infinity，无穷大；可使用 isFinite(num) 来判断。
• n.toString()：数字转字符串；一个数字加上一个字符串等于一个字符串；

var a = 12.34;
var b = 20;

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

数值计算

/*

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.floor(Math.random()*(max-min)+min)   获取min到max之间的整数

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

Math_数值计算

字符串

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

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法

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

拼接字符串可以使用：‘+’

/*
string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
*/

slice和substring

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

// 如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
// JSHint启用ES6语法支持:/* jshint esversion: 6 */

布尔类型

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

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

""(空字符串)、0、null、undefined、NaN都是false

注：==表示只要数值相等，不管数据类型是否相等；===表示数值和数据类型都相等
*/

1 == \'1\'   // true
1===\'1\'    // false

null & undefined

• null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
• null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

数组

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

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法

Array.isArray(obj)  // 判断obj是否为一个数组
obj.toString()      // 将数组obj转化为一个字符串
obj.length          //  数组的大小
obj.push(ele)       //  尾部追加元素
obj.pop()           //  尾部获取一个元素
obj.unshift(ele)    //  头部插入元素
obj.shift()         //  头部移除元素
obj.splice(start, deleteCount, value, ...)  //插入、删除或替换数组的元素
obj.splice(n,0,val) //指定位置插入元素
obj.splice(n,1,val) // 指定位置替换元素
obj.splice(n,1)     // 指定位置删除元素
obj.slice( )        // 切片
obj.reverse( )      // 反转
obj.join(sep)       // 将数组元素连接起来以构建一个字符串
obj.concat(val,..)  // 连接数组
obj.sort( )         // 对数组元素进行排序，可以传入一个自定义比较函数 
obj.forEach()       // 将数组的每个元素传递给回调函数。obj.forEach(function(item,index){console.log}) 
obj.map()           // 可传入一个函数，返回一个数组元素调用函数处理后的值的新数组，obj.map(function(item,index,arry){return item*2}) 
obj.filter()        // 可传入一个函数，将数组元素进行过滤。obj.filter(function(item,index,arry){return item>2}) 

typeof:  变量类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

/*
typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一：
undefined    - 如果变量是 Undefined 类型的
boolean      - 如果变量是 Boolean 类型的
number       - 如果变量是 Number 类型的
string       - 如果变量是 String 类型的
object       - 如果变量是一种引用类型或 Null 类型的
*/

运算符

/*
算术运算符：
+ - * / % ++ --

比较运算符
+ - * / % ++ --

逻辑运算符
&& || !

赋值运算符
= += -= *= /=

*/

1 == \'1\'  //  true
1===\'1\'  //  false

流程控制

条件语句: if-else if-else 语句

if(条件){
 
    }else if(条件){
         
    }else{
 
    }

switch语句

如果不加break，执行完匹配到的语句，其后面语句也会执行。

switch(name){
        case \'1\':
            age = 123;
            break;
        case \'2\':
            age = 456;
            break;
        default :
            age = 777;
    } 

循环语句

方式一：

var names = ["a", "b", "c"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
    }

方式二：

var names = ["alex", "tony", "rain"];
 
for(var index in names){
    console.log(index);
    console.log(names[index]);
   }

方式三：while，先判断再执行

// 初始化条件
while(判断循环结束条件){
    //递增条件 
    // break;
    // continue;
 } 

方式四：do-while，先执行再判断

var sum=0
var i=1
do{
    sum = sum+i
    i ++;
}while(i<=100)

注

/*
字典是无序的，不适用i++方式循环
方式2中，对于列表返回的是索引值
for(;;){}   死循环
*/

break & continue

break: 跳出当前循环

continue: 跳过此次循环，下次循环继续执行

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

函数

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

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

/*
注：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
*/

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)

/* 输出：
3
2
*/

局部变量与全局变量

/*
局部变量：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
*/

局部/全局变量污染问题

(function(){
    var name=\'A\';
    var hello=function(){
        alert(\'hello\'+name);
    }
    window.first=hello;       //把匿名函数赋值给window
})

词法解析

/*
JavaScript中在调用函数时，会先进行词法分析，生成一个Active Object(AO)，并根据下面三个方面分析：
1、函数形式参数，如果有参数，则将此参数赋值给AO，且值为undefined（如AO.参数名=undefined）。如果没有，则不做任何操作。
2、函数局部变量申明，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined(如AO.参数名=undefined）。
3、函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。


注：函数内部无论是使用参数还是使用局部变量都到AO上找。

*/

实例

function t1(age){
    
  console.log(age);
  var age = 27;
  console.log(age);
  function age(){}
  console.log(age)

}
t1(3)

/*
解析：
active object ====>AO
形式参数 ====》 AO.age = unterfined;=> AO.age=3;
局部变量 ===》 AO.age = 3
函数申明表达式 ===》AO.age = function()
所以函数t1(3)执行结果为：function age()       27  27
*/

序列化

• JSON.stringify(obj)    序列化，即将obj转化为字符串形式
• JSON.parse(str)        反序列化，即将字符串转换为对象

var str1 = \'{"name": "Alex", "age": 18}\';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

转义

将数据经过转义后保存在cookie中。（例，登入网站后记住密码一个月，会在本地保存一个cookie文件，下次访问网站就会通过与服务器端比较，是否需要密码登入） 

decodeURI( )             // URl中未转义的字符
decodeURIComponent( )    // URI组件中的未转义字符
encodeURI( )             // URI中的转义字符
encodeURIComponent( )    // 转义URI组件中的字符
escape( )                // 对字符串转义
unescape( )              // 给转义字符串解码
URIError                 // 由URl的编码和解码方法抛出

eval

/*
python:
　　val = eval(表达式)：python中eval可以执行表达式，并且返回结果
　　exec(执行代码)：python中exec可以执行代码，如for循环，但是不返回

JavaScript:
　　eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
eval() 
EvalError   执行字符串中的JavaScript代码

*/

内置对象和方法

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。

注：

var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --> string而 typeof s2 --> Object

创建对象

var person=new Object();  // 创建一个person对象
person.name="Alex";       // person对象的name属性
person.age=18;            // person对象的age属性

Date类

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

• 时间统一时间
• 本地时间（东8区）

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

常用方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

正则表达式

定义正则表达式

/*
/.../        用于定义正则表达式
/.../g      表示全局匹配
/.../i       表示不区分大小写
/.../m     表示多行匹配
定义正则表达式也可以  reg= new RegExp()
全局匹配，会匹配所有符合规则的字符串，知道返回一个null ， 然后继续循环匹配字符串
JS正则匹配时默认支持多行匹配，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容
下面例子中，text即使分行了也是一个字符串，如果不加m，那么只会匹配到一个结果
*/

匹配

• test: 判断字符串是否符合规定的正则

n = \'uui99sdf\'
reg = /\\d+/
eg.test(n)  //  true

//只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$

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

// 非全局模式:   
// 获取匹配结果数组：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
  
var text = "JavaScript is more fun than Java or JavaBeans!";
var pattern = /\\bJava\\w*\\b/;
result = pattern.exec(text)
//  ["JavaScript", index: 0, input: "JavaScript is more fun than JavaEE or JavaBeans!", groups: undefined]

var pattern = /\\b(Java)\\w*\\b/;
result = pattern.exec(text)
// ["JavaScript", "Java", index: 0, input: "JavaScript is more fun than ↵JavaEE or JavaBeans!", groups: undefined]

//全局模式
//  需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕

实例

rep = /\\d+/;
rep.test("asdfoiklfasdf89asdfasdf")
// true

rep = /^\\d+$/;
rep.test("asdfoiklfasdf89asdfasdf")
// true

rep = /\\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
//  ["67"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\\bJava(\\w*)\\b/;
// ["JavaScript", "Script"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\\bJava\\w*\\b/g;
// ["JavaScript"]
// ["Java"]
// ["JavaBeans"]
//  null

JavaScript is more fun than Java or JavaBeans!
var pattern = /\\bJava(\\w*)\\b/g;
// ["JavaScript",\'Script\']
// ["Java", ""]
//["JavaBeans", "Beans"]
// null

 

---

参考

 http://www.shouce.ren/api/javascript/main.html

 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

 http://www.cnblogs.com/wupeiqi/articles/5602773.html

http://www.cnblogs.com/wupeiqi/p/5649402.html 

 

 

---