zoukankan      html  css  js  c++  java
  • [ JavaScript ] 基础知识

    1. 数据类型

    (1)Number

    JavaScript 不分区整数和浮点数,统一用Number表示,以下都是合法的Number类型:

    123; // 整数123
    0.456; // 浮点数0.456
    1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
    -99; // 负数
    NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
    Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
    

    Number可以直接做四则运算,规则和数学一致:

    1 + 2; // 3
    (1 + 2) * 5 / 2; // 7.5
    2 / 0; // Infinity
    0 / 0; // NaN
    10 % 3; // 1
    10.5 % 3; // 1.5
    

    (2)字符串

    字符串是以 单引号 或 双引号括起来的任意文本。比如: 'abc', 'xyz' 等等。

    (3)布尔值

    一个布尔值只有 true、false 两种值。

    && 表示 与 的关系,只有所有都为 true,&&运算结果才是true
    || 表示 或 的关系,只要其中一个为 true,则 || 结果为 true
    ! 运算是非运算,是把 true 变为 false, false 变为 true
    

     布尔值经常用于条件判断中:

    var age = 15;
    if (age >= 18) {
        alert('adult');
    } else {
        alert('teenager');
    }
    

    (4) 比较运算符

    当我们对 Number 做比较时,可以通过运算符得到一个布尔值:

    2 > 5; // false
    5 >= 2; // true
    7 == 7; // true

    == 和 === 的区别

    第一种 == 比较,它会自动转换数据类型再比较,很多时候,会得到非常奇怪的结果;

    第二种 === 比较,它不会自动转换数据类型,如果数据类型不一致,返回 false,如果一致,再比较。

    有这两种不同的结果,因此在比较中,应当坚持使用 ===

    null 和 undefined 的区别

    null 是一个 ‘空’ 的值,它和0以及空字符串 ‘’ 不同,0是一个数值,‘’表示长度为0的字符串,而null表示‘空’。

    在 javascript 中,null表示一个空值,而 undefined 表示值未定义。在大多数情况下,我们都应该用 null,undefined 仅仅在判断函数参数是否传递的情况下有用。

    (5)数组

    数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript的数组可以包括任意数据类型

    两种创建数组的方式:

    var arr = [1, 2, 3.14, 'Hello', null, true];
    var arr1 = new Array(1,2,3);
    

    处于代码的可读性考虑,强烈建议采用直接赋值的方式(第一种方式)

     数组的元素可以通过索引来访问。索引的起始值为 0 :

    (6)对象

    JavaScript的对象是一组由键-值组成的无序集合,例如:

    var person = {
        name: 'Bob',
        age: 20,
        tags: ['js', 'web', 'mobile'],
        city: 'Beijing',
        hasCar: true,
        zipcode: null
    };
    

     JavaScript对象的键都是字符串类型,值可以是任意数据类型。

     要获取对象的属性,用 对象变量.属性名 的方式:

    (7)变量

    变量不仅可以是数字,还可以是任意数据类型。

    var a; // 申明了变量a,此时a的值为undefined
    var $b = 1; // 申明了变量$b,同时给$b赋值,此时$b的值为1
    var s_007 = '007'; // s_007是一个字符串
    var Answer = true; // Answer是一个布尔值true
    var t = null; // t的值是null
    

    在JavaScript中,使用等号 = 对变量进行赋值。可以把任意数据类型赋值给变量,同一个变量可以反复赋值,而且可以是不同类型的变量,但是要注意只能用var申明一次。

    要显示变量的内容,可以使用 console.log(x)打印

    var a = 'beijing';
    
    console.log(a);
    VM714:1 beijing
    

    1.1 字符串

     JavaScript的字符串就是用''""括起来的字符表示。

     多行字符串用反引号表示:

     模板字符串

    要把多个字符串连接起来,可以用+号连接:

    如果有很多变量需要连接,用+号就比较麻烦。ES6新增了一种模板字符串,表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量:

    操作字符串

     (1) 计算字符串的长度

    var a = 'hello world.';
    
    a.length
    12
    

     (2)获取字符串指定位置的字符,使用索引号来操作

    var a = 'hello world.';
    a[4]
    "o"
    a[10]
    "d"
    

    需要注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误。因此字符串的常用方法并不会改变原字符串内容,而是返回一个新的字符串

    var s = 'test';
    
    s[0] = 'T';
    "T"
    s
    "test"
    

    (3)toUpperCase

    toUpperCase()把一个字符串全部变为大写:

    var s = 'Hello';
    
    s.toLocaleUpperCase();
    "HELLO"
    

    (4)toLowerCase

    toLowerCase()把一个字符串全部变为小写:

    var s = 'Hello';
    
    s.toLocaleLowerCase();
    "hello"
    

    (5)indexOf

    indexOf()会搜索指定字符串出现的位置:

    (6)substring

    substring()返回指定索引区间的子串:

    (7)slice

    slice() 方法可从已有的数组中返回选定的元素。

    slice() 、substring() 、substr() 三者比较使用总结如下:

    string.slice(x, y) 提取一个字符串;

    string.substring(x, y) 提取一个字符串,但是 y 不能为 负数;

    string.substr(x, y) 提取一个长度为 y 的字符串。

    实例:

    1.2 数组

    javascript 中的 数组 可以包含任意数据类型,并通过索引来访问每个元素。

    要取得 数组的长度,直接使用 length 属性:

    注意:不要随便给 Arry.length 赋值,否则会造成 数组元素的变化;

     Array可以通过索引把对应的元素修改为新的值,因此,对Array的索引进行赋值会直接修改这个Array

     

    数组常用方法

    (1)indexOf

    与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置:

    (2)slice

    slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array

    注意:在 Array(数组)中无法使用 substring()

    如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array

    (3)push 和 pop

    push() 向 Array 的末尾追加若干个元素,pop() 则把 Array 的最后一个元素删除:

    (4)unshift 和 shift

    如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

     

    (5)sort

    sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序:

    (6)reverse

    reverse()把整个Array的元素给掉个个,也就是反转:

     

     (7) splice

    splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

    var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
    // 从索引2开始删除3个元素,然后再添加2个元素
    arr.splice(2, 3, 'Google', 'Facebook');
    (3) ["Yahoo", "AOL", "Excite"]
    arr;
    (5) ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]
    
    // 只删除,从索引为2开始,删除2个元素
    arr.splice(2, 2);
    (2) ["Google", "Facebook"]
    arr
    (3) ["Microsoft", "Apple", "Oracle"]
    
    // 不删除,只添加,从索引为2的位置删除0个元素,并添加2个元素
    arr.splice(2, 0, 'Google', 'Facebook');
    []
    arr;
    (5) ["Microsoft", "Apple", "Google", "Facebook", "Oracle"]
    

     (8)concat

    concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array

     

    注意:concat() 方法并没有修改当前 Array,而是返回了一个新的Array。

    实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:

     

    (9)join

    join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

     

    如果Array的元素不是字符串,将自动转换为字符串后再连接。

    (10)多维数组

    如果数组的某个元素又是一个Array,则可以形成多维数组,例如:

    var arr = [[1, 2, 3], [400, 500, 600], '-'];
    

     如果需要取 500 的值:

     小结

    Array(数组)提供了按照顺序存储一组元素的功能,并可以通过索引取值来读写。

    练习题-1:

    在新生欢迎会上,你已经拿到了新同学的名单,请排序后显示:欢迎XXX,XXX,XXX和XXX同学!

    var arr = ['小明', '小红', '大军', '阿黄'];
    console.log('欢迎' + arr.slice(0, 3) + '和' + arr.slice(3) + '同学!');
    

    1.3 对象

    JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。
    JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:

    var xiaoming = {
        name: '小明',
        birth: 1990,
        school: 'No.1 Middle School',
        height: 1.70,
        weight: 65,
        score: null
    };
    

    JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。

    注意:最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

    通过对象获取值:

    访问一个对象不存在的属性时,返回 undefined

    访问属性是通过 . 操作完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用 'xxx' 括起来:

    在日常使用中,一般建议使用 对象.name 的方式来获取值。

    JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型。

    由于JavaScript的对象是动态类型,你可以自由地给一个对象添加或删除属性:

    如果我们要检测xiaoming是否拥有某一属性,可以用in操作符:

    不过要小心,如果in判断一个属性存在,这个属性不一定是xiaoming的,它可能是xiaoming继承得到的:

    因为toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以xiaoming也拥有toString属性。

     要判断一个属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:

    1.4 条件判断

    JavaScript使用if () { ... } else { ... }来进行条件判断。例如,根据年龄显示不同内容,可以用if语句实现如下:

    多条件判断

     如果判断过多,可以使用多个 if ... else ... 的组合:

    JavaScript把nullundefined0NaN和空字符串''视为false,其他值一概视为true,因此上述代码条件判断的结果是true。 

    练习-1:

    小明身高1.75,体重80.5kg。请根据BMI公式(体重除以身高的平方)帮小明计算他的BMI指数,并根据BMI指数:

    • 低于18.5:过轻
    • 18.5-25:正常
    • 25-28:过重
    • 28-32:肥胖
    • 高于32:严重肥胖
    var height = parseFloat(prompt('请输入身高(m):'));
    var weight = parseFloat(prompt('请输入体重(kg):'));
    
    var bmi = weight / height**2;
    console.log(bmi);
    
    // 通过逻辑判断,在if条件判断中,只要满足其中一个if (条件) 则终止判断
    if (bmi < 18.5) {
        alert('过轻');
    } else if (bmi < 25 ) {
        alert('正常')
    } else if (bmi < 28) {
        alert('过重')
    } else if (bmi < 32) {
        alert('肥胖')
    } else {
        alert('严重肥胖')
    }
    

    1.5 循环

    JavaScript的循环有两种:

      (1)通过 for 循环,通过初始条件、结束条件和递增条件来循环执行语句块:

      (2)通过while 循环,在已知循环的初始和结束条件时非常有用

    (1) for 循环

    利用 for 循环计算 1 * 2 * 3 * ... * 10 的结果:

    var x = 1;
    var i;
    for (i=1; i <=10; i++) {
      x *= i;
    }
    

    for 循环最常用的地方是利用索引来遍历数组:

    for (var i=0; i<arr.length; i++) {
        console.log(arr[i]);
    };
    

    如果使用 for 循环没有明确的退出条件,则必须使用 break 来退出:

    var x = 0;
    for (;;) { // 将无限循环下去
        if (x > 100) {
            break; // 通过if判断来退出循环
        }
        x ++;
    }
    

    for ... in

      for ... in 是把一个对象的属性依次循环出来:

    要过滤掉继的属性,用 hasOwnProperty() 来实现:

    注意:在使用 for 循环遍历 Array(数组)时,有两种方式:

    (1)通过 for ... in 遍历数组的索引位置(在循环遍历索引的时候,得到的string类型,而不是Number)

    (2)通过 for ... of 遍历数组的值(无法遍历对象类型)

    (1)

    (2)

     (2)while 循环

     while 循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。

    求:1-100之和

    do ... while

    这种循环不是在循环开始就进行条件判断,而是在循环完成的时候进行条件判断(这种循环模式不常用)

     小结

    循环是为了做重复的事情,在编写代码时,必须要小心初始条件和判断条件,尤其是边界值 。 i < 100 或 i <= 100 是不同的判断逻辑。

    1.6 Map 和 Set

    JavaScript的默认对象表示方式{}可以视为其他语言中的MapDictionary的数据结构,即一组键值对。但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map

    (1)Map

    Map 是一组键值对的结构,具有极快的查询速度。

    创建一个 Map:

    初始化Map需要一个二维数组,或者直接初始化一个空MapMap具有以下方法:

     

    可以看到,如果将值删除,再通过 m.get() 获取的话,返回的是 undefined

    (2)Set

    SetMap类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

     要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

    重复元素在 Set 中 自动被过滤掉:

     可以通过 s1.add(xxx) 来添加元素,如果添加的重复,则不会有任何变化。

    最后,也可以通过 delete 删除 Set中的元素:

    小结

     Map 和 Set 是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

    1.7 iterable

    遍历Array可以采用下标循环,遍历MapSet就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,ArrayMapSet都属于iterable类型。

    具有iterable类型的集合可以通过新的for ... of循环来遍历。

    使用 for ... of 遍历如下:

    然而,更好的方式是直接使用 iterable 内置的 forEach 方法,它接收一个函数,每次迭代就自动回调该函数。以 Array为例:

    a.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });
    

    1.8 JavaScript 三元运算

    (condition) ? (expr2) : (expr3)
    (判断条件) ? (当条件判断为 true 返回该结果) : (当条件判断为 false 返回该结果)

     在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。

  • 相关阅读:
    3. 技术专题
    3. 技术专题
    1. 个人经验总结
    2. 阿里巴巴Java开发手册主题
    自动化构建工具演化、对比、总结
    2. 阿里巴巴Java开发手册主题
    (转)高并发高流量的大型网站架构设计(二)
    (转)高并发高流量的大型网站架构设计(一)
    (转)可伸缩性最佳实践:来自eBay的经验
    (转)Application, Session, Cookie, Viewstate, Cache对象用法和区别
  • 原文地址:https://www.cnblogs.com/hukey/p/10932417.html
Copyright © 2011-2022 走看看