JavaScript学习笔记1_基础与常识

Posted 2020-09-30 smil、梵音

摘抄自：https://www.cnblogs.com/ayqy/p/4396287.html

---

 

1.六种数据类型

5种基础的：Undefined，Null，Boolean，Number，String（其中Undefined派生自Null）

1种复杂的：Object（本质是一组无序键值对）

2.字符串转数字

• Number(str)：先求值再转换（先valueOf再toString都不行就是NaN），一般与我们的预期结果不一样，比如Number(”)=Number(false)=Number(null)=0而var x;Number(x)=NaN。。。所以一般都用下面两种方式

• parseInt(str)：可以指定进制，建议使用parseInt(x, 10);这样的格式，即始终指明进制

• parseFloat(str)：不可以指定进制，解析整数时返回整数而不是浮点数

3.获取字符串长度

String类型的值都有length属性。str.length返回串长整数值，而不是通过其它函数来获取串长

4.值传递与地址传递

函数传参都是值传递

5.作用域链

本质是一个栈，存放了各层的变量对象（类似于编译器的符号表指针栈），变量对象持有该层所有变量和函数的访问权限，如果该层是函数，那么变量对象是arguments对象，栈顶是正在执行的上下文环境对应的变量对象，栈底是全局执行环境对应的变量对象。

6.作用域

没有块级作用域，有函数作用域

7.创建Object对象的2种方法

1. var obj = new Object();obj.attr = value;

传统的方式，调用构造函数创建对象

1. var obj = {attr1 : value1, attr2 : value2}或者var obj = {“attr1″ : value1, “attr2″ : value2}

对象字面量表示法，属性名可以是字符串

注意：

1. 除非属性名有歧义例如：null, var等等，一般不要用字符串做属性名，当然只是习惯约束

2. 用对象字面量方式定义对象时，不会调用其构造函数

8.访问属性值的两种方法

1. obj.attr

2. obj[“attr”] 优点是可以通过变量来访问属性，如var attrName = “attr”;obj[attrName]更灵活

9.数组的声明与初始化

1. var arr = new Array(value1, value2...);

2. var arr = Array(...);可以省略new

3. 数组字面量：var arr = [value1, value2...];

注意：用数组字面量定义数组时也不会调用其构造函数

10.数组相关函数

见附录

11.函数声明与函数表达式的区别

1. function fun(){...} js引擎会在加载源代码时生成该函数对象

2. var fun = function(){...} js引擎在执行时才会生成该函数对象

12.函数重载

不支持重载。后声明的函数会覆盖先声明的，本质是对函数名进行了多次赋值操作（函数名只是一个指针变量）

13.函数内部特殊属性

1. arguments.callee 函数指针，指向拥有该arguments对象的函数，即当前函数

2. this 当前执行环境的引用，顶层的this就是window

3. arguments.callee.caller 函数指针，指向调用当前函数的函数，没有则返回null

注意：this可以是对象引用或者函数引用，但callee和caller只能是函数引用

14.函数对象的属性和方法

1. length 函数期望的命名参数的个数，js中可以给函数传递任意多个参数，因为除了形参，还可以用arguments获取任一参数

2. prototype 指向函数的原型对象

3. call(context, arg1, arg2...) 用来在特定的作用域中调用函数，解除对象与函数的紧耦合

4. apply(context, arguments或其它数组对象) 功能同上，支持数组参数

5. bind/unbind(context, arg1, arg2...) 绑定/解绑执行环境或参数，可以从已有函数生成新函数，但用bind连续绑定是无效的（连续 != 多次），例如：

    1 function fun(){
    2     alert(this.data);
    3 }
    4 var obj = {
    5     data : \'obj_data\'
    6 };
    7 var newObj = {
    8     data : \'new_obj_data\'
    9 };
   10 fun1 = fun.bind(obj);
   11 fun1();
   12 fun2 = fun1.bind(newObj);//连续绑定
   13 fun2();
   14 fun3 = fun.bind(newObj);//多次绑定
   15 fun3();

   以上代码输出’objdata’, ‘objdata’, ‘newobjdata’，第二次绑定失败了，因为bind函数内部是用call来实现的，连续绑定的效果类似于：

   //第一次绑定得到的函数
   fun1 = fun.call(obj);
   //第二次绑定得到的函数
   fun2 = fun1.call(newObj);

   第二次绑定得到的函数中fun1内部的this确实指向newObj，但fun1中根本没有用到this，所以没有任何影响

15.一些常识

1. this永远指向自身所属的对象（你是谁的属性，你内部的this就是谁）

    1 var obj1 = {
    2     data : 1,
    3     fun : function(){
    4         alert(this.data);
    5     }
    6 };
    7 var obj2 = {
    8     data : 2
    9 };
   10  
   11 obj1.fun();
   12 obj2.fun = obj1.fun;
   13 obj2.fun();

   以上代码输出1和2，因为执行过倒数第二句后，obj2新增了一个fun属性，值为obj1.fun的引用，但因为obj2.fun是obj2的属性，所以this指向obj2

2. 尽量在构造函数原型上定义成员函数，因为直接在构造函数中定义的函数有运行时闭包的开销

3. 在js中应该用单引号，因为JSON和XML里只有双引号，用单引号可以避免转义

4. 尽量在变量声明的同时初始化，以便区分undefined表示未声明。因为对已声明但未初始化的变量和未声明的变量用typeof操作符都会返回”undefined”

5. NaN（Not a Number）与任何值都不相等，包括NaN本身，所以需要用isNaN()函数来判断

6. 只能给引用类型的值动态地添加属性。给基本类型的值添加属性不会报错但没有任何意义

7. 数组会根据索引自动增长。需要注意length属性是可写的，也就是说可以动态地设置数组长度，如截掉尾部元素

8. 函数名只是一个指针变量。function fun{...} fun = null;只是断开了引用关系，函数体并没有被销毁

附录

1.基础数据类型

1. Undefined 已定义但未初始化的对象的默认值

2. Null 表示一个空对象指针，所以用typeof检测之返回object

3. Boolean 布尔值，注意Boolean()转换函数，规则如下：

   1. true/false ~ 不变

   2. 非空字符串/空字符串 ~ true/false

   3. 非0数字/0和NaN ~ true/false

   4. 任何对象/null ~ true/ false

   5. undefined ~ false

   上面这些规则非常重要，因为if条件会自动应用Boolean()转换，而且if(obj)是在js代码中是很常见的，很多时候流程控制错误都是if条件自动转换造成的

4. Number 数值，js中+0和-0相等，注意NaN，它与任何东西都不相等，包括自身，而且它既不大于n也不小于等于n。Number变量支持toString()函数，可以用来对数值串进行进制转换，例如var num = 17;num.toString(16)返回”11″

5. String 字符串，注意字符串的不可变性，进行巨量拼接操作时应该用数组 + join而不是循环+

2.Object类型变量的属性和方法

1. Constructor 保存这构造函数的引用

2. hasOwnProperty(porpertyName) 用来检查当前对象是否拥有指定属性（此处”属性“包括属性和方法）

3. isPrototypeOf(obj) 用来当前对象是不是指定对象的原型

4. propertyIsEnumerable(propertyName) 用来检测指定属性是否可枚举

5. toLocaleString() 相当于toString()函数，但附加了地区特征

6. toString() 返回对象的字符串表示

7. valueOf() 返回对象的字符串、数值或布尔值表示

3.常见引用类型

1. Function js中函数也是对象，非常灵活，例如：

   1 var load = window.onload;
   2 window.onload = function(){
   3     //do something
   4     load();//就是这么简单，添一对括号马上执行
   5 }

2. Array 数组类型的操作函数是最多的

   1. 栈方函数：push() 在数组末尾插一项, pop() 尾元出栈

   2. 队列函数：push() 同上，shift() 首元出队并返回首元；反向队列（队头进，队尾出）unshift()/pop()

   3. 排序函数：sort(fun) 无参比较字符串升序排列，有璨传入自定义比较函数返回正值/负值/0；reverse() 反转顺序

      注意：sort()/reverse()都会直接改变原数组，而且sort()默认实现方式不太科学，对[1, 3, 10, 5]排序的结果是[1, 10, 3, 5]，想要心里想的结果，必须传入自定义比较函数

   4. 操作函数：

      1. arr.concat(arr1, arr2...) 连接形成新数组

      2. arr.slice() 相当于substring对字符串的截取效果，用法也一样

      3. arr.splice() 向数组中部插入项，splice(startIndex, num, item1, item2...) 表示把从startIndex开始的num项替换为各个item，只有前两个参数表示把从startIndex开始的num项换为空（也就是删除），用splice可以实现删除/替换/插入操作。

         注意：splice函数也会直接改变原数组。

   5. 位置函数：indexOf(value)和lastIndexOf(value)，查找value的索引位置，没找到返回-1，内部用的是全等操作符（===）

   6. 迭代函数：every(), filter(), forEach(), map(), some()都是对数组中的每一项运行指定方法，IE9+支持且并不常用，在此不展开叙述

   7. 归约函数：reduce(), reduceRight() 不做介绍，原因同上

3. Date类型：相关内容略多，参见W3School

4. RegExp类型：var regex = /^cat$/i;创建正则表达式（RegExp类型），支持的模式有g, i, m分别表示全局模式，忽略大小写模式，多行模式。当然，也可以用new RegExp(strRegex, strMode)，不过，有什么理由非要去用这种方式呢？

   js支持正则捕获，var matches = regex.exec(text); 通过matches[0], matches[1]...来获取捕获到的内容

   普通的正则匹配：regex.test(text)返回true/false

5. 基本包装类型：Boolean，String和Number，一直都在见面，只是没有注意到，例如：

   1 var str = \'smilestome\';
   2 var str_ = str.substring(1);

   以上代码等价于：

   var s1 = new String(\'smilestome\');//创建包装类型实例
   var s2 = s1.substring(1);//在实例上调用相应方法
   s1 = null;//销毁实例

   自动装箱拆箱，为了让基础数据类型用起来更方便，但需要注意：new String()与String()转换方法不同，前者返回object类型，而后者返回string类型，鉴于这样的区别，混用会引起不必要的麻烦，所以我们没有理由显式创建包装类型。Boolean，Number与之类似。