前言

js是所有web端开发基础中的基础，本篇主要记录js的语法特性及使用方法。作为半新不新的开发者，有必要夯实基础内容，本文直接忽略环境、工具及使用场景的内容，单纯记录api及总结最佳使用方案。

概述

JavaScript（JS）是一种具有函数优先特性的轻量级、解释型的编程语言。

语法摘要

• 语法

  JavaScript 借鉴了 Java 的大部分语法，但同时也受到 Awk、Perl 和 Python 的影响。我们只需要注意其中的不同。

  • var ：其作用域为函数范围或全局范围,并被 变量提升 , delete 语句无法删除，

  • let ：其作用域为声块级或函数，不可被提升，应尽量避免 暂时性死区 ，保持良好的代码习惯。

  • 函数提升：只有函数声明可以提升，表达式不会。

• 判断与运算符

  日常开发中，逻辑判断是基础中的基础。但js的判断确实与众不同，特此记录。

  • 特殊的逻辑处理：
    举例 1&&2、 2||2 这两个值分别为2、2。说是运算，倒不如说是执行语句，于是有了 id&&getDataWithId(id)这种写法，蛮特别。

  • 空判断：
    判空 对于if语句来说 undefined、null、''、0都是false，蛮方便。

  • 相等判断：如果两个操作数不是相同的类型，JavaScript 会根据规则尝试转换它们为恰当的类型来比较，但=== 和 !== 操作符例外，它们会执行严格的相等和不相等比较。

  • void运算符：表明一个运算没有返回值。常用的：

       <a href="javascript:void(0)">Click here to do nothing</a>
    

  • in操作符：如果所指定的属性确实存在于所指定的对象中，则会返回true

  • instanceof：如果所判别的对象确实是所指定的类型，则返回true。

• 循环

  大部分循环与c语言基本一致，与众不同的记录一下：

  • for...in：语句循环一个指定的变量来循环一个对象所有可枚举的属性,对于 Array的循环来说使用for...of与forEach避免歧义。

  • label语句:标记语句可以和 break 或 continue 语句一起使用。标记就是在一条语句前面加个可以引用的标识符,可以灵活的操作多层循环。

• 函数

  函数构建及使用确有特别的地方

  • 箭头函数表达式
    没有this与arguments,这点对于vue2.0的开发尤为重要，避免上下文缺失。

  • 内置函数的调用：
    aplly、call这两个方法，修改this的指向十分有用,常用内置函数，优雅你我他。

  • 构造函数：
    原型对象的构建与使用也蛮简约的，但是实际开发中大家却很少用呢。

• 常用方法集

  js的方法真的是太多了，官方所描述的优雅，是充分利用诸多的方法。下面记录一下日常的方法及名称，烂笔头一下。

  数组：

  方法超多，多数据类型的对象。值得关注的是方法复制均为浅拷贝，推荐JSON.stringify() 、JSON.parse()进行数据传递。

  方法名称	输入参数	返回类型	处理空槽	说明
  concat	(val,...)	Array	保留	合并多个数组
  copyWithin	(target, start, end)	Array	删除	高效的移动数据
  every	(callbackFn, thisArg)	Bool	略过	是否都通过测试
  some	(compareFn)	Bool	保留	至少一个满足测试
  includes	(searchElement, fromIndex)	Bool	同undefined	包含某值
  find	(callbackFn, thisArg)	元素	同undefined	迭代满足的第一个元素
  fill	(value, start, end)	Array	可修改	固定值填充
  filter	(callbackFn, thisArg)	Array	忽略	创建给定数组
  flat	(depth)	Array	仅depth1忽略	抹平数组
  form（静态）	(arrayLike, mapFn, thisArg)	Array	undefined	创建可迭代或类数组对象
  join	(string)	String	同undefined	拼接字符串
  map	(callbackFn, thisArg)	Array	忽略	函数运算返回新数组
  with	(index, value)	Array	替换undefined	替换某数据
  splice	(start, deleteCount, item...)	Array	保留	移除或者替换已存在的元素
  slice	(start, end)	Array	保留	索引创建新数组
  sort	(compareFn)	Array	保留	索引数组重排序
  reduce	(compareFn)	元素	保留	汇总

  字符串：

  同样的方法很多，原始值和对象还是有些区别的，需要注意。字符比较是区分大小写的。js是基于 UTF-16 码元工作的，遇到Unicode的视觉单元需要特别注意使用分割操作，汉字的码元可能不止一个，比如吉。

  方法名称	输入参数	返回类型	说明	注意事项
  length	无	码元数量	获取码元数量	汉字码元问题
  at	(index)	码元String	偏移量码元	汉字码元问题,兼容要求高，异常undefined
  charAt	(index)	码元String	索引处新码元	汉字码元问题，异常空字符串
  concat	(str1,...)	String	字符串连接	非字符串强制转化
  includes	(str, position)	bool	是否包含	区分大小写
  indexOf	(str, position)	number	包含的索引位置	不包含为-1
  isWellFormed	无	bool	是否不含单独代理项	无
  matchAll	(regexp)	可迭代array	检索字符串	注意正则的规范
  normalize	(form)	Srting	Unicode标准化	同一字符不同码位的标准化
  padStart	(targetLength, padString)	Srting	首部字符串填充	无
  padEnd	(targetLength, padString)	Srting	尾部字符串填充	无
  replace	(pattern, replacement)	Srting	替换字符串	使用/g可全局替换
  slice	(indexStart, indexEnd)	Srting	提取字符串的一部分	支持负值倒查
  split	(indexStart, indexEnd)	Array	分割字符串	limit可选
  substring	(indexStart, indexEnd)	String	提取子串	indexEnd可选
  toLowerCase	无	String	转小写	无
  toUpperCase	无	String	转大写	无
  trim	无	String	两端去空格	无

  math方法：

  JS中的math方法与c语言中的基本一致，不再过多赘述。

未完待续。。。

总结

作为强语言转入者，对于js语法的多样性及可变性，深感无力，尤其是面对防御性代码的时候。类型的变更、属性的添加无迹可寻。对此我们在新的工程中添加了TS，以实现类型及属性的确定性。在没有深入了解js前，我一直以为这是一种散漫的脚步语言，其实不然，js拥有面向对象的语言特性，相关思想的应用并无不适。解释的通，就能运行，这是目前我对js的一些理解，随着深入的学习实践，会进一步更新。

文献

• 官方文档： developer.mozilla.org/zh-CN/docs/…
• js规范文档（402）：tc39.es/ecma402/