1. 本文是在学习廖雪峰先生的JavaScrip教程 后的归纳
2. 本文是第一次采用markdown进行书写
- JavaScript简介
- 网景公司 Brendan Eich 10天内设计出了JavaSrcipt
- JavaScript 和 Java没有任何关系，当时，借Java名声而已
- ECMAScript是一个语言标准
- 最新版ECMAScript 6标准发布于2015年6月
- 核心语法为没有多大变化，ES6增加部分新特性
- JavaScript的引用和调试
- 引用
- 常嵌入<head>里,在Html文件中直接写
<script>...</script> - JavaScript放入一个单独的
.js文件,然后在HTML中通过<script src="..."></script>
- 常嵌入<head>里,在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对象的键都是字符串类型，值可以是任意数据类型。
- 通过
对象变量.属性名获取对象的值
- JavaScript的对象是一组由key-value组成的无序集合,例如:
- 变量
- 变量名： 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() | 返回指定索引位置字符的Unicode值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将字符转换为Unicode值 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 例如["hello".split("")可以直接将字符串转变成Char数组] |
| 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方法,它接受一个函数,每次迭代就自动回调该函数
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
网友评论