ES6常用语法整理笔记
01、ES6 解构赋值
const object = {
a: 1,
b: 2,
c: 3,
d: 4
}
// 在ES5中我们使用 object.property 获取对象的value
console.log(object.a, object.b)
// 如果需要删除对象的某个属性需要
// 但是这样就对源对象进行的删除操作 不想改变源数据需要对当前对象进行深拷贝在进行处理
delete object.a
// 在ES6中我们可以使用 解构赋值进行value获取
// 提示解构赋值必须保证解构的对象存在, 否则会出现undefined,null.
const { a, b, c, d } = object || {};
console.log(a,b,c,d);
// 如果同时在获取多个对象值时存在属性值重复可以进行名称修改
const { a: a1 } = object || {};
const { a: a2 } = object || {};
console.log(a1,a2)
// 如果需要删除对象中的属性值获得其余属性的对象：
const { a, ...otherProperty } = object || {};
console.log(otherProperty) // { b:2, c:3, d:4 }
console.log(object) // { a:1, b:2, c:3, d:4 }
02、ES6 扩展运算
const arr1 = [1,2,3,4];
const arr2 = [5,6,7,8];
const object1 = { a: 1};
const object2 = { a: 2, b: 2};
// ES5中数组合并和对象合并需要借助concat方法和Object.assign()方法
// 数组合并
const arr3 = arr1.concat(arr2); // [1,2,3,4,5,6,7,8];
// 对象合并
// 注意： assign后面的参数如果存在和前面对象的属性相同则会被后面的进行覆盖
// 并且如下所示会对object1 源数据进行更改
const object3 = Object.assign(object1, object2); // { a: 2, b: 2 }
// 如果不想改变源数据 如下即可
const object3 = Object.assign({}, object1, object2); // { a: 2, b: 2 }
// ES6 数组对象合并
// 数组合并
const arr3 = [...arr1, ...arr2]; // [1,2,3,4,5,6,7,8];
// 数组合并去重
const arr4 = new Set([...arr1, ...arr2]); // [1,2,3,4,5,6,7,8];
// 对象合并
// 注意：扩展的后面对象如果存在属性和其之前对象相同则会覆盖其之前的value
const object3 = { ...object1, ...object2 }; // { a: 2, b: 2 }
const object4 = { ...object2, ...object1 }; // { a: 1, b: 2 }
03、ES6 模板字面量
const name = "蜡笔小新";
const age = 5;
// ES5 字符串拼接 以及字符拼接时的逻辑判断
const str = name + '已经'+ age+'岁了,';
if(age >= 5) {
str += '从幼儿园进入到小学了';
} else {
str += '还在幼儿园上学';
}
// ES6 模板字面量 在 ${} 表达式中可以使用 JavaScript 表达式
const str = `${name}已经${age}岁了,${ age>=5? '从幼儿园进入到小学了' : '还在幼儿园上学' }`;
04、ES6 数组
小知识：
类数组是指在写法上跟数组一样，比如arguments，函数的第一个参数是argument[0]，写法上跟数组一样，但是不是数组，它的原型是Object。eg:
// 类数组
Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
0:3
1:2
callee:ƒ functionName()
length:2
Symbol(Symbol.iterator):ƒ values()
__proto__:Object
(1)、Array.includes(value, index) // 包含
// ES5 在条件判断时存在多个条件进行判断处理
const cond = 2;
if(cond == 1 || cond == 2 || cond == 3 || cond ==4){}
// ES6 includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
const condition = [1, 2, 3, 4];
if(condition.includes(cond)){}
// includes 第二个参数决定从哪个下标开始查找 默认下标 0
(2)、Array.from(arrayLike[, mapFn[, thisArg]]) // 将类数组对象或可迭代对象转化为数组。
// 类数组虽然看起类和数组一样但是不能使用数组的方法如ForEach...
// 将Map、Set 转换成数组
const map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
const set = new Set([1, 2, 3]);
console.log(Array.from(map)); // [['key0', 'value0'],['key1', 'value1']]
console.log(Array.from(set)); // [1, 2, 3]
// 将字符串转换成数组
const str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]
(3)、Array.of() // 将给定的元素生成一个数组 不传值为[]
Array.of(1, 2, 3, 4); // [1, 2, 3, 4];
// ES5 写法
function ArrayOf(){
return [].slice.call(arguments);
}
(4)、Array.find(function(currentValue, index, arr),thisValue)
// 返回当前当前func 命中条件 若没有命中 返回undefined
(5)、Array.findIndex(function(currentValue, index, arr),thisValue)
// 返回当前当前func 命中条件的下标位置 若没有命中 返回 -1
(6)、Array.some(function(currentValue,index,arr),thisValue)
// func 中条件判断如果有一个判断值为true 则返回 true
(7)、Array.every(function(currentValue,index,arr),thisValue)
// func 中条件判断如果有一个判断值为false 则返回 false
(8)、Array.map(function(currentValue,index,arr), thisValue) // 不更改原数组 返回新数组
// 对数组内容进行修改 一般常用于api返回数据的修改 必须返回内容 如果没有返回则默认undefined
(9)、Array.filter(function(currentValue,index,arr), thisValue) // 不更改原数组 返回新数组
// 对数组内容进行过滤 不更改原数组 return false 表示该值被过滤处理
(10)、Array.reduce(function(total, currentValue, currentIndex, arr), initVal)
// initVal：初始值 可选 如果不填写则默认数组第一个值为初始值
// total: 如果存在initVal 则为initVal 否则第一次为数组第一个值 其余为计算总和的值
// currentValue: 数组当前对象/值
(11)、Array.fill(value, start, end) // 对指定范围内的内容进行替换
// start：表示 >= start 的下标范围
// end： 表示 < end 的下标范围 默认值是arr.length(数组末尾)
const arr = [1, 2, 3, 4];
arr.fill('k', 1, 3); // [1, 'k', 'k', 4]
(12)、Array.copyWithin(target, start, end) // 改变原数组
// target： 复制的值从哪个下标开始进行替换
// start: 从哪个下标开始进行复制
// end: 复制到哪个下标开始结束
const arr = ['o', 'b', 'j', 'e', 'c', 't'];
arr.copyWithin(1, 3, 5); // ['o', 'e', 'c', 'e', 'c', 't']
// 在上面例子中
// target: 从下标1 开始进行覆盖 就是从 'b' 开始
// start( >= ): 从下标3( >=3 ) 开始进行复制 就是从 'e' 开始
// end( < ): 从下标5( < 5 ) 结束复制 就是到 'c' 结束
// start-end: ['e' 'c']
// 将元素组中的 'b'开始进行覆盖 将['b', 'j'](target)替换成 ['e' 'c'](start-end)
// 被替换的值数量由 start-end 获取到的数量决定
(13)、Array.at()
const arr = [5, 12, 8, 130, 44];
// 在数组中获取数组末尾的值时通常使用 数组长度减一(arr[arr.length-1])
console.log(arr[arr.length-1]); // 44
// 使用at 可以直接获取 -- 方法不仅可用于数组，也可用于字符串和类型数组
console.log(arr.at(-1)); //44
05、ES6 可选链式操作符
// ES5 根据属性获取对象属性值
const name = object && object.name; // 判断object是否存在name属性如果存在则获取value
// ES6
const name = object?.name; // 如果name存在则获取值 否则undefined
const name = object['name']; // 使用 [] 表达式取值 如果对象不存在该属性则返回undefined
const name = object.name; // 使用 . 表达式取值 如果对象不存在则报错终止运行
06、ES6 对象属性名使用表达式
const object = {};
const _index = 1;
// 属性名可以直接使用 [] 表达式动态命名
object[`attr${index}`] = `attr${index}`
07、ES6 空值合并运算符
// ES5 判断当前变量是否为 null , undefined, '' 时
if(value !== null && value !== undefined && value !== ''){};
// ES6 空值合并运行
// 注意：空值合并运算符会允许把 0 和 空字符串 '' 作为有效的数值
// 空值合并运算符 在变量 (value != null || undefined) 时会返回value本身的值
// 如果 (value == null || undefined) 则会返回 ?? 表达式 右侧设定的值
if(value??'' !== ''){}
08、ES6 异步函数 async/await
// ES5 在Api调用时如果存在多个接口调用 且需要异步处理
api1().then(res=>{
api2().then(res2 => {
//...
})
})
// ES6 使用 async/await
const func = async () =>{
const res = await api1();
const res2 = await api2();
// ...
}
09、ES6 Promise
const api1 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 300);
});
}
const api2 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 600);
});
}
// Promise 在处理并发请求时使用Promise.all()
// 注意：如果请求时 其中一个api 失败则不会返回result
Promise.all([api1(), api2()]).then(result=>{
console.log(result); // [res, res2]
}).catch(err=>{
console.log(err);
}).finally(res=>{
// 如果需要在请求完成后处理逻辑
})
// Promise.race() 率先返回用时最短的api值 失败可查看错误日志 catch
Promise.race([api1(), api2()]).then(result=>{
console.log(result); // res || res2
}).catch(err=>{
console.log(err);
}).finally(res=>{
// 如果需要在请求完成后处理逻辑
})
10、ES6 Symbol
// ES6 中新增的一个数据类型 常用在属性名上面
let syObject = {};
const sy = Symbol("key1");
syObject[sy] = "kk";
console.log(syObject); // {Symbol(key1): 'kk'}
// 不会出现在 for...in 、 for...of 的循环中
// 也不会被 Object.keys() 、Object.getOwnPropertyNames() 返回
for (let i in syObject) {
console.log(i);
} // 无输出
Object.keys(syObject); // []
// 可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。
Object.getOwnPropertySymbols(syObject); // [Symbol(key1)]
Reflect.ownKeys(syObject); // [Symbol(key1)]
// Symbol：每次返回一个新的symbol
Symbol('zz') == Symbol('zz'); // false
// Symbol.for(key)：创建一个 symbol 并放入 symbol 注册表中，键为 key 再次调用时则从内存中取出
Symbol.for("key1") == Symbol.for("key1"); // true
// Symbol.keyFor(key)：一般和 Symbol.for 搭配使用
let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1); // "Yellow"
11、ES6 函数(不定参数、默认参数、箭头函数)
// 不定参数
const varargsParams = (...params) => { console.log(params) };
varargsParams(1,2,3); // [1, 2, 3]
varargsParams(2); // [2]
// 默认参数
const defaultParams = (x=1, y=5) => console.log(x+y);
defaultParams(); // 6
defaultParams(2,3); // 5
defaultParams(3); // 8
// 箭头函数 使用箭头函数时 this 概念会被模糊掉，通常都是由调用者决定 this 指向问题
12、ES6 flat() 数组扁平化
const arr = [ 1, 2, 3, [7, 8 , 9, [10, 11, 12, [13, 14, 15],6],5], 4];
// Flat(level) level: 扁平化层级
// flat() 函数将删除原始数组中存在的所有空值 flat()不会改变原数组
const array1 = [1, , 3, , 5];
array1.flat(); // [1, 3, 5]
// level 默认 1 二维数组扁平化
arr.flat(); // [1, 2, 3, 7, 8, 9, [10, 11, 12, [13, 14, 15],6], 5, 4]
// level == 0 // 不改变
arr.flat(0); // [ 1, 2, 3, [7, 8 , 9, [10, 11, 12, [13, 14, 15],6],5], 4];
// level == 2 // 三维数组扁平化
arr.flat(2); // [1, 2, 3, 7, 8, 9, 10, 11, 12, [13, 14, 15], 6, 5, 4]
// level == Infinity 无限深度扁平化
arr.flat(Infinity); // [1, 2, 3, 7, 8, 9, 10, 11, 12, 13, 14, 15, 6, 5, 4]
// level < 0 // 和 flat(0) 结果一致
arr.flat(-Infinity); // [ 1, 2, 3, [7, 8 , 9, [10, 11, 12, [13, 14, 15],6],5], 4];
13、ES6 Map和Set
entries()，keys()和values()
keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。常用来去重处理。
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突
// Map 常用来和对象做对比 相对对象来说 操作便利，内存资源占用小 存储格式 [ key, value ]
const myMap = new Map();
/*
Map 实例的属性和方法:
size：获取成员的数量
set：设置成员 key 和 value
get：获取成员属性值
has：返回一个布尔值，表示该值是否为Map的成员。
delete：返回一个布尔值，表示删除是否成功
clear：清空所有
Map 实例的遍历方法:
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
*/
// myMap.set(key, value) // 设置Map 键，值 -- key可以是任意值
myMap.set('key', "zero");
myMap.set(1, "one");
// myMap.get(key) // 取出对于key值的 value
myMap.get('key'); // zero
// 遍历迭代Map
console.log(myMap); // {'key' => 'zero', 1 => 'one'}
for (var [key, value] of myMap) {
console.log(key + " = " + value); // 'key' = 'zero', 1 = 'one'
}
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value); // 'key' = 'zero', 1 = 'one'
}
// 获取 key
for (var key of myMap.keys()) {
console.log(key); // 'key', 1
}
// 单独获取 values
for (var value of myMap.values()) {
console.log(value); // 'zero', 'one'
}
// Array.from() 可以将Map转成二维数组
Array.from(myMap) // [['key', 'zero'],[1, 'one']]
// 二维数组放入Map中可以转为 Map的键值对
new Map([['key', 'zero'],[1, 'one']]) // {'key' => 'zero', 1 => 'one'}
// Map 可以对多个Map实例进行合并处理 效果和Object.assign类似 键名相同 后面的覆盖前面
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的
// {1 => 'uno', 2 => 'dos', 3 => 'three'}
var merged = new Map([...first, ...second]);
// Set 一般用来去重处理 存储格式 [ value ]
const mySet = new Set();
/*
Set 实例的属性和方法:
size: 返回Set实例的成员总数。
add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
Set 实例的遍历方法: 因为Set 并没有Key 所以在调用时返回的都是value , entries 则是把value当成key
keys()：返回键名的遍历器。 {1, 5, {…}, {…}}
values()：返回键值的遍历器。{1, 5, {…}, {…}}
entries()：返回所有成员的遍历器。{1 => 1, 5 => 5, {a: 1, b: 2} => {a: 1, b: 2}, {a: 1, b: 2} => {a: 1, b: 2}}
forEach()：遍历 Map 的所有成员。1, 5, {a: 1, b: 2}, {a: 1, b: 2}
*/
// 相对于Map来说 Set和Array类似 只是Set的值是唯一的
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性
// 存储的对象内容相同但是 在堆区的地址并不一样 所以可以保存下来
// 堆栈的概念可以查看下面链接
const o = {a: 1, b: 2};
mySet.add(o);
mySet.add({a: 1, b: 2}); // [{a: 1, b: 2}, {a: 1, b: 2}]
// Set转Array
[...mySet]; // [1, 5, {a: 1, b: 2}, {a: 1, b: 2}]
14、ES6 Object的entries()，keys()和values()
let obj = { a: 1, b: 2, c: 3 };
// 获取对象的key
Object.keys(obj); // ['a', 'b', 'c']
// 获取对象的value
Object.values(obj); // [1, 2, 3]
// 将 key 和 value 以数组的形式都返回 转成二维数组
Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]
// 如果不使用循环获取entries的值
entries.next().value; // ['a', 1]
entries.next().value; // ['b', 2]
entries.next().value; // ['c', 3]
// 二维数组转成Map集合
// Object.entries方法的一个用处是，将对象转为真正的Map结构。
new Map(Object.entries(obj)); // {'a' => 1, 'b' => 2, 'c' => 3}
JavaScript中 堆栈的概念。
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
