美文网首页
ES6 语法基础1--基础语法

ES6 语法基础1--基础语法

作者: Realank | 来源:发表于2018-06-15 17:06 被阅读17次

    1. 前言

    目前没有找到很好的零基础ES6教程,所以主要是参考阮一峰的ES5教程

    以及ES5和ES6的差别文章来完成总结,所以下面的内容有可能是ES5的旧内容,请及时指正

    2.名词解读

    ES5: 全称ECMAScript 5,是Javascript 2013年的主流版本,目前的上一代版本

    ES6: 全称ECMAScript 6,也称为ECMAScript 2015,目前比较新的主流Javascript版本,我们以此版本开发

    目前还有ES7和ES8,都过新,我们暂不使用

    3. 基础语法

    a.定义变量

    var a = 1;//ES5,尽量不要使用
    let a = 10;//ES6
    const PI = 3.1415;//ES6
    

    b. 条件语句

    if (m === 3) {
      // 满足条件时,执行的语句
    } else {
      // 不满足条件时,执行的语句
    }
    
    switch (fruit) {
      case "banana":
        // ...
        break;
      case "apple":
        // ...
        break;
      default:
        // ...
    }
    
    let even = (n % 2 === 0) ? true : false;
    

    c. 循环语句

    while (true) {
      console.log('Hello, world');
    }
    
    for (let i = 0; i < 5; i++) {
      console.log(i);
    }
    

    d. 数据类型

    数值(Number):整数和小数(比如1和3.14)
    字符串(String):文本(比如Hello World)。
    布尔值(Boolean):表示真伪的两个特殊值,即true(真)和false(假)
    undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
    null:表示空值,即此处的值为空。
    狭义的对象对象(object):各种值组成的集合,类似于iOS里的字典,但是它是一个对象
    数组(array)
    函数(function)
    Symbol: ES6的新类型,用于定义独一无二的属性名

    类型判断方法:

    typeof '123' // “string"
    let a = [];
    a instanceof Array // true
    

    undefined & null & NaN:
    undefined 和 null 几乎一样,但是意义上undefined表示没有定义,null表示指为空

    NaN表示不是一个数字,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,但是NaN不等于任何值,包括它自己。主要出现在将字符串解析成数字出错的场合

    e. 数值类型的操作

    parseInt('123') // 123
    parseInt('abc') // NaN
    parseFloat('3.14') // 3.14
    isNaN(NaN) // true
    isFinite(NaN) // false 返回是否是正常值
    isFinite(undefined) // false
    isFinite(null) // true
    

    f. 字符串

    let s = 'hello';
    s.length // 5
    ‘hello’ + ‘ world’ // hello world
    

    g. 对象

    let obj = {
      foo: 'Hello',
      bar: 'World'
    };
    
    obj.foo // "Hello"
    obj[foo] // “Hello"
    obj.p = ‘haha’
    Object.keys(obj);
    delete obj.p // true
    'p' in obj // true
    
    for (let i in obj) {
      console.log(obj[I]);
    }
    

    h. 数组

    let arr = ['a', 'b', ‘c'];
    arr[0] // ‘a’
    arr[1] = ‘d';
    arr.length // 3
    // for循环
    for(let i = 0; i < a.length; i++) {//不推荐使用for in遍历
      console.log(a[I]);
    }
    

    i. 函数

    *JavaScript 语言将函数看作一种值,与其它值(数值、字符串、布尔值等等)地位相同。凡是可以使用值的地方,就能使用函数。

    比如,可以把函数赋值给变量和对象的属性,也可以当作参数传入其他函数,或者作为函数的结果返回。

    函数只是一个可以执行的值,此外并无特殊之处。

    function print(s) {
      console.log(s);
      return true;
    }
    
    let print = function(s) {
      console.log(s);
    };
    
    function log(x, y = 'World') { // 默认参数
    console.log(x, y);
    }
    
    console.log('Hello') // Hello World
    console.log('Hello', 'China') // Hello China
    console.log('Hello', '') // Hello
    

    ES6 允许使用“箭头”(=>)定义函数,但有一些限制,如不能用于构造函数:

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
    return num1 + num2;
    };
    

    j. 严格相等运算符

    *JavaScript 提供两种相等运算符:==和===。

    简单说,它们的区别是相等运算符(==)比较两个值是否相等,严格相等运算符(===)比较它们是否为“同一个值”。

    如果两个值不是同一类型,严格相等运算符(===)直接返回false,而相等运算符(==)会将它们转换成同一个类型,再用严格相等运算符进行比较。

    1 === "1" // false
    1 == "1" // true
    

    k. 类型强制转换

    Number('324') // 324
    Number('324abc') // NaN
    parseInt('42 cats') // 42
    let f = 5
    f.toString() // 5
    123 + 'abc' // “123abc" (自动转换)
    

    l. 错误处理

    function throwit() {
      throw new Error('');
    }
    
    function catchit() {
      try {
        throwit();
      } catch(e) {
        console.log(e.stack); // print stack trace
      }
    }
    
    catchit()
    
    // Error
    //    at throwit (~/examples/throwcatch.js:9:11)
    //    at catchit (~/examples/throwcatch.js:3:9)
    //    at repl:1:5
    

    6种派生Error类型:

    -SyntaxError对象是解析代码时发生的语法错误
    -ReferenceError对象是引用一个不存在的变量时发生的错误
    -RangeError对象是一个值超出有效范围时发生的错误
    -TypeError对象是变量或参数不是预期类型时发生的错误
    -URIError对象是 URI 相关函数的参数不正确时抛出的错误
    -EvalError不再使用

    相关文章

      网友评论

          本文标题:ES6 语法基础1--基础语法

          本文链接:https://www.haomeiwen.com/subject/kdmmeftx.html