web前端(14)—— JavaScript的数据类型,语法…

2018-11-20 03:18:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

编辑器选择

对js的编辑器选用,有很多,能对html编辑的,也能对js编辑,比如notepad++,visual studio code,webstom,atom,pycharm,sublime text,Hbuilder等等的,根据你的喜好来就行

调试

在我们编写js时,也可以像调整css样式一样的在线编辑,在每个浏览器的调试界面(按快捷键f12可以直接打开,或者右键鼠标-检查)里,都可以直接进行js的编写调试

例:

 

以上的语法您暂且可以忽略,因为下面紧接着就会讲解到

 

变量

稍微对编程开发有点耳闻的老哥们,应该都知道只要是一门编程语言,都有变量一词,这个变量究竟是什么呢?简而言之就是暂存数据的很小的容器。

顾名思义,变量,那当然是会变的量了

这样也方便开发,如果没有变量的话,那么后面的一切都将无法展开,因为后面的一切都是建立在变量的基础上的,所以这个朋友您必须得理解了

 

如果以上的几句话您看起来还觉得不太懂的话,你可以看我最近准备发的【Python高级】系列里对变量的讲解:传送门

 

好的,那么怎么定义变量呢?先看个例子,是的,也就是上面那个例子:

格式:使用关键词var+空格+变量名 = 值,这样就定义好了一个变量

 

首先var是js里的保留关键词,有特殊的意义,以后还会学到很多有特殊意义的关键词,那么什么是关键词呢?就是有特殊功能的小词语。关键字后面一定要有空格隔开

变量名随意取,但是必须符合命名规范,这个命名规范在所有的编程语言里都通用,可能部分的语言有很细微的差别,在js的命名规范:

只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字

(作为了解,以后会逐一介绍)js的保留关键词:

bstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

然后这个等号—— 【=】也有点讲究的,暂且不表,下面运算符给介绍

值和下面的数据类型相关,也暂且不表,下面会介绍

 

好的,还有种比较标准的定义变量的方法:

这种定义变量每一行意思是,先用var声明一个变量,再给此变量赋值,再访问此变量,这个和前面的var test= 2其实是同一个,只不过var test=2把声明加赋值同时进行了,不过浏览器解析还是拆开来两个步骤单独操作的

这个就不同于Python了,Python定义变量公式: test = 2即可。也就是说js定义变量时先声明再赋值(或者说先定义再赋值),之后才能访问这个变量。不信的话,可以试试直接访问:

 

报错了,且报错提示意思就是说a 没有事先定义

 

注意:console.log();是一种控制台里的输出语句,这个在介绍js的DOM和BOM对象会详细介绍

  

简单数据类型

有了变量的定义,当然我们肯定不会满足于只是定义下简答的变量,当然还想做更高级的操作,要做这些高级的操作,那就必须先学好不同的数据类型

数值类型:number

说白了就是其他语言里说的整形,所有的数字都是数值类型,比如刚才我们定义的 test = 2,那么怎么确认test就是数值类型呢?有个关键词可以判定:typeof

例:

可以这么写:typeof  xx 或者 typeof(XX)

 

注意:如果你是在浏览器控制台进行操作的话,就按上面的方式来,如果你不是在浏览器控制台进行操作的话,请使用console.log(typeof test)打印出来:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>       

    </style>
</head>
<body>
    <div class="box1">
        <p>test</p>
    </div>

</body>
<script type="text/javascript">
    var test = 2;
    console.log(typeof test);
    
</script>
</html>

注意:js的语法在每一行要给一个分号作为结尾(虽然不给也可以,因为js比较随意,没有固定一定要这么写,但是这是语法规范,养成良好的习惯)

效果测试:

打开浏览器访问此html文件,同时请打开控制台,然后切换到console,才能看到打印的结果:

好的,确实打印的number对吧? 

 

字符串类型:string

字符串就是有引号包围的字符,就是字符串:

确实是sting对吧?

这里要说下,为什么在定义变量的时候出现undefined,控制台输出的是你输入的表达式计算出的结果,如果你输入的是js语句,或者没有返回值的函数,就输出undefined。可以用confirm()和prompt()函数测试(这两个函数后期会讲解的,如果朋友您喜欢研究的话,可以提前学习

 

布尔类型:boolean

 

空对象:Null

 

这里为什么返回一个object,因为null本来就是一个对象

 

未定义:Undefined

  

运算符

赋值运算符

 

算术运算符

 

这里要着重说下 +

 

对于字符串来说 ,+ 表示字符串拼接,对于数值类型来说,+ 表示数值相加

例:

 

根据上面这个例子,你发现一个很奇怪的事,数值类型和字符串相加,居然没有报错,而且还加上返回了一个新的字符串,这种就是隐式的数据转换,当数值和字符串使用+时,数值会被转换为字符串再参与运算

 

那么,再使用 - ,*,/试试看:

 

又变了,当数值和字符串使用  - ,*,/时,字符串会被转换成数值再参与运算

 

关于数据类型转换下面会介绍 

比较运算符

 

这里要着重说下,= 与 == 与 === 

= :指赋值

== : 判断,判断符号两边的变量的值是否等于

=== :判断,判断符号两边的变量的数据类型和值是否等于

 

数据类型转换

number转为string:

隐式转换:

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);

  

强制转换:

// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

  

string转为numer:

隐式转换:使用-,*,/对字符串转换

 

强制转换:

var  stringNum = '456.123wa';
var num2 =  Number(stringNum);
console.log(num2); //NaN  Not a Number 但是一个number类型

// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum)); //456
console.log(parseFloat(stringNum)); //456.123

  

 

其他任何类型转为boolean:

var b1 = '123'; //true
var b2 = 0; //false
var b3 = -123 //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false

 

还可以Boolean(变量),来查看当前变量的真假  

 

流程控制if……else

if

var test = 2;
if(test>1){
  console.log('yes');
}
// 返回yes

 

注:对js代码的注释,使用 //来注释掉后面的字符,比如上面的 // 返回yes 

if...else

var test = 2;
if(test<1){
    console.log('yes');
}else{
    console.log('no');
}
// 返回no

  

多层if...else

var test = 80;
if(test>=100){
    console.log('A');
}else if(test>=90){
    console.log('B');
}else if(test>=80){
    console.log('C');
}else if(test>=70){
    console.log('D');
}
// 返回C

  

 

逻辑与&&、 逻辑或||

&&表示都成立,||表示其中任意一个成立则成立

例:

    var test = 80;
    if(test > 50 && test< 90){
        console.log('逻辑与成立')
    }
    if(test>50 || test>90){
        console.log('逻辑或成立')
    }

  

效果测试:

 

switch...case语句

不同于if...else,也不同于下面要讲解的循环,它就是针对性的输出,从上往下走,走到满足条件时,则跳出,例:

    var test = 80;
    switch(test){
        case 100:
            console.log('A');
            break;
        case 90:
            console.log('B');
            break;

        case 80:
            console.log('C');
            break;
        case 70:
            console.log('D');
            break;
    }

  

效果展示:

 

但是这里要注意,假如某个case没有给break跳出的话,则会这样:

    var test = 80;
    switch(test){
        case 100:
            console.log('A');
            break;
        case 90:
            console.log('B');
            break;

        case 80:
            console.log('C');
        case 70:
            console.log('D');
            break;
    }

  

 

因为当满足条件时,没有跳出,接着往下走了,直到遇到break了才跳出。这样的话就容易导致一些不可估量的结果,所以,我们在用switch时,在每个case下必须给break,且最后给一个默认值保证switch语句一定能结束:

    var test = 80;
    switch(test){
        case 100:
            console.log('A');
            break;
        case 90:
            console.log('B');
            break;

        case 80:
            console.log('C');
        case 70:
            console.log('D');
            break;
        default:
            console.log('不及格')
    }

 

循环

while循环

while循环三个步骤:

  1. 初始化循环变量
  2. 判断循环条件
  3. 更新循环变量

例:

// 例子:打印 1~9之间的数
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}

  

do...while循环

雷同while,但是是在执行循环之前就一定会走一次循环体,这个很少用

var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环条件

  

这里的3就是最开始走的那一次

 

for循环

for循环表示遍历,在js中比较常用,对给定的数据类型从头到尾循环一遍

例:

 

//输出1~10之间的数
for(var i = 1;i<=10;i++){
     console.log(i)
 }

 

如果您想写一个死循环,务必写上足够的分号:

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

 

内置对象

数组array

数组就是一个数据容器,里面可以存多个数据,可以是多个数值,可以是多个字符串等等,类似Python里列表

 

创建数组的方式:

1.此方式最简单最粗暴也最常用
var colors = ['red','green','blue'];
2.使用构造函数创建
var colors = new Array();
//通过下标进行赋值
colors[0] = 'red';
colors[1] = 'green';
colors[2] = 'blue';
console.log(colors);

  

数组的常用方法:

 

concat(),组合数组

var north = ['北京','上海','天津'];
var south = ['贵州','深圳','成都'];

var city = north.concat(south);
console.log(City)

 

join(),字符串格式化拼接

var score = [98,78,76];
var str = score.join(',');
console.log(str);//"98,78,76"

slice(start,end),同Python里的列表切片

 

var arr = ['张三','李四','王五','赵六'];
var newArr  = arr.slice(1,3);
console.log(newArr);//["李四", "王五"]

  

pop,删除数组的最后一个位置的元素

var arr = ['张三','李四','王五','赵六'];
arr.pop();
console.log(arr);//["张三", "李四","王五"]

 

push(),向数组最后一个位置添加元素

var arr = ['张三','李四','王五','赵六'];
arr.push('李琪');
console.log(arr);//["张三", "李四","王五","赵六","李琪"]

 

reverse() ,翻转数组

var arr = ['张三','李四','王五','赵六'];
arr.reverse();
console.log(arr) // ['赵六','王五','李四,'张三']

  

sort,对数组排序

 

var arr = ['张三','李四','王五','赵六'];
arr.sort();
console.log(arr); //["张三", "李四", "王五", "赵六"]

  

isArray(),判断是否是数组

var arr = ['张三','李四','王五','赵六'];
var test = 80;
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(test)); // false

  

清空数组的几种方式

    var array = [1,2,3,4,5,6];
    array.splice(0);      //方式1:删除数组中所有项目
    array.length = 0;     //方式2:length属性可以赋值,在其它语言中length是只读
    array = [];           //方式3:推荐

  

字符串string

 

 

chartAt() 返回指定索引的位置的字符

var str = 'test';
var charset = str.charAt(1);
console.log(charset);//e

  

concat 返回字符串值,表示两个或多个字符串的拼接

var str1 = 'te';
var str2  = 'st';
console.log(str1.concat(str2,str2));//testst

  

replace(a,b) 将字符串a替换成字符串b

var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755

  

indexof() 查找字符的下标,如果找到返回字符串的下标,找不到则返回-1 。跟seach()方法用法一样

var str = 'test';
console.log(str.indexOf('e'));//1
console.log(str.indexOf('p'));//-1

  

slice(start,end) 左闭右开 分割字符串

var str = '小情歌';
console.log(str.slice(1,2));//情

  

split('a',1) 以字符串a分割字符串,并返回新的数组。如果第二个参数没写,表示返回整个数组,如果定义了个数,则返回数组的最大长度

var  str =  '我的天呢,是嘛,你在说什么阿萨德发撒地方呢?哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么阿萨德发撒地方呢?", "哈哈哈"]

  

substr(statr,end) 左闭右开

var  str =  '我的天呢,是嘛,你在说什么阿斯顿发大水发呢?哈哈哈';
console.log(str.substr(0,4));//我的天呢

  

toLowerCase()转小写

var str = 'XIAO';
console.log(str.toLowerCase());//xiao

  

toUpperCase()转大写

var str = 'xia';
console.log(str.toUpperCase());//XIA

  

特别:

//1.将number类型转换成字符串类型
var num = 132.32522;
var numStr = num.toString()
console.log(typeof numStr)
//四舍五入
var newNum = num.toFixed(2)
console.log(newNum)

 

Math内置对象

Math.ceil() 向上取整,'天花板函数'

var x = 1.234;
//天花板函数  表示大于等于 x,并且与它最接近的整数是2
var a = Math.ceil(x);
console.log(a);//2

  

Math.floor 向下取整,'地板函数'

var x = 1.234;
// 小于等于 x,并且与它最接近的整数 1
var b = Math.floor(x);
console.log(b);//1

  

max,min 求两个数的最大值和最小值

console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2

  

Math.random() 随机数 

var ran = Math.random();
console.log(ran);[0,1)

  

特别的:

min - max之间的随机数: min+Math.random()*(max-min);

 

自定义函数

首先函数就是上面给的保留关键词里,有很多其实就是函数,比如console.log()函数。那么只是那些函数,肯定是不够我们用的,所以我们需要自定义函数,怎么自定义呢?

格式:

function 函数名(参数){

}

 

就这样既可,例:

    function myfunc(arg){
        console.log(arg);
    }
    var a = myfunc('test');

  

结果:

 

函数的作用:

  • 解决大量的重复性的语句
  • 简化编程,让编程模块化

 

注意:

  • function:是一个关键字。中文是“函数”、“功能”。
  • 函数名字:命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号,不能以数字开头。
  • 参数:后面有一对小括号,里面是放参数用的。
  • 大括号里面,是这个函数的语句

 

暂且就这样的,以后再深入

 

 

伪数组arguments

arguments代表的是实参,arguments只在函数中使用

    function fn(a,b,c) {
        console.log(arguments);
        console.log(fn.length);         //获取形参的个数
        console.log(arguments.length);  //获取实参的个数

        console.log("----------------");
    }
    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

  

结果:

 

arguments可以修改元素,但不能改变数组的长短

function fn(a,b) {
        arguments[0] = 99;  //将实参的第一个数改为99
        arguments.push(8);  //此方法不通过,因为无法增加元素

 

但是数组的length方法可以修改长度,上面清除数组的几种方式里有,array.length = 0 则清除

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:面试题-浅谈JavaScript中的This指向问题

下一篇:Vue.js-06:第六章 - 按键修饰符的使用