ES6新增的属性和方法

大家好，想必大家在面试的过程中，经常会问到自从ES6以后新增了什么属性和方法？

以下是我总结的一些ES6新增的主要属性和方法，以及简要的示例:

1.let 和 const 声明，let 和 const 提供了块级作用域的变量声明方式，取代了 var 的作用域限制问题。

2.箭头函数   使用时注意thi指向

const fn = () => {
  console.log(this);
};

3.模板字符串

let name1 = "zhangsan";
let str = `${name1} hello world`;

4.解构赋值

let [a, b, c] = [1, 2, 3];
let { x, y, z } = { x: 1, y: 2, z: 3 };
console.log(a, b, c, x, y, z); // 1 2 3 1 2 3

5.默认参数

function fn(a, b = 2) {
  console.log(a, b);
}
fn(1)

6.展开运算符

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

7.类和继承

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  say() {
    console.log(`我的名字是${this.name}，今年${this.age}岁了`)
  }
}

let person = new Person('张三', 18)
person.say()  // 我的名字是张三，今年18岁了

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age)
    this.grade = grade
  }
  // 重写父类的方法
  say() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, and I'm in grade ${this.grade}.`);
  }

  study() {
    console.log(`${this.name} 喜欢学习`);
  }
}
let student = new Student('李四', 20, 3)
student.say()
student.study()

8.模块化 （ES5用require）    import    export关键字

9.Promise 对象

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功')
  }, 1000)
})

10.新的数据结构 包括 Map、Set、WeakMap 和 WeakSet

// Set  会自动去重
let set = new Set([1, 2, 3, 4, 4, 4, 4])
console.log(set);

// Map
let map = new Map([
  ['name', '张三'],
  ['age', 18],
  ['sex', '男'],
]);
console.log(map.get('name')); // 张三

// WeakMap
let obj = {name:'zs'}
let weakMap = new WeakMap();
weakMap.set(obj, '张三');  //set(key: object, value: any)
console.log(weakMap.get(obj)); //get(key: object)

// WeakSet
let obj = { name: 'zs' }
let weakSet = new WeakSet();
weakSet.add(obj);
console.log(weakSet.has(obj)); //true

11.Symbol 类型 用于创建唯一的对象属性名，防止属性名冲突。

// let s1 = Symbol('name');

// console.log(s1); //Symbol(name)

12.迭代器和生成器

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
let g = gen();
console.log(g.next().value); //1
console.log(g.next().value); //2
console.log(g.next().value); //3
console.log(g.next().value); //undefined

13.新增数组方法

 Array.prototype.find()、Array.prototype.findIndex()、Array.prototype.includes() 等等。

数组的更多方法，可以查看我的另外一篇文章https://blog.csdn.net/abc123abccc/article/details/140435873?spm=1001.2014.3001.5502

 14.新的字符串方法

 String.prototype.startsWith()、String.prototype.endsWith()、String.prototype.repeat() 等等

let str = 'asdasdasdsdasad'
console.log(str.startsWith('as')); // true
console.log(str.endsWith('ad')); // true
console.log(str.repeat(3)); // asdasdasdsdasadasdasdasdsdasadasdasdasdsdasad

15.Object 新的静态方法

Object.assign()、Object.keys()、Object.values()、Object.entries() Object.is() Object.assign() 等等

let obj = {
  name: '张三',
  age: 18,
  sex: '男',
};
let obj1 = {
  name: '张三',
  age: 18,
  sex: '男',
};
let obj2 = {
  hobby:'跳舞'
}
let res1 = Object.keys(obj)
console.log(res1); // ['name', 'age', 'sex']
let res2 = Object.values(obj)
console.log(res2); // ['张三', 18, '男']
let res3 = Object.entries(obj)
console.log(res3); // [['name', '张三'], ['age', 18], ['sex', '男']]
let res4 = Object.is(obj, obj1)
console.log(res4); //false
let res5 = Object.assign({}, obj, obj2)
console.log(res5); // {name: '张三', age: 18, sex: '男', hobby: '跳舞'}

16. async await

async function asyncWithError() {
  try {
    let result = await someAsyncOperation();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

17.Array.prototype.flat() 和 Array.prototype.flatMap()

let arr = [1, 2, [3, 4]];
let flattened = arr.flat();
console.log(flattened);// [1, 2, 3, 4]

18.可选链操作符 (?.)

let obj = { age: 18, sex: '男' };
console.log(obj?.name); // undefined

19. ？？

// undefined ?? []  //[]
// null ?? []  //[]
// 0 ?? 123   //0
// 左边有值 // []  //返回左边
// let obj = { age: 18, sex: '男' };
// console.log(obj?.name ?? '张三'); //张三
console.log(undefined ?? []); //[]
console.log(null ?? []); //[]
console.log( 0 ?? 123 ); //0

以上是我总结的常用的属性和方法，欢迎大家评论补充，有错误指出错误，即使改正！