目录
2、Object.getOwnPropertyDescriptors()
4、字符串填充方法 padStart() 和 padEnd()
ES6
1、类
class Person {
constructor (name){
this.name = name;
}
console() {
console.log(this.name)
}
}
let woman = new Person("秋雅");
woman.console();2、模块化
export const sub = (a,b)=> a+b;
import { sub } from "文件路径"
console.log(sub(1,2))3、箭头函数
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
4、函数默认值
const fn = (a, b = 2) => {
console.log(a + b)
}
fn(3)5、模板字符串 ` `
6、解构赋值
7、扩展运算符 ...
const a = [1,2,3]
console.log(...a)8、对象属性简写
如果构成对象的字段名称与前面段落中的变量相同，则可以省略该值，看起来更流线型。
9、Promise
1、概念
Promise是JS中进行异步编程的新解决方案，相比回调函数和事件更合理和更强大。
从语法上来说：Promise是一个构造函数
从功能上说：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值。
2、Promise有3种状态
- pending：初始状态也叫等待状态
- resolved：成功状态
- rejected：失败状态
3、Promise和async和await的区别
什么是async/await?
async/await 是ES8（ES2017）提出的基于Promise的解决异步的最终方案。
区别：
1 promise是ES6，async/await是ES8（ES2017）
2 async/await相对于promise来讲，写法更加优雅
3 reject状态：
1）promise错误可以通过catch来捕捉，建议尾部捕获错误，
2）async/await既可以用.then又可以用try-catch捕捉
一个函数如果加上 async ，那么该函数就会返回一个 Promise
async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。当然也存在一些缺点，因为 await
将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。
4、Promise API
1、Promise.resolve(value) 类方法，该方法返回一个以 value 值解析后的 Promise 对象
如果这个值是个 thenable（即带有 then 方法），返回的 Promise 对象会“跟随”这个 thenable的对象，采用它的最终状态（指 resolved/rejected/pending/settled）
如果传入的 value 本身就是 Promise 对象，则该对象作为 Promise.resolve 方法的返回值返回。
其他情况以该值为成功状态返回一个 Promise对象。
2、Promise.reject 类方法，且与 resolve 唯一的不同是，返回的 promise 对象的状态为 rejected。
3、Promise.prototype.then 得到异步任务的正确结果
4、Promise.prototype.catch 获取异常信息
5、Promise.prototype.finally 成功或失败都会执行
6、Promise.all() 接受Promise对象组成的数组作为参数，它的返回参数也是数组。当promise的全部为resolve后，它才会进入.then()方法，只要有一个promise为reject，它就会进入.catch()并发处理多个异步任务，所有任务都能执行完成才能得到结果。
7、Promise.race() 接受的参数与Promise.all()一样，不同的是，它会辨别最快达到resolve或者reject的promise对象，如果这个最快是resolve，则进入.then()方法，如果是reject，则进入.catch()方法并发处理多个异步任务，只要有一个任务完成就能得到结果。
5、Promise是用来解决两个问题的：
★ 支持链式调用，可以解决回调地域问题
回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱缺点：不便于阅读；不便于异常处理
★ 指定回调函数的方式更加灵活
6、Promise的三个缺点
1）无法取消Promise,一旦新建它就会立即执行，无法中途取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
7、Promise的两个特点
1）Promise对象的状态不受外界影响
2）Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆
8、Promise异步调用实例
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
p.then(value => {
console.log(111);
//有且只有一个方式(返回一个pending状态的Promise对象)
return new Promise(() => {});
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});
9、Promise、async、await执行顺序
async function async1(){
console.log('async1 start') //2
// 执行async2函数的 setTimeout
await async2()
setTimeout(function(){
// 等上面执行完在执行
console.log('setTimeout1')//8
},0)
}
async function async2(){
setTimeout(function(){
console.log('setTimeout2')//7
},0)
}
console.log('script start')//1 //执行同步代码
setTimeout(function(){
// 最后执行setTimeout
console.log('setTimeout3')//6
},0)
async1() //调用
//执行先执行同步 输出2
// 调用
// 执行异步setTimeout
new Promise(function(r,j){
console.log('Promise1')//3 //按照代码顺序
r()
}).then(function(){
// 等主线任务完成在执行
console.log('Promise2')//5
})
console.log('script end')//4
10、Promise实例
console.log("start");
setTimeout(()=>{
console.log("setTimeout");
},0);
new Promise((resolve,reject)=>{
for(var i=0;i<5;i++){
console.log(i);
}
resolve() //修改promise状态为成功
}).then(()=>{
console.log("promise回调函数");
})
console.log("end");
第一个宏任务队列
执行主线程上的代码
第二个宏任务
setTimeout
微任务队列
new Promise.then()
1、先执行主线程上的同步代码，输出start
2、遇到setTimeout将其加入到宏任务队列等待执行
3、遇到promise 立即执行，输出 0，1，2，3，4
4、遇到promise的回调函数将其加入到微任务队列
5、执行主线程的同步代码，输出end
6、第一个宏任务队列执行完毕查看存在微任务队列，执行微任务队列中的任务，输出promise的回调函数
7、微任务执行完毕，执行下一个宏任务队列中的任务，输出setTimeout
输出：
start
0
1
2
3
4
end
promise回调函数
setTimeout
ES7
1、includes
使用场景：确认数组或字符串中有我们需要查找的内容
ES8
1、异步函数（Async/Await）
引入了async和await关键字，简化异步操作的编写方式，使代码更易读和理解。async函数会返回一个Promise对象，而在async函数内部可以使用await关键字来暂停执行，并等待Promise对象的解析。
async function asyncFunction() {
try {
const result = await asyncOperation();
console.log(result);
} catch (error) {
console.error(error);
}
}这对于处理异步操作提供了更简洁的语法。async 关键字用于标记一个函数，使其返回一个 Promise 对象。在 async 函数内部，我们可以使用 await 表达式暂停函数的执行，直到一个 Promise 被解析或拒绝。
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function fetchData() {
console.log('Start');
await delay(2000);
console.log('Data fetched');
await delay(1000);
console.log('Processing complete');
}
fetchData();
// 输出: Start -> (等待2秒) -> Data fetched -> (等待1秒) -> Processing complete
2、Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性的描述符，包括可枚举和不可枚举属性。
const obj = {
prop1: 'value1',
prop2: 'value2'
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.prop1);
// { value: 'value1', writable: true, enumerable: true, configurable: true }
console.log(descriptors.prop2);
// { value: 'value2', writable: true, enumerable: true, configurable: true }
这个方法返回一个对象的所有属性的描述符（包括可枚举和不可枚举属性）。它可以用来获取一组属性的完整描述，包括属性的值、可写性、可配置性等等。
const obj = {
prop1: 42,
prop2: 'hello',
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.prop1.value); // 输出: 42
console.log(descriptors.prop2.writable); // 输出: true
3、字符串填充方法（String padding）
const str = 'Hello';
console.log(str.padStart(10, '-'));
// "-----Hello"
console.log(str.padEnd(10, '*'));
// "Hello*****"
字符串填充方法是JavaScript ES8中引入的一项新特性。它允许我们在字符串的开头或结尾填充指定的字符，以达到指定的长度。这对于格式化输出和对齐文本是非常有用的。
4、字符串填充方法 padStart() 和 padEnd()
这两个方法用于在字符串的开头或结尾填充指定的字符，以达到指定的长度。
const str = 'Hello';
const paddedStr = str.padEnd(8, ' World');
console.log(paddedStr); // 输出: 'Hello World'
padStart(targetLength, padString)方法会在原始字符串的前面添加填充字符，直到字符串达到指定的长度targetLength。如果填充字符padString未提供，默认为空格。如果原始字符串已经比目标长度长，则返回原始字符串本身。在你的示例中，str.padStart(10, ‘-’)将返回"-----Hello"，其中填充了5个连字符使得字符串总长度为10。
padEnd(targetLength, padString)方法与padStart()类似，不同之处在于它会在原始字符串的后面添加填充字符，直到字符串达到指定的长度targetLength。如果填充字符padString未提供，默认为空格。同样地，如果原始字符串已经比目标长度长，则返回原始字符串本身。在你的示例中，str.padEnd(10, ‘*’)将返回"Hello*****"，其中填充了5个星号使得字符串总长度为10。
这些字符串填充方法在处理字符串对齐、生成固定长度的文本等场景下非常有用。它们提供了一种简单、直观的方式来操纵字符串，使得代码编写更加方便和易读。
5、Object.values()
返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for…in 循环的顺序相同（区别在于 for-in 循环枚举原型链中的属性）。
var obj1 = {name: '光头强', age: '18', height: '177'}
const list1 = Object.values(obj1);
console.log(list1) // 得到： ['光头强', '18', '177']
var obj2 = {
gtq: {name: '光头强',age: '18',height: '177'},
xd: {name: '熊大',age: '12',height: '190'},
xe: {name: '熊二',age: '10',height: '188'}
}
const list2 = Object.values(obj2);
console.log(list2)
// 打印结果：
/**
* [
* {name: '光头强', age: '18', height: '177'},
* {name: '熊大', age: '12', height: '190'},
* {name: '熊二', age: '10', height: '188'}
* ]
*
*/
// 也可以配合循环讲相同的数组结核
var obj3 = [
{ dhp: '熊出没', name: "光头强", age: '18', tall: '170' },
{ dhp: '熊出没', name: "熊大", age: '12', tall: '190' },
{ dhp: '熊出没', name: "熊二", age: '10', tall: '188' },
{ dhp: '羊村记事', name: "喜洋洋", age: '8', tall: '60' },
{ dhp: '羊村记事', name: "沸羊羊", age: '9', tall: '80' },
{ dhp: '羊村记事', name: "懒洋洋", age: '10', tall: '60' },
{ dhp: '西游记', name: "孙悟空", age: '500', tall: '130' },
{ dhp: '西游记', name: "猪八戒", age: '150', tall: '140' },
{ dhp: '西游记', name: "白龙马", age: '200', tall: '150' }
]
// 封装一个方法
function getNewList(data) {
let newObj = {}
obj3.forEach((item, index) => {
// 解构出每一个对象里面 dhp字段的值---值值值
let { dhp } = item
// 如果在这个新对象里面没有找到，则新增一个对象
if (!newObj[dhp]) {
// 重构对象
newObj[dhp] = {
dhp,
children: [],
}
}
// 如果在对象里面找到有相同的 dhp 字段的值，则Push进入children里面
newObj[dhp].children.push(item)
})
let newArr = Object.values(newObj)
return newArr
}
const list3 = getNewList(obj3);
console.log(list3)
// 打印结果：
// [
// {
// "dhp": "熊出没",
// "children": [
// { "dhp": "熊出没", "name": "光头强", "age": "18", "tall": "170" },
// { "dhp": "熊出没", "name": "熊大", "age": "12", "tall": "190" },
// { "dhp": "熊出没", "name": "熊二", "age": "10", "tall": "188" }
// ]
// }, {
// "dhp": "羊村记事",
// "children": [
// { "dhp": "羊村记事", "name": "喜洋洋", "age": "8", "tall": "60" },
// { "dhp": "羊村记事", "name": "沸羊羊", "age": "9", "tall": "80" },
// { "dhp": "羊村记事", "name": "懒洋洋", "age": "10", "tall": "60" }
// ]
// }, {
// "dhp": "西游记",
// "children": [
// { "dhp": "西游记", "name": "孙悟空", "age": "500", "tall": "130" },
// { "dhp": "西游记", "name": "猪八戒", "age": "150", "tall": "140" },
// { "dhp": "西游记", "name": "白龙马", "age": "200", "tall": "150" }
// ]
// }
// ]6、Object.entries()
返回一个给定对象自身可枚举属性的键值对数组。
参数为对象
const obj = { name: 'xiaoming', age: 'seven', sex: 'man', grade: 'four' };
const res = Object.entries(obj)
console.log(res);
// 打印结果：
// [
// ['name', 'xiaoming'],
// ['age', 'seven'],
// ['sex', 'man'],
// ['grade', 'four']
// ]参数为数组
const obj = [1, 2, 3, 4, 5, 6]
const res = Object.entries(obj)
console.log(res);
// 打印结果：
// [
// ['0', 1],
// ['1', 2],
// ['2', 3],
// ['3', 4],
// ['4', 5],
// ['5', 6]
// ]参数为数组（数组中元素包含对象）
const obj = [1, 2, 3, 4, 5, 6, { a: 'a' }, { b: 'b' }, { c: 'c' }]
const res = Object.entries(obj)
console.log(res);
// 打印结果：
// [
// ['0', 1],
// ['1', 2],
// ['2', 3],
// ['3', 4],
// ['4', 5],
// ['5', 6],
// ['6', { a: 'a' }],
// ['7', { b: 'b' }],
// ['8', { c: 'c' }]
// ]参数为数组（数组中元素为对象）
const obj = [{ a: 'a' }, { b: 'b' }, { c: 'c' }]
const res = Object.entries(obj)
console.log(res);
// 打印结果：
// [['0', { a: 'a' }], ['1', { b: 'b' }], ['2', { c: 'c' }]]Object转换成Map
new Map()构造函数接受一个可迭代的entries。借助Object.entries方法你可以很容易的将Object转换为Map。
const obj = { name: 'xiaoming', age: 'seven', sex: 'man', grade: 'four' };
console.log(Object.entries(obj));
// 打印结果：
// [
// ['name', 'xiaoming'],
// ['age', 'seven'],
// ['sex', 'man'],
// ['grade', 'four']
// ]
const map = new Map(Object.entries(obj));
console.log(map);
// 打印结果：
// Map(4) {
// 'name' => 'xiaoming',
// 'age' => 'seven',
// 'sex' => 'man',
// 'grade' => 'four'
// }总结：
Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for...in 循环遍历该对象时返回的结果一样，但是不会遍历其原型属性。
拓展：
Object.keys()
返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的key名称。
var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]Object.assign()
用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
Object.getOwnPropertyNames()
Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。
通过该方法生成的数据，可以来获取当前对象的大小。
ES9
ES9-新特性_es9 前端_零OO的博客-CSDN博客
推荐
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
