码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript基础语法+数据类型

时间:2018-08-06 21:06:43      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:默认   操作   循环   uppercase   实用   而且   过滤   java   数字   

我们都把JavaScript代码放到<head>中
1.JavaScript代码写在<script>...</script>内部
2.把JavaScript代码放到一个单独的.js文件,然后在HTML中通过<script src="..."></script>引入这个文件
<script type="text/javascript">这是没有必要的,因为默认的type就是JavaScript,所以不必显式地把type指定为JavaScript。

但由于浏览器的安全限制,以file://开头的地址无法执行如联网等JavaScript代码,
最终,你还是需要架设一个Web服务器,然后以http://开头的地址来正常执行所有JavaScript代码。

avaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}。但是,JavaScript并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;

单行注释 //      多行注释 /*...*/

基础数据类型

技术分享图片
Number:JavaScript不区分整数和浮点数,统一用Number表示
    NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
    Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
    十六进制用0x前缀和0-9,a-f表示,

NaN这个特殊的Number与所有其他值都不相等,包括它自己
唯一能判断NaN的方法是通过isNaN()函数-----isNaN(NaN); // true

字符串是以单引号或双引号"括起来的任意文本

布尔值  只有true、false两种值
    &&运算是与运算
    ||运算是或运算
    !运算是非运算    
实际上,JavaScript允许对任意数据类型做比较
要特别注意相等运算符==。JavaScript在设计时,有两种比较运算符:
第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;
第二种是===比较,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。
建议始终坚持使用===比较。
/ 3 === (1 - 2 / 3); // false
这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差,


null表示一个“空”的值,它和0以及空字符串‘‘不同,0是一个数值,‘‘表示长度为0的字符串,而null表示“空”。
undefined表示值未定义,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
undefined貌似是null的一个子类???

基础数据类型

变量在JavaScript中就是用一个变量名表示,变量名是大小写英文、数字、$和_的组合,且不能用数字开头。

在JavaScript中,使用等号=对变量进行赋值。可以把任意数据类型赋值给变量,同一个变量可以反复赋值,而且可以是不同类型的变量,但是要注意只能用var申明一次
如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量

不用var申明的变量会被视为全局变量,为了避免这一缺陷,所有的JavaScript代码都应该使用strict模式。

转义字符\可以转义很多字符,比如\n表示换行,\t表示制表符,字符\本身也要转义,所以\\表示的字符就是\。
ASCII字符可以以\x##形式的十六进制表示
还可以用\u####表示一个Unicode字符
最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示

要把多个字符串连接起来,可以用+号连接

如果有很多变量需要连接,用+号就比较麻烦。ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量
var name = ‘小明‘;
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
基础语言、基础数据类型

字符串

JavaScript的字符串就是用‘‘或""括起来的字符表示。
如果字符串内部既包含‘又包含"怎么办?可以用转义字符\来标识,比如:‘I\‘m \"OK\"!‘;

转义字符\可以转义很多字符,比如\n表示换行,\t表示制表符,字符\本身也要转义,所以\\表示的字符就是\。

ASCII字符可以以\x##形式的十六进制表示,例如:‘\x41‘; // 完全等同于 ‘A‘
还可以用\u####表示一个Unicode字符:‘\u4e2d\u6587‘; // 完全等同于 ‘中文‘

由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示:

可以用+号连接多个字符串
如果有很多变量需要连接,用+号就比较麻烦。ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量:

技术分享图片
var name = ‘小明‘;
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);
模板字符串示例
技术分享图片
s.length; //获得字符串的长度

在js中一样可以对字符串进行索引
substring()返回指定索引区间的子串//切片则使用substring
    需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果

JavaScript为字符串提供了一些常用方法,注意,调用这些方法本身不会改变原有字符串的内容,而是返回一个新字符串
toUpperCase()把一个字符串全部变为大写
toLowerCase()把一个字符串全部变为小写
indexOf()会搜索指定字符串出现的位置

在后面编写的JavaScript代码将全部采用strict模式。(声明局部变量时,强制var)
操作字符串

数组

数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。
另一种创建数组的方法是通过Array()函数实现:new Array(1, 2, 3);

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。
要取得Array的长度,直接访问length属性
请注意,直接给Array的length赋一个新的值会导致Array大小的变化

技术分享图片
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]
View Code

 

Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array
请注意,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化

技术分享图片
与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置

js可以索引,但切片需要使用slice()
slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array

push()向Array的末尾添加若干元素
pop()则把Array的最后一个元素删除掉
unshift()向Array的头部添加若干元素
shift()则把Array的第一个元素删除掉

sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序
reverse()把整个Array的元素倒序

concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array
concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里

join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串

splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素
var arr = [‘Microsoft‘, ‘Apple‘, ‘Yahoo‘, ‘AOL‘, ‘Excite‘, ‘Oracle‘];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, ‘Google‘, ‘Facebook‘); // 返回删除的元素 [‘Yahoo‘, ‘AOL‘, ‘Excite‘]
arr; // [‘Microsoft‘, ‘Apple‘, ‘Google‘, ‘Facebook‘, ‘Oracle‘]
// 只删除,不添加:
arr.splice(2, 2); // [‘Google‘, ‘Facebook‘]
arr; // [‘Microsoft‘, ‘Apple‘, ‘Oracle‘]
// 只添加,不删除:
arr.splice(2, 0, ‘Google‘, ‘Facebook‘); // 返回[],因为没有删除任何元素
arr; // [‘Microsoft‘, ‘Apple‘, ‘Google‘, ‘Facebook‘, ‘Oracle‘]
数组操作

对象

avaScript的对象是一种无序的集合数据类型,它由若干键值对组成。------就是python的字典
JavaScript对象的键都是字符串类型,值可以是任意数据类型。

注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用‘‘括起来
xiaohong的属性名middle-school不是一个有效的变量,就需要用‘‘括起来。访问这个属性也无法使用.操作符,必须用[‘xxx‘]来访问

访问不存在的属性不报错,而是返回undefined

如果我们要检测xiaoming是否拥有某一属性,可以用in操作符:如果in判断一个属性存在,这个属性不一定是xiaoming的,它可能是xiaoming继承得到的

要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法

条件判断

if () { ... } else { ... }

如果还要更细致地判断条件,可以使用多个if...else...的组合

技术分享图片
var age = 3;
if (age >= 18) {
alert(‘adult‘);
} else if (age >= 6) {
alert(‘teenager‘);
} else {
alert(‘kid‘);
}
示例

请注意,if...else...语句的执行特点是二选一,在多个if...else...语句中,如果某个条件成立,则后续就不再继续判断了。

循环

for (i=1; i<=10000; i++) { x = x + i;}
i=1 这是初始条件,将变量i置为1;
i<=10000 这是判断条件,满足时就继续循环,不满足就退出循环;
i++ 这是每次循环后的递增条件,由于每次循环后变量i都会加1,因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。

for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环

技术分享图片
var x = 0;
for (;;) { // 将无限循环下去
if (x > 100) {
break; // 通过if判断来退出循环
}
x ++;
}
示例

for循环的一个变体是for ... in循环,它可以把一个对象的所有属性依次循环出来:

技术分享图片
var o = {
name: ‘Jack‘,
age: 20,
city: ‘Beijing‘
};
for (var key in o) {
console.log(key); // ‘name‘, ‘age‘, ‘city‘
}
示例

while循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。

技术分享图片
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
示例

do { ... } while()循环,它和while循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件

技术分享图片
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
示例

用do { ... } while()循环要小心,循环体会至少执行1次,而for和while循环则可能一次都不执行。

Map & Set

Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

技术分享图片
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对。
但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。
为了解决这个问题,最新的ES6规范引入了新的数据类型Map。

Map是一组键值对的结构,具有极快的查找速度
用JavaScript写一个Map如下
var m = new Map([[‘Michael‘, 95], [‘Bob‘, 75], [‘Tracy‘, 85]]);
m.get(‘Michael‘); // 95


初始化Map需要一个二维数组,或者直接初始化一个空Map。Map具有以下方法:
var m = new Map(); // 空Map
m.set(‘Adam‘, 67); // 添加新的key-value
m.set(‘Bob‘, 59);
m.has(‘Adam‘); // 是否存在key ‘Adam‘: true
m.get(‘Adam‘); // 67
m.delete(‘Adam‘); // 删除key ‘Adam‘
m.get(‘Adam‘); // undefined

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉


要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤
通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果
通过delete(key)方法可以删除元素
说明及示例

 

JavaScript基础语法+数据类型

标签:默认   操作   循环   uppercase   实用   而且   过滤   java   数字   

原文地址:https://www.cnblogs.com/AllenWoo/p/9432209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!