zoukankan      html  css  js  c++  java
  • JavaScript复习总结一(入门)

    总是执着想学各种框架,但忘了基础学好才最重要。每次打开菜鸟教程想重温基础内容,然后就像翻开英文字典,永远在abandon...还是需要做个笔记。

    一来加深学习印象,二来等下次打开学习可以知道自己上次学到哪里了。就不至于abandon了。

    JS可以放在任何地方,通常放在<head> <script></script> </head>中,或者外部引入

    JS调试可在Chrome浏览器 --> 开发者工具 --> Console控制台 中使用Console.log(); 打印查看内容

    基本语法

    每个语句以;结尾,中间语句块使用{...}

    //...为行注释,/* ... */为块注释

    JavaScript严格区分大小写

    数据类型和变量

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。(Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。)

    引用数据类型:对象(Object)、数组(Array)、函数(Function)。

    JS中数值类型不区分整数和浮点数,统一用Number。
    字符串用 单引号 双引号
    布尔值 true false
    比较运算符 > >= ==

    要特别注意相等运算符==。JavaScript在设计时,有两种比较运算符:

    第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;// false==0 (结果为true)

    第二种是===比较,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。// false===0 (结果为false)

    由于JavaScript这个设计缺陷,不要使用==比较,始终坚持使用===比较

    另一个例外是NaN这个特殊的Number与所有其他值都不相等,包括它自己 // NaN === NaN; (结果为false)

    唯一能判断NaN的方法是通过isNaN()函数 // isNaN(NaN); (结果为true)

    最后要注意浮点数的相等比较

    1 / 3 === (1 - 2 / 3); // false
    这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值:

    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

    null表示空,与0' '不同,0是数值,' '表示长度为0的字符串。

    数组

    [1,2,3,null,'hello'] 或 new Array(1,2,3);//创建 [1,2,3] 的数组
    var arr=[1,2,3,null,'hello']; //arr(0) 返回为1 ,arr(4) 返回为hello

    对象

    以键-值方式组成的无序集合

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

    获取对象的属性
    person.name;//Bob

    变量

    变量名是大小写英文、数字、$和_的组合,且不能用数字开头,也不能是关键字。

    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
    

    操作字符串

    var s = 'Hello, world!';
    s.length; // 13
    

    需要特别注意的是,字符串是不可变的,如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果:

    var s = 'Test';
    s[0] = 'X';
    alert(s); // s仍然为'Test'
    

    JavaScript为字符串提供了一些常用方法,注意,调用这些方法本身不会改变原有字符串的内容,而是返回一个新字符串:

    toUpperCase() //转为大写

    var s='hello world'; var up=s.toUpperCase();

    toLowerCase() //转为小写

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

    var s = 'hello, world';
    s.indexOf('world'); // 返回7
    s.indexOf('World'); // 没有找到指定的子串,返回-1
    

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

    var s = 'hello, world'
    s.substring(0, 5); // 从索引0开始到5(不包括5),返回'hello'
    s.substring(7); // 从索引7开始到结束,返回'world'
    

    slice是对应字符串(String)的substring()版本

    push()向数组(Array)的末尾添加元素,pop()则是把末尾最后一个元素删除

    var arr=[ 1 , 2 ];
    arr.push('A' , 'B');
    console.log(arr); //输出为[ 1, 2, A, B]
    console.log(arr.pop()); // 输出为B
    console.log(arr); // 输出为[ 1, 2, A]
    

    unshift ()像数组头部添加元素,shift ()则是把头部第一个元素删除

    sort()对元素进行排序,直接调用时则默认顺序排列

    var arr=new Array(2, 5, 1, 8);
    console.log(arr.sort()); // 显示 1 2 5 8
    

    reverse()则是把顺序反转

    var arr = ['one', 'two', 'three'];
    arr.reverse(); 
    arr; // ['three', 'two', 'one']
    

    splice()从指定位置删除若干元素,再从该位置开始添加一些元素

    var arr=['Hello', 'This', 'And', ‘You’, 'Nice', 'To', 'meet'];
    arr.splice(1, 3, 'World', '!'); // 表示从下标为1的元素开始,删除3个元素,添加两个元素,即删除了This,And,You
    arr; // ['Hello', 'World', '!', 'Nice', 'To', 'meet'];
    

    concat()将两个数组连接起来,返回一个新的数组

    var arr = ['A', 'B', 'C'];
    var added = arr.concat([1, 2, 3]);
    added; // ['A', 'B', 'C', 1, 2, 3]
    arr; // ['A', 'B', 'C']
    

    join()方法能将数组中的每个元素都连接起来

    var arr = ['A', 'B', 'C', 1, 2, 3];
    arr.join('-'); // 'A-B-C-1-2-3'
    

    多维数组

    var arr = [[1, 2, 3], [400, 500, 600], '-'];//该数组包含3个元素,其中头两个元素本身也是Array数组
    

    对象

    javascript的对象是一种无序的集合数据类型,由一些键值对组成

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

    使用{...}来表示一个对象,属性名:值的方式来表示,使用,来隔开,最后一个不需要加,因为容易造成低版本浏览器的不兼容。

    xiaoming.name;//获取到`小明`这个值
    xiaoming.weight;//获取到`65`
    

    属性名若是特殊字符,则用' '引号表示起来

    var xiaohong = {
        name: '小红',
        'middle-school': 'No.1 Middle School'
    };
    

    获取该特殊属性的方式如下:

    xiaohong['middle-school']; //获取到'No.1 Middle School'
    xiaohong['name'];   xiaohong.name;   //这两种方式都获取到值`小红`
    

    当访问一个不存在的属性时,返回为undefined;例如xiaohong.age;将提示undefined

    javascript的对象是动态的,即可以自由的为其对象进行增加/删除属性
    如上方获取xiaohong.age;将提示undefined。
    当给其赋值 xiaohong.age=18; 再输出 xiaohong.age; 则获取到值18
    删除属性: delete xiaohong.name;

    检测该对象是否拥有该属性可使用in
    'name' in xiaohong; //返回true
    'age' in xiaohong; //false
    使用in判断出的属性也可能是该对象由继承得到的。

    要判断该属性是否其自身所拥有,可使用hasOwnProperty()
    xiaohong.hasOwnProperty('name'); //true

    条件判断

    使用if...else

    var age = 20;
    if (age >= 18) { // 如果age >= 18为true,则执行if语句块
        alert('adult');
    } else { // 否则执行else语句块
        alert('teenager');
    }
    

    if...else if...else多行条件判断

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

    循环

    for循环

    var x = 0;
    var i;
    for (i=1; i<=10000; i++) {
        x = x + i;
    }
    x; // 50005000
    

    for...in将对象的属性循环出来

    var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        console.log(key); // 'name', 'age', 'city'
    }
    

    循环数组中的对象属性

    var a = ['A', 'B', 'C'];
    for (var i in a) {
        console.log(i); // '0', '1', '2'
        console.log(a[i]); // 'A', 'B', 'C'
    }
    

    还有while 循环do..while 循环

    Map和Set

    用键值对表示对象时,其属性必须为字符串类型;但实际上Number或者其他数据类型作为键也是非常合理的。所以在ES6中引入了新的数据类型Map

    举例
    要查找某个同学的分数时,通常如下表示方式

    var names = ['Michael', 'Bob', 'Tracy'];
    var scores = [95, 75, 85];
    

    给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

    如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢

    var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
    m.get('Michael'); // 95
    

    Map有以下的方法

    var m = new Map();
    m.set('name1',97);
    m.set('name2',66);
    m.has('name1'); //返回为true,即表示存在该name1的键
    m.get('name1'); //返回为 97
    m.delete('name1'); //删除name1的键
    m.get('name1'); //再获取则显示 undefined
    

    一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

    var m = new Map();
    m.set('Adam', 67);
    m.set('Adam', 88);
    m.get('Adam'); // 88
    

    Set

    Set和Map类似,也是一组key的集合,但不存储value

    var s1 = new Set(); // 空Set
    var s2 = new Set([1, 2, 3]); // 含1, 2, 3
    

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

    var s = new Set([1, 2, 3, 3, '3']);
    s; // Set {1, 2, 3, "3"}
    

    通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

    s.add(4);
    s; // Set {1, 2, 3, 4}
    s.add(4);
    s; // 仍然是 Set {1, 2, 3, 4}
    

    通过delete(key)方法可以删除元素:

    var s = new Set([1, 2, 3]);
    s; // Set {1, 2, 3}
    s.delete(3);
    s; // Set {1, 2}
    

    iterable

    遍历数组可以采用下标循环,遍历MapSet就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。
    具有iterable类型的集合可以通过for ... of(是ES6的新语法)循环来遍历

    var a = ['A','B','C'];
    var s = new Set(['A','B','C']);
    var m = new Map(['A',1],['B',2],['C',3]);
    for (var x of a) { // 遍历Array
        console.log(x); //A B C
    }
    for (var x of s) { // 遍历Set
        console.log(x); //A B C
    }
    for (var x of m) { // 遍历Map
        console.log(x[0] + '=' + x[1]); A=1 B=2 C=3
    }
    

    相比于前两种循环输出,可以使用forEach()

    var a = ['A', 'B', 'C'];
    a.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });
    // 输出 
    // A, index = 0
    // B, index = 1
    // C, index = 2
    
  • 相关阅读:
    动态规划之最大子序和(53)
    退出系统
    请维护容差码的容差限制-OMR6
    SAP561该物料不可能有库存记帐
    虚拟机锁定文件失败,disk启动失败
    该物料不可能有库存记账
    其他收货入库
    有关业务 事件类型wa 在 的号码范围不存在
    给供应商付款
    T169V表目:不存在
  • 原文地址:https://www.cnblogs.com/songyan/p/11381163.html
Copyright © 2011-2022 走看看