//arguments
function func() {
const [a, b] = arguments;
console.log(a, b); //1 2
}
func(1, 2)
//NodeList
const [p1, p2, p3] = document.querySelectorAll(‘p’);
console.log(p1, p2, p3);
//函数参数的结构赋值
const array = [1, 2];
const add = ([x, y]) => x + y;
console.log(add(array)); //3
//交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y); //2 1
//模式匹配,属性名相同的完成赋值
const {
age,
username,
password
} = {
age: 18,
username: ‘Cai’,
password: 123
}
console.log(age, username, password); //18 ‘Cai’ 123
//取别名
const {
age: age,
username: uname
} = {
age: 19,
username: ‘Li’
}
console.log(age, uname); //19 ‘Li’
//对象的属性值严格等于undefined时对应的值才会生效
const {
username = ‘Zhang’, age = 0
} = {
username: ‘alex’
}
console.log(username, age); //alex 0
//如果将一个已经声明的变量用于对象的解构赋值
//整个赋值需要在圆括号中进行
let x = 2;
({
x
} = {
x: 1
})
console.log(x); //1
//函数参数的解构赋值
const Person = ({
age,
username
}) => console.log(username, age); //
Person({
age: 19,
username: ‘Cai’
})
//复杂的嵌套
const obj = {
x: 1,
y: [1, 2, 3],
z: {
a: 5,
b: 6
}
};
const {
y,
y: [, , ss],
z
} = obj;
console.log(ss, y, z);
//字符串的解构赋值
//按照数组的形式
const [a, b, , , e] = ‘hello’;
console.log(a, b, e); // h e o
//字符串的解构赋值
//按照对象的形式
const {
0: a,
1: b
} = ‘hello’
console.log(a, b); // h e
//对象字面量
//实例化构造函数生成对象
const person = new Object();
person.age = 18;
person.speak = function() {};
//对象字面量
const person = {
age: 18,
speak: function() {}
}
🚩 属性的简洁表示法:键名和变量或者常量名一样的时候,可以只写一个
//属性的简洁表示法:键名和变量或者常量名一样的时候,可以只写一个
const age = 19;
const person = {
// ‘age’: age
age
};
console.log(person);
🚩 方法的简洁表示法:方法可以省略冒号和function关键字
//方法的简洁表示法
//方法可以省略冒号和function关键字
const person = {
// speak: function() {}
speak() {
}
}
console.log(person);
🚩方括号语法
//方括号语法和点语法
const prop = ‘age’;
const person = {
};
console.log(person);
🚩调用函数的时候传参了,就用传递的参数如果没传参,就用默认值
const multiple = (x, y) => {
if (typeof y === ‘undefined’) {
y = 1;
}
return x * y;
}
console.log(multiple(2, 2)); //4
函数参数默认值的注意事项
//默认值的生效条件
// 不传递参数或者明确的传递undefined参数 只有这两种情况下 默认值才会生效
const multiply = (x, y = 1) => x * y
console.log(multiply(2, 0)); //0
console.log(multiply(2, null)); //0
console.log(multiply(2, undefined)); //2
//函数参数的默认值 最好从列表的右边开始
// const multiply = (x = 1, y) => x * y;
// console.log(multiply(undefined, 2)); //2
const multiply = (x, y = 1) => x * y;
console.log(multiply(2)); //2
🚩剩余参数:剩余参数永远是个数组 即使没有值 也是空数组
// 认识剩余参数
//剩余参数永远是个数组 即使没有值 也是空数组
const add = (x, y, z, …args) => {
console.log(x, y, z, args);
}
add(1, 2, 3, 4, 5)
🚩剩余参数的注意事项
//箭头函数的剩余参数
// 箭头函数的参数部分即使只有一个剩余参数也不能省略圆括号
const add = (…args) => {
}
//使用剩余参数替代arguments获取实际参数
// const add = function() {
// console.log(argments);
// }
//
const add = (…args) => {
console.log(args); //[1, 2]
}
add(1, 2)
//剩余参数的位置
//剩余参数只能是最后一个参数 之后不能再有其他参数 否则会报错
const add = (x, y, …args) => {
console.log(x, y, args);
}
add(1, 2, 3, 4, 5, 6)
// 剩余参数与解构赋值结合使用
// const [a, …args] = [1, 2, 3, 4, 5];
// console.log(a, args);
const func = ([num, …args]) => {}
func([1, 2, 3, 4])
const {
x,
y,
…z
} = {
x: 1,
b: 2,
y: 3,
d: 4
}
console.log(x, y, z);
//数组展开运算符的基本用法
console.log(Math.min(…[2, 33, 44])); //2
//相当于
console.log(Math.min(3, 33, 22)); //3
🚩区分剩余参数和展开运算符
//区分剩余参数和展开运算符
//剩余参数 2,3,4->:[2,3,4]
//展开运算符: [2,3,4]->2,3,4
const add = (…args) => {
console.log(args);
}
add(1, 2, 3, 4) //[1,2,3,4]
const add = (…args) => {
// console.log(args);
console.log(…args);
}
add(1, 2, 3, 4) //1 2 3 4
console.log([
…[1, 2, 3], 4, 5
]); //[1, 2, 3, 4, 5]
//对象的展开
const apple = {
color: ‘red’,
taste: ‘nice’
}
console.log({…apple
});
console.log({…apple
} === apple); //false
//合并对象
// 新对象拥有全部的属性 相同的属性 后者覆盖前者
const apple = {
color: ‘红色’,
shape: ‘球形’,
taste: ‘甜’
}
const pen = {
color: ‘黑色’,
shape: ‘长方形’,
use: ‘写字’
}
console.log({…apple,
…pen
});
// 对象中属性的展开
// 不对展开对象中的对象属性
const app = {
features: {
taste: ‘甜’
}
}
const pen = {
features: {
color: ‘黑色’,
shape: ‘圆柱形’
},
use: ‘写字’
}
console.log({…app,
…pen
})
//Set
//数组:数组是一系列有序的数据集合
//Set:是一系列无序,没有重复值的数据集合
const s = new Set();
s.add(1);
s.add(2);
//set中不能允许有重复的值
console.log(s);
//set没有下标去标识每一个值,所以set是无序的也不能像数组那样通过下标去访问set的成员
// set实例的属性和方法
//add方法添加成员
const s = new Set();
s.add(1).add(2).add(3);
console.log(s);
//has方法 判断是否有成员
console.log(s.has(1)); //true
console.log(s.has(100)); //false
//delete删除
s.delete(1);
//使用delete删除不存在的成员,什么都不会发生,也不会报错
s.delete(9);
console.log(s)
//clear方法 一键清除
// s.clear();
// console.log(s)
//forEach
s.forEach(function(value, key, set) {
//Set中value=key
console.log(value, key, set === s)
})
console.log(s)
//size属性
console.log(s.size) //2
1
2
3
-
数组或字符串去重时
-
不需要 通过下标访问的时候 只需要遍历时
-
为了使用Set提供的方法和属性的时候(add、 delete、 clear、 has、 forEach 、size等)
//Map中NaN等于NaN
const s4 = new Map();
s4.set(NaN, 1).set(NaN, 2);
console.log(s4);
//什么时候使用Map
//如果只是需要key-value的结构,或者需要字符串以外的值做键
// 只有模拟现实世界的实体时,才使用对象
const person = {};
//Iterator的作用
//遍历器(迭代器)用来遍历的
//使用
const it = [1, 2]Symbol.iterator;
console.log(it.next()); //{value: 1, done: false}
console.log(it.next()); //{value: 1, done: false}
console.log(it.next()); //{value: undefined, done: true}
//it可遍历对象(可迭代器)
//Symbol.iterator:可遍历对象的生成方法
//什么是iterator?
//Symbol.iterator(可遍历对象生成的方法)->it(可遍历对象)->it.next()->…(直到done为true)
const it = [1, 2, 3]Symbol.iterator;
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
const it = [1, 2, 3];
for (const item of it) {
console.log(item); // 1 2 3
}
-
只要有Symbol.iterator方法 并且这个方法可以生成可遍历对象 就是可遍历的
-
只要可遍历,就可以使用for of循环来统一遍历
- 数组、字符串、Set、Map、arguments、NodeList
- 一般的对象
includes()判断字符串中是否包含某些字符
padStart() 用于头部补全, padEnd() 用于尾部补全 。
参数(接收两个参数):
第一个参数,当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
第二个参数,用于补充的字符串,如果字符串长度过长,则会删除后面的多出的字符串,进行补全。
//在实际开发中的应用
//显示日期格式
//2020-10-10
//2020-1-2
console.log(‘10’.padStart(2, 0));//10
console.log(‘1’.padStart(2, 0));//01
🚩trimStart()、trimEnd()、trimLeft()、trimRight()、trim()
- find()函数用来查找目标元素(查找符合条件的第一个元素),它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined。回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:数组本身
//find(): 找到满足条件的一个立即返回
console.log([10, 20, 30, 50, 100].find((value, index, arr) => {
return value > 10; //20
}))
- findIndex()函数返回符合条件的值的位置(索引),找不到就返回-1。
//findIndex():找到满足条件的一个,立即返回索引
console.log([10, 20, 30, 50, 100].findIndex((value, index, arr) => {
return value > 10; //1
}))
Object.assign(目标对象,源对象1,源对象2,……)用来合并对象,返回的是目标对象
-
同名属性的替换:后面的属性会替换掉前面的属性
-
基本数据类型作为源对象 ,与对象的展开相似 先转换成对象再合并
const apple1 = {
color: [‘红色’, ‘蓝色’],
shape: ‘圆形’,
taste: ‘甜’
}
const pen1 = {
color: [‘黑色’, ‘金色’],
shape: ‘圆柱形’,
use: ‘写字’
}
console.log(Object.assign({}, apple1, pen1))
//合并默认参数和默认参数
const logUser = userOptions => {
const Default = {
username: ‘Zhangsan’,
age: 0,
sex: ‘male’
}
const options = Object.assign({},
Default, userOptions);
console.log(options);
}
//logUser();
logUser({
username: ‘Cai’
})
🚩 Object.keys()、Object.values()、Object.entries()
-
Object.keys():获取对象中的键
-
Object.values():获取对象中的值
-
Object.entries():获取对象的键值
🚩 对象的Object.keys()、Object.values()、Object.entries()与数组的keys()、values()、entries()的方法的区别
-
数组的keys()、values()、entries()的方法是实例方法,返回的都是Iterator
-
对象的Object.keys()、Object.values()、Object.entries()等方法是构造方法 返回的是数组
const p = new Promise((resolve, reject) => {
//Promise有三种状态,一是开始pending(未完成)
//执行 resolve变成fulfilled( resolved)已成功
//执行reject变成reject 已失败
//Promise的状态一旦变化了 就不会再改变了
//pending=>fulfilled( resolved)已成功
resolve({
username: ‘li’
});
//pending=>rejected已失败
// reject();
})
//then方法
p.then((data) => {
console.log(‘success’, data);
}, () => {
console.log(‘error’);
})
console.log§;
-
catch专门用来处理失败状态
-
catch()可以捕获它前面的错误
-
一般建议,Promise对象后面要跟catch方法这样可以处理Promise后面发生的错误
-
catch专门用来处理失败状态
-
catch()可以捕获它前面的错误
-
一般建议,Promise对象后面要跟catch方法这样可以处理Promise后面发生的错误