JavaScript学习总结
2015-07-23 21:49
134 查看
说明
1. 本文是在学习廖雪峰先生的JavaScrip教程 后的归纳
2. 本文是第一次采用markdown进行书写
JavaScript简介
网景公司 Brendan Eich 10天内设计出了JavaSrcipt
JavaScript 和 Java没有任何关系,当时,借Java名声而已
ECMAScript是一个语言标准
最新版ECMAScript 6标准发布于2015年6月
核心语法为没有多大变化,ES6增加部分新特性
JavaScript的引用和调试
引用
常嵌入里,在Html文件中直接写
<script>...</script>
JavaScript放入一个单独的
.js文件,然后在HTML中通过
<script src="..."></script>
调试
Chrome F12 Chrome自带调试工具,不错的调试工具
FireBug FireFox 强大的调试插件,有点卡
开发工具
文本工具: Sublime Text, NotePad++,Vim等
IDE: WebStorm,Eclipse
基本语法
每个语句以
;结尾,语句块以
{..},另;可以省略但不建议省略
"Hello World!"这样写仍然可以视为一个完整语句
var x=1; var y=2;不建议一行多语句
{...}可以嵌套,大括号内语句具有缩进,通常为4个空格,有助于理解代码层次
单号注释
//块注释
/**/
JavaScript 严格区分大小写
数据类型、运算符、变量
Number类型
JavaScript不区分整数和浮点数
123; 整数
0.456;小数
1.234e3;科学计数法
-99; 负数
NaN; 不是Number
Infinity; 无限大
运算符: +、-、*、/、% (求余)
字符串
''或
""表示字符串
布尔值
true
false
用表达式表示布尔值,如
1>2
&&
||
!
比较运算符
常见运算符:
>、>=、==、<=
JavaScript 允许对任意数据类型进行比较
两种相等运算符:
使用
==时,会自动转换数据类型再比较
使用
===时,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。
由于JavaScript这设计形式,建议使用===比较
特例:
NaN与所有其他值都不相等,包括他自己:即
NaN===NaN;(false)
唯一判断NaN的方法是通过
isNaN()函数
isNaN(NaN)
浮点数比较,由于浮点数在运算过程中会产生误差,计算机无法精确表示无限循环小数,要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值,如
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
null 和 undefined
null 表示一个
空的值,它和
0以及空字符串
''不同,0是一个数值,''表示长度为0的字符串,而null表示“空”。与Java等语言的null值类似
JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。大多数情况下,应该使用null
详细区别可以参照:阮一峰 undefined与null的区别
数组
数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。
数组用
[]表示,元素之间用
,分隔。
创建数组的方法: 通过Array()函数实现或直接使用
数组的元素可以通过索引来访问,索引起始值为0
对象
JavaScript的对象是一组由key-value组成的无序集合,例如:
var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: 'Beijing', zipcode: null };
JavaScript对象的键都是字符串类型,值可以是任意数据类型。
通过
对象变量.属性名获取对象的值
变量
变量名: a-z,A-Z,0-9,$,_来组成,且数字不能开头
变量名:不能是JavaScript的关键字
变量名可以是中文,但尽量不要这样做
= 为变量赋值
可以把任意数据类型赋值给变量,同一个变量可以反复赋值,而且可以是不同类型的变量,但是要注意只能用var申明一次
变量本身类型不固定的语言称之为动态语言,与之对应的是静态语言。静态语言在定义变量时必须指定变量类型,如果赋值的时候类型不匹配,就会报错。Java即为静态语言。动态语言更灵活即基于此
把赋值语句的等号等同于数学的等号
strict模式
引入strict 模式的原因: 如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量
使用var声明的变量,则被限制在声明变量的函数体内
后续的ECMAScript标准推出了strict模式,即强制通过var声明变量,为声明则报错
启用strict模式,在javascript的第一行加入'use strict';
建议采用strict模式
字符串
字符串表示形式
采用
''或
""表示字符串
转义字符:
\例如:
'I\'m OK!',
\n,
\t,
\\
ASCII字符可以用
\x##形式表示,如
\x41 //等同于'A'
\u####表示一个Unicode字符
多行字符串用
...表示,如
`这是一个
多行字
符串`
常用字符串操作
var s ="Hello, World!"; s.length;//13
length 获取字符串的长度
字符串可以通过指定的下标来获取相关的字符值,如s
例如:s[0];//'H'
字符串是固定的,不可通过某个索引赋值,虽不会有错,但不会改变值
JavaScript为字符串提供了很多方法,调用这些方法不会改变原有的字符串的值,而是生成一个新字符串
toUpperCase() 字符串变成大写
toLowerCase() 字符串变成小写
indexOf() 返回第一个指定字符串的所在的索引值,没有返回-1
substring() 返回指定的索引区间的子串
字符串方法汇总
方法 | 说明 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将字符转换为 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
Array 简介
JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素
Array 通过属性length获取Array的长度,直接给Array的length赋值会导致Array大小的变化
Array 可以通过索引把对应的元素修改为新值,如果通过索引赋值超过了范围,同样会引起Array大小的变化
var arr=[1,2,3]; arr[5]='x'; arr;//arr变成[1,2,3,undefined,undefined,'x']
大多数的编程语言不允许直接改变数组的大小,越界会报错,而JavaScript的Array却不会报错,但不建议直接修改Array的大小,访问索引时,要确保索引不越界
Array的常用方法
indexOf Array也可以通过indexOf()来搜索一个指定元素的位置
slice() 对应字符串的substring()版本,截取Array的部分元素,然后返回一个新的Array,例:arr.slice(0,3) 从索引0到2,不包括索引3,arr.slice(3),从索引3到结束
slice()的起止参数包括索引,不包括结束索引,无参数时,从头截到尾,利用此点可以复制一个Array
push()向Array的末尾添加若干元素
pop() 则把Array的最后一元素删除掉,并返回移除的元素,空数组pop后,返回undefined
unshift()向头部添加若干元素,shift()方法则把Array的第一个元素删除掉,返回Array的长度,空数组shift(),则返回undefined
sort() 对Array排序,直接修改当前Array的元素位置,直接调用时,按照默认顺序排序
reverse() 把整个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']
concat() 方法把当前的Array和另一个Array连接到一起,并返回一个新的Array,concat方法可以接受任意个元素和Array,并自动Array拆开,然后全部添加到新的Array里,如:arr.concat(1,2,[3,4])
join方法是一个非常实用的方法,它把当前的Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串,若Array元素不是字符串,也将自动转换为字符串后再连接
var arr=['A','B','C',1]; arr.join('~');//'A~B~C~1'
多维数组
var arr=[[1,2,3],[400,500,600],'-'];
对象
对象的定义及属性访问
对象定义:JavaScript的对象是一种无序的集合数据类型,它由若干键值组成,例如:
var xiaoming={ name:'test', birth:1980 }
JavaScript用一个
{...}表示一个对象,键值对以
xxx:xxx形式声明,用
,隔开,最后一个键值对末尾不需要
,
属性访问: a) 通过
.操作符来访问,但要求属性名必须是一个有效的变量名 b) 通过
xiaoming['xx']来得到变量 c)特殊的形式: 如果含有特殊字符,定义时必须
'middle-school':'No.1 Middle Schoole',访问时,只能通过
['xx']来访问 d) 属性名尽量使用标准的变量名,这样可以直接通过
object.prop的形式访问一个属性
JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型
JavaScript规定:访问不存在的属性不报错,而是返回undefined
属性的各种操作
JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除顺序:
xiaoming.age=18;//新增一个属性 delete xiaoming.age;//删除一个属性
检测是否拥有某一属性,可以用
in操作符
in 判断一个属性存在,这个属性不一定是xiaoming的,可能是它继承得到的
'name' in xiaoming;//true 'toString' in xiaoming;//true
要判断一属性是否xiaoming自身拥有的,而不是继承的,可以用hasOwnProperty()方法
条件判断
if() {...} else{...}
else是可选的
仅包含一条语句时,可以省略
{},但不建议省略
多重判断
if(){...} else if {...} else{..}
判断条件不是true或false时,JavaScript把
null,
undefined,
0,
NaN和空字符串视为fasle,其他的一律视为true
循环
JavaScript的循环有两种,一种for循环,通过初始条件、结束条件和递增条件来循环执行语句块
for 循环最常用的地方是利用索引来遍历数组
for循环的3个条件都可以省略,当没有退出循环的判读条件,必须使用break退出,否则死循环
for...in 可以将一个对象的所有属性依次循环出来,需过滤对象继承的属性,则需要要用hasOwnProperty()实现
由于Array也是对象,每个元素的索引都被视为对象的属性,因此,for...in循环可以直接循环出Array的索引
for...in对Array的循环得到的是String而不是Number
while循环,for循环在已知循环的初始和结束条件时很有用,而while循环更适合只有一个判断条件的情况
do...while 与while循环的唯一区别在于,不是在开始判断条件,而是在结束时判断条件
do...while 循环至少循环一次,而for和while可能一次也不执行
编写循环代码时,要注意初始条件和判断条件,尤其边界值,避免陷入死循环
Map和Set
类似Java中的Map,即一组键值对
ES6引入Map的目的为了解决对象的键只能为字符串,不能为Number等类型的问题
Map是一组键值对的结构,具有极快的查找速度
var m = new Map(['Micha',94],['Box',12],['Nu',23]); m.get('Micha');
初始化Map需要一个二维数组,或者直接初始化一个空的Map。
Map常见方法:
var m=new Map(); m.set('Adam',3); m.set('Bob',4); m.has('Adam');//true m.get('Adam');//取得Value m.delete('Adam');//删除
一个Key对应一个Value,所有,多次对一个key放入value,后面的值会冲掉前面的
Set和Map类似,是一组key的集合,不存储value,没有重复的key
创建Set需要提供一个Array作为输入,或者直接创建一个空Set
var a1 = new Set(); var a2 = new Set([1,2,3]);
重复元素在Set中自动过滤
添加和删除方法
a1.add(1); a1.delete(1);
iterable
为了遍历Map和Set,ES6引入
iterable类型
Array,Map,Set都属于iterable类型
具有iterable类型的集合可以通过新的
for...of循环遍历
for...in和
for...of区别:
for...in是变量对象的属性名称,一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性,当手动添加额外属性后,for...in循环将带来一些意外效果
var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x in a) { alert(x); // '0', '1', '2', 'name',却没有'length' }
for...of则修复了上述问题,其仅循环集合本身的元素
更好的方式是直接使用iterable内置对象
forEach方法,它接受一个函数,每次迭代就自动回调该函数
Array
var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 alert(element); });
Map
var a =new Map([[1,'A'], [2,'B'], [3,'C']]); a.forEach(function (value, key, map) { // value: 指向当前元素的值 // key: 指向当前key // map: 指向Array对象本身 alert(value); });
Set
var a = new Set(['A', 'B', 'C']); a.forEach(function (element,set) { // element: 指向当前元素的值 // set: 指向set对象本身 alert(element); });
JavaScript函数不要求参数必须一致,参数可以没有,也可以多(多出的参数会变成
undefined),对应顺序必须一致,其余可以忽略
注释:
1. 本文摘自廖雪峰JavaScript教程
廖雪峰网站地址:http://www.liaoxuefeng.com
2. 此笔记仅做个人日后查找使用,如有错误,烦请指正!
3. 欢迎转载哦O(∩_∩)O
相关文章推荐
- javascript基础(三)
- javascript 数组 过滤掉空值
- ExtJS3 简单主页面 构建
- 【JavaScript】——基础(二)
- JS BOM简列
- JS经验
- JSON.parse()和JSON.stringify()
- 《编译原理》学习心得
- hdu 1596 概率dijstra
- javascript数组去重的4个方法(转)
- JavaScript简介
- js实现loading简单的遮套层
- json进阶(一)js读取解析JSON类型数据
- json进阶(一)js读取解析JSON类型数据
- fastjson用法4
- JavaScript学习要点(七)
- JavaScript
- 在安卓端使用Jsoup解析HTML
- javascript之Ajax获取和设置标头
- EL表达式错误