最新ES6-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38771128/article/details/131766049

本文详细介绍了ES6中的一些重要特性，包括块级作用域、箭头函数、模板字符串、默认参数、扩展运算符以及class和Promise等。此外，还涵盖了Array的from()、find()等扩展方法，Object的is()、assign()等方法，以及String的startsWith()、endsWith()等新方法。最后提到了Set数据结构的使用，如添加、删除成员及数组去重等应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4、Array.map()、Array.filter()

3、Object.keys()、Object.values()、Object.entries()

四、String的扩展方法

1、startsWith() 和 endsWith()

2、repeat()

五、set

一、新增语法

1、块级作用域

Let 不存在变量提升

Const 声明常量时必须赋值，值不能修改

2、结构解析

解构赋值可以用来快速地从数组或对象中提取值并赋给变量。
const arrs = [1, 2, 3];
const [a, b, c] = arrs;
console.log(a, b, c); // 1 2 3

const objs = {x: 1, y: 2, z: 3};
const {x, y, z} = obj;
console.log(x, y, z); // 1 2 3

3、模板字符串

ES6新增的创建字符串的方式，使用反引号定义
let testName = '宇宙大帅逼'
let installStr = `${testName},帅是一辈子` // 宇宙大帅逼，帅是一辈子

4、箭头函数

新的函数声明方式，不绑定this

function showEr(a,b){
    return a+b
}
const showEr = (a,b) => { return  a+b }
//{}函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
const showEr = (a,b) => a+b

5、默认参数

函数可以设置默认参数，当调用函数时没有传入该参数时，会使用默认值
const test=(name='大帅比')=> `我是${name}`
console.log(test());//我是大帅比
console.log(test('宇宙无敌大帅比'));//我是宇宙无敌大帅比

6、扩展运算符

a）对象或者数组合并

//数组合并 
const ary1 = [1, 2, 3]; 
const ary2 = [4, 5, 6];
const ary3 = [...ary1, ...ary2];
console.log(ary3) //[1, 2, 3, 4, 5, 6]

//对象合并
const obj1 = {x: 1, y: 2};
const obj2 = {z: 3};
const obj3 = {...obj1, ...obj2};
console.log(obj3) //{x: 1, y: 2,z: 3}

b）可以将数组转为用逗号分隔的参数序列

let ary = [1, 2, 3];
console.log(...ary);// 1,2,3

7、class类

class Person {
 //构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  //类方法
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
//使用extends继承Person类
class Student extends Person {
  constructor(name, age, grade) {
    //使用super调用Person类的构造函数
    super(name, age);
    this.grade = grade;
  }
}
var student = new Student("admin", 12, 1);
	student.name;   //'admin'
	student.age;    //'12'
	student.sayHello(); //'Hello, my name is admin, I'm 12 years old'

8、Promise

Promise是一种新的异步编程方式，可以更方便地处理异步操作，解决地狱回调非常好用
new Promise((resolve, reject) => {
    //成功返回
    resolve(xxx)
    //失败返回
    reject(xxxx)
}).then((res)=>{
    //成功参数
}).catch((err)=>{
    //失败参数
})

二、Array 的扩展方法

1、Array.from()

将类数组或可遍历对象转换为真正的数组
let array = {'0': 'a','1': 'b','2': 'c'}; 
console.log(Array.from(array)); //['a', 'b', 'c']

2、Array.find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let arr = [1,33,44,2,6,9]
let a= arr.find(v => v > 10)
console.log(a) // 33

3、Array.includes()

是查看数组中是否存在这个元素，存在就返回true,不存在就返回false
[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false

4、Array.map()、Array.filter()

map()要利用原数组经过运算后的数组，或者从对象数组中拿某个属性

filter()是将符合挑选的筛选出来成为一个新数组，新数组不会影响旧数组
let arr = [1, 33, 44, 2, 6, 9];

let newarr1 = arr.filter((v) => v > 10); //newarr1-------[33, 44]
let newarr2 = arr.filter((v) => v * 2);  //newarr2-------[1, 33, 44, 2, 6, 9]

let newarr3 = arr.map((v) => v > 10);    //newarr3-------[false, true, true, false, false, false]
let newarr4 = arr.map((v) => v * 2);     //newarr4-------  [2, 66, 88, 4, 12, 18]

5、Array.reduce()

实现累积调用，所以常用于数组求和，数组求乘积

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
let mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

6、some()、every()

some()找到一个符合条件的就返回true,所有都不符合返回false。
every()数组所有值都符合条件才会返回true,有一个不符合返回false。
let arr = [1,2,3,4,6,11]

let newarr = arr.some((v) => v>10)
console.log(newarr) //true

let newarr2 = arr.every((v) => v>10)
console.log(newarr2) //false

三、Object的扩展方法

1、Object.is()

方法用来判断两个值是否为同一个值，返回一个布尔类型的值
const obj1 = {};
const obj2 = {};
console.log(Object.is(obj1, obj2));

2、Object.assign()

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { a:5 , c: 3 };
//对象合并，把后面对像合并到第一个对象，对象里相同的属性会覆盖
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}

3、Object.keys()、Object.values()、Object.entries()

Object.keys() 返回对象所有属性

Object.values() 返回对象所有属性值

Object.entries() 返回多个数组，每个数组是 key–value

let person = {name: "admin",age: 12,language: ["java", "js", "css"]};
console.log(Object.keys(person)); //[ 'name', 'age', 'language' ]
console.log(Object.values(person)); //[ 'admin', 12, [ 'java', 'js', 'css' ] ]
console.log(Object.entries(person));
/* [
    ["name", "admin"],
    ["age", 12],
    ["language", ["java", "js", "css"]]
   ]; */

四、String的扩展方法

1、startsWith() 和 endsWith()

startsWith()表示参数字符串是否在原字符串的头部，返回布尔值

endsWith()表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!';
str.startsWith('Hello') // true 
str.endsWith('!')       // true

2、repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串。
'x'.repeat(3)      // "xxx" 
'hello'.repeat(2)  // "hellohello"

五、set

它类似于数组，但是成员的值都是唯一的，没有重复的值

let mySet = new Set([1,2,3]);//里面要传一个数组，否则会报错
console.log(mySet);  //{1,2,3}

mySet.add(4); //添加某个值，返回 Set 结构本身
console.log(mySet);  //{1,2,3,4}

mySet.delete(1);  //true 删除某个值，返回一个布尔值，表示删除是否成功
mySet.has(1);  //false 返回一个布尔值，表示该值是否为 Set 的成员
mySet.clear();    // 清除 set 结构中的所有值
console.log(mySet);  //{2,3,4}

利用Set对象唯一性的特点，可以轻松实现数组的去重

let arr = [1,1,2,3,4,4];
let mySet = new Set(arr);
let newArr = Array.from(mySet);
console.log(newArr);  //[1,2,3,4]