ES6
类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const
ES7
1.Array.prototype.includes
Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值
const name = ['Tom','Jerry','Bob']
console.log(name.includes("Tom")); //true
console.log(name.includes("Jack")); //false
2.指数操作符
在 ES7 中引入指数运算符「 ** 」，用来实现幂运算，功能与 Math.pow 结果相同
console.log(2 ** 10); //1024
console.log(Math.pow(2,10)); //1024
ES8
1.async 和 await
async 和 await 两种语法结合可以让异步代码像同步代码一样
await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象
await 返回的是 promise 成功的值
await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
async 函数的返回值为 promise 对象，
promise 对象的结果由 async 函数执行的返回值决定
2.Object.values 和Object.entries
1.Object.values() 方法返回一个给定对象的所有可枚举属性值的数组
2. Object.entries() 方法返回一个给定对象自身可遍历属性 [key,value] 的数组
3. Object.getOwnPropertyDescriptors 该方法返回指定对象所有自身属性的描述对象
ES9
1.Rest/Spread 属性
Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
const one = {
a:"aa"
}
const two = {
b:"bb"
}
const three = {
c:"cc"
}
const all = {...one,...two,...three}
console.log(all);
2.正则表达式命名捕获组
ES9 允许命名捕获组使用符号『 ? 』 , 这样获取捕获结果可读性更强
一般方式：
let str = "<a href='百度http://www.baidu.com'>百度</a>"
//提取url与【标签文本】
const reg = /<a href='(.*)'>(.*)<\/a>/;
//执行
const result = reg.exec(str)
console.log(result.groups); // undefined
命名捕获组：
let str = "<a href='百度http://www.baidu.com'>百度</a>"
const reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
const result = reg.exec(str)
console.log(result);
console.log(result.groups.url); // http://www.baidu.com
console.log(result.groups.text); // 百度
3.正则表达式反向断言
ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。
let str = "js234566酷酷酷222啦啦啦" //正向断言
const reg = /\d+(?=啦)/
console.log(reg.exec(str));
let str = "js234566酷酷酷222啦啦啦"//反向断言
const reg = /(?<=酷)\d+/
console.log(reg.exec(str));
正则表达式 dotAll 模式
正则表达式中点 . 匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现
ES10
1.Object.fromEntries
在ES8中使用Object.entries将对象转化为数组，在ES10中，使用Object.fromEntries将数组转换为对象。
2.trimStart 和 trimEnd
trimStart清除字符串左侧空白；trimEnd清除字符串右侧空白
3.Array.prototype.flat 与 flatMap
Array.prototype.flat将多维数组转化为低维数组，参数为深度，是一个数字
示例：
const arr = [1,2,[3,4,5]]
console.log(arr.flat());
const arr1 = [1,2,[3,4,[5,6]]]
console.log(arr1.flat(2));
//flatMap
const arr2 = [1,2,3,4]
const result = arr2.flatMap(item => [item*10])
console.log(result);
4.Symbol.prototype.description
获取Symbol的字符串描述
let s = Symbol("Tom")
console.log(s.description); //Tom
ES11
1.String.prototype.matchAll
String.prototype.matchAll得到正则批量匹配的结果
2.类的私有属性
3.Promise.allSettled
接收一个Promise数组，返回一个Promise对象，返回结果永远是成功的状态
4.可选链操作符
?. 在对象层级较深时，不用做层级判断的简便写法
5.动态 import 导入实现按需加载
6.globalThis 对象
不管在任何环境下，globalThis始终指向全局对象
7.BigInt
大整型，应用于大数值运算
JavaScript基础用法（ES5）
string字符串
1. string.length
返回字符串的长度
'abcd'.length // 4
2. string.charAt(index)
返回字符串指定下标的字符
'abcd'.charAt(2) // 'c'
'abcd'[3] // 'd'
3. string.concat(newString)
⽤于将⼀个或多个字符串拼接起来，返回拼接后的新字符串
'aaaa'.concat('bbbb') // 'aaaabbbb'
'aaaa'.concat('bbbb','cccc','dddd','eeee') // 'aaaabbbbccccddddeeee'
4. string.includes(searchString)
判断字符串中是否包含了想要查询的字符，包含返回true,不包含返回false
'a1a2a3'.includes('a') // true
'a1a2a3'.includes('a2a3') // true
'a1a2a3'.includes('d') // false
5. string.endsWidth(searchString)
确定字符串是否以某个字符结尾
'a1a2a3'.endsWith('a1a2a3') // true
'a1a2a3'.endsWith('a3') // true
'a1a2a3'.endsWith('a') // false
6. string.startsWidth(searchString)
确定字符串是否以某个字符开始，和endsWidth方法相对应
7. string.indexOf(searchString) 查找字符串中第一次出现指定字符的索引（也可用于判断是否包含指定字符串，包含返回下标，不包含返回-1）
'aaaa'.indexOf('a') // 0
'aaaa'.indexOf('b') // -1
'aaaac'.indexOf('c') // 4
8. string.lastIndexOf(searchString)
查找字符串中最后一次出现指定字符的索引（也可用于判断是否包含指定字符串，包含返回下标，不包含返回-1）
'aaaa'.lastIndexOf('a') // 3
'aaaa'.lastIndexOf('aa') // 2
'aaaa'.lastIndexOf('c') // -1
9. string.slice(startIndex，endIndex)
截取字符串并返回一个新的字符串,包含开始下标字符,不包含结束下标字符
'aabbaabbcc'.slice(1,-1) // abbaabbc
'aabbaabbcc'.slice(-3,-1) // bc
'aabbaabbcc'.slice(1) // abbaabbcc
'aabbaabbcc'.slice(3,8) // baabb
10. string.substring(startIndex, endIndex)
截取字符串并返回一个新的字符串，包含开始下标字符，不包含结束下标字符，不支持负值
'012345'.substring(1,4) // '123'
'012345'.substring(1) // 12345
11. string.split()
可以使⽤⼀个指定的分隔符来将字符串拆分成数组，返回⼀个数组
'aa bb cc'.split('') // [ 'a', 'a', ' ', 'b', 'b', ' ', 'c', 'c' ]
'aa bb cc'.split(' ') // [ 'aa', 'bb', 'cc' ]
'aa bb cc'.split('a b') // [ 'a', 'b cc' ]
12. string.trim()
删除字符串两端空白字符串
13. string.trimStart()
删除字符串开头空白字符串
14. string.trimEnd()
删除字符串末尾空白字符串
15. string.toLowerCase()
将英文字符串转为小写
16. string.toUpperCase()
将英文字符串转为大写
17. string.replace()
可替换字符串的部分内容
'aabbccaaddaa'.replace('aa','gg') // ggbbccaaddaa
'aabbccaaddaa'.replaceAll('aa','gg') // ggbbccggddgg
18. string.toString() / string.valueOf()
常常配合new String()使用
new String('aaa') // [String: 'aaa']
new String('aaa').toString() // 'aaa'
new String('vvvv').valueOf() // 'vvvv'
19. string.search()
使⽤正则表达式(也可以是目标字符串)查找指定字符串，如果找到则返回⾸次匹配成功的索引，没有找到则返回-1
var str = "hey JudE";
var re = /[A-Z]/g;
var re2 = /[.]/g;
console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J"
console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation
'aabbcc'.serach('bb') // 2
20. string.repeat(count)
将字符串重复指定次数（非负数的整数）并返回新的字符串
"abc".repeat(-1) // RangeError: repeat count must be positive and less than inifinity
"abc".repeat(0) // ""
"abc".repeat(1) // "abc"
"abc".repeat(2) // "abcabc"
"abc".repeat(3.5) // "abcabcabc" 参数 count 将会被自动转换成整数。
"abc".repeat(1/0) // RangeError: repeat count must be positive and less than inifinity
({toString : () => "abc", repeat : String.prototype.repeat}).repeat(2)
//"abcabc",repeat 是一个通用方法，也就是它的调用者可以不是一个字符串对象。
21. string.padEnd()
用给定字符串从末尾填充当前字符串并返回长度为目标长度的新字符串。
'abc'.padEnd(10); // "abc "
'abc'.padEnd(10, "foo"); // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1); // "abc"
22. string.padStart()
用给定字符串从开头填充当前字符串并返回长度为目标长度的新字符串。
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc"
23. string.match()
返回⼀个字符串匹配正则表达式的结果,如果未设置全局匹配，则会返回第⼀个完整匹配及其相关的捕获组，捕获组中包含有groups、index、input等属性。
不常用的一些方法
string.charCodeAt(index) 返回字符串指定下标处字符的utf-16码元值
string.localeCompare(compareString) 返回一个数字，用于指示一个参考字符串 compareString 是否在排序顺序前面或之后或与给定字符串相同。
// 返回值大于0：说明当前字符串string大于对比字符串targetString
// 返回值小于0：说明当前字符串string小于对比字符串targetString
// 返回值等于0：说明当前字符串string等于对比字符串targetString
// 返回值是一个数字，目前的主流浏览器都返回的是1、0、-1三个值，但是也有其他情况，所以不可以用绝对的值等于1、-1这种去判断返回的结果
var str = 'aaa',
strCom = 'bbb',
strCom2 = 'aaa';
str.localeCompare(strCom); //-1
strCom.localeCompare(str); //1
str.localeCompare(strCom2); //0
array数组
1. array.concat(arr0,…arrX)
拼接或拷贝数组，当传入新数组为拼接，不传为拷贝，可传多个参数
[1,2,3].concat([0,1,2]) // [ 1, 2, 3, 0, 1, 2 ]
[1,2,3].concat() // [ 1, 2, 3 ]
[1,2,3].concat([0,1,2],[4],[9]) // [ 1, 2, 3, 0, 1, 2, 4, 9 ]
2. array.every()
遍历查询满足条件的值每一项满足即返回true
const arr = [1,2,3]
const res = arr.every((item,index,arr)=>{
console.log(item,index,arr)
/*
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/
return item
})
console.log(res) // true
3. array.filter()
过滤数组,返回符合条件的新数组
const arr = [7,1,2,3]
const res = arr.filter((item,index,arr)=>{
console.log(item,index,arr)
/* 7 0 [ 7, 1, 2, 3 ]
1 1 [ 7, 1, 2, 3 ]
2 2 [ 7, 1, 2, 3 ]
3 3 [ 7, 1, 2, 3 ]
*/
return item >2
})
console.log(res) // [ 7, 3 ]
4. array.flat()
按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 方法会移除数组中的空项
var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]
5. array.forEach()
遍历数组无返回值
6. array.indexOf(value, startIndex) / array.lastIndexOf(value, startIndex)
从前往后查找元素，value查找的值也是必传值，没找到情况下返回-1
lastIndexOf()从后往前找
const array = [2, 9, 9, 5];
array.indexOf(9) // 1
console.log(array.indexOf(2,-2)); // -1 相当于从[9, 5]中查找2
console.log(array.indexOf(9,-2)); // 2 相当于从[9,9,5]中找9 返回的下标是对应值在原数组[2,9,9,5]中的下标
console.log(array.indexOf(9,-3)); // 1 相当于从[2,9,9,5]中找9 返回的下标是对应值在原数组[2,9,9,5]中的下标且只查找第一个对应值的下标
console.log(array.indexOf(9,2)); // 2 相当于从[9,5]中找9 返回的下标是对应值在原数组[2,9,9,5]中的下标
console.log(array.indexOf(9,1)); // 1 相当于从[9,9,5]中找9 返回的下标是对应值在原数组[2,9,9,5]中的下标且只查找第一个对应值的下标
7. array.map()
遍历数组有返回值,常用作列表数据遍历循环
8. array.reduce() / array.reduceRight()
数组值求和,reduceRight()表示从右往左依次计算
const arr = [1, 2, 3]
arr.reduce((pre,cur,index)=>{
console.log(index) // 0 1 2
return pre+=cur
},0) // 初始值为0，总和为6 初始值为n,则为n+每项值总和
9. array.reverse()
翻转数组
const a = [1, 2, 3];
console.log(a); // [1, 2, 3]
a.reverse();
console.log(a); // [3, 2, 1]
10. array.slice(startIndex，endIndex)
数组截取,包含开始下标，不包含结束下标
const arr = [1, 2, 3]
console.log(arr.slice(0,2)) // [1,2]
console.log(arr.slice(-2,-1)) // [2]
console.log(arr.slice(-1)) // [3]
11. array.some()
遍历查询满足条件的值有一项满足即返回true
const arr = [1, 2, 3]
const res = arr.some((value,index,arr)=>{
console.log(value,index,arr)
/* 1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]*/
return value>2
})
console.log(res) // true
12. array.sort()
对数组进行排序，注：具体为升序还是降序需要通过函数返回来确定
const arr = [1, 2, 3]
const res = arr.sort((a,b)=>{
console.log(a,b)
/* 2 1
3 2*/
return b-a
})
console.log(res) // [ 3, 2, 1 ]
13. array.splice(index, number, item1…itemX)
数组更新、截取、添加、删除，index为必传值，会改变原数组，返回删除的元素
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');
// 从索引 2 的位置开始删除 0 个元素，插入“drum”和 "guitar"
// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素：[], 没有元素被删除
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
// 从索引 3 的位置开始删除 1 个元素
// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素：["mandarin"]
14. array.entries()
对数值键值对遍历, 空槽用undefined补齐
const arr = [1, 2, 3, 2, ,]
console.log(...arr.entries()) // [ 0, 1 ] [ 1, 2 ] [ 2, 3 ] [ 3, 2 ] [ 4, undefined ]
15. array.fill(value, start, end)
数组填充,不包括终止索引
const arr = [{num: 1}, {num: 2}, {num: 3},{num: 2}]
console.log([...arr.fill({num: 0}, 1, 3)]) // [ { num: 1 }, { num: 0 }, { num: 0 }, { num: 2 } ]
console.log([...arr.fill({num: 0}, 1, 10)]) // [ { num: 1 }, { num: 0 }, { num: 0 }, { num: 0 } ]
16. array.find() / array.findLast()
筛选数组中第一个符合条件的值,没有返回undefined
findLast()筛选数组中最后一个符合条件的值，没有返回undefined
const arr = [{num: 1}, {num: 2}, {num: 3},{num: 2}]
const res = arr.find((item,index,arr)=>{
console.log(item,index,arr)
return item.num > 1 // item.num > 8 则res值为undefined
})
console.log(res) // { num: 2 }
17. array.findIndex() / array.findLastIndex()
查找元素在数组中第一次出现的下标，没有返回-1
查找元素在数组中第一次出现的下标，没有返回-1
const arr = [{num: 1}, {num: 2}, {num: 3},{num: 2}]
const res = arr.findIndex((item,index,arr)=>{
console.log(item,index,arr)
return item.num >2
})
console.log(res) // 2
18. array.includes(value, index)
判断一个数组是否包含一个指定的值,对象类型值（引用类型）的数组不能查找到对应的值
index可选，表示从第几个索引开始查找
const arr = [1,2,3,4,5,4,4,3,3,3]
arr.includes(4,6) // true
arr.includes(4,7) // false
19. array.join()
数组转字符串,可指定链接符号
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join()); // "Fire,Air,Water"
console.log(elements.join('')); // "FireAirWater"
console.log(elements.join('-')); // "Fire-Air-Water"
20. array.keys()
对数组键名遍历
var arr = ["a", , "c"];
console.log(denseKeys); // [0, 1, 2]
21. array.values()
对数组键值遍历
const arr = [{a:1},{b:2}]
const arrq = [1,2]
console.log(...arr.values()) // { a: 1 } { b: 2 }
console.log(...arrq.values()) // 1 2
22. array.pop()
删除数组最后一个元素并返回删除元素值,数组为空返回undefined
const arr = [{a:1},{b:2}]
const arrq = [1,2,3,4,5,6]
console.log(arr.pop(1,11),arr) // { b: 2 } [ { a: 1 } ]
console.log(arrq.pop(1,11),arrq) // 6 [1,2,3,4,5]
23. array.push()
向数组末尾添加一个或多个元素
[1,2].push(2,3,5) // [1,2,2,3,5]
24. array.shift()
把数组的第一个元素删除并返回删除元素,如果数组为空则返回undefined ,改变原数组
[1,2,3,4].shift() // 1
25. array.unshift()
向数组开头添加一个或多个元素
26. array.copyWithin(target, start, end)
从数组指定位置拷贝元素到另一个指定位置，会覆盖原有成员
Array.from()将类数组对象转数组
console.log(Array.from({0:1,2:3,'length': 3})) // [ 1, undefined, 3 ]
Array.of()将一组值转为数组
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.isArray()
判断是否为数组类型,返回值为布尔类型
object对象
1. Object.assign()
浅拷贝,通过复制一个或多个对象来创建一个新的对象。
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}
obj1.a = 1;
console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}
console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}}
console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}}
// Deep Clone
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}}
2. Object.entries()
对象转键值对数组
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
Object.keys() 对象键名转数组
Object.values()对象键值转数组
Object.is()判断两值是否相同
Object.fromEntries()把数组转为对象
Object.defineProperty()定义对象属性
Object.defineProperties()定义多个对象属性
Object.create() 使用指定的原型对象和属性创建一个新的对象
Object.getOwnPropertyName()获取对象所有属性名数组
Object.getOwnPropertySymbols()获取symbol对象所有属性名数组
Object.getOwnPropertyDescriptor()获取对象所有属性名数组
Object.hasOwn(obj,key) / obj.hasOwnProperty(key) 判断对象是否包含某个属性名
Object.getPrototypeOf() 获取对象原型链
Object.setPrototypeOf() 设置对象原型链
JavaScript内置函数
- eval() 用于计算字符串表达式的值
eval('2+3') // 5
eval(new String('2+3')) // '2+3' 这是因为new String（)生成的是一个对象类型的字符串[String: '2+3']
eval(new String('2+3').valueOf()) // 5
- toLocaleString() 数值千位分割符
const num = 187878788787
console.log(num.toLocaleString()) // 187,878,788,787
判断是否是字符串
typeof( str2 ) == “string” && str2.constructor === String && Object.prototype.toString.call(str2) === "[object String]"
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
