基本语法

JavaScript严格区分大小写

每个语句以;结束，语句块用{...}，JavaScript不强制在语句末尾添加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句后面添加;，但是不添加;可能导致运行结果和期待结果不一致，所以建议都写上;。

1 数据类型和变量

1.1 Number

JavaScript不区分证书和浮点数，统一用Number表示

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinityr所能表示的最大值时，就表示为Infinity

Number可以直接做四则运算，规则和数学一致


1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5

1.2 字符串

字符串是以单引号和双引号括起来的任意文本，和其他语言基本一致

ASCII字符可以以\x##形式的十六进制表示，例如：


'\x41'; // 完全等同于 'A'

还可以用\u####表示一个Unicode字符：


'\u4e2d\u6587'; // 完全等同于 '中文'

1.2.1 多行字符串

在ES6标准中可以用反引号` ... `(在键盘上ESC键下边)表示，与go语言中的反引号用法基本一致:


`这是
一个多行
字符串`;

1.2.2 模板字符串

一般情况下用+号连接多个字符串，但时在ES6标准中新增了模板字符串，模板字符串中使用${变量名}获取变量的值：


//一般方法连接多个字符串
var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);//你好，小明，你今年20岁了！


//模板字符串连接多个字符串
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);//你好，小明，你今年20岁了！

1.2.3 操作字符串

获取字符串长度


var s = 'hello world';
s.length;//11

获取字符串中某个指定位置的字符，使用类似于Array下标操作：


var s = 'hello world';
s[0];//h
s[6]//w
s[13]//undefined 超出范围的索引不会报错，都会返回undefined

注意：字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是也没有任何效果：


var s = 'test';
s[0] = 'x';
alert(s);//仍然会输出test

JavaScript提供了一些操作字符串的常用方法，请注意，调用这些方法时不会改变原来字符串的内容，而是一个返回新字符串。

toUpperCase

toUpperCase()把一个字符串全部变成大写


var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'

toLowerCase

toLowerCase()把一个字符串全部变为小写


var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
lower; // 'hello'

indexOf

indexOf()会搜索指定字符串出现的位置：


var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串，返回-1

substring

substring()返回指定索引区间的字符串


var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'

1.3 布尔值

布尔值：true，false

1.4 null和undefined

null表示一个“空”的值，它和0以及空字符串' '不同，0是一个数值，' '表示长度为0的字符串，是客观存在的，而null表示什么都没有。

undefined表示“未定义”，仅仅在判断函数参数是否传递的情况下有用。

1.5 数组

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型，数组用[]表示，元素之间用,隔开。


[1, 2, 3.14, 'Hello', null, true];

另外一种创建数组的方法是通过Array()函数实现：


new Array(1,2,'hello');

数组的元素可以通过索引来访问，请注意所有计算机语言的索引都是熊0开始的：


var arr = [1,3,5,'hello',null,true];//该数组的索引范围是[0,5]
arr[0];//返回索引为0的元素，即1
arr[3];//返回索引为3的元素，即hello
arr[6];//索引超出范围，返回undefined

要取得数组的长度，直接调用length属性：


var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

如果直接给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]

Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：


var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']

通过索引赋值时，如果索引超过了范围，同样会引起Array大小的变化：


var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

大多数编程语言不允许直接改变数组的大小，越界访问索引会报错，然而在JavaScript的Array却不会有任何错误。在实际运用中，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

indexOf

与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：


var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

注意，数字30和字符串'30'是不同的元素。

slice

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：


var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引，不包括结束索引。

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：


var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false

push和pop

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：


var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []

unshift和shift

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：


var arr = [1,2];
arr.unshift('A','B');//返回Array新的长度：4
arr;//['A','B',1,2]
arr.shift();//删除A
arr;//['B',1,2]
arr.shift();arr.shift();arr.shift();//连续删除3次
arr;//[]
arr.shift();//空数组继续shift不会报错，而是返回undefined
arr;//[]

sort

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


var arr = ['B','C','A'];
arr.sort();
arr;//['A','B','C']

reverse

reverse()把整个Array的元素反转（即以数组中间的元素为基准，将其两边的元素对调）


var arr = ['one','two','three'];
arr.reverse();
arr;//['three','two','one']

splice

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']

concat

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：


var arr = ['A','B','C'];
var added = arr.concat([1,2,3]);
added;//['A','B','C',1,2,3]
arr;//['A','B','C']

注意：concat()方法并没有修改当前Array，而是反悔了一个新的Array。

实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：


var arr = ['A','B','C'];
arr.concat(1,2,[3,4]);
arr;//['A','B','C',1,2,3,4]

join

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


var arr = ['A','B','C',1,2,3];
arr.join('-');//'A-B-C-1-2-3'

多维数组

如果数组的某个元素又是一个Array，则可以形成多维数组，例如：


var arr = [[1,2,3],[3,4,5],'hello'];

上述Array包含3个元素，前两个元素本身也是Array。

1.6 变量

变量是由字母大小写、数字、_、和$的组合，且不能以数字开头，同时变量名不能是关键字。声明一个变量用关键字var，例如：


var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

变量名也可以是中文，但是强烈不建议使用。

在JavaScript中使用等号=对变量进行赋值，可以把任意数据类型赋值给变量，同一个变量可以反复赋值，并且可以是不同类型的值，但是需要注意的是一个变量只能声明一次。


var a = 123;
a = 'abc';//可以将已经存储了整数类型123的变量a重新赋值字符串类型的abc

这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须制定变量类型，且不可以存储其他类型的值。例如java是静态语言：


int a = 123;//a是整数类型，用int声明
a = 'abc';//错误：不能把字符串类型赋值给整型变量

如果要显示变量内容，可以使用alert()或者console.log()，区别在于前者会弹出对话框，后者直接在控制台输出。


var s = 200;
console.log(s);//控制台输出200
alert(s);//弹出对话框显示200

2 比较运算符

JavaScript中的相等运算符有两种：

== 会自动转换数据类型再比较，相似的数据类型会出现相等的结果

===不会进行数据类型转换，强烈要求两边数据类型一致，否则结果就是false

建议不要使用==号进行比较

NaN这个特殊的Number与其他值都不相等，包括它自己：


NaN===NaN;//false

唯一能判断NaN的方法是通过isNaN()函数：


isNaN(NaN); // true

最后要注意浮点数的相等比较：


1/3===(1-2/3);//false

这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值。


Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

3 对象

对象

JavaScript的对象是一组由键值对组成的无序集合，例如：


var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

JavaScript对象的键都是字符串类型，值可以是任意数据类型。对象中的每个键又被称为对象的属性。

要获取一个对象的属性，我们用对象变量.属性名的方式：


person.name;//'Bob'
person.age;//20

4 strict模式

在JavaScript中，设计之初并不强制要求用var声明变量，但是如果一个变量没有通过var声明就被使用，那么该变量就自动声明为全局变量：


i = 20;//声明了一个全局变量i，其值是20

声明变量时使用var，那么其声明的变量范围将受函数控制。

为了弥补这一设计缺陷，ECMA(JavaScript标准)在后续规范中设计了strict模式，在运用了strict模式的代码中，强制要求通过var来声明变量，否则就会报错。

启用strict模式的方法是在JavaScript代码的第一行写上以下代码：


'use strict';

这是一个字符串，支持strict模式的浏览器将开启strict模式运行JavaScript代码，不支持strict模式的浏览器会把它当做一个字符串执行。

5 条件语句

JavaScript使用if(){...}else{...}来进行条件判断

JavaScript把nill、undefined、0、NaN和空字符串' '视为false，其他值一概视为true。

6 循环语句

6.1 for循环


//for循环
var x = 0;
var i;
for (i=1; i<=10000; i++) {
    x = x + i;
}
x; // 50005000

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


//for...in循环
var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

要过滤掉对象继承的属性，用hasOwnProperty()来实现：


var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}

由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引：


var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

注意：for...in对Array的循环得到的是string而不是Number。

6.2 while循环

条件满足则循环


var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

6.3 do ... while

先执行，再判断


var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100javas

7 Map和Set

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。

但是JavaScript对象的键必须是字符串，实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题，ES6规范引入了新的数据类型Map。

7.1 Map

Map是一组键值对的结构，具有极快的查找速度。

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：


//二维数组形式初始化Map
var map = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
//初始化空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

7.2 Set

Set和Map类似，但只存储key，不存储value，由于key不能重复，所以在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建以个空Set：


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

重复元素在Set中自动被过滤：


var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：


s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素：


var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

8 iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

用for ... of循环遍历集合，用法如下：


//遍历过程中的x为每个集合下的元素
//Array-->'A' Set-->'A' Map-->[1,'x']
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

你可能会有疑问，for ... of循环和for ... in循环有何区别？

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

for ... in循环将把name包括在内，但Array的length属性却不包括在内。

for ... of循环则完全修复了这些问题，它只循环集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

这就是为什么要引入新的for ... of 循环。

然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：


'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

输出结果为：


A, index = 0
B, index = 1
C, index = 2

注意，forEach()方法是ES5.1标准引入的，你需要测试浏览器是否支持。

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Map的回调函数参数依次为value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得Array的element：

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});

参考教程：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

JavaScript学习笔记（一）基本语法

基本语法

1 数据类型和变量

1.1 Number

1.2 字符串

1.2.1 多行字符串

1.2.2 模板字符串

1.2.3 操作字符串

toUpperCase

toLowerCase

indexOf

substring

1.3 布尔值

1.4 null和undefined

1.5 数组

indexOf

slice

push和pop

unshift和shift

sort

reverse

splice

concat

join

多维数组

1.6 变量

2 比较运算符

3 对象

对象

4 strict模式

5 条件语句

6 循环语句

6.1 for循环

6.2 while循环

6.3 do ... while

7 Map和Set

7.1 Map

7.2 Set

8 iterable

猜你喜欢

JavaScript学习笔记（一） 基本语法

基本语法

1 数据类型和变量

1.1 Number

1.2 字符串

1.2.1 多行字符串

1.2.2 模板字符串

1.2.3 操作字符串

toUpperCase

toLowerCase

indexOf

substring

1.3 布尔值

1.4 null和undefined

1.5 数组

indexOf

slice

push和pop

unshift和shift

sort

reverse

splice

concat

join

多维数组

1.6 变量

2 比较运算符

3 对象

对象

4 strict模式

5 条件语句

6 循环语句

6.1 for循环

6.2 while循环

6.3 do ... while

7 Map和Set

7.1 Map

7.2 Set

8 iterable

猜你喜欢

JavaScript学习笔记（一）基本语法