欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS 比较常用的几个特性

程序员文章站 2024-02-22 21:38:58
...

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

  1. 解决回调地狱问题
    
    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);
  }
);
  1. 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
主要用于拦截

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

##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搭配)返回对象自身的所有可枚举的属性的键名。
    ##函数
    1.使用函数默认值和箭头函数
    2.尾递归
    就不会发生栈溢出,相对节省内存(tree结构生成)
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}

##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

  1. 解决回调地狱问题
    
    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);
  }
);
  1. 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()类似)

##Module
建议使用方式

类似的方法,属性,归位一类,
//导出
module.exports = {
  config,
  request,
}
//导入
import { config } from 'utils'
import * as camera from 'services/Camera/Camera'

over

具体详情 http://es6.ruanyifeng.com/#README

相关标签: JS