Javascript学习笔记（详）（一）

在HTML中使用Javascript

1. <script>元素的六个属性：

   属性	作用
   async	可选。表示应该立即下载脚本
   charset	可选。表示通过src属性指定的代码的字符集
   defer	可选。表示脚本可以延迟到文档被完全解析和显示后再执行
   language	已废弃。
   src	可选。表示包含要执行代码的外部文件
   type	可选。表示编写代码使用的脚本语言的内容类型

   <script>
       function sayHi() {
           alert("hello, world")
       }
   </script>
   

2. 标签的位置

3. 延迟脚本：添加defer='defer'属性

4. 异步脚本：添加async属性

5. <![CDATA[content]]>：content部分可以使用任意字符

6. 文档模式：

   • 混杂模式
   • 标准模式
   • 准标准模式

7. <noscript>：指定在不支持脚本的浏览器中显示的替代内容

基本概念

1. 标识符

2. 注释（与C语言相同)

3. 严格模式："use strict";

4. 变量：var message，无论什么类型都采用var声明，声明不赋值默认为undefined类型

5. 数据类型

   • undefined：未定义
   • boolean：布尔值
   • string：字符串
   • number：数值
   • object：对象或null
   • function：函数

6. Number.MIN_VALUE,Number.MAX_VALUE,Infinity,-Infinity

7. NaN：非数值，是一个特殊的数值。用于表示一个本来要返回数值的操作数未返回数值的情况（不会抛出错误）。任何涉及NaN的操作都会返回NaN。NaN与任何值都不相等，包括自己。

8. isNaN()：确定参数是否“不是数值”, 任何不能被转换为数值的值都会导致这个函数返回true

9. Number()：null $\rightarrow$0, undefined $\rightarrow$NaN,字符串规则：

   • 如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即"1"会变成1，"123"会变成123，而"011"会变成11（忽略前导零）；
   • 如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值（忽略前导零）；
   • 如果字符串中包含有效的十六进制格式，例如"0xf"，则将其转换为相同大小的十进制整数值；
   • 如果字符串是空的（不包含任何字符），则将其转换为0；
   • 如果字符串中包含除上述格式之外的字符，则将其转换为NaN。

10. parseInt()：若第一个字符不是数字字符或负号，则返回NaN

    parseInt('AF', 16) //16进制解析

11. parseFloat()

12. string类型不区分单引号与双引号

13. toString()：数值、布尔值、对象和字符串都有该方法

    toString(2)：2表示进制，可将数值转换成2进制的值，并以字符串的形式存储。

14. String()：在toString方法的基础上加上了对null和undefined类型的支持，null返回null，undefined返回undefined

15. Object类型：

    var ob = new Object();
    

    Object实例的属性与方法：

    属性与方法	介绍
    constructor	保存用于创建当前对象的函数
    hasOwnProperty(propertyName)	检查给定的属性在当前对象实例中是否存在，属性名需以字符串形式指定
    isPrototypeOf(object)	检查接受的对象是否在当前对象的原型链上
    propertyIsEnumerable(propertyName)	检查属性是否能使用for-in语句来枚举
    toLocaleString()	返回对象的字符串表示，与执行环境的地区对应
    toString()	返回对象的字符串表示
    valueOf()	返回对象的字符串、数值或布尔值表示。通常与toString方法的返回值相同

    操作符

    1. 一元操作符

       • 递增递减操作符：++,--

       • 一元加减：

         //一元加操作放在数字前无影响，在对非数值使用时像Number()函数对非数值进行转换
         var o = {
              valueOf: function() {
                  return -1;
              }
         };
         o = +o
         alert(o) //输出-1
         // 一元减操作应用于数值，是该值变为负数，若应用于非数值，相当于进行一元加操作，再对所得结果求相反数
         

    2. 位操作符

       • 按位非（NOT）：~：返回反码
       • 按位与（AND）：&：同一则一
       • 按位或（OR）：|：同零才零
       • 按位异或（XOR）：^：不同为一
       • 左移：<<
       • 右移：>>

    3. 布尔操作符

       • 逻辑非：！

       • 逻辑与：&&

       • 逻辑或：||

         与逻辑与操作相似，如果有一个操作数不是布尔值，逻辑或也不一定返回布尔值；此时，它遵循下列规则：

         • 如果第一个操作数是对象，则返回第一个操作数；
         • 如果第一个操作数的求值结果为false，则返回第二个操作数；
         • 如果两个操作数都是对象，则返回第一个操作数；
         • 如果两个操作数都是null，则返回null；
         • 如果两个操作数都是NaN，则返回NaN；
         • 如果两个操作数都是undefined，则返回undefined。

    4. 乘性操作符：*,/,%

    5. 加性操作符：+,-

    6. 关系操作符：<,>,<=,>=

    7. 相等操作符：==,!=,===(全等，类型也一致)，!==(不全等)

    8. 条件操作符：?:

    9. 赋值操作符：=,*=,-=, $\cdots\cdots$

    10. 逗号操作符

    语句

    1. if语句

    2. do-while语句

    3. while语句

    4. for语句：在循环内部定义的变量也可以在外部访问到

    5. for-in语句：

       for (var key in keys){
       	alert(key);
       }
       

    6. label语句：

       //添加标签，以便将来使用
       label: statement
       start: for (var i=0; i < count; i++){
       	alert(i);
       }
       

    7. break与continue语句

    8. label语句与break、continue语句的联合使用：

       let num = 0;
       outcome:
       for(let i = 1; i <= 10; i++){
            for(let j = 1; j <= 10; j++){
                if(i === 5 && j === 5){
                    break outcome;//同时退出内部与外部循环
                 }
                 num++;
             }
       }//num:44
       
       let num1 = 0;
       outcome:
       for(let i = 1; i <= 10; i++){
           for(let j = 1; j <= 10; j++){
               if(i === 5 && j === 5){
                   continue outcome;//退出内层循环，执行外部循环
                }
                num1++;
            }
       }//num1:94
       

    9. with语句：关联某个对象

    10. switch语句：可以使用任何数据类型，case的值可以是变量和表达式

    函数

    function sayHi(name, message) {
         alert("Hello," + name + "," + message);
         return 1;
    }
    

    参数：ECMA函数的参数很自由，可以通过arguments来访问

    function sayHi() {
         alert("Hello," + arguments[0] + "," + arguments[1]);
         return 1;
    }
    

    不存在函数重载，若定义了两个名字相同的函数，则该名字只属于后定义的函数

变量、作用域和内存问题

1. instanceof操作符：alert(person instanceof Object); //person是Object吗？

2. 创建Object实例：

   var person = new Object();
   person.name = "Snow zhao";
   person.age = 18;
   
   // 对象字面量表示法
   var person = {
   	name: "Snow zhao",
   	age:18
   };
   
   //留空花括号
   var person = {};
   person.name = "Snow zhao";
   person.age = 18;
   //类似python字典类型
   

3. Array类型：

   var colors = new Array();
   var colors = new Array(20);//大小为20
   var colors = new Array("red", "purple", "orange");//添加元素
   
   //省略new
   var colors = Array(3);
   var colors = Array("black");
   
   //数组字面量表示法
   var colors = ["red", "white", "brown"];
   var colors = [];
   

   数组类型会自动更新数组大小

   var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组
   colors[99] = "black"; // （在位置99）添加一种颜色
   alert(colors.length); // 100, 位置3到98为undefined
   

   判断是否为数组类型：Array.isArray(value)

   数组的输出：

   var colors = Array("red", "white", "black");
   alert(colors);//red,green,blue
   alert(colors.toString());//red,green,blue
   alert(colors.valueOf());//red,green,blue
   alert(colors.toLocaleString());//不一定与toString方法相同
   alert(colors.join(","));//red,green,blue
   alert(colors.join("|"));//red|green|blue
   

   栈：

   var colors = new Array();
   var count = colors.push("red", "green");//压入栈， count = 2
   count = colors.push("black");//count = 3
   var item = colors.pop();//item = "black"
   

   队列：

   var colors = new Array("black", "white");
   var item = colors.shift(); //弹出队首项
   
   //unshift方法, 往队首添加元素，并返回长度
   colors.unshift("red");
   

   排序：

   let values = [1, 5, 4, 2, 3];
   values.sort();//1, 2, 3, 4, 5
   alert(values)
   values = [1, 5, 4, 2, 3];
   values.reverse();//3, 2, 4, 5, 1
   alert(values);
   values.reverse();//1, 5, 4, 2, 3
   alert(values);
   

   sort方法默认使用升序排列，且实现排序会调用toString方法，比较字符串来排序，如5会排在15之后。

   //sort函数
   function cmp(value1, value2){
           if(value1 <= value2){
               return 1;
           }
           else{
               return -1;
           }
       }
   let values = [1, 5, 4, 2, 3];
   values.sort(cmp);//5, 4, 3, 2, 1
   alert(values);
   //sort函数中的传递的函数与C++中的函数效果相反
   //reverse()与sort()方法的返回值是排序后的数组
   

操作方法：

   //concat() 复制原数组添加参数中的元素后返回，原数组不变
   let colors = ["red", "blue", "yellow"];
   let colors2 = colors.concat("green", ["black", 'white']);
   alert(colors2);//red,blue,yellow,green,black,white

   //slice()截取原数组，返回新数组，原数组不变
   let colors3 = colors.slice(1, 2);
   alert(colors3);//blue

   //splice()功能较为强大
   let colors3 = colors.splice(1, 2);//从第二项起删除两项
   let colors4 = colors.splice(0, 0, "blond", "brown");//从第一项起不删除，插入两项
   let colors5 = colors.splice(1, 1, "red", "purple");//从第二项起，删除一项，插入两项

位置方法：

   let nums = [1, 2, 4, 5, 6, 4, 2, 3, 4];
   alert(nums.indexOf(4));//第一个出现4的位置
   alert(nums.lastIndexOf(4));//倒着数第一个出现4的位置
   alert(nums.indexOf(4, 3));//从位置3开始第一个出现4的位置
   alert(nums.lastIndexOf(4, 6));//从位置6开始倒着数第一个出现4的位置

迭代方法：

• every()：对数组的每一项运行给定函数，若每一项都返回true，则返回true
• filter()：对数组的每一项运行给定函数，返回true的项构成的数组
• forEach()：对数组的每一项运行给定函数，没有返回值
• map()：对数组的每一项运行给定函数，返回每次函数调用结果组成的数组
• some()：对数组的每一项运行给定函数，对任意一项返回true,则返回true

   numbers = [1, 2, 3, 4, 5, 6, 7];
   let everycount = numbers.every(function (item, index, array) {
           return (item > 2);
   })
   alert(everycount);
   // 其余几个函数的参数类似

归并方法：

• reduce()：从数组的第一项开始遍历到最后

• reduceRight():从数组的最后一项开始向前遍历到第一项

  //参数，一个函数，一个作为归并基础的初始值(可选)
  //函数接受4个参数：前一个值、当前值、项的索引和数组对象
  /*
  这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
  */
  let values = [1, 2, 3, 4, 5];
  let sum = values.reduce(function (prev, cur, index, array) {
          return prev + cur;
  });
  alert(sum);
  //第一次执行回调函数，prev 是1，cur 是2。第二次，prev 是3（1加2 的结果），cur 是3（数组的第三项）
  

4. Date类型：

   //创建date对象
   let now = new Date();
   //根据特定的时间创建日期对象
   let someDate = new Date(Date.parse("May 25, 2004"));
   //如果parse函数传入的字符串不合理，将返回NaN
   //直接将表示日期的字符串传给Date构造函数，会在后台调用Date.parse()函数
   //Date.UTC()的参数分别是年份、基于0的月份（一月是0，二月是1，以此类推）、月中的哪一天（1到31）、小时数（0到23）、分钟、秒以及毫秒数。
   let allFives = new Date(Date.UT)
   

   let start = Date.now();
   //do something
   let end = Date.now();
   let result = end - start;
   alert(result);
   
   let start = new Date();
   let end =  new Date();
   let result = end - start;
   alert(result);
   

   Date的类型的toLocaleString()和toString()方法在浏览器中有差别,valueOf()方法不返回字符串，而是返回日期的毫秒表示。因此可用比较操作符来比较两个Date对象。

   Date 类型还有一些专门用于将日期格式化为字符串的方法，这些方法如下。

   • toDateString()——以特定于实现的格式显示星期几、月、日和年；
   • toTimeString()——以特定于实现的格式显示时、分、秒和时区；
   • toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年；
   • toLocaleTimeString()——以特定于实现的格式显示时、分、秒；
   • toUTCString()——以特定于实现的格式完整的UTC 日期。

5. RegExp类型

   用于支持正则表达式

   字面量构造

   var expression = /pattern /flags;

   使用RegExp类型构造正则表达式：

   var pattern = new RegExp("[bc]at", 'i');

   	let re = null, i;
       for(i = 0; i < 10; i++){
           re = /cat/g;
           re.test("catastrophe");
       }
   
       for(i = 0; i < 10; i++){
           re = new RegExp("cat", "g")
           re.test("catastrophe");
       }
   

   RegExp实例属性：

   • global：布尔值，表示是否设定了g标志
   • ignoreCase：布尔值，i标志
   • lastIndex：整数，表示开始搜索下一个匹配项的字符位置，从0开始
   • multiline：布尔值，m标志
   • source：正则表达式的字符串，按照字面量的形式

   exec()方法：

   let text = "mom and dad and baby";
   let pattern = /mom( and dad( and baby)?)?/gi;
   let matches = pattern.exec(text);
   alert(matches.index); // 0
   alert(matches.input); // "mom and dad and baby"
   alert(matches[0]); // "mom and dad and baby"
   alert(matches[1]); // " and dad and baby"
   alert(matches[2]); // " and baby"
   

   在全局模式下index才会改变

   test()方法：匹配返回true,否则返回false

   toString()和toLocaleString()都返回正则表达式的字面量

   RegExp构造函数的属性

let re = /(.)hort/g;
let text = 'this had been a short summer';
if(re.test(text)){
        alert(RegExp.input);
        alert(RegExp.leftContext); // this has been a
        alert(RegExp.rightContext); // summer
        alert(RegExp.lastMatch); // short
        alert(RegExp.lastParen); // s
        alert(RegExp.multiline); //undefined
}

6. Function类型

   var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐
   

   function sum(num1, num2){
   	return num1 + num2;
   }
   alert(sum(10,10)); //20
   
   var anotherSum = sum;
   alert(anotherSum(10,10)); //20
   
   sum = null;
   alert(anotherSum(10,10)); //20
   

   函数表达式与函数声明

   //函数声明
   alert(sum(10,10));
   function sum(num1, num2){
   	return num1 + num2;
   }//ok, 代码执行之前会将函数声明提升到顶部
   
   //函数表达式
   alert(sum(10,10));
   var sum = function(num1, num2){
   	return num1 + num2;
   };//runtime error
   

   函数作为参数传递：

   function add(num1, num2){
           return num1 + num2;
   }
   
   function callSomefunction(some, number, number2) {
           return some(number, number2);
   }
   
   let result = callSomefunction(add, 1, 2);
   alert(result);//3
   

   arguments.callee消除紧密耦合

   function factorial(num){
   	if (num <=1) {
   		return 1;
   	} else {
   		return num * arguments.callee(num-1)
   	}
   }
   var trueFactorial = factorial;
   factorial = function(){
   	return 0;
   };
   alert(trueFactorial(5)); //120
   aler t(factorial(5)); //0
   //倘若将arguments.callee换成factorial的话，在调用trueFactorial函数递归时仍然会使用factorial函数,就会导致达不到我们想要的结果
   

   this对象

   函数的名字仅仅是一个包含指针的变量而已

   函数对象的属性：caller，保存调用当前函数的函数的引用

   let inner = function () {
           alert(arguments.callee.caller);
   };
   function outer(){
           inner();
   }
   outer();//将显示outer函数的源代码
   //在严格模式下访问arguments.callee, arguments.caller都会导致错误
   

   函数对象的属性与方法：

   length：函数接受的参数个数

   apply()：在特定的作用域中调用函数

   call()：调用函数

   //apply()接受两个参数，一个是在其中运行函数的作用域，另一个是参数数组，第二个参数可以是Array的实例，也可以是arguments对象
   function sum(num1, num2){
   	return num1 + num2;
   }
   function callSum1(num1, num2){
   	return sum.apply(this, arguments); // 传入arguments 对象
   }
   function callSum2(num1, num2){
   	return sum.apply(this, [num1, num2]); // 传入数组
   }
   alert(callSum1(10,10)); //20
   alert(callSum2(10,10)); //20
   //在严格模式下，未指定环境对象而调用函数，则this值不会转型为window（全局对象）。除非明确把函数添加到某个对象或者调用apply()或call()，否则this值将是undefined。
   
   //call()方法和apply()方法的区别在于参数的接收方式，call()方法传递的参数必须逐个列举出来
   

   bind()：将this值绑定到传给bind()函数的值

7. 基本包装类型

   三个特殊的引用类型：Boolean,Number,String

   var value = "25";
   var number = Number(value); //转型函数
   alert(typeof number); //"number"
   var obj = new Number(value); //构造函数
   alert(typeof obj); //"object"
   let falseObject = new Boolean(false);
   let numberObj = new Number(10);
   let num = 10;
   alert(num.toFixed(2));//"10.00", 按指定的小数位返回数值的字符串表示，有自动舍入的特性
   alert(num.toExponential(1));//返回以指数表示法表示的数值的字符串形式，接受一个参数，指定输出结果中的小数位数
   let num2 = 99;
   alert(num2.toPrecision(1));//一位有效数字
   alert(num2.toPrecision(2));//两位有效数字
   alert(num2.toPrecision(3));//三位有效数字
   

String类型的字符方法：charAt()和charCodeAt()，还可以直接通过方括号索引的方法来访问字符串中的字符

操作方法：

• concat()：加起来
• slice()：第一个参数指定子串的开始位置，第二个参数为子串最后一个字符后面的位置
• substr()：第一个参数指定子串的开始位置，第二个参数为返回的字符个数
• substring()：取子串

在传递给这些方法的参数是负值的情况下，它们的行为就不尽相同了。其中，slice()方法会将传入的负值与字符串的长度相加，substr()方法将负的第一个参数加上字符串的长度，而将负的第二个参数转换为0。最后，substring()方法会把所有负值参数都转换为0。

var stringValue = "hello world";
alert(stringValue.slice(-3)); //"rld"
alert(stringValue.substring(-3)); //"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4)); //"lo w"
alert(stringValue.substring(3, -4)); //"hel"
alert(stringValue.substr(3, -4)); //""（空字符串）

位置方法：indexOf,lastIndexOf

trim方法返回字符串的副本（将删除前置和后缀的所有空格）

大小写转换方法：

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase()); //"HELLO WORLD"
alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase()); //"hello world"
alert(stringValue.toLowerCase()); //"hello world"

模式匹配方法：

let text = 'cat, bat, sat, fat, great';
let pattern = /.at/;
let matches = text.match(pattern);
alert(matches.index);
alert(matches[0]);
alert(pattern.lastIndex);
let pos = text.search(/at/);
let result1 = text.replace('at', 'ond');
let result2 = text.replace(/at/g, 'ond');
alert(result1);
alert(result2);

function htmlEscape(text){
        return text.replace(/[<>"&]/g, function(match, pos, originalText){
            switch(match){
                case "<":
                    return "&lt;";
                case ">":
                    return "&gt;";
                case "&":
                    return "&amp;";
                case "\"":
                    return "&quot;";
            }
        });
}
alert(htmlEscape("<p class=\"greeting\">Hello world!</p>"));//&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;

split()方法：

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

localeCompare()方法：比较字符串a.localeCompare(b), a<b返回-1，a=b返回0，a>b返回1

fromCharCode()方法：

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

8. 单位内置对象

   Object,Array,String等

   • Global对象

     不属于任何其他对象的属性和方法，最终都是它的属性和方法。

     如isNaN(),isFinite(),parseInt(),parseFloat()等都是Global对象的方法。

     URI编码方法：

     encodeURI()主要用于整个URI（例如，http://www.wrox.com/illegal value.htm），而encode-URIComponent()主要用于对URI 中的某一段（例如前面URI 中的illegal value.htm）进行编码。它们的主要区别在于，encodeURI()不会对本身属于URI 的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码。来看下面的例子。

     var uri = "http://www.wrox.com/illegal value.htm#start";
     //"http://www.wrox.com/illegal%20value.htm#start"
     alert(encodeURI(uri));
     //"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
     alert(encodeURIComponent(uri));
     

     eval()方法

     将传入的参数当作语句来解析

     在eval()中创建的任何变量或函数都不会被提升，因为在解析代码的时候，它们被包含在一个字符串中；它们只在eval()执行的时候创建。严格模式下，在外部访问不到eval()中创建的任何变量或函数，
     同样，在严格模式下，为eval 赋值也会导致错误。

     global对象的属性：

window对象

取得Global对象的方法：

   let global = function () {
       return this;
   }();

Math对象：

var max = Math.max(3, 54, 32, 16);
alert(max); //54
var min = Math.min(3, 54, 32, 16);
alert(min); //3

//找到数组中的最大值
let values = [1, 3, 6, 5, 2];
let max = Math.max.apply(Math, values);
alert(max);

//ceil(),floor(),round()等舍入方法
//random()方法，返回大于等于0小于1的随机数

其他方法：

这只是我Javascript笔记中的一小部分，我接下来会陆陆续续更新完我的笔记

如果您觉得我的文章对您有帮助的话，可以点个赞，点个关注，也可以扫描下方二维码关注我。我将在这个公众号上更新自己的学习笔记，以及分享一些实用的软件！

Study and progress together with me!