https://www.liaoxuefeng.com/wiki/1022910821149312
基本语法
alert("hello word!") console.log("hello word!"); // 避免弹出烦人的对话框 // JavaScript严格区分大小写 // 单行注释 /*多行注释*/ // 赋值语句, 每个语句用;表示语句结束 var x = 1; // 语句块是一组语句的集合, 可以嵌套 if (2 > 1) { // do something }
数据类型和变量
1、Number
JavaScript不区分整数和浮点数
123; // 整数123 0.456; // 浮点数0.456 1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5 -99; // 负数 NaN; // NaN表示Not a Number Infinity; // Infinity表示无限大 // 十六进制用0x前缀和0-9，a-f表示 eg: 0xff00
支持四则运算，%是求余运算
2、字符串
单引号’或双引号"
3、布尔值
true、false
&& // 与运算 || // 或运算 ! // 非运算
相等运算符
== // 自动转换数据类型再比较 === // 不会自动转换数据类型(推荐)
唯一能判断NaN的方法是：
isNaN(NaN)浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数
null // 表示一个“空” 大多数情况下使用 0 // 一个数值 '' // 表示长度为0的字符串 undefined // 表示“未定义”
4、数组
数组是一组按顺序排列的集合，集合的每个值称为元素。
JavaScript的数组可以包括任意数据类型。例如：
[1, 2, 3.14, 'Hello', null, true]; // 推荐 new Array(1, 2, 3);
索引的起始值为0
5、对象
JavaScript的对象是一组由键-值组成的无序集合，例如：
var person = { name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'], city: "Beijing", hasCar: true, zipcode: null };
JavaScript对象的键都是字符串类型，值可以是任意数据类型
每个键又称为对象的属性
获取一个对象的属性
// 对象变量.属性名 person.name; // 'Bob' person.zipcode; // null
变量
申明一个变量用var语句, 只能申明一次
var a; // 申明了变量a，此时a的值为undefined var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量
var a = 123; // a的值是整数123 a = 'ABC'; // a变为字符串
动态语言: 变量本身类型不固定的语言
静态语言: 在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错，如Java
strict模式
如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量
strict模式: 强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误
启用strict模式
'use strict';字符串
JavaScript字符串就是用’'或""括起来的字符表示
转义字符
\n 表示换行 \t 表示制表符 \\ 表示的字符就是\
ASCII字符可以以\x##形式的十六进制表示：
'\x41'; // 完全等同于 'A'还可以用\u####表示一个Unicode字符：
'\u4e2d\u6587'; // 完全等同于 '中文'多行字符串
最新的ES6标准
`这是一个 多行 字符串`;
模板字符串
var name = '小明'; var age = 20; // + 拼接 var message = '你好, ' + name + ', 你今年' + age + '岁了!'; // 模板字符串 ES6新增 var message = `你好, ${name}, 你今年${age}岁了!`;
操作字符串
var s = 'Hello, world!'; s.length; // 13 s[0]; // 'H'
字符串是不可变的
调用方法，本身不会改变原有字符串的内容，而是返回一个新字符串
toUpperCase() // 变为大写 toLowerCase() // 变为小写 indexOf() // 搜索指定字符串出现的位置 substring() // 返回指定索引区间的子串
eg:
var s = 'Hello'; s.toUpperCase(); // 返回'HELLO' var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
数组
JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素
var arr = [1, 2, 3.14, 'Hello', null, true]; arr.length; // 长度 6 arr[1] = 99; // 修改
可以修改length, 不建议
索引超过了范围，arr长度会变化, 建议：索引不要越界
常用方法
indexOf() // 搜索一个指定的元素的位置 slice() // 切片 push() // 末尾添加若干元素 pop() // 把Array的最后一个元素删除掉 unshift() // 往Array的头部添加若干元素 shift() // 把Array的第一个元素删掉 sort() // 对当前Array进行排序 reverse() // 把整个Array的元素反转 splice() // 替换元素 concat() // 拼接数组, 返回了一个新的Array join() // 拼接成字符串
eg:
var arr = [10, 20, '30', 'xyz']; arr.indexOf(10); // 元素10的索引为0 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 = [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; // [] 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(); // 连续shift 3次 arr; // [] arr.shift(); // 空数组继续shift不会报错，而是返回undefined arr; // [] var arr = ['B', 'C', 'A']; arr.sort(); arr; // ['A', 'B', 'C'] var arr = ['one', 'two', 'three']; arr.reverse(); arr; // ['three', 'two', 'one'] 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'] 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拆开，然后全部添加到新的Array里： var arr = ['A', 'B', 'C']; arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4] var arr = ['A', 'B', 'C', 1, 2, 3]; arr.join('-'); // 'A-B-C-1-2-3' // 如果Array的元素不是字符串，将自动转换为字符串后再连接
多维数组
var arr = [[1, 2, 3], [400, 500, 600], '-'];对象
JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成
var xiaohong = { name: '小红', 'middle-school': 'No.1 Middle School' // 包含特殊字符 }; // 访问属性 object.prop xiaohong['middle-school']; // 'No.1 Middle School' xiaohong.name; // '小红' // 检查属性 'name' in xiaoming; // true // 检查自身属性 xiaoming.hasOwnProperty('name');
JavaScript规定，访问不存在的属性不报错，而是返回undefined
可以*地给一个对象添加或删除属性
var xiaoming = { name: '小明' }; xiaoming.age; // undefined xiaoming.age = 18; // 新增一个age属性 xiaoming.age; // 18 delete xiaoming.age; // 删除age属性 xiaoming.age; // undefined delete xiaoming['name']; // 删除name属性 xiaoming.name; // undefined delete xiaoming.school; // 删除一个不存在的school属性也不会报错
所有对象最终都会在原型链上指向object
条件判断
if () { ... } else { ... }
如果语句块只包含一条语句，那么可以省略{}, 不推荐
多行条件判断
if () { ... } else if () { ... } else { ... }
JavaScript把null、undefined、0、NaN和空字符串’'视为false，其他值一概视为true
循环
for(初始条件; 递增条件; 结束条件){ } for (;;) {} // 无限循环 ，break语句退出循环
遍历数组
var arr = ['Apple', 'Google', 'Microsoft']; var i, x; for (i=0; i<arr.length; i++) { x = arr[i]; console.log(x); }
for循环
// 对象 var o = { name: 'Jack', age: 20, city: 'Beijing' }; for (var key in o) { console.log(key); // 'name', 'age', 'city' } // 数组 var a = ['A', 'B', 'C']; for (var index in a) { console.log(index); // '0', '1', '2' 得到的是String而不是Number console.log(a[index]); // 'A', 'B', 'C' }
for和while循环则可能一次都不执行
do … while 至少执行1次
Map和Set
ES6标准新增
Map
JavaScript的对象键必须是字符串
Map 是一组键值对的结构，具有极快的查找速度
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael'); // 95 m.set('Adam', 67); // 添加新的key-value m.has('Adam'); // 是否存在key 'Adam': true m.get('Adam'); // 67 m.delete('Adam'); // 删除key 'Adam' m.get('Adam'); // undefined
Set
一组key的集合
var s = new Set([1, 2, 3]); // 含1, 2, 3 s.add(4); // Set {1, 2, 3, 4} s.delete(3); s.has(1) // true
iterable
遍历Map和Set就无法使用下标
ES6标准新增
Array、Map和Set都属于iterable类型
具有iterable类型的集合可以通过新的for … of循环来遍历
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 … in 遍历对象的属性名称, 一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性
for … of 只循环集合本身的元素
iterable内置的forEach方法(ES5.1标准引入)
a.forEach(function (element, index, array) { // element: 指向当前元素的值 // index: 指向当前索引 // array: 指向Array对象本身 console.log(element + ', index = ' + index); });
Set与Array类似，但Set没有索引: element, sameElement, set
Map的回调函数参数依次为: value、key和map本身
JavaScript的函数调用不要求参数必须一致，因此可以忽略它们
var a = ['A', 'B', 'C']; a.forEach(function (element) { console.log(element); });