常用es6新增

最新推荐文章于 2025-10-24 11:49:52 发布

原创最新推荐文章于 2025-10-24 11:49:52 发布 · 658 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

前端专栏收录该内容

13 篇文章

订阅专栏

常用的ES6新增

1、let和const

let和var的作用差不多，不过let的作用域是块级作用域
const定义的是常量，不能修改，以及重复定义，否则直接报错

2、变量解构

之前的变量赋值方法
```
let a = 1;
let b = 2;
let c = 3;
```
ES6赋值可以允许写成如下
```
let [a, b, c] = [1, 2, 3];
```

ES6赋值写法

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

3、字符串模板语法

字符串模板

 var a = 'hello'
 var b = `${a} world!`
 console.log(b);

运行结果

4、对象的新增方法

Object.is()
判断对象是否相等，运行结果与===相同

Object.is('obj','obj')//true
Object.is({},{})//false
+0===-0 //true
NaN === NaN //false

Object.is(+0,-0)
Object.is(NaN,NaN )

5、Symbol

Symbol，表示独一无二的值。

Symbol函数前不能使用new命令，否则会报错。

   let s1 = Symbol('foo');
   let s2 = Symbol('bar');

   console.log(s1); // Symbol(foo)
   console.log(s2); // Symbol(bar)

   console.log(s1.toString()); // "Symbol(foo)"
   console.log(s2.toString()); // "Symbol(bar)"

   // 没有参数的情况
   let s1 = Symbol();
   let s2 = Symbol();

   console.log(s1 === s2); // false

   // 有参数的情况
   let s1 = Symbol('foo');
   let s2 = Symbol('foo');

   console.log(s1 === s2); // false

6、Set和Map

Set
- Set本身是一个构造函数，用来生成 Set 数据结构。
- Set的数据唯一，所以可以用于数组去重
- size方法可以获取数组的长度
- Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
- Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
- Set.prototype.clear()：清除所有成员，没有返回值。
```
    const set = new Set([1, 2, 2, 3, 4, 4]);
    console.log([...set]);
    console.log(set.size); // 4
```
- Set也可以用于字符串去重
```
console.log([...new Set('ababbc')].join('')); // abc
```
Map
- 类似于对象，也是键值对的集合。
- “键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
- 如果需要“键值对”的数据结构，Map 比 Object 更合适。
```
	const m = new Map();
	const o = {p: 'Hello World'};
	
	m.set(o, 'content')
	m.get(o) // "content"
```
- 如果同时设置两个相同的值，那么后面的值会覆盖前面的值
```
	const map = new Map();
	map.set(1, 'aaa').set(1, 'bbb');
	console.log(map.get(1)); // "bbb"
```
- 如果读取一个未知的键，则返回undefined。
- 实例的属性和操作方法
  - size 属性：返回 Map 结构的成员总数。
  - Map.prototype.set(key, value)：set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。
  - Map.prototype.get(key)：get方法读取key对应的键值，如果找不到key，返回undefined。
  - Map.prototype.has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
  - Map.prototype.delete(key)：delete方法删除某个键，返回true。如果删除失败，返回false。
  - Map.prototype.clear()：clear方法清除所有成员，没有返回值。

7、Promise对象

Promise的三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

作用：解决异步回调问题

	 new Promise((resolve, reject) => {
	     // resolve:成功回调
	     // reject:失败回调
	 })

基本使用

      let a = 10
      let pro = new Promise(function (resolve, reject) {
          if (a == 10) {
              resolve('成功')
          } else {
              reject('失败')
          }
      })

then方法返回成功以及失败的方法
Promise的方法
- 1、Resolve
```
    Promise.resolve('成功');
    // 等价于
    new Promise(resolve => {
        resolve('成功')
    });
```
- 2、Reject
```
    let p1 = Promise.reject('失败');
    p1.catch(res => {
        console.log(res);
    });
```
- 3、all函数
  all函数可以将成功或者失败的集合返回
```
let p1 = Promise.resolve('aaa');
let p2 = Promise.resolve('bbb');
let p3 = Promise.resolve('ccc');
Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
})
let p4 = Promise.reject('aaa');
let p5 = Promise.reject('bbb');
let p6 = Promise.reject('ccc');
Promise.all([p4, p5, p6]).then(res => {
	let [res1, res2, res3] = res;
	console.log(res1, res2, res3);
})
```
- async和await
  - 1、async函数
    函数的返回值为promise对象
  - 2、await表达式
    - await右侧的表达式一般为promise对象，但也可能是其他值
    - 如果表达式是promise对象，await返回的是promise成功的值
    - 如果表达式是其他值，直接将此值作为await的返回值
  - 注意：
    - await必须写在async函数中，但async函数中可以没有await
    - 如果await的promise失败了，会抛出异常，需要通过try…catch捕获处理Await右侧为promise的情况，返回promise的结果
    - 如果promise是失败的状态，必须通过try…catch处理
```
    async function fun() {
        let p = new Promise((resolve, reject) => {
            reject('error')
        })
        try {
            let res = await p;
        } catch (e) {
            console.log(e);
        }
    }
```
  - Promise理解和使用
    1、Promise是js中异步编程的新的解决方案
    2、从语法上说，promise是一个构造函数，从功能上来说，promise对象用来封装一个异步操作并可以获取成功或失败的结果
  - 异步编程
    1、fs文件操作
    2、数据库操作
    3、ajax网络请求
    4、定时器（setInterval,setTimeout）
    旧解决方案如上，使用全部是回调函数
    Promise是异步编程的新的解决方案
  - 为什么使用Promise
    
    1、指定回调函数的方式更加灵活
    
    2、支持链式调用，可以解决回调地狱问题
    - （1）什么是回调地狱
      回调函数嵌套调用，外部回调函数异步执行的结果中包含了又一个回调函数。
    - （2）回调地狱的缺点
      - 不便与阅读
      - 不便于异步处理（如果某一个异步请求又错误，不便于处理）

在js文件中使用Promise封装ajax

function sendAjax(url){
    return new Promise((resolve,reject)=>{
        $.ajax({
            url:url,
            type:'get',
            success:function(res){
                console.log(res);
            },
            error:function(err){
                console.log(err);
            }
        })
    })
}
sendAjax('http://....').then((value)=>{
    console.log(value);
},(reason)=>{
    console.log(reason);
})

8、for…of

    var arr = ['red', 'green', 'blue'];

    for (let i of arr) {
        console.log(i); // red green blue
    }

9、Class的简单使用

	class Point {
	  constructor(x, y) {
	    this.x = x;
	    this.y = y;
	  }
	
	  toString() {
	    return '(' + this.x + ', ' + this.y + ')';
	  }
	}

10、箭头函数

箭头函数主要是为了解决this的指向问题

11、模板语法

export命令显式指定输出的代码，再通过import命令输入。

在js文件中封装url地址

url = "https://meituan.thexxdd.cn/api/"
const urls = class {
    constructor(args) {

    }
    static m() {
        getbanner = `${url}getbanner`
        return getbanner
    }
}
export default urls;