【JavaScript基础#2】 𓤮

时间:2019-08-19
本文章向大家介绍【JavaScript基础#2】 𓤮,主要包括【JavaScript基础#2】 𓤮使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

原文: http://blog.gqylpy.com/gqy/238

"


目录

#. 函数

1. 定义

2. arguments 参数

3. 全局变量与局部变量

4. 语法分析

#. 内置对象和方法

1. 自定义对象

2. 类之继承

3. Date

4. JSON

5. RegExp

6. Math


#. 函数

1. 定义

  1. 基本函数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/11a8f5e8-0fbf-4027-9a91-59ea12ba0eee.png)
  2. 带参数的函数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/bfa64a72-fc90-4519-9904-3c17ee10988f.png)
  3. 带返回值的函数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/cf780306-41b7-4403-8190-1d08229696ae.png)
  4. 匿名函数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/afa4d79c-89b8-467b-a2cd-ff51c8b2fe2d.png)
  5. 自执行的函数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/495f1bba-75ed-4192-a499-9f166160aa54.png)
  6. ES6中允许使用“箭头”(=>)定义函数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/fdc1c5d5-449b-4ba5-a275-26364a3e1b55.png)

JavaScript函数的坑:

  • 函数的返回值可以写多个,但只会返回最后一个,如果想返回多个值,可使用数组或对象.
  • 函数传入的参数可以多于或少于已定义的参数总数.
  1. // 1.此时传入的参数少于已定义的参数:
  2. function func(a, b) {
  3. console.log(a, b);
  4. }
  5. func(1); // 返回值:1 undefined
  6. //(因为未定义第二个参数,所以其打印的值为undefined)
  7. // 2.此时传入的参数多于已定义参数:
  8. function func2(a, b) {
  9. console.log(a + b);
  10. }
  11. func1(1, 2, 3, 4); // 10
  12. // 3.此时未定义参数:
  13. function func3() {
  14. var ret = 0;
  15. for (var i=0;i<arguments.length;i++) { // 使用for循环求和
  16. ret += arguments[i];
  17. }
  18. return ret;
  19. }
  20. func3(1, 2, 3, 4); // 10

2. arguments 参数

![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/5f2092e7-658e-4026-bf79-3a275da91070.png)

通常用于获取传入参数的总数:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/d463a8b4-fc4f-48de-a19e-16a0126b3764.png)

3. 全局变量与局部变量

局部变量:
在JavaScript函数内部声明的变量(使用var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部),只要函数运行完毕,本地变量就会被删除.

全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它.

变量生存周期:
JavaScript变量的生命期从它们被声明的时间开始.

局部变量会在函数运行完毕后被删除.
全局变量会在页面关闭后被删除.

4. 语法分析

JavaScript中在调用函数时,会先进行词法分析.

词法分析会先生成一个激活对象:Active Object(AO),并会分析以下三个方面:

  1. 函数参数,如果有则将此参数赋值给AO,且值为undefined。如果没有则不做任何操作.
  2. 函数局部变量,如果AO上有同名的值则不做任何操作,如果没有则将此变量赋值给AO,并且值为undefined.
  3. 函数声明,如果AO上有则会将AO上的对象覆盖,如果没有则不会做任何操作.

函数内部无论是使用参数还是使用局部变量,都到AO上找.

例1:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/72a1f616-93e3-4d22-94dc-81750e0b99e9.png)

例2:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/bccc6d9b-a999-41db-85cd-5b5ef18be59d.png)

词法分析过程:

  1. 1. 分析参数,又一个参数,形成一个AO.name=undefine;
  2. 分析变量声明,有一个var name,发现AO上面已经有一个AO.name,因此不做任何处理.
  3. 分析函数声明,有一个function name(){...}声明,则把原有的age覆盖成AO.name=function(){...};

执行过程:(执行过程中的所有的值都是从AO对象上去寻找

  1. 执行第一个console.log(name)时,此时的AO.name是一个函数,所以第一个输出的一个函数.
  2. 这句var name='kyz';是对AO.name的属性赋值,此时AO.name='kyz',所以在第二个输出的是'kyz'
  3. 同理,第三个输出的还是'kyz'.


 


#. 内置对象和方法

JavaScript中的所有事物都是对象:字符串、数字、数组、日期等等.
在JavaScript中,对象是拥有属性和方法的数据.

类型 内置对象 介绍
数据类型 Number 数字对象
String 字符串对象
Boolean 布尔值对象
组合对象 Array 数组对象
Math 数学对象
Date 日期对象
高级对象 Object 自定义对象
Error 错误对象
Function 函数对象
RegExp 正则表达式对象
Global 全局对象

注意 var s1 = 'abc'; var s2 = new String('abc'); 的区别:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/47961b1b-b162-460b-8f5d-9991672e60d5.png)

1. 自定义对象

JavaScript的对象(Object)本质上是键-值对的集合(Hash结构),键必须是字符串(可哈希的).

取值的两种方法:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/6ebbdc68-12de-427f-b2c2-241714adde58.png)

遍历对象中的内容:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/d60f5b7c-474f-43e4-bbbf-395a6562204d.png)

深入理解

创建对象:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/72d2821c-4b54-498c-b2a6-2175f189e0ff.png)

注意:
ES6中提供了Map数据结构,它类似于对象,也是键-值对的集合,但是键的范围不限于字符串,各种类型的值(包括对象)都可以作为键。
也就是说,Object结构提供了 字符串-值 的对应,Map结构提供了 值-值 的对应,是一种更完善的Hash结构实现.

Map体现:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/daa8056c-e5c2-429e-9972-531705f1e220.png)

2. 类之继承

  1. 类的基本操作:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/1855d7a3-ae44-4481-8ad4-de33ec0e2e03.png)

  2. 继承(接上图):
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/a4e75e0c-46f8-41d8-bc86-5957ebf66fca.png)

3. Date

  1. 不指定参数,默认为当前时间:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/53adc635-a20e-4497-b86f-4abd4f539fab.png)
  2. 指定时间为字符串,日期分隔符可以是 "-" 或 "/":
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/e765cd49-8374-4230-9fcc-2ea1f83ef1bc.png)
  3. 指定毫秒数:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/e0a48b44-d99f-4338-9c1b-07d7f26182e9.png)
  4. 参数为 年, 月, 日, 时, 分, 秒, 毫秒:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/698e0107-a40c-4c16-9d27-3a8e0cbc16ba.png)
Date对象的方法
方法 getDate() getDay() getMonth() getFullYear() getYear() getHours getMinutes() getSeconds() getMilliseconds getTime()
描述 星期 月(0-11) 完整年份 毫秒 累计毫秒数(初始时间开始)

 

4. JSON

  • JSON.stringify(obj):序列化
  • JSON.parse(obj):反序列化

![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/ca07f635-8202-4281-bae9-46434cb6d14d.png)

5. RegExp

基本匹配语法:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/fec8c730-95cd-46aa-8a88-218ce2f3a175.png)
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/85ae3921-c344-4598-9c44-e0cebf52c4e6.png)

JavaScript正则的坑:

  1. 匹配规则里除非必要,否则不要留空格.
  2. 如果re带有全局标志g,则re.test()函数不一定会从开头开始找,而是从re.lastIndex所指定的索引位置开始找:
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/ff078cdf-ceec-402d-b1f9-ce779a4c19cd.png) 因此,如果第二次(或更多次)想要从头开始找,则需要手动将lastIndex的值重置为0.
  3. re.test() 不指定参数时,默认匹配 undefined
    ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/99c7e933-c98a-422e-be97-9931b59911f4.png)

6. Math

  • abs(n):返回数的绝对值
  • exp(n):返回e指数
  • floor(n):对数进行下舍入
  • log(n):返回数的自然对数(底为e)
  • max(x, y):返回 x 和 y 中的最高值
  • min(x,  y):返回 x 和 y 中的最底值
  • pow(x, y):返回 x 的 y 次幂
  • random():返回 0 ~ 1 之间的随机小数
  • round(n):四舍五入(JavaScript中的Math没有单进双退)
  • sin(n):返回数的正弦
  • sqrt(n):返回数的平方根
  • tan(n):返回角的正切

random生成随机数:
![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/5fdfa360-2ca5-45bb-aed8-ec45abcf3458.png)



"

原文: http://blog.gqylpy.com/gqy/238

原文地址:https://www.cnblogs.com/bbb001/p/11377709.html