JavaScript基础知识点整理
此文章内容是学习廖雪峰的JavaScript教程的知识点总结。
一、基本语法
- 每个语句结尾用
;
(不强制),语句块用{...}
- 行注释
//
;块注释/* ... */
二、 数据类型和变量
1. 数据类型
- Number(数值):JavaScrept不分整数和浮点数;
- String:(字符串)以单引号
'...'
或双引号"..."
括起来的文本; - Boolean:(布尔值)true和false;布尔运算与
&&
、或||
、非!
; - Null:空值,与0和“ ”不同;
- undefined:值未定义;
- Array:(数组)
[x1,x2,x3,..]
; - Object:(对象)
键(属性):值
; - 相等运算符
= = :自动转换类型再比较;
=== :不会自动转换类型,若类型一致比较,不一致则返回 false。推荐 - NaN属性:说明某个值不是数字值。
NaN值与任何值都不相等,包括自身,需使用全局函数isNaN()来判断是否为NaN值。
2. 变量
用var name声明变量
- 变量名:不能以数字开头,不能为关键字;
- 用=为变量赋值;
- strict模式:Js第一行使用:use strict;,此模式下未用var定义变量会报错。
三、字符串
用’ '或" “括起来的字符表示。如果字符串里既包含’又包含”,用转义字符标示 \ 。
- 转义字符 \ :
\ n
表示换行,\ t
表示制表符,\ \
表示 \ 。 - 多行字符串:可用 \ n,ES6新增了反引号 `` 。
console.log(`多多多
行行行
字符串`);
- 模版字符串:将多个字符串连接,可用+号;ES6新增模版字符串
${stringName}
conlose.log(`你好,${name},你今年${age}岁了!`);
- 操作字符串
- 字符串长度:
s.length
; - 获取字符串指定位置内容:
s[n]
; - 字符串不可变,对其赋值无效果;
- 常用方法:
s.toUpperCase()
:字符串全部变为大写;
s.toLowerCase()
:字符串全部变为小写;
s.indexOf(string)
:搜索指定字符出现的位置;
s.subString(0,5)
:返回指定索引区的字符。
- 字符串长度:
四、数组(Array)
- 可包含任意数据类型,通过索引访问,可直接修改数组,访问索引和通过索引赋值时超过范围会引起Array的大小变化,须确保不会越界。
- 获取Array长度:
arr.length
; - 常用方法
arr.indexOf(string)
:搜索指定元素位置;
arr.slice(a,b)
:截取指定部分元素,返回一个新的Array,从a开始截取,但不包括b,如不设a,从头开始截取,若不设b,则截取到数组结束;
arr.push('a', 'b', 1, 2)
:向Array末尾添加元素;
arr.pop()
:删除最后一个元素;
arr.unshift()
:向Array头部添加元素;
arr.shift()
:删掉第一个元素;
arr.sort()
:对Array进行排序,直接修改Array的元素顺序;
arr.reverse()
:将整个Array返向掉转ABC->CBA;
arr.splice()
:从指定位置删除若干元素,再从该位置添加若干元素;var arr = ['a', 'b', 'c', 'd', 'e', 'f']; // 从索引2开始删除3个元素,然后再添加两个元素; arr.splice(2, 3, 'A', 'B'); // 返回删除的元素 ['c', 'd', 'f'] arr; // ['a', 'b', 'A, 'B', 'f'] // 只删除,不添加: arr.splice(2, 2); // ['A', 'B'] arr; // ['a', 'b', 'f'] // 只添加,不删除: arr.splice(2, 0, 'A', 'B'); // 返回[],因为没有删除任何元素 arr; // ['a', 'b', 'A', 'B', 'f]
arr.concat(arr2)
:把arr与arr2连接起来,返回一个新的Array;
arr.join('-')
:用指定的字符串将arr中的每个元素连接起来,然后返回连接后的字符串。- 多维数组
如果数组的某个元素也是一个Array,就可形成多维数组。
- 多维数组
五、对象
- 一种无序的集合数据类型,表示为:
key : value, key : value}
,访问属性用.
操作符。若属性名包括特殊字符声明时需要用' '
括起来,需用[' ' ]
访问。若访问不存在的属性会返回undefined
。 - 对象属性的操作方法
- 新增属性:
object.name = value
; - 删除属性:
delete object.name
; - 检测属性是否存在:
'name' in object;
返回true或false; - 判断属性是否为自身拥有而不是继承得到:
object.hasOwnProperty('name')
返回true或false。
- 新增属性:
六、条件判断
语句:if(){...} else{...}
- 多行条件判断:使用多个if…else… 组合。
- 执行条件是二选一,若前面满足则直接结束循环。
- JavaScript中,
null
、undefined
、0
、NaN
为false,其余皆为true。
七、循环
1. for循环
已知初始条件和结束条件适用
语句for(初始条件; 判断条件; 递增条件){...}
- for循环最常用于利用索引遍历数组
for(i=0;i<arr.length;i++){
x = arr[i];
console.log(x);
}
- for循环的三个条件可以省略,若无判断条件,需利用break语句退出循环,否则为死循环。
for...in...
循环:可以将一个对象的所有属性依次循环出来:
for(var key in object){
console.log(key);
}
for…in…对于Array的循环得到的是String不是Number。
2. while循环
只有判断条件时适用
语句:
while(判断语句){...}
do{...}
while(判断语句)
注意:do…while()至少执行一次循环体,if和while循环可能一次都不执行。
八、Map和Set
1. Map
- 一组键值对,极快的查找速度。
- 常用方法
- 初始化:
var m = new Map([[k1,v1], [k2,v2], [k3,v3]]);
; - 获取:
m.get('key');
; - 添加新的key-value:
m.set('key', value)
; - 判断是否存在:
m.has('key');
; - 删除:
m.delete('key')
.
2. Set
- 一组key的集合,不存储value,且key不重复。
- 创建
‘var s = new Set()’
或‘var s = new Set([1,2,3])’
; - 重复元素在Set中会被自动过滤;
- 添加:
‘s.add('key')’
; - 删除:
‘s.delete('key')’
。
九、iterable
- ES6新增的iterable(可遍历的对象)类型,Array、Map、Set都属于iterable类型,此类型的集合可用
for...of
循环遍历。 for...of
是ES6新增语法,用法如下:
for (var x of arr){ //遍历数组
console.log(x);
}
for...of
与for...in
的区别
for...in
遍历数组的元素索引实际上是对象的属性名称,若额外给数组添加其他属性,也会被遍历出来。
var a = ['A', 'B', 'C']
a.name = 'Hello';
for (var x in a){
console.log(x); // 'A','B','C','name'
}
for…in循环将属性name包括在内,但Array的length不包括在内。
for...of
只循环集合本身的元素。
forEach
:iterable内置的方法,接受一个函数,每次迭代就自动回调该函数。
- Array的回调参数:element(元素的值)、index(索引)、array(数组本身)。
var a = ['A', 'B', 'C'];
a.forEach(function(element, index, array){
console.log(element + ', index = '+index);
});
/*运行结果:
A,index=0
B,index=1
C,index=2*/
- Set的回调参数:element、sameElement、set,set没有索引,所以前两个参数都是元素本身。
var s = new Set(['A', 'B', 'C']);
a.forEach(function(element, sameElement, set){
console.log(element );
});
- Map的回调参数:value、key、map本身。
var m = new Map([ [1,'A'], [2, 'B'], [3, 'C'] ]);
a.forEach( function(value, key, map){
console.log(value);
});