es5es6中新增的方法

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 声明的是常量，在后面出现的代码中 不能再修改该常量的值。

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'