JavaScript学习总结
说明
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>
- 常嵌入里,在Html文件中直接写
- 调试
- 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; 不是NumberInfinity; 无限大 - 运算符: +、-、*、/、% (求余)
- JavaScript不区分整数和浮点数
- 字符串
''或""表示字符串
- 布尔值
truefalse- 用表达式表示布尔值,如
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的区别
- null 表示一个
- 数组
- 对象
- 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模式
- Number类型
-
字符串
- 字符串表示形式
- 采用
''或""表示字符串 - 转义字符:
\例如:'I\'m OK!',\n,\t,\\ - ASCII字符可以用
\x##形式表示,如\x41 //等同于'A' \u####表示一个Unicode字符- 多行字符串用
...表示,如
`这是一个
多行字
符串`
- 采用
- 常用字符串操作
var s ="Hello, World!"; s.length;//13- length 获取字符串的长度
- 字符串可以通过指定的下标来获取相关的字符值,如s[n] 例如: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],'-'];
- Array 简介
-
对象
- 对象的定义及属性访问
- 对象定义: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的对象是一种无序的集合数据类型,它由若干键值组成,例如:
- 属性的各种操作
- JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除顺序:
xiaoming.age=18;//新增一个属性 delete xiaoming.age;//删除一个属性 - 检测是否拥有某一属性,可以用
in操作符
in 判断一个属性存在,这个属性不一定是xiaoming的,可能是它继承得到的
'name' in xiaoming;//true 'toString' in xiaoming;//true - 要判断一属性是否xiaoming自身拥有的,而不是继承的,可以用hasOwnProperty()方法
- JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除顺序:
- 对象的定义及属性访问
-
条件判断
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方法,它接受一个函数,每次迭代就自动回调该函数
Arrayvar 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
