美文网首页
02、Es6第二部分

02、Es6第二部分

作者: 时修七年 | 来源:发表于2019-01-26 18:49 被阅读25次

    Es6扩充—String

    includes(), startsWith(), endsWith()

    传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

    includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

    let s = 'Hello world!';
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true
    
    

    这三个方法都支持第二个参数,表示开始搜索的位置。

    let s = 'Hello world!';
    
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false
    

    上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

    模板字符串

    传统的 JavaScript 语言,输出模板通常是这样写的

    let username = 'xiaoming';
    let age = 18
    console.log("my name is" + username +"and" + "my age is "+age)
    上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。
    `my name is ${name} and my age is ${age}`
    
    

    模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。


    es6--函数

    函数参数的默认值

    ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。

    function log(x, y) {
      y = y || 'World';
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello World
    
    

    上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World。这种写法的缺点在于,如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用。就像上面代码的最后一行,参数y等于空字符,结果被改为默认值。

    为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值。

    if (typeof y === 'undefined') {
      y = 'World';
    }
    
    

    ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。

    function log(x, y = 'World') {
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello
    
    

    参数变量是默认声明的,所以不能用letconst再次声明。

    function foo(x = 5) {
      let x = 1; // error
      const x = 2; // error
    }
    
    

    上面代码中,参数变量x是默认声明的,在函数体中,不能用letconst再次声明,否则会报错。

    与解构赋值默认值结合使用

    参数默认值可以与解构赋值的默认值,结合起来使用。

    function foo({x, y = 5}) {
      console.log(x, y);
    }
    
    foo({}) // undefined 5
    foo({x: 1}) // 1 5
    foo({x: 1, y: 2}) // 1 2
    foo() // TypeError: Cannot read property 'x' of undefined
    
    

    上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数foo的参数是一个对象时,变量xy才会通过解构赋值生成。如果函数foo调用时没提供参数,变量xy就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。

    function foo({x, y = 5} = {}) {
      console.log(x, y);
    }
    
    foo() // undefined 5
    
    

    上面代码指定,如果没有提供参数,函数foo的参数默认为一个空对象。

    箭头函数

    es6提供了函数的简写形式

    let add = (a,b)=>{
      console.log(a,b)
    }
    
    add(1,2)
    
    let sayName  = name = >{
      console.log(name)
    }
    
    

    如果箭头函数有且仅有一个参数,括号可以省略

    let sayName  = name =>{
      console.log(name)
    }
    
    sayName('xiaoming')
    
    

    如果函数体是以return返回的一句话,那么花括号和rerurn也可以省略

    let sayName  = name => console.log(name)
    
    sayName('xiaoming')
    

    es5补充知识

    forEach(),map(),filter()

    forEach用于数组遍历,对数组的每个元素执行一次提供的函数。
    ,在遍历没有完成之前,无法通过return,或者break停止,forEach() 方法

    books.forEach((item,index)=>{
      console.log(item,index)
    })
    
    

    filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    
    const result = words.filter(word => word.length > 6);
    
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]
    
    

    map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

    let  array = [{key: 1, value: 10}, 
                   {key: 2, value: 20}, 
                   {key: 3, value: 30}];
    let addArrary = array.map(item=>item.value+2)
    
    console.log(addArrary)  //[12, 22, 32]
    
    var kvArray = [{key: 1, value: 10}, 
                   {key: 2, value: 20}, 
                   {key: 3, value: 30}];
    
    var reformattedArray = kvArray.map(function(obj) { 
       var rObj = {};
       rObj[obj.key] = obj.value;
       return rObj;
    });
    
    // reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}], 
    
    // kvArray 数组未被修改: 
    // [{key: 1, value: 10}, 
    //  {key: 2, value: 20}, 
    //  {key: 3, value: 30}]
    
    
    code.png

    相关文章

      网友评论

          本文标题:02、Es6第二部分

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