Javascript 基础

发表于   |   分类于   |     |   阅读次数   |  

JavaScript是前端工程师必备的技能之一，也是基础中的基础，但是我本人又是个不太重视基础的人，这就导致我在写代码的时候，总会忘记这该怎么写，或者在面试的时候，被问及原理或者基础的语法的时候，总是语塞，而且近几年JavaScript的发展很快，有统治全世界的架势，这也就是为什么我要写这篇文章的原因，让我们一步一步来，坚实的地基才会盖得起高楼大厦。

JavaScript 介绍

JavaScript是一种可以用来给网页增加交互性的编程语言，现在也被用于网络服务器（非浏览器环境），如Node.js。
JavaScript分为三部分，ECMAScript（JavaScript核心语音）、DOM（文档对象模型）和BOM（浏览器对象模型）。ECMAScript，描述了该语言的语法和基本对象。DOM，描述处理网页内容的方法和接口。BOM，提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。

ECMAScript是由ECMA TC39委员会进行标准化的一门编程语言，规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器，现在最新版本是ECMAScript 6.0。

DOM是“ Document Object Model ”的缩写，简称“文本对象模型”，定义了 JavaScript 操作 HTML 文档的接口，提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法，通过调用DOM树上对象的方法可以操纵这些对象。

BOM 是“ Browser Object Model ”的缩写，简称“ 浏览器对象模型 ”，定义了 JavaScript 操作浏览器的接口，提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法。

基础

  • 变量名必须以字母、$、_开头
  • 定义了的变量没有赋值，会有个默认值undefined
  • 变量可以存储两种类型的值，原始值和引用值
  • 原始值：Undefined、Null，Boolean、Number、String
  • 特殊值：NaN，会发生在类型转换失败时
  • 字符串转换：toString()方法，Number转换时加的参数可以是2、8、10（默认）、16，分别转换成二进制、八进制、十进制、十六进制字符串，数组转换时，会变成用“ , ”连接的字符串，String()与toString()的唯一区别是对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误
  • 数字转换： parseInt()、parseFloat()，转换的是部分数值如：parseFloat("123end")结果为123，而Number("123end")结果为NaN
  • Boolean转换：Boolean()，除了空串、null、数字 0、undefined 或 null，它将返回 false，其他都是true
  • Object对象，所有对象都由这个对象继承，Object对象里的所有属性和方法都会出现在其他的对象中，因此学习Object对象很重要。

Object对象

Object对象，所有对象都由这个对象继承，Object对象里的所有属性和方法都会出现在其他的对象中，因此学习Object对象很重要。
Object对象常见的属性：

  1. constructor，指向原始的Object()函数，如var test = new Array(); test.constructor == Array 返回true；
  2. Prototype，它默认返回 Object 对象的一个实例，使您有能力向对象添加属性和方法，如Array.prototype.dd = "33"; var test = new Array(); console.log(test.dd); 结果就是”33”,注意先后顺序；
  3. hasOwnProperty，判断对象是否有某个特定的属性，必须用字符串指定该属性，而且是自身属性，如上记2的例子中，test.hasOwnProperty("dd"); 返回的是false；
  4. isPrototypeOf，判断该对象是否为另一个对象的原型，如 var test = new Array(); Array.prototype.isPrototypeOf(test) 返回true；

Array 对象

Array 对象用于在单个的变量中存储多个值，也是常用的对象，所以在这里单列出来。

  • 创建数组的方法：

    1. var arr = ["a", "b", "c"]; （推荐）
    2. var arr = new Array(3); arr[0] = "a"; arr[1] = "b"; arr[2] = "c"
    3. var arr = new Array("a", "b", "c");

  • Array 对象常用方法：

    1. concat()，连接两个或更多的数组，并返回结果。如 var arr1 = [1, 2, 3]; var arr2 = [4, 5]; arr1.concat(arr2); 结果输出是[1,2,3,4,5], 需要注意的是arr1和arr2是不变的；
    2. join(), 把数组的所有元素放入一个字符串, 元素通过指定的分隔符进行分隔。如 var arr = [1, 2, 3]; arr.join(".");返回结果是”1.2.3”；
    3. pop(), 删除并返回数组的最后一个元素。如 var arr = [1, 2, 3]; arr.pop();返回删除的最后一个元素 3， 注意的是，此时的arr已经没有了最后一个元素，console.log(arr);结果是[1, 2]；
    4. push(), 可向数组的末尾添加一个或多个元素，并返回新的长度。如 var arr = ["a", "b", "c"]; arr.push("d");结果是4, 注意此时的arr已经多了一个元素，console.log(arr);结果是[“a”, “b”, “c”，”d”]；
    5. reverse(),颠倒数组中元素的顺序。如 var arr = [1, 2, 3]; arr.reverse(); 返回的结果是[3, 2, 1], 注意此时的arr已经改变了，console.log(arr);结果是[3, 2, 1]；
    6. shift(),删除第一个元素，并返回刚才删除的第一个元素的值。如 var arr = [1, 2, 3]; arr.shift(); 返回的结果是1, 注意此时的arr已经改变了，console.log(arr);结果是[2, 3]；
    7. slice(), 从已有的数组中返回选定的元素。有两个参数，start和end，开始和结束的位置，当只有一个参数时，默认end是最后，如 var arr = [1, 2, 3]; arr.slice(1); 返回的是[2, 3], 负值时，从尾部开始计算，如 var arr = [1, 2, 3]; arr.slice(-1); 返回的结果是[3], 注意该方法返回的是字数组，不会改变原来的数组；
    8. splice(), 从数组中添加/删除项目，然后返回被删除的项目, 该方法有三个参数，index：必须，整数，添加或删除项目的位置，howmany：必须，要删除的项目数量，设置为0时，不会删除，item1,…,item2：可选，向数组添加的新项目，如 var arr =[1, 2, 3]; arr.splice(0, 1); 返回结果是[1],删除了第一个项目，注意此时的arr已经改变了，console.log(arr);结果是[2, 3]，var arr =[1, 2, 3]; arr.splice(2, 0, 4, 5);返回的结果是[], console.log(arr);结果是[1, 2, 4, 5, 3]，此时应该注意的是splice和slice的区别；

String 对象

String对象也就是存数字符串的，下面的方法是最常用的也是最容易混淆的。

  • String 对象常用方法：

    1. charAt()，返回指定位置的字符。该方法有一个位置参数，如var str = "Hello May"; str.charAt(6);结果是”M”，如果参数不在0和string.length之间，将返回空串；
    2. indexOf()， 返回指定的字符串在在字符串中首次出现的位置。该方法有俩参数，searchvalue：必须，要检索的字符串，fromindex：可选，开始检索的位置，如果参数不在0和string.length之间，将从头开始检索。如 var str = "Hello May"; str.indexOf("M");结果是6，var str = "Hello May"; str.indexOf("M", 7);结果是-1，找不到该字符串时，返回结果为-1；
    3. lastIndexOf()，与indexOf()方法相反，返回最后一个出现的位置；
    4. match()，在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。参数，必须，可以是要检索的字符串，也可以是要匹配的正则表达式。如 var str = "Hello May"; str.match("May"); 返回的结果是[“May”], var str = "Hello May"; str.match(/\d+/g);结果就是null；
    5. replace(), 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。如 var str = "Hello World"; str.replace("World", "May"); 结果返回”Hello May”，注意的是，此时arr没有被改变，console.log(str);结果是”Hello World”；
    6. split()，把一个字符串分割成字符串数组。该方法有两个参数，separator：必须，要分割的字符串或正则表达式，howmany：可选，指定返回数组的最大长度。如 var str = "How are you?"; str.split(" ", 2); 返回结果是[“How”, “are”]；
    7. substr()，在字符串中抽取从指定下标开始的指定数目的字符（包括开始下标位置的字符）。该方法有俩参数，start：必须，要抽取的子串下标，可以是负数，-1是最后一个字符，length：可选，子串中的字符数，必须是正整数。如 var str = "Hello World"; str.substr(5);返回的结果是” World”,var str = "Hello World"; str.substr(5, 4);返回结果是” Wor”，找不到的情况下返回空串。
    8. substring()，提取字符串中介于两个指定下标之间的字符。与substr()不同，两个参数分别为开始和结束的下标，并且不接受负值。

RegExp 对象

正则表达式是被用来匹配字符串中的字符组合的模式，被用于RegExp 的exec和test方法以及 String 的 match、replace、search 和 split 方法，用到的地方很多，也不好理解，所以要慢慢消化了。

  • 创建正则表达式：

    1. var re = /ab+c/;
    2. var re = new RegExp("ab+c");

  • 匹配方法：

    1. 使用简单的模式，如/abc/，只会匹配有字符串”abc”顺序出现的字符串。

    2. 使用特殊字符

      • 修饰符

        1. i: 不区分大小写匹配
        2. g: 全局匹配
        3. m: 多行匹配

      • 方括号(用于匹配某个范围内的字符)

        1. [abc]: 匹配方括号之间的任何字符
        2. [^abc]: 匹配不在方括号之间的任何字符
        3. (red|blue|grenn): 匹配任何指定的选项

      • 元字符

        1. .: 匹配除了换行和结束符以外的其他单个字符
        2. \w: 匹配单词字符(字母、数字、下划线)
        3. \W: 匹配非单词字符
        4. \d: 匹配数字
        5. \D: 匹配非数字
        6. \s: 匹配空白字符
        7. \S: 匹配非空白字符
        8. \b: 匹配单词边界
        9. \B: 匹配非单词边界

      • 量词

        1. n+: 匹配包含一个或多个字符n的字符串
        2. n*: 匹配包含0个或多个字符n的字符串
        3. n?: 匹配包含0个或一个字符n的字符串
        4. n{X}: 匹配含有X个n的字符串
        5. n{X,Y}: 匹配含有X到Y个n的字符串
        6. n{X,}: 匹配至少X个n的字符串
        7. n$: 匹配以n结尾的字符串
        8. ^n: 匹配以n开头的字符串
        9. ?=n: 匹配任何其后紧跟指定字符串n的字符串
        10. ?!n: 匹配其后没有紧跟指定字符串n的字符串
坚持原创技术分享，您的支持将鼓励我继续创作！