JS入门

alert('测试');

var i = NaN;
alert(Boolean(i));// false 非NaN且非0的数值会返回false，正数和负数会返回true，Infinity和-Infinity也会返回true
alert(typeof Boolean(i));// boolean
var x = '';
alert(Boolean(x));// false 空字符串会返回false，非空字符串会返回true
alert(typeof Boolean(x));// boolean
var m = null;
alert(Boolean(m));// false null会返回false
alert(typeof Boolean(m));// boolean
var n = undefined;
alert(Boolean(n));// false undefined会返回false
alert(typeof Boolean(n));// boolean

var person = null;
alert(person);// null
alert(typeof person);// object

var person;
alert(person);// undefined
alert(typeof person);// undefined

var i;

i = 1;

var i = 1;

var x, y, z = 'z';
var m = 1, n = 2, l = 3;

var i = 1;
var i = 'i';

let i = 1;

const i = 1;

条件表达式?语句1:语句2;

if (条件表达式) {
  条件成立的操作
} else {
  条件不成立的操作
}

if (条件表达式1) {
  条件1成立的操作语句
} else if (条件表达式2) {
  条件1不成立但条件2成立的操作语句
} else {
  条件1和条件2都不成立的操作语句
}

switch (值) {
  case 值1:
    操作语句1
    break;
  case 值2:
    操作语句2
    break;
  case 值3:
    操作语句3
    break;
  default:
    操作语句
    break;
}

while (条件表达式) {
  条件成立的操作语句
}

do {
  条件成立的操作语句
} while (条件表达式)

for(初始化语句; 条件表达式; 更新语句) {
  条件成立的操作语句
}

label1:
for(初始化语句; 条件表达式; 更新语句) {
  循环1的操作语句
  label2:
  for(初始化语句; 条件表达式; 更新语句) {
    循环2的操作语句
    for(初始化语句; 条件表达式; 更新语句) {
      循环3的操作语句
      break label1;
    }
  }
}

// 大学数组
var universities = ['Peking University', 'Tsinghua University'];
// 学院数组
var colleges = ['College of Foreign Languages', 'College of Mathematics', 'College of Software'];
// 专业数组
var departments = [];
departments[0] = ['English', 'French', 'Russian'];
departments[1] = ['Statistics'];
departments[2] = ['Software Engineering'];
// 循环大学的标签，命名规范同标识符
university:
// 循环遍历大学
for(let l = 0; l < universities.length; l++) {
  // 循环学院的标签
  college:
  // 循环遍历学院
  for(let m = 0; m < colleges.length; m++) {
    // 循环专业的标签，因为默认continue和break处理的是当前循环，所以这个标签可以省略
    department:
    // 循环遍历专业
    for(let n = 0; n < departments[m].length; n++) {
      // 如果是英语专业则进行提示
      if (departments[m][n] == 'Russian') {
        alert(universities[l] + '-' + colleges[m] + '-' + departments[m][n]);
        // 跳过遍历专业，等同于不使用标签
        // continue department;
        // 跳过遍历学院
        // continue college;
        // 跳过遍历大学
        continue university;
        // 终止遍历专业，等同于不使用标签
        // break department;
        // 终止遍历学院
        // break college;
        // 终止遍历大学
        // break university;
      }
      // 记录已遍历的专业
      console.log(universities[l] + '-' + colleges[m] + '-' + departments[m][n]);
    }
  }
}

var student = {
  name:'张三',
  sex:'男',
  '1 2 3':123
};
console.log(student.name);// 张三
// 不能访问特殊的属性名
// console.log(student.'1 2 3');
// 可以访问特殊的属性名
console.log(student['1 2 3']);// 123

var student = {
  name:'张三',
  sex:'男',
  '1 2 3':123
};
console.log(student);// { "name": "张三", "sex": "男", "1 2 3": 123 }
delete student['name'];
delete student['1 2 3'];
console.log(student);// { "sex": "男" }

var student = {
  name:'张三',
  sex:'男'
};
student.friend = {
  name:'李四',
  sex:'男'
};
console.log(student);// { "name": "张三", "sex": "男", "friend": { "name": "李四", "sex": "男" } }

var student = {
  name:'张三',
  sex:'男'
};
console.log(student.age);// undefined
console.log('age' in student);// false

var student = {
  name:'张三',
  sex:'男'
};
for(var attr in student) {
  console.log('属性名 ' + attr);
  console.log('属性值 ' + student[attr]);
}

var obj = new Object();
obj = null;

var fun = new Function();
console.log(typeof fun);// function

var name = '张三';
var sex = '男';
function fun() {
  console.log(name);// undefined 使用局部变量，声明提升但未初始化
  var name = '李四';
  console.log(sex);// 男 未声明变量，使用全部变量
  sex = '女';
}
fun();
console.log(name);// 张三 全局变量未被修改
console.log(sex);// 女 全局变量被修改

var name = '张三';
function fun() {
  console.log(name);// undefined 使用局部变量，声明提升但未初始化
  var name = '李四';
}
fun();
console.log(name);// 张三 全局变量未被修改

// 对URI进行编码
console.log(encodeURIComponent('localhost:8080/test?name=test'));// localhost%3A8080%2Ftest%3Fname%3Dtest
// 对URI进行解码
console.log(decodeURIComponent('localhost%3A8080%2Ftest%3Fname%3Dtest'));// localhost:8080/test?name=test

console.log(name);// undefined
var name = '张三';

function test() {
  console.log(arguments);// Arguments []
  console.log(arguments instanceof Array);// false
  console.log(arguments instanceof Object);// true
  console.log(arguments[0]);// 1
  console.log(arguments[1]);// 2
  console.log(arguments.length);// 5
  console.log(arguments.callee);// function test() {}
  console.log(arguments.callee == test);// true
}
test(1, 2, 3, 4, 5);

function Student() {
}

function Student(name, sex) {
  this.name = name;
  this.sex = sex;
}
var student = new Student('张三', '男');
console.log(student);// { "name": "张三", "sex": "男" } 构造函数调用
var student = Student('张三', '男');
console.log(student);// undefined 普通函数调用，this表示window对象，没有name属性

function Student(name, sex) {
  if (this instanceof Student) {
    console.log('构造函数调用');
    this.name = name;
    this.sex = sex;
  } else {
    console.log('普通函数调用');
  }
}
new Student('张三', '男');// 构造函数调用
Student('张三', '男');// 普通函数调用

function Student() {
}
Student.prototype.name = '学生类';
Student.prototype.age = 18;
var student = new Student();
student.name = '学生实例';
console.log(student.name);// 学生实例
console.log(student.age);// 18
console.log(student.test);// undefined

function Student() {
}
var student = new Student();
console.log(student.toString());// [object Object]
console.log(student.hasOwnProperty('toString'));// false

function Student() {
}
Student.prototype.name = '学生类';
Student.prototype.age = 18;
var student = new Student();
student.name = '学生实例';
console.log(student.hasOwnProperty('name'));// true
console.log(student.hasOwnProperty('age'));// false

var test = function() {
  console.log(this);
}
test();// Window {}
test.call();// Window {}
test.apply();// Window {}
test.call(123);// Number {123}
test.apply(123);// Number {123}

var test = function(first, last) {
  console.log(first + ' ' + last);
}
test.call(test, 'John', 'Smith');// John Smith 入参是可变参数
test.apply(test, ['John', 'Smith']);// John Smith 人参是数组

// 使用箭头函数
var func = (x) => x * x;
// 使用普通函数
var func = function(x) {
  return x * x;
}

var func = (x) => ({result: x * x});
console.log(func(5));// {result: 25}

var arr = [1, 2, 3];
console.log(arr);// [1, 2, 3]
delete arr[1];
console.log(arr);// [1, 空, 3]

var arr = [1, 2, 3];
console.log(arr[0]);// 1
console.log(arr[3]);// undefined

var arr = [1, 2, 3];
console.log(arr.constructor);// Array() {[native code]}
console.log(arr.length);// 3
console.log(arr.__proto__);// []

var arr = [1, 2, 3];
// 删除数组的最后一个元素，并返回删除的元素
var del = arr.pop();
console.log(del);// 3
console.log(arr);// [1, 2]
// 向数组的末尾添加元素，并返回数组的新的长度
var len = arr.push(4, 5);
console.log(len);// 4
console.log(arr);// [1, 2, 4, 5]
// 删除数组的第一个元素，并返回删除的元素
var del = arr.shift();
console.log(del);// 1
console.log(arr);// [2, 4, 5]
// 向数组开头添加元素，并返回新的数组长度
var len = arr.unshift(-2, -1);
console.log(len);// 5
console.log(arr);// [-2, -1, 2, 4, 5]
// 颠倒数组顺序
arr.reverse();
console.log(arr);// [5, 4, 2, -1, -2]
// 对数组元素进行排序，默认按照字母顺序
arr.sort();
console.log(arr);// [-1, -2, 2, 4, 5]
// 对数组元素进行排序，指定排序方式
arr.sort(function(m, n) {
  return m - n;
});
console.log(arr);// [-2, -1, 2, 4, 5]
// 选择指定范围的字符串，前闭后开，不改变原数组，第一个参数是起始位置，第二个参数是结束位置
console.log(arr);// [-2, -1, 2, 4, 5]
// 空参选择全部
var sli = arr.slice();
console.log(sli);// [-2, -1, 2, 4, 5]
// 一个参数，选择起始位置及其之后的元素
var sli = arr.slice(1);
console.log(sli);// [-1, 2, 4, 5]
// 参数是负数则加上长度计算
var sli = arr.slice(-1);
console.log(sli);// [5]
// 两个参数，选择定位之间的元素
var sli = arr.slice(1, 3);
console.log(sli);// [-1, 2]
// 删除数组中的指定元素，并返回删除的元素，第一个参数是起始位置，第二个参数是删除数量，第三个及以后的参数是插入到起始位置之前的元素
console.log(arr);// [-2, -1, 2, 4, 5]
// 空参不删除任何元素
var spli = arr.splice();
console.log(spli);// []
// 一个参数，删除起始位置的元素
// var spli = arr.splice(1);
// console.log(spli);// [-1, 2, 4, 5]
// 参数是负数则加上长度计算
// var spli = arr.splice(-1);
// console.log(spli);// [5]
// 两个参数，删除起始位置之后数量的元素
// var spli = arr.splice(1, 3);
// console.log(spli);// [-1, 2, 4]
// 两个参数，删除起始位置之后数量的元素，插入元素到起始位置之前
// var spli = arr.splice(1, 3, 0, 1);
// console.log(spli);// [-1, 2, 4]

var now = new Date();
console.log(typeof now);// object
console.log(now);// Wed Jul 03 2024 10:30:10 GMT+0800 (中国标准时间)
now = new Date('1/31/2008');// 入参支持MM/dd/yyyy日期格式
console.log(now);// Thu Jan 31 2008 00:00:00 GMT+0800 (中国标准时间)
now = new Date('1/31/2008 10:00:00');// 入参支持MM/dd/yyyy HH:mm:ss日期时间格式
console.log(now);// Thu Jan 31 2008 10:00:00 GMT+0800 (中国标准时间)

var now = new Date();
console.log(now.constructor);// ƒ Date() {[native code]}
console.log(now.__proto__);// {}

var now = new Date();
console.log(Date.now());// 时间戳，获取从1970年1月1日至今所过的毫秒数
console.log(now.getFullYear());// 2024 获取Date对象的年份
console.log(now.getDay());// 3 获取Date对象的星期，0表示周日
console.log(now.getMonth());// 6 获取Date对象的月份，0表示1月
console.log(now.getDate());// 3 获取Date对象在月份的第几日
console.log(now.getHours());// 10 获取Date对象的小时，0表示0点和24点
console.log(now.getMinutes());// 30 获取Date对象的分钟，0表示0分和60分
console.log(now.getSeconds());// 10 获取Date对象的秒数，0表示0秒和60秒
console.log(now.getMilliseconds());// 100 获取Date对象的毫秒

console.log(typeof Math);// object
console.log(Math.E);// 2.718... 获取算术常量e，即自然对数的底数
console.log(Math.LN2);// 0.693... 获取2的自然对数
console.log(Math.LN10);// 2.302... 获取10的自然对数
console.log(Math.LOG2E);// 1.442... 获取以2为底的e的对数
console.log(Math.LOG10E);// 0.434... 获取以10为底的e的对数
console.log(Math.PI);// 3.141... 获取圆周率
console.log(Math.SQRT1_2);// 0.707... 获取2的平方根的倒数
console.log(Math.SQRT2);// 1.414... 获取2的平方根

console.log(Math.abs(-1));// 1 获取绝对值
console.log(Math.ceil(-1.2));// -1 向上取整
console.log(Math.floor(-1.2));// -2 向下取整
console.log(Math.round(-1.2));// -1 四舍五入
console.log(Math.random());// 0.5 生成0到1的随机数，不包括0和1
console.log(Math.max(0, 1, 2));// 2 获取最大值
console.log(Math.min(0, 1, 2));// 0 获取最小值

console.log(1 == 1);// true 基本数据类型之间的比较使用栈上的值
console.log(1 == new Number(1));// true 基本数据类型与包装类之间的比较会发生自动拆箱，比较栈上的值
console.log(new Number(1) == new Number(1));// false 包装类之间的比较使用栈上的引用。

var boo = new Boolean(true);
console.log(boo.constructor);// ƒ Boolean() {[native code]}
console.log(boo.__proto__);// Boolean {}

var boo = new Boolean(true);
console.log(boo.valueOf());// true 获取原始值

var num = new Number(0);
console.log(num.constructor);// ƒ Number() {[native code]}
console.log(num.__proto__);// Number {}
console.log(Number.MIN_VALUE);// 5e-324
console.log(Number.MAX_VALUE);// 1.7976931348623157e+308

console.log(Number.isNaN('1'));// false 判断指定参数是否为NaN，只有当参数是数字且为NaN才会返回true，参数非数字和非NaN的数字会返回false
console.log(Number.isFinite(1));// false 判断指定参数是否为无穷大
console.log(Number.isInteger(1));// true 判断指定参数是否为整数
console.log(new Number(1.159).toFixed(2));// 1.16 获取指定小数位数的字符串，采用四舍五入（银行家舍入）策略，无参会返回整数字符串，参数范围是1到100
console.log(new Number(1.615).toFixed(2));// 1.61 不是严格的四舍五入，严格四舍五入可以使用Math.round()方法实现，或者缩放某个倍数
console.log(new Number(10).toFixed(4));// 10.0000 精度不足时会进行补位，常用于需要统一精度的场景
console.log(new Number(1.159).toPrecision(3));// 1.16 获取指定位数的字符串，采用四舍五入（银行家舍入）策略，无参会返回原数字字符串，参数范围是1到100
console.log(new Number(1.615).toPrecision(3));// 1.61 不是严格的四舍五入，严格四舍五入可以使用Math.round()方法实现，或者缩放某个倍数
console.log(new Number(0.159).toPrecision(2));// 0.16 整数部分为0时，指定位数不包括整数部分
console.log(new Number(10).toPrecision(6));// 10.0000 精度不足时会进行补位，常用于需要统一精度的场景
console.log(new Number(10).valueOf());// 10 获取原始值

var str = new String('hello');
console.log(str.constructor);// ƒ String() {[native code]}
console.log(str.length);// 5
console.log(str.__proto__);// String {}

var str = new String('hello');
console.log(str.indexOf('l'));// 2 获取首次出现的位置，找不到返回-1
console.log(str.indexOf('l', 3));// 3 获取首次出现的位置，从指定位置开始，包含指定位置
console.log(str.lastIndexOf('l'));// 3 获取最后出现的位置，从右往左查找，找不到返回-1
console.log(str.lastIndexOf('l', 2));// 2 获取最后出现的位置，从右往左查找
console.log(str.charAt(1));// e 获取指定位置的字符，指定位置超出长度返回空串
console.log(str.charCodeAt(1));// 101 获取指定位置的字符编码，即Unicode编码
console.log(str.match('l'));// ['l', ...] 查找匹配的字符串，返回匹配的数组，支持正则表达式，找不到返回null
console.log(str.search('l'));// 2 获取首次出现的位置，支持正则表达式，找不到返回-1
console.log(str.replace('l', ''));// helo 查找首个匹配第一个参数的字符串，并替换为第二个参数指定的字符串，不改变原字符串
console.log(str.replaceAll('l', ''));// heo 查找全部匹配第一个参数的字符串，并替换为第二个参数指定的字符串，不改变原字符串
console.log(str.concat(' ', 'world'));// hello world 获取拼接字符串，支持可变参数，不改变原字符串
console.log(str.slice(1, 3));// el 获取指定范围的字符串，不改变原字符串，第一个参数是起始位置，第二个参数是结束位置，前闭后开
console.log(str.slice(1));// ello 获取指定范围的字符串，不改变原字符串，只有一个参数会获取到末尾
console.log(str.slice(-1));// o 获取指定范围的字符串，不改变原字符串，负数参数会从后往前查找
console.log(str.substring(1, 3));// el 和slice类似，区别是不支持负数参数，负数参数会替换为0，并且参数会自动排序，保证前小后大
console.log(str.split());// ['hello'] 根据字符将字符串拆分为数组，无参或字符不存在会将整个字符串作为数组的一个元素，支持正则表达式
console.log(str.split(''));// ['h', 'e', 'l', 'l', 'o'] 空串将每个字符串作为数组的一个元素
console.log(str.split('ell'));// ['h', 'o'] 拆分后指定的字符被删除
console.log(str.toLowerCase());// hello 获取小写字符串，不改变原字符串
console.log(str.toUpperCase());// HELLO 获取大写字符串，不改变原字符串

var reg = /123/;
var result = reg.test('123a4a123a5a');// 判断参数是否包含正则表达式匹配的字符串，返回true表示包含，返回false表示不包含
console.log(result);// true

var reg = /123/;
var result = reg.exec('123a4a123a5a');// 返回从参数中匹配到的字符串，返回值是数组对象，对象内容和全局匹配修饰符有关
console.log(result);// ['123', index: 0, input: '123a4a123a5a', groups: undefined]
console.log(result.length);// 1 返回对象的数组长度
console.log(result.index);// 0 返回匹配到的起始位置
console.log(result.groups);// undefined 返回匹配到的捕获分组
console.log(reg.lastIndex);// 0 未使用全局匹配修饰符时，匹配到就结束了，不会匹配下一个

var reg = /123/;
var result = '123a4a123a5a'.match(reg);
console.log(result);// ['123', index: 0, input: '123a4a123a5a', groups: undefined]

var reg = /123/g;
var result = reg.exec('123a4a123a5a');
console.log(result);// ['123', index: 0, input: '123a4a123a5a', groups: undefined]
console.log(reg.lastIndex);// 3 记录本次匹配结束时的索引，下次匹配从这个位置开始
var result = reg.exec('123a4a123a5a');
console.log(result);// ['123', index: 6, input: '123a4a123a5a', groups: undefined]
console.log(reg.lastIndex);// 9 记录本次匹配结束时的索引，下次匹配从这个位置开始
var result = reg.exec('123a4a123a5a');
console.log(result);// null 匹配结束
console.log(reg.lastIndex);// 0 匹配结束

var reg = /123/g;
var result = reg.test('123a4a123a5a');
console.log(reg.lastIndex);// 3 第一次匹配
var result = reg.exec('123a4a123a5a');
console.log(reg.lastIndex);// 9 第二次匹配
var result = reg.exec('123a4a123a5a');
console.log(reg.lastIndex);// 0 匹配结束 虽然执行了一次exec()方法，但实际上已经匹配两次了

var reg = /123/g;
var result = '123a4a123a5a'.match(reg);
console.log(result);// ['123', '123']
console.log(reg.lastIndex);// 0 匹配结束

var str = new String('hello');
console.log(str.match(/l/));// ['l', index: 2, input: 'hello', groups: undefined]
console.log(str.match(/l/g));// ['l', 'l'] 全局匹配会获取全部匹配的内容
console.log(str.search(/l/));// 2
console.log(str.replace(/l/, ''));// helo
console.log(str.replaceAll(/l/g, ''));// heo 替换全部时，修饰符必须有全局匹配
console.log(str.split(/ll/));// ['he', 'o']

var str = 'hello';
console.log(str.match(/el+/g));// ['ell'] 使用n+匹配包含至少一个n的字符串
console.log(str.match(/hl+/g));// null 至少包含一个n
console.log(str.match(/el*/g));// ['ell'] 使用n*匹配包含零个或多个n的字符串
console.log(str.match(/hl*/g));// ['h'] 可以不包含n
console.log(str.match(/el?/g));// ['el'] 使用n?匹配包含零个或一个n的字符串
console.log(str.match(/hl?/g));// ['h'] 可以不包含n
console.log(str.match(/l{2}/g));// ['ll'] 使用n{X}匹配包含X个n的字符串
console.log(str.match(/l{1,2}/g));// ['ll'] 使用n{X,Y}匹配至少包含X个至多包含Y个n的字符串，Y可以省略
console.log(str.match(/lo$/g));// ['lo'] 使用n$匹配任何结尾为n的字符串
console.log(str.match(/^he/g));// ['he'] 使用^n匹配任何开头为n的字符串
console.log(str.match(/e(?=l)/g));// ['e'] 使用?=n匹配任何后面紧跟n的字符串
console.log(str.match(/h(?!l)/g));// ['h'] 使用?=n匹配任何后面紧跟n的字符串

var str = '123123';
console.log(str.match(/1.*3/g));// ['123123'] 默认开启贪婪模式，获取能匹配到的最多的内容
console.log(str.match(/1.*?3/g));// ['123', '123'] 使用?开启非贪婪模式，获取能匹配到的最少的内容

var str = 'ab12CD';
console.log(str.match(/[abCD]/g));// ['a', 'b', 'C', 'D'] 查找方括号之间的任何字符
console.log(str.match(/[^abCD]/g));// ['1', '2'] 查找不在方括号之间的任何字符
console.log(str.match(/[0-9]/g));// ['1', '2'] 查找0-9之间的数字
console.log(str.match(/[a-z]/g));// ['a', 'b'] 查找a-z之间的字符，即小写英文字母
console.log(str.match(/[A-Z]/g));// ['C', 'D'] 查找A-Z之间的字符，即大写英文字母
console.log(str.match(/[A-z]/g));// ['a', 'b', 'C', 'D'] 查找A-z之间的字符，即所有英文字母，因为在ASCII码中，大写字母在小写字母前面

console.log('ab12_!+'.match(/./g));// ['a', 'b', '1', '2', '_', '!', '+'] 查找单个字符，除了换行和行结束符
console.log('ab12_!+'.match(/\w/g));// ['a', 'b', '1', '2', '_'] 查找单词字符，包括数字、字母、下划线
console.log('ab12_!+'.match(/\W/g));// ['!', '+'] 查找非单词字符
console.log('ab12_!+'.match(/\d/g));// ['1', '2'] 查找数字字符
console.log('ab12_!+'.match(/\D/g));// ['a', 'b', '_', '!', '+'] 查找非数字字符
console.log('ab12_!+'.match(/\s/g));// null 查找空白字符，包括空格符、回车符、换行符、换页符、制表符、垂直制表符
console.log('ab12_!+'.match(/\S/g));// ['a', 'b', '1', '2', '_', '!', '+'] 查找非空白字符
console.log('hello world'.match(/\bwo/g));// ['wo'] 查找单词边界字符，即位于单词开头和结尾的字符
console.log('hello world'.match(/\Blo/g));// ['lo'] 查找非单词边界字符
console.log(''.match(/\0/g));// null 查找NULL字符
console.log(''.match(/\n/g));// null 查找换行符
console.log(''.match(/\r/g));// null 查找回车符
console.log(''.match(/\f/g));// null 查找换页符
console.log(''.match(/\t/g));// null 查找制表符
console.log(''.match(/\v/g));// null 查找垂直制表符

var reg = /(123)(a.a)/;
var result = reg.exec('123a4a123a5a');// 在使用捕获分组时，数组第一个元素是完整的匹配内容，后面的元素是捕获的元素
console.log(result);// ['123a4a', '123', 'a4a', index: 0, input: '123a4a123a5a', groups: undefined]

var reg = /(123)(a.a)/;
var result = '123a4a123a5a'.match(reg);
console.log(result);// ['123a4a', '123', 'a4a', index: 0, input: '123a4a123a5a', groups: undefined]

var reg = /(123)(a.a)/g;
var result = reg.exec('123a4a123a5a');
console.log(result);// ['123a4a', '123', 'a4a', index: 0, input: '123a4a123a5a', groups: undefined]
console.log(reg.lastIndex);// 6 记录本次匹配结束时的索引，下次匹配从这个位置开始
var result = reg.exec('123a4a123a5a');
console.log(result);// ['123a5a', '123', 'a5a', index: 6, input: '123a4a123a5a', groups: undefined]
console.log(reg.lastIndex);// 12 记录本次匹配结束时的索引，下次匹配从这个位置开始
var result = reg.exec('123a4a123a5a');
console.log(result);// null 匹配结束
console.log(reg.lastIndex);// 0 匹配结束

var reg = /(123)(a.a)/g;
var result = '123a4a123a5a'.match(reg);
console.log(result);// ['123a4a', '123a5a']
console.log(reg.lastIndex);// 0 匹配结束

var home = document.getElementById('home');// 通过元素的id属性查找元素节点
home = document.getElementsByName('home');// 通过元素的name属性查找元素节点，返回多个匹配的节点
home = document.getElementsByClassName('home');// 通过元素的calss属性查找元素节点，返回多个匹配的节点，支持元素节点调用
home = document.getElementsByTagName('div');// 通过元素的标签名查找元素节点，返回多个匹配的节点，支持元素节点调用

var home = document.getElementById('home');
console.log(home);// <span id="home">home-id</span>
home = document.getElementsByName('home');
console.log(home);// NodeList [span]
console.log(Array.prototype.slice.call(home));// [span]
home = document.getElementsByClassName('home');
console.log(home);// HTMLCollection [span.home]
console.log(Array.prototype.slice.call(home));// [span.home]
home = document.getElementsByTagName('div');
console.log(home);// HTMLCollection [div]
console.log(Array.prototype.slice.call(home));// [div]

console.log(document.title);// 获取文档标题
console.log(document.URL);// 获取文档URL
console.log(document.referrer);// 获取文档referrer，即前文档的URL
console.log(document.domain);// 获取文档域名

console.log(document.querySelector('#home'));// 使用CSS选择器查找元素节点，返回第一个元素节点
console.log(document.querySelectorAll('#home'));// 使用CSS选择器查找元素节点，返回全部元素节点
var newDiv = document.createElement('div');// 创建元素节点，入参是标签名
var newName = document.createAttribute('name');// 创建属性节点，入参是属性名
var newText = document.createTextNode('text');// 创建文本节点，入参是文本内容

var home = document.getElementById('home');
console.log(home.children);// 获取当前节点的所有子节点，只获取元素节点
console.log(home.childNodes);// 获取当前节点的所有子节点，包括元素节点和非元素节点
console.log(home.firstChild);// 获取当前节点的第一个子节点，包括元素节点和非元素节点
console.log(home.lastChild);// 获取当前节点的最后一个子节点，包括元素节点和非元素节点
console.log(home.parentNode);// 获取当前节点的父节点
console.log(home.previousSibling);// 获取当前节点的前一个兄弟节点，包括元素节点和非元素节点
console.log(home.nextSibling);// 获取当前节点的后一个兄弟节点，包括元素节点和非元素节点

var home = document.getElementById('home');
console.log(home.id);// 获取id属性
console.log(home.class);// 获取class属性
home.id = 'home-id';// 修改id属性
home.id = 'home-class';// 修改class属性

var home = document.getElementById('home');
// 操作属性
console.log(home.getAttribute('id'));// 通过属性名获取属性
console.log(home.getAttributeNode('id'));// 通过属性名获取属性节点
home.setAttribute('name', 'home');// 通过属性名设置属性
home.setAttributeNode(document.createAttribute('name'));// 设置属性节点
home.removeAttribute('name');// 通过属性名删除属性
home.removeAttributeNode(home.getAttributeNode('name'));// 删除属性节点
// 操作子节点
var newDiv = document.createElement('div');// 创建元素节点
var newText = document.createTextNode('text');// 创建文本节点
home.appendChild(newDiv);// 添加子节点，新的字节点会添加到末尾子节点的后面
home.insertBefore(newText, home.childNodes[0]);// 添加子节点，新的字节点会添加到首位子节点的前面
home.removeChild(home.childNodes[0]);// 删除子节点
home.replaceChild(newText, home.childNodes[0]);// 替换子节点

var home = document.getElementById('home');
home.style['fontSize'] = "16px";// 修改行内样式
console.log(home.style.fontSize);// 获取行内样式，需要将分隔命名转为驼峰命名
// 获取元素样式，包括内部样式和外部样式，兼容写法，不支持修改
if (window.getComputedStyle) {
  // 大部分浏览器兼容的方式，第二个参数是伪元素
  var fontSize = getComputedStyle(home, null)['fontSize'];
  console.log(fontSize);
} else {
  // IE8及以下
  var fontSize = home.currentStyle['fontSize'];
  console.log(fontSize);
}

var home = document.getElementById('home');
var homeName = home.getAttributeNode('name');
console.log(homeName.name);// 获取属性名
console.log(homeName.value);// 获取属性值
homeName.value = 'name';// 设置属性值

// 获取事件对象，兼容写法
event = event || window.event;
var home = document.getElementById('home');
// 传入事件对象，可以省略
home.onclick = function(event) {
  alert('span');
}

var home = document.getElementById('home');
// 鼠标点击时执行
home.onclick = function() {
  alert('span');
}
// 元素获取焦点时执行
home.onfocus = function() {
  alert('span');
}
// 元素失去焦点时执行
home.onblur = function() {
  alert('span');
}
// 页面加载完后执行
window.onload = function() {
  alert('span');
}

// 获取事件对象，兼容写法
event = event || window.event;
var home = document.getElementById('home');
home.onclick = function(event) {
  var obj = event.target;
  alert(obj.tagName);
}

// 获取事件对象，兼容写法
event = event || window.event;
var home = document.getElementById('home');
home.onclick = function(event) {
  alert('span');
  // 已弃用，不建议
  event.cancelBubble = true;
  // 建议
  event.stopPropagation();
}

// 获取事件对象，兼容写法
event = event || window.event;
var home = document.getElementById('home');
home.onclick = function(event) {
  alert('a');
  // 取消跳转，但不能阻止冒泡
  event.preventDefault();
}

// 获取事件对象，兼容写法
event = event || window.event;
var home = document.getElementById('home');
home.onclick = function(event) {
  alert('a');
  // 取消跳转，阻止冒泡
  return false;
}