我与JS的那些陈年旧事（一）

作者: 一只96年的程序猿 | 来源:发表于2018-08-12 23:04 被阅读0次

JavaScript概述

全称JavaScript,简称JS.
JS是一门基于对象和事件驱动的脚本语言，专门为网页交互而设计，主要应用在客户端（浏览器）。

1.JavaScript特点

解释执行，没有编译过程
基于对象：JS没有编译过程，也没有类的概念，但可以通过一些机制模拟面向对象
事件驱动: 在JS中, 很多地方都是通过事件触发来驱动函数执行, 从而实现某些功能.
弱类型（var）

2.HTML中引入JS方式

直接将JS代码写入HTML元素上

<!-- 将JS直接写在元素上 -->
    <input type="button" name="button"value="别点我~！"
     onclick="alert('怎么还是要点我！')" />

第二种引入方式: 通过script标签

 <!-- 在script标签写js代码 -->
     <script type="text/javascript">
        alert("第二种引入方式");
     </script>

第三种方式: 引入外部的JS文件

<!-- 引入外部js文件 -->
    <script type="text/javascript" src="demo.js"></script>

3.JavaScript语法

数据类型

1.基本数据类型

数值类型（number）：在JS中, 数值类型底层只有一种, 就是浮点型.
在需要的时候,JS会在浮点型和整型之间自动的进行转换

3.4+2.6=6;

特殊值：

Infinity:正无穷大

NaN: 表示非数字,NaN和任何值都不相等, 包括它本身.

字符串类型（string）:在JS中, 字符串属于基本数据类型.JS中的字符串常量可以使用双引号或者单引号引起来.

var str1 = "Hello JS";
var str2 = 'Hello JS';

布尔类型（boolean）:布尔类型的值分为true和false.

var Bool = true;

undefined:表示变量未定义(其实是变量声明了但是没有赋值。

null:空值

2.复杂数据类型

对象（函数/数组/对象）

var app = function(){
    alert("This is a function");
}

变量和运算符

1.变量的定义：在JS中, 是通过 var 关键字来声明变量

var str = "Hello JS"; //声明字符串
var num = 100;  //声明数值
//声明函数
var f = function([参数列表]){
    //函数体
}
var arr = [100,"hello",true];  //声明数组
var date1 = new Date();  //声明对象

在JS中, 通过var 声明的变量本身是不区分类型. 变量可以指向任意的数据类型.

var x = "abc";
x = 100;
x = true;

2.运算符：JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%，++，--

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: == ，!= ，=== ，!== ，>，>=，<，<=

位运算符: & ， |

逻辑运算符: && ，||

前置逻辑运算符: ! (not)

三元运算符: ? :

其他运算符: typeof, delete

1.== 和===的区别？

(1) 如果在比较时, 比较的两个值属于同一种数据类型, 此时, == 和===没有区别, 比较的结果是一样的!

(100+23) == 123; //true
(100+23) === 123; //true

(2)如果在比较时, 比较的两个值不属于同一种数据类型, 此时, ===不予比较,直接返回false.==是先将两个值转成同一种数据类型, 再比较是否相等.

"123" == 123;  //true
"123" === 123;  //false

2.typeof运算符：用于返回变量或者表达式的数据类型

var x = 123;
document.write(typeof x +"<br/>");//number      

x = "123";
document.write(typeof x +"<br/>");//string
x = true;
document.write(typeof x +"<br/>");//boolean 
document.write(typeof 123+"abc"+"<br/>");//numberabc
document.write(typeof (123+"abc"));//string

语句

JS中的语句和Java中的大致相同

在JS中, 判断条件或者循环条件即使不是布尔类型, 也可以执行, 是先转成布尔类型再进行判断

1.if...else

var x = 123;
if( x = 100){//如果判断条件不是布尔类型,先转成布尔类型再判断
    console.log("yes");
}else{
    console.log("no");
}

2.switch

var day = 3;
switch(day){
    case 1: console.log("周一");break;
    case 2: console.log("周二");break;
    case 3: console.log("周三");break;
    case 4: console.log("周四");break;
    case 5: console.log("周五");break;
    default:
    console.log("周末");
}

3.循环

for(var i = 0;i<5;i++){
    console.log("这是第"+(i+1)+"次循环！");
}

数组

1.声明方式

通过Array函数声明数组

var arr1 = new Array();//声明一个空数组
var arr2 = new Array(true,"abc",123);
//声明一个具有初始值的数组
var arr3 = new Array(10);

console.log( "arr1:"+arr1 );
console.log( "arr2:"+arr2 );
console.log( "arr3:"+arr3 );

通过数组直接量声明数组

var arr4 = [];//声明空数组
var arr5 = ["hello",123,true];//声明有初始值的数组

2.常见属性及方法

length属性 – 用于返回数组的长度

var arr6 = ["hello", true, "abc", 123];
console.log("数组的length:"+ arr6.length );//4

pop/shift 方法-- 删除数组中最后一个(或第一个)位置的元素并返回该元素

var arr6 = ["hello", true, "abc", 123];
console.log("pop:"+ arr6.pop() );//123

函数

函数其实是一个具有功能的代码块, 可以反复调用

1.声明方式

//声明方式1：
//无参
function fun1(){
    alert("fun1函数执行啦！");
}
fun1();
//有参
function fun2(name,nickname){
    alert(name+":"+nickname);
}
fun2("张三","三子");

JS函数的细节: 在JS中调用函数时, 函数的参数多传或者少传也可以调用函数, 但是可能会引发一些问题或者错误!

//声明方式2：
var fn3 = function(name,age){
    alert(name+":"+age);
}
fn3("李四",18);

对象

1.JS自定义对象

声明方式

//================== 方式1 ==================//
        function Person(){}
        var p1 = new Person();
        
        //动态为对象添加属性的方法
        p1.name = "李四";
        p1.age = 18;
        p1.run = function() {
            // body...
            console.log(this.name+":"+this.age);
        }

        //访问p1对象上的属性和方法
        console.log(p1.name);
        console.log(p1.age);
        p1.run();
        //=========
        function Person(name, age){
            this.name = name;
            this.age = age;
            this.run = function(){
                console.log(this.name+":"+this.age);
            }
        }
        var p2 = new Person("张三",20);
        console.log(p2.name);
        console.log(p2.age);
        p2.run();

//================= 方式2 (类JSON)=================//
        var p3 = {
            "name": "王五",
            "age" : 35,
            "run" : function(){
                console.log(this.name+":"+this.age);
            }
        };
        console.log(p3.name);
        console.log(p3.age);
        p3.run();

2.JS内置对象

(1).String对象

var str1 = new String("abc"); //对象
var str2 = new "abc";  //基本数据类型string
alert(typeof str1);  //object
alert(typeof str2);  //string

//string类型在需要时会自动转化成对应的包装对象
alert(str2.toString());

常见属性和方法

var str = "Hello JavaScript...Java";

//（01）length属性 -- 返回字符串的长度
console.log(str.length);  //23

//（02）charAt方法 -- 返回指定索引处的字符
console.log(str.charAt(2));  //"1"

//（03）indexOf方法 -- 根据子字符串到字符串进行查找, 返回子字符串第一次出现的位置.
console.log(str.indexOf("Java"));  //6

//（04）lastIndexOf方法 --根据子字符串到字符串进行查找, 返回子字符串最后一处的位置.
console.log(str.lastIndexOf("Java")));  //19

//======================================//
//i -- ingroeCase忽略大小写
//g -- global全局检索 
//======================================//

//（05）match方法 -- 根据正则表达式到字符串中进行匹配, 返回包含所有符合正则表达式的子字符串的数组
var str3 = "Hello JavaScript...Java";
var reg = /Java/g;
alert(str3.match(reg));  //Java, Java

// (06) repace方法
alert(st3.replace(reg2,"C++"));  //Hello C++Script...C++

//（07）search方法 -- 根据正则表达式到字符串中进行匹配, 返回第一次出现的位置.
alert(st3.search(reg3));//6

//（08）split方法 -- 根据指定的字符切割字符串,返回一个数组
alert(str3.spilt("..."))  //["Hello JavaScript", "Java"]

//（09）slice方法 -- 从start开始截取,截取到end这个位置.(包含start, 不包含end)
alert(str3.slice(6.10));  //Java

//（10）substr方法 -- 从start开始截取,截取指定长度的字符串
alert(str3.substr(6,4));  //Java

//（11）toLowerCase -- 转小写，示例略。
//（12）toUpperCase -- 转大写，示例略。

(2).Array对象

(3).Date对象

声明方式

//（1）声明方式一
var date1 = new Date();//表示当前时间
alert(date1.toLocaleString());

//（2）声明方式二
var date2 = new Date(1000*3600);//1970-1-1
alert(date2.toLocaleString());

//（3）声明方式三
//月份是从零开始, 0表示1月, 11表示12月
var date3 = new Date(2017,10,11);
alert(date3.toLocaleString());

方法

方法	相关描述
getFullYear()	年份
getMonth()	月份
getDate()	天
getDay()	星期几

(4).Math对象

方法	相关描述
Math.PI	返回圆周率
Math.ceill	向上取整
Math.round	四舍五入
Math.floor	向下取整
Math.random	获取一个伪随机数(0~1之间的浮点数)

(5).Global对象

Global表示全局对象, 可以直接调用其属性或方法(不需要加对象点);

方法	相关描述
parseInt()	将传入的值转成整数
parseFloat()	将传入的值转成浮点数
isNaN	判断一个值是否是非数字
eval	将一段字符串按照JS代码来解释执行

(6).RegExp对象

(1)声明方式

//方式一
var reg1 = new RegExp(“^\\w+@\\w+(\\.\\w+)+$”);

//方式二
var reg2 = /^\w+@\w+(\.\w+)+$/;

(2)test方法：用来检测字符串是否符合该正则表达式, 符合返回true, 不符合返回false

//======= 简单的邮箱验证 =========//
var email = "abc123@163.com";
var reg2 = /^\w+@\w+(\.\w+)+$/
//^和$是开始和结束标记, 表示整个字符串都符合该正则表达式时才会返回true
alert(reg2.test(email));

标识符

i -> ignoreCase 忽略大小写

g -> global 全局检索

网友评论

本文标题：我与JS的那些陈年旧事（一）

本文链接：https://www.haomeiwen.com/subject/znbebftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！