JS 比较常用的几个特性

最新推荐文章于 2024-07-09 18:54:31 发布

qq_33230774

最新推荐文章于 2024-07-09 18:54:31 发布

阅读量788

点赞数

分类专栏： JS 文章标签： JS

本文链接：https://blog.csdn.net/qq_33230774/article/details/86492086

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ES6中比较实用的几个特性

(http://es6.ruanyifeng.com/#README)

##let和const 全局常量和线程安全

1.在let和const之间，建议优先使用const
2.循环时用,let

##解构赋值
使用数组成员对变量赋值时，优先使用解构赋值

const arr = [1, 2, 3, 4];
const [first, second] = arr;

函数的参数如果是对象的成员，优先使用解构赋值。

function getFullName({ firstName, lastName }) {
}

如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。

function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

##字符串
判断是否存在 includes和indexOf
1.includes 推荐
2.indexOf 需要获取下标时使用

字符串截取 slice substr substring
1.slice (常用)
2.substr（适用于知道初始位，和截取位数）
3.substring（不推荐）

##数值
Number()、Number.parseInt() 和Number.parseFloat()强转
1.Number()（常用）转换整个字符串
2.Number.parseInt() 转化为整数
3.Number.parseFloat（）转化为小数

##数组
常见数组遍历
arr.forEach()–【常用，all】遍历数组全部元素，无法break中途跳出循环
arr.map()–【更新数组，all】
arr.filter()–【数组过滤，all】所有通过测试的元素的新数组
arr.some() --【判断数组中是否有元素满足条件】
对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true
arr.every()–【判断数组中是否全部满足条件】
对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
arr.find()–【寻找第一个返回条件的值】

总结:forEach是除for循环之外最快的,如数组循环是需要中断,
推荐使用（find,some）

只循环一次
const list=[{ code: 1, name: 2 }, { code: 2, name: 2 }].find(n => n.code === 1)

复制数组

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

合并数组

都是浅拷贝，使用的时候需要注意
const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

includes()

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

##对象
属性名表达式

    let b = 'hello';
    const obj = {
      a: 'a',
      [b]: 'world'
    };
    //{a: "a",hello: "world"}

Object.assign()常见用法

  1.克隆对象
  Object.assign({}, origin)//克隆属性
  
  const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
  );//完整克隆

  2.将多个对象合并到某个对象
  const merge =(target, ...sources) => Object.assign(target, ...sources);

遍历

for…in (推荐）（只遍历对象自身的和继承的可枚举的属性）
Object.keys()（推荐,与for…of,forEach搭配）返回对象自身的所有可枚举的属性的键名。

##Set和Map
去重和判重

//去重
[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]
//判重
new Set(arr).size != arr.length

##Promise

解决回调地狱问题


firstAsync().then(function(data){
//处理得到的 data 数据
//....
return secondAsync();
})
.then(function(data2){
//处理得到的 data2 数据
//....
return thirdAsync();
})
.then(function(data3){
//处理得到的 data3 数据
//....

});
```
2. 更好地进行错误捕获


  fetch().then(
      function(data){
          console.log('请求处理');
          console.log(data);
  },
  function(reason, data){
      console.log('触发异常');
      console.log(reason);
  }
);

then()方法:
原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数

  //一个小例子
  //烧饭
  cook() {
    console.log('开始烧饭')
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('做饭完毕！');
        resolve('鸡蛋炒饭');
      }, 1000)
    })
  }
  //吃饭
  eat(data) {
    console.log(`开始吃饭:${data}`)
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('吃饭完毕！');
        resolve('一块碗和一双筷子');
      }, 1000)
    })
  }
  //洗碗
  wash(data) {
    console.log(`开始洗碗:${data}`)
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('洗碗完毕！');
        resolve('干净的碗筷');
      }, 1000)
    })
  }
 this.cook().then(this.eat).then(this.wash)
 开始烧饭
 做饭完毕！
 开始吃饭:鸡蛋炒饭
 吃饭完毕！
 开始洗碗:一块碗和一双筷子
 洗碗完毕！

4.reject()方法

  //继续上述例子
  //烧饭
  cook() {
    console.log('开始烧饭')
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('做饭失败！');
        reject('烧焦了');
      }, 1000)
    })
  }
  //吃饭
  eat(data) {
    console.log(`开始吃饭:${data}`)
    return new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log('吃饭完毕！');
        resolve('一块碗和一双筷子');
      }, 1000)
    })
  }
 this.cook().then(this.eat).then(null, function (data) {
    console.log(`${data}没法吃!`)
 })
开始烧饭
做饭失败！
烧焦了没法吃!

5.catch()方法
用来指定 reject 的回调；resolve 的回调抛出异常；

 //继续上述例子
 //烧饭
 cook() {
   console.log('开始烧饭')
   return new Promise(function (resolve, reject) {
     setTimeout(function () {
       console.log('做饭完成！');
       resolve('鸡蛋炒饭');
     }, 1000)
   })
 }
 this.cook().then(function () {
    throw new Error('米饭被打翻了！');
 }).catch(function (data) {
     console.log(data)
 })
开始烧饭
做饭完成！
Error: 米饭被打翻了！

6.all()方法
所有异步操作执行完后才执行回调

//继续上述例子
//烧饭
cook() {
  console.log('开始烧饭')
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log('做饭完成！');
      resolve('烧好的饭');
    }, 1000)
  })
}
//烧水
boil() {
  console.log(`开始烧水`)
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      console.log('烧水完毕！');
      resolve('烧好的水');
    }, 1000)
  })
}
Promise.all([this.cook(), this.boil()])
    .then(function (result) {
      console.log(result)
    })
开始烧饭
开始烧水
做饭完成！
烧水完毕！
['烧好的饭','烧好的水']

7.race()方法
只要有一个异步操作执行完毕，就立刻执行 then 回调（与all()类似）

##Proxy
主要用于拦截

get()
拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名# ES6中比较实用的几个特性