JavaScript基础语法

总结了JavaScript的基础语法，对大部分知识点都举了例子，说明如何使用。

JavaScript基础语法

• JavaScript组成
  • ECMAScript(JavaScript语法)
  • DOM(页面文档对象模型)
  • BOM(浏览器对象模型)
• 书写位置
  • 行内式
    • 直接写到元素的内部
  • 内嵌式
    • <script>JS代码</script>
  • 外部JS
    • <script src=“...”></script>
• 注释
  • 单行注释
    • //
  • 多行注释
    • /* */
• 输入输出
  • prompt('提示语')
    • 弹出输入框
      • 例：var myname = prompt('请输入你的名字');
  • alert(msg)
    • 弹出输出框
  • console.log(msg)
    • 控制台输出
• 变量
  • 关键字var
    • 不区分变量类型，都用var定义
  • 使用
    • 声明
      • var v;
    • 赋值
      • v = 10;
    • 初始化
      • var v = 10;
  • 命名规范
    • 由字母、数字、下换线、美元符号组成，不能以数字开头
    • 严格区分大小写
    • 驼峰命名法，首字母小写，后面单词首字母大写
    • 尽量避免直接使用name作为变量名
• 数据类型
  • 简单数据类型
    • 数字型（Number)
      • 可以保存整数值或者小数值，默认值为0
      • 八进制：前加数字0
        • 例：010，即十进制的8
      • 十六进制：前加0x
        • 例如：0x9
      • isNaN()
        • 判断是不是非数字类型，是数字返回false，否则为true
        • 例：isNaN(12) 结果为false
    • 字符串类型（String）
      • 默认值为空字符串''
      • 可以用单引号或双引号，可单双嵌套，外双内单/外单内双都可
        • 例：var str = '我很"可爱"的';
      • 推荐使用单引号，因为HTML里面的属性用的是双引号
      • 转义符
        • \n
          • 换行
        • \\
          • 斜杠\
        • \'
          • 单引号'
        • \"
          • 双引号"
        • \t
          • 缩进
        • \b
          • 空格
      • 字符串长度
        • str.length
      • 字符串拼接
        • str + 任意类型，结果为字符串
        • 可拼接多项，可拼接变量
        • 例：var str = '我' + 18 + '岁'; 即'我18岁'
    • 布尔值类型（Boolean）
      • true/false，默认值为false
      • 参与数值运算时，true值为1，false值为0
    • Undefined
      • 未定义
    • NaN
      • not a number，非数字型
  • 类型转换
    • 变量的数据类型是可以变化的
      • 例：var v = 10; v = "123";
    • 获取变量类型：关键字typeof
      • 例：var n = 10; alert(typeof n);
    • 转为字符串
      • .toString()
        • 例：var str = n.toString();
      • String()
        • 例：var str = String(n);
      • 任意类型+空字符串
        • 例：var str = n + '';
    • 转为数字型
      • parseInt(string)
        • 取整（直接去掉小数位，无进位）
        • 例：var n = parseInt('3.14'); //n=3
      • parseFloat(string)
        • 取浮点数
        • 例：var n = paresFloat('3.14'); //n=3.14
      • Number()
        • 例：var n = Number('123');
      • js隐式转换(- * /)
        • 例：var n = '12' - 0;
    • 转为布尔型
      • Boolean()
        • 只有''(空字符串)、0、NaN、null、undefined可以转为false，其余为true
• 运算符
  • 算术运算符
    • +、-、*、/、%
  • 赋值运算符
    • =、+=、-=、*=、/=、%=
  • 递增、递减运算符
    • ++（两个加号)、--(两个减号)
    • 前置：先变值再运算。后置：先运算再变值
    • 例：n++、--n
  • 比较运算符
    • <、>、>=、<=、==、!=、===、!==
    • == 默认转换数据类型，会把字符串转为数字型
    • ===全等，要求值和数据类型完全一致
  • 逻辑运算法
    • &&、||、!
• 数组
  • 数组内元素的类型可以不同
  • 创建
    • 用数组字面量创建
      • var arr = [];
      • var arr = [1, 'a', true]
    • 用关键字new创建
      • var arr = new Array();
  • 访问
    • 按下标访问，下标从0开始
  • 数组长度
    • arr.length
  • 新增元素
    • 修改length
      • 例：假设数组arr元素数量为3 arr.length = 4;
    • 修改数组索引
      • 例：arr[4] = 1;
• 常用内置对象
  • MDN参考文档
    • https://developer.mozilla.org/zh-CN/
  • Math对象
    • 静态对象，可直接使用
    • Math.PI
      • π
    • Math.max()
      • 求最大值
    • Math.min()
      • 求最小值
    • Math.floor()
      • 向下取整
    • Math.ceil()
      • 向上取整
    • Math.round()
      • 四舍五入取整
    • Math.abs()
      • 绝对值
    • Math.random()
      • 随机数，范围[0,1)
  • Date对象
    • 是一个构造函数，必须使用new来创建
    • Date()
      • 当前时间
        • 例：var date = new Date();
      • 设置时间
        • 例：var date1 = new Date(2020,3,8);
        • 例：var date2 = new Date('2020-3-8 0:0:1');
    • .getFullYear()
      • 获取当前年
        • 例：var date = new Date(); console.log(date.getFullYear());
    • .getMonth()
      • 获取当前月(0-11)
    • .getDate()
      • 获取当前天
    • .getDay()
      • 获取当前星期几(周日0-周六6)
    • .getHours()
      • 获取当前小时
    • .getMinutes()
      • 获取当前分钟
    • .getSeconds()
      • 获取当前秒钟
    • 获取Date总毫秒数，时间起点为1970-1-1
      • .valueOf()
        • 例：console.log(date.valueOf());
      • .getTime()
      • +new Date()
        • 例：var date = +new Date();
      • Date.now()
        • 例：console.log(Date.now());
  • 数组对象
    • 使用字面量方式创建
    • 使用new Array()创建
      • 括号中单个值：数组长度 括号中两个及以上值：数组元素
      • 例：var arr = new Array();
      • 例：创建长度为2的数组 var arr1 = new Array(2);
      • 例：创建元素为2,3的数组 var arr2 = new Array(2,3);
    • 检测是否为数组
      • instanceof
        • 例：console.log(arr instanceof Array);
      • Array.isArray()
        • 例：console.log(Array.isArray(arr));
    • 添加元素
      • .push(若干参数)
        • 在数组末尾添加若干个元素，返回值为数组新长度
          • 例：arr.push(4);
      • .unshift(若干参数)
        • 向数组的开头添加若干个元素，返回新的数组长度
    • 删除元素
      • .pop()
        • 删除数组最后一个元素，返回它删除的元素的值
      • .shift()
        • 删除数组第一个元素，返回第一个元素的值
    • 数组排序
      • .reverse()
        • 颠倒数组中元素的顺序
          • 例：arr.reverse();
      • .sort(function(){})
        • 对数组的元素进行排序，参数为排序函数
          • 例：arr.sort(function(a,b){ return a - b; //升序 //return b - a; 降序 });
    • 获取元素索引
      • .indexOf(元素名)
        • 从前往后查找，返回元素名的索引号，多个相同元素就返回第一个，找不到就返回-1
          • 例：console.log(arr.indexOf('abc'));
      • .lastIndexOf(元素名)
        • 从后往前查找，其余和indexOf相同
    • 转成字符串
      • .toString()
        • 将数组转为字符串，每项以逗号隔开
          • 例：console.log(arr.toString());
      • .join('分隔符')
        • 按'分隔符'将数组中各项连接起来
          • 例：console.log(arr.join(','));
  • 字符串对象
    • 字符串所有的方法都不会修改字符串本身，而是返回一个新的字符串
    • 根据字符返回位置
      • .indexOf('字符',[起始位置])
        • 从前往后地从起始位置开始查找字符，返回其索引，起始位置可省略
        • 例：从第3个字符开始查找 console.log(str.indexOf('abc',3));
      • .lastIndexOf('字符',[起始位置])
        • 从后往前查找
    • 根据位置返回字符
      • .charAt(index)
        • 返回第index个元素
          • 例：console.log(str.charAt(2));
      • .charCodeAt(index)
        • 返回第index个元素的ASCII码
      • str[index]
        • 返回第index个位置的字符
    • 截取字符串
      • .substr(start,length)
        • 从第start个开始，截取长度为length的字符串
          • 例：console.log(str.substr(0,3));
      • .slice(start,end)
        • 截取从第start个到第end个（不包括第end个）的字符串
      • .substring(start,end)
        • 基本和slice相同，但不接受负值
    • 替换字符串
      • .replace('被替换字符','替换为的字符')
        • 将字符串中的'被替换字符'替换为'替换为的字符'，只会替换第一个
          • 例：console.log(str.replace('a','b'));
    • 转为数组
      • .split('分隔符')
        • 将字符串以'分隔符'截断，截断后的若干个项作为数组的元素
          • 例：var str = '1-2-3'; var sarr = str.split('-'); //sarr = ['1','2','3']
• 对象
  • 创建
    • 用字面量创建
      • 直接初始化，可包含function
      • var obj = { uname: 'bob', age: 18, f: function(){}; ... };
    • 用new Object创建
      • 先声明再添加
      • var obj = new Object(); obj.age = 18; obj.name = 'bob';
    • 用构造函数创建
      • 先创建模板，再用模板创建对象
      • function Obj(uname, age){ this.name = uname; this.age = age; } var obj = new Obj('bob', 18);
  • 访问
    • obj.age
    • obj['age']
  • 遍历
    • 使用for in
      • for(var k in obj){ console.log(k); //属性名 console.log(obj[k]); //属性值 }
• 预解析
  • js引擎会把js里所有的var和function提升到当前作用域的最前面
  • 对于变量，只提升声明，不会赋值
  • 对于函数，会提升完整的声明
• 函数
  • 声明及调用
    • 形参和return可省略
    • function 函数名(形参1,形参2,...){ //函数体 return 结果; }
      • 调用：函数名(形参1,形参2,...);
    • var f = function(){};
      • 调用：f();
  • 函数参数数量不确定
    • 关键字arguments,按数组的方式访问
• 流程控制
  • 三元表达式
    • 条件表达式 ? 表达式1 : 表达式2
  • 分支
    • if
      • if(条件){ 若干语句; }
    • if-else
      • if(条件){ 若干语句; }else{ 若干语句; }
    • if-else if
      • if(条件){ 若干语句; }else if{ 若干语句; }else{ 若干语句; }
    • switch
      • switch(表达式){ case v1: 若干语句; break; case v2: 若干语句; break; ... default: 若干语句; }
  • 循环
    • for
      • for(初始化变量;条件表达式;操作表达式){ 若干语句; }
    • while
      • while(条件表达式){ 若干语句; }
    • do while
      • do { 若干语句; }while(条件表达式)
    • 改变当前循环
      • 关键字continue
        • 跳过后面的语句，进入到下次循环
      • 关键字break
        • 跳出循环