JavaScript基础语法+数据类型

Posted 2020-12-28 allenwoo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础语法+数据类型相关的知识，希望对你有一定的参考价值。

我们都把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模式。

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

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

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

基础语言、基础数据类型

字符串

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

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

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

由于多行字符串用写起来比较费事，所以最新的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)方法可以删除元素

说明及示例