es5es6中新增的方法

8次阅读

共计 10460 个字符,预计需要花费 27 分钟才能阅读完成。

ES5 中的新增方法

ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:

  • 数组方法
  • 字符串方法
  • 对象方法

1.1 数组方法

迭代 (遍历) 方法:forEach()、map()、filter()、some()、every();

array.forEach(function(currentValue, index, arr))
  • 让数组中每个元素都执行一次 fn,相当于 for 循环
  • 不会占用全局变量,结合箭头函数贼舒服
  • currentValue:当前项的值
  • index:当前项的索引
  • arr:当前数组对象本身
array.map(function(currentValue, index, arr))
  • map() 方法会得到一个新数组,新数组中包含每次函数调用返回的结果
  • 它返回的是一个新数组
array.filter(function(currentValue, index, arr))
  • filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
  • 注意 它直接返回一个新数组
  • currentValue: 当前项的值
  • index:当前项的索引
  • arr:当前数组对象本身
array.some(function(currentValue, index, arr))
  • some() 方法用于检测数组中的元素是否满足指定条件,即查找数组中是否有满足条件的元素。
  • 它的 返回值是布尔值,如果查找到这个元素,就返回 true , 如果查找不到就返回 false。
  • 如果找到第一个满足条件的元素,则终止循环,不再继续查找。
  • currentValue: 当前项的值
  • index:当前项的索引
  • arr:当前数组对象本身
array.every(function(currentValue, index, arr))
  • every() 方法检测数组中的所有元素是否满足指定条件。
  • 所有的元素都返回 true,结果才是 true

1.2 字符串方法

  • trim() 方法会从一个字符串的两端删除空白字符。
  • trim() 方法不影响原字符串本身,它 返回 的是 一个新的字符串

    str.trim()

1.3 对象方法

  1. Object.keys() 用于获取对象自身所有的属性

    Object.keys(obj)
    • 效果类似 for…in
    • 返回一个由属性名组成的数组

  2. Object.defineProperty() 定义对象中新属性或修改原有的属性。

     Object.defineProperty(obj, prop, descriptor)
    • obj:必需。目标对象
    • prop:必需。需定义或修改的属性的名字
    • descriptor:必需。目标属性所拥有的特性,以对象形式 {} 书写

      • value: 设置属性的值 默认为 undefined
      • writable: 值是否可以重写。true | false 默认为 false
      • enumerable: 目标属性是否可以被枚举。true | false 默认为 false
      • configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false 默认为 false

ES6 的新增语法

1. let

  ES6 中新增的用于 声明变量 的关键字。

  • let 声明的变量只在所处于的块级有效。

    if (true) {let a = 10;}
    console.log(a) // a is not defined

    注意:使用 var 声明的变量不具备块级作用域特性,使用 let 关键字声明的变量 具有块级作用域,可以防止循环变量变成全局变量。

  • 不存在变量提升

    console.log(a); // a is not defined 
    let a = 20;
  • 暂时性死区

    var num = 10;
    if(true) {console.log(num); // num is not defined
        let num = 20;
    }
    // 在 if 的 {} 中不会向上一级查找 num,因为在这个块级作用域中用了 let 关键字声明了 num,变量 num 就和 {} 这个块级进行了整体绑定,所以在声明之前使用它会报错
  • 经典面试题

    // 题 1
    var arr = [];
    for(var i = 0; i < 2; i++) {arr[i] = function() {console.log(i);
        }
    }
    arr[0](); // 2
    arr[1](); // 2
    // 解析:变量 i 是全局的,函数执行时输出的都是全局作用域下的 i 值。// 题 2
    let arr = [];
    for(let i = 0; i < 2; i++) {arr[i] = function() {console.log(i);
        }
    }
    arr[0](); // 0
    arr[1](); // 1
    // 解析:每次循环都会产生一个块级作用域,每个块级作用域中的变量都是不同的,函数执行时输出的是自己上一级 (循环产生的块级作用域) 作用域下的值。

2. const

  const 用于 声明常量,常量就是值(内存地址)不能变化的量。

  • 具有块级作用域

    if (true) {const a = 10;}
    console.log(a) // a is not defined
  • 声明常量时必须赋值

    const PI; // Missing initializer in const declaration
  • 常量赋值后,值不能修改。

    const PI = 3.14;
    PI = 100; // Assignment to constant variable.
    const ary = [100, 200];
    ary[0] = 'a';
    ary[1] = 'b';
    console.log(ary); // ['a', 'b']; 
    ary = ['a', 'b']; // Assignment to constant variable.

let、const、var 的区别

  • 使用 var 声明的变量,其作用域为 该语句所在的函数内,且存在变量提升现象
  • 使用 let 声明的变量,其作用域为 该语句所在的代码块内,不存在变量提升
  • 使用 const 声明的是常量,在后面出现的代码中 不能再修改该常量的值
var let const
函数级作用域 块级作用域 块级作用域
变量提升 不存在变量提升 不存在变量提升
值可更改 值可更改 值不可更改

3. 解构赋值

  ES6 中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。

  按照一定模式,从数组中或对象中提取值,将提取出来的值赋值给另外的变量。

 3.1 数组解构

  • 如果解构不成功,变量的值为 undefined。

    let [a, b, c] = ['pink', 'yellow', 'blue']; // 正常解构赋值
    console.log(a, b, c);
    let [foo] = [];
    let [bar, foo] = [1];
    let [, c] = ['red', 'yellow'];  // 选择性解构赋值

 3.2 对象解构

  • 使用变量的名字匹配对象的属性,匹配成功,将对象属性的值赋值给变量。

    let {name, age} = {name: 'andy', age: 18};  // 正常解构赋值
    console.log(name, age); // andy 18
    ​
    let {name: myName, age: myAge} = {name: 'andy', age: 18}; //myName myAge 属于别名
    ​
    let {name = 'lily', age} = {name: 'andy', age: 18};  // 给 name 设置了默认值 'lily'

4. 箭头函数

  • ES6 中新增的定义函数的方式。

    // 语法:() => {}
    const fn = () => {}
    fn();
  • 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号

    function sum(a, b) {return a + b;}
    const sum = (a, b) => a + b;
    sum(10, 20);
  • 如果形参只有一个,可以省略小括号

    function fn (v) {return v;} 
    const fn = v => v;
  • 箭头函数不绑定 this 关键字,它的 this 值是继承自它的父作用域的,所以 箭头函数不能作为构造函数

    箭头函数的 this 值是词法作用域,也就是说它在定义的时候就被指定了的,而且也不会随着它调用方法的改变而改变。所以箭头函数中的 this,指向的是 函数定义位置的上下文 this

    const obj = {name: 'andy'};
    function fn() {console.log(this); // obj
        return () => {console.log(this); // obj
        }
    }
    const resFn = fn.call(obj);
    resFn();
  • 面试题解析:

    var obj = {
        age: 20,
        say: () => {console.log(this.age)
        }
    }
    obj.say(); // undefined
    // 解析:箭头函数中没有自己的 this,它的 this 指向箭头函数定义区域的 this。此例中的箭头函数定义在了 obj 这个对象中,它是一个对象,不能产生作用域,所以这个箭头函数被定义在了全局作用域下,所以在调用这个方法的时候 this 指向 window

5. 剩余参数

  • 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

    const sum = (...args) => {
        let total = 0;
        args.forEach(item => total += item);
        return total;
    }
    console.log(sum(10, 20)); // 30
    console.log(sum(1, 2, 3, 4)); // 10
  • 剩余参数和解构配合使用

    let students = ['andy', 'jack', 'lily'];
    let [s1, ...s2] = students;
    console.log(s1, s2); // 'andy', ['jack', 'lily']

6. ES6 的内置对象扩展

 6.1 扩展运算符(展开语法)

  • 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

    let ary = [1, 2, 3];
    ...ary  // 1, 2, 3
    console.log(...ary);    // 1 2 3
  • 扩展运算符可以应用于 合并数组

    // 方法一 
    let ary1 = [1, 2, 3];
    let ary2 = [3, 4, 5];
    let ary3 = [...ary1, ...ary2];
    // 方法二 
    ary1.push(...ary2);
  • 将类数组或可遍历对象转换为真正的数组

    let oDivs = document.getElementsByTagName('div'); 
    oDivs = [...oDivs];

 6.2 构造函数方法:Array.from()

  • 将类数组或可遍历对象转换为真正的数组

    let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    }; 
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
  • 方法还可以接受第二个参数,作用类似于数组的 map 方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

    let arrayLike = { 
        "0": 1,
        "1": 2,
        "length": 2
    }
    let newAry = Array.from(aryLike, item => item *2)

 6.3 实例方法:find()

  • 用于找出第一个符合条件的数组成员,如果没有找到返回 undefined

    let ary = [{ id: 1, name: 'andy'},
        {id: 2, name: 'lily'}
    ]
    let target = ary.find(item => item.id === 2);

 6.4 实例方法:findIndex()

  • 用于找出第一个符合条件的数组成员的位置,如果没有找到返回 -1

    let ary = [1, 5, 10, 15];
    let index = ary.findIndex((value, index) => value > 9); 
    console.log(index); // 2

 6.5 实例方法:includes()

  • 判断字符串是否包含另一个字符串,传统的 js 方法:indexOf 返回值是否等于 -1,如果等于 - 1 说明不包含
  • es6 中提供了方法 includes() 返回布尔值,表示是否包含给定的值。

    [1, 2, 3].includes(2) // true 
    1, 2, 3].includes(4) // false
    ​
    let s = 'hello world'
    s.includes('hello', 6) // false  第一个参数是需要匹配的数据,第二个参数是从第几个开始

7. 模板字符串

  • ES6 新增的创建字符串的方式,使用反引号定义 “。
  • 模板字符串中可以解析变量。

    let name = '张三'; 
    let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
  • 模板字符串中可以保留空格和换行

    let result = { 
        name: 'zhangsan', 
        age: 20,
        sex: '男' 
    } 
    let html = ` <div>
        <span>${result.name}</span>
        <span>${result.age}</span>
        <span>${result.sex}</span>
    </div> `;
  • 在模板字符串中可以调用函数。

    const sayHello = function () {return '哈哈哈哈 追不到我吧 我就是这么强大';}; 
    let greet = `${sayHello()} 哈哈哈哈 `;
    console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈

8. String的扩展方法

 8.1 实例方法:startsWith()和 endsWith()

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

    let str = 'Hello world!';
    str.startsWith('Hello') // true 
    str.endsWith('!')       // true

 8.2 实例方法:repeat()

  • repeat() 方法表示将原字符串重复 n 次,返回一个新字符串。

    'x'.repeat(3)      // "xxx" 
    'hello'.repeat(2)  // "hellohello"

9.Set数据结构

  ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是 唯一 的,没有重复的值。

  • Set 本身是一个构造函数,用来生成 Set 数据结构。

    const s = new Set();
  • Set 函数可以接受一个数组作为参数,用来初始化。

    const set = new Set([1, 2, 3, 4, 4]);
  • 例如:利用 set 去重,得到一个新数组

    let set = new Set([1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1])
    console.log(set)
    console.log([...set])

    注:set 去重之后得到的 set 类型的数据,所以还得把这个 set 数据类型转换成数组类型,这个时候又可以用到展开符这个好东西了

    实例方法

    • add(value):添加某个值,返回 Set 结构本身
    • delete(value):删除某个值,返回一个布尔值,表示删除是否成功
    • has(value):返回一个布尔值,表示该值是否为 Set 的成员
    • clear():清除所有成员,没有返回值
    const s = new Set();
    s.add(1).add(2).add(3); // 向 set 结构中添加值 
    s.delete(2)             // 删除 set 结构中的 2 值 
    s.has(1)                // 表示 set 结构中是否有 1 这个值 返回布尔值 
    s.clear()               // 清除 set 结构中的所有值
  • Set 结构的实例与数组一样,也拥有 forEach 方法,用于对每个成员执行某种操作,没有返回值。

    s.forEach(value => console.log(value))

10. Promise

  promise 用于更优雅的 处理异步请求 ,其实就是对于回调函数的另一种写法,可以帮助我们避免 回调地狱

  回调地狱:比如第二个请求依赖第一个请求的结果进行请求,第三个请求依赖第二个,这样一层一层嵌套,。。。​为了解决回调顺序的不确定性以及地狱,就有了 promise 机制。

  1. Promise 一般来讲是一个对象,.then 方法其实就是 promise 对象的一个
  2. Promise 构造函数接受一个函数作为参数,在这个函数中,可以进行异步的操作的代码
  3. 在这个函数中执行完成异步操作之前,并不是要调用用户提供的回调函数(不关心回调到底是什么),而是在这个函数中,异步完成之后,只需要去修改当前的 promise 的状态
  4. Promise 的状态:

    • pendding:挂起,当前 promise 执行的任务,正在执行中
    • fullfilled:完成,当前 promise 对象执行的任务,已经完成,并且是成功状态
    • rejected:完成,当前 promise 对象执行的任务,已经完成,并且是失败的状态
  5. Promise 对象的 .then 方法中接收到的成功的回调函数,会在当前的 promise 对象处于成功(fullfilled)状态的时候自动执行;

      Promise 对象的 .then 方法中接收到的失败的回调函数,会在当前的 promise 对象处于失败(rejected)状态的时候自动执行

  1. resolve 是一个函数,调用这个函数,就可以把当前 promise 对象标记成功

      reject 也是一个函数,调用这个函数,可以把当前 promise 对象标记失败

var p = new Promise(function(resolve, reject) {resolve() // 成功时调用
    reject() // 失败时调用});
p.then(function(res) {// 从 resolve 得到正常结果}, function(res) {// 从 reject 得到错误信息})
resolve 和 reject 在调用的时候,可以传递数据,这个数据会最终被传递到成功或者失败的回调函数中。```
// 封装一个支持 Promise APi 的延时函数
function timeOut(time){return new Promise(function(resolve, reject){setTimeout(function(){
            // 这个回调函数中,不需要涉及任何具体的业务操作
            // resolve(123); // 可传递数据,这个数据会最终被传递到成功回调函数中
            reject();}, time);
    });
}
```
  1. 在 then 方法中,我们可以直接 return 数据 而不是 Promise 对象,在后面的 then 中就可以接收到数据了。
    then 参数中的函数返回值:
      1. 返回 Promise 实例对象:返回的该实例对象会调用下一个 then

      2. 返回普通值:返回的普通值会直接传递给下一个 then,通过 then 参数中函数的参数接受该值

    timeOut(1000)
    .then(num => {console.log(num + '这是 1s 后打印的内容')
        return timeOut(1000)
    })
    .then(num => {console.log(num + '这是 2s 后打印的内容')
        return timeOut(1000)
    })
    .then(num => {console.log(num + '这是 3s 后打印的内容')
        return timeOut(1000)
    })
  2. 语法
  • 语法一:

    promise.then(function() {console.log('成功的回调')
        },
        function() {console.log('失败的回调')
        }
    )
  • 语法二:

    Promise
    .then(function() {console.log('成功的回调')
    })
    .catch(function() {consloe.log('失败的回调')
    })

    语法二和语法一的效果一样。不过它还有另外一个作用:在执行 resolve 的回调(也就是上面 then 中的参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死,而是会进到这个 catch 方法中。

  9. promise 的其他用法

  • Promise.all: 只有当传入的所有 promise 的结果为 reslove,才会执行这个 all 的回调函数(即触发 then 方法执行里面的代码),否则只要有一个是 reject,就会执行 catch 方法。

    Promise
        .all([t1, t2, t3, t4, t5])
        .then(function(){console.log("所有异步操作完成了");
        }
        .catch(function() {console.log("嗷嗷~~~ 有操作出错了");
        })
    )
  • Promise.race:由第一个 promise 返回的状态决定,如果第一个 promise 返回的结果为 reslove 就会执行这个 race 的回调

    Promise.race([t1, t2, t3, t4, t5]).then(function(){console.log("有一个异步率先完成了");
    })

  常用 API:

  • .then() 得到异步任务的成功信息
  • .catch() 获取异常信息
  • .finally() 成功与否都会执行(还不是正式标准)
  • Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
  • Promise.race() 只要有一个任务完成就能得到结果

    Promise.all([p1, p2, p3]).then(res => {console.log(res); // 三个结果的数组
    })
    Promise.race([p1, p2, p3]).then(res => {console.log(res);
    })
  • 示例:基于 Promise 处理 Ajax 请求:

    function queryData(url) {return new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {if(xhr.readystate !== 4) return;
            if(xhr.readystate === 4 && xhr.status === 200){resolve(xhr.responseText);
            }else{reject('出错了');
            }
        }
        xhr.open('get', url);
        xhr.send(null);
    })
    }
    queryData('http://localhost:3000/data')
    .then(function(res){console.log(res);
    }, function(err){console.log(err)
    })
    ​
    // 发送多次请求
    queryData('url1')
    .then(function(data){return queryData('url2');
    })
    .then(function(data){return queryData('url3');
    })
    .then(function(data){console.log(data);
    })

  这里顺便叨叨一下 Promise 的语法糖:async/await 的基本用法

  • async 关键字用于函数上(async 函数的返回值是 Promise 实例对象)
  • await 关键字用于 async 函数中(await 可以得到异步的结果)

    async function queryData(id){const ret = await axios.get('/data');
        return ret;
    }
    queryData.then(ret => {console.log(ret);
    })

    使用 async 后,代码变得更简洁,代码的逻辑和数据流都变得更加清晰。由于 async 的原理还是以 Promise 为基础,所以部分时候,async 是要和 Promise 配合使用的,它并不能完全脱离 Promise 独立运行;await 必须在 async 函数里使用,不能单独使用。

  • 多个异步请求的场景

    async function queryData(id){const info = await axios.get('/async1');
        const ret = await axios.get(`/async2?info=`+info.data);
        return ret;
    }
    queryData.then(ret => {console.log(ret);
    })

11. 模块化

  模块化就是把单独的一个功能封装到一个模块 (文件) 中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。

  模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护。

  ES6 默认导出与默认导入

  • 默认到处语法 export default 默认导出的成员
  • 默认导入语法 import 接收名称 from‘模块标识符’

    // 当前文件模块为 m1.js// 定义私有成员 a 和 c
    let a = 10;
    let c = 20;
    let d = 30;
    function show(){}
    ​
    // 将本模块中的私有成员暴露出去,供其他模块使用
    export default {
        a,
        c,
        show
    }
    ​
    // 导入模块成员
    import m1 from './m1.js'
    ​
    console.log(m1)
    // 打印输出的结果为{a: 10, b: 20, show: [function: show]}
    // 外界访问不到 d,因为它没有被暴露出去

   注意:每个模块中,只允许使用唯一的一次 export default,否则会报错

  按需导出与按需导入

  • 默认导出语法export let s1 = 10
  • 默认导入语法import {s1} from ‘ 模块标识符 ’

    // 当前文件模块为 m1.js
    export let s1 = 'aaa'
    export let s2 = 'bbb'
    export function say = function(){}
    ​
    // 导入模块成员
    import {s1, s2 as ss2, say} from './m1.js'
    console.log(s1); // aaa
    console.log(ss2); // bbb
    console.log(say); // [function: say]

   注意:每个模块中,可以使用多次按需导出

  直接导入并执行模块代码

  • 只执行模块中的代码,并不需要得到模块中向外暴露的成员,此时可以直接导入并执行模块代码。

    // 当前文件模块为 m2.js
    // 在当前模块中执行一个 for 循环操作
    for(let i = 0; i < 3; i++) {console.log(i);
    }
    ​
    // 直接导入并执行模块代码
    import './m2.js'
正文完
 0