ES6
let和const
解构赋值
箭头函数
箭头函数和普通函数的区别
- 箭头函数相当于匿名函数，并且简化了函数定义，箭头函数有两种格式：一种只包含一个表达式，连{...}和return都省略掉了，还有一种可以包含多条语句，这时候就不能省略{...}和return
- 箭头函数是匿名函数，不能作为构造函数，不能使用new
let FunConstructor = () => {
console.log('lll');
}
let fc = new FunConstructor();
- 箭头函数不绑定arguments，取而代之的用rest函数...解决
function A(a){
console.log(arguments);
}
A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let B = (b)=>{
console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]
- 箭头函数不绑定this，会捕获其所在上下文的this，作为自己的this
var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
}
obj.b();
obj.c();
var obj = {
a: 10,
b: function(){
console.log(this.a); //10
},
c: function() {
return ()=>{
console.log(this.a); //10
}
}
}
obj.b();
obj.c()();
- 箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对this并没有影响
- 普通函数
let obj = {
name: "qianzhixiang",
func: function(a,b){
console.log(this.name,a,b);
}
};
obj.func(1,2); // qianzhixiang 1 2
let func = obj.func;
func(1,2); // 1 2
let func_ = func.bind(obj);
func_(1,2);// qianzhixiang 1 2
func(1,2);// 1 2
func.call(obj,1,2);// qianzhixiang 1 2
func.apply(obj,[1,2]);// qianzhixiang 1 2
- 箭头函数
let obj = {
name: "qianzhixiang",
func: (a,b) => {
console.log(this.name,a,b);
}
};
obj.func(1,2); // 1 2
let func = obj.func;
func(1,2); // 1 2
let func_ = func.bind(obj);
func_(1,2);// 1 2
func(1,2);// 1 2
func.call(obj,1,2);// 1 2
func.apply(obj,[1,2]);// 1 2
- 箭头函数没有原型属性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}
箭头函数不能当做Generator函数，不能使用yield关键字
扁平化数组
flat： 参数：拉平的层级，如果不论层级，均扁平化处理的话，则传入参数infinity
const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
const value = deps[item];
if(Array.isArray(value)){
member = [...member,...value]
}
}
member = [...new Set(member)]
可选链操作符
const name = obj && obj.name;
复制代码
吐槽
ES6中的可选链操作符会使用么？
改进
const name = obj?.name;
复制代码
空值合并运算符
??：当左边为undefined||null时，返回右边的数值 在处理输入框相关业务时，往往会判断输入框未输入值的场景。
if(value !== null && value !== undefined && value !== ''){
//...
}
复制代码
吐槽
ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？
if(value??'' !== ''){
//...
}
Promise
模块化
ES6新增的数组方法
forEach
入参有三个，当前元素，当前元素的下标，当前的数组，不会修改原来数组的值
map
入参有三个：当前元素，当前元素的下标，当前数组，创建一个新数组
filter
入参有三个，同上：当前元素，当前元素的下标，当前数组 filter是用来过滤的，过滤数组中不满足条件的元素，把满足条件的放在新数组中，并且不会改变原数组
reduce
入参有两个，回调函数和初始值；
回调函数的入参有4个，累计器，当前元素，元素的下标，当前数组
every
入参有三个同上：当前元素，当前元素的下标，本数组 写一个判断条件，如果所有的条件都满足，则返回true，否则返回false
var arr=[1,2,3];
arr.every((item,index,arr)=>{
return item >=2;
})
some
入参有三个同上：当前元素，当前元素的下标，本数组，
只要有一个为true，则停止循环
let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
console.log(item);
return item > 3;
});
forEach和map的区别
1、map速度比foreach快
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，foreach返回undefined
3、map因为返回数组所以可以链式操作，foreach不能
4, map里可以用return ,而foreach里用return不起作用，foreach不能用break，会直接报错
CSS3
选择器
阴影
边框
背景
渐变
弹性布局
- 都有哪些属性
- flex-direction： row：主轴为水平方向，七点在左端
row-reverse： 主轴为水平方向，七点在右端
column：主轴为垂直方向，起点在上沿
column-reverse： 主轴为垂直方向，起点在下沿
- flex-wrap nowrap：不换行
wrap：换行
wrap-reserve：换行，第一行在下方
- flex-flow 为flex-direction和flex-wrap的缩写，默认为row nowrap
- justify-content 对齐方式 flex-start：左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间距都相等，所以项目之间的间隔比项目与边框的间隔大一倍
- align-items 单根轴线
flex-start：
flex-end
center： baseline： stretch：如果项目为设置高度或设置为auto，将沾满整个容器的高度
- align-content
使用弹性布局实现垂直居中对齐
<div class="test">
<p style=" width: 100px; height: 100px; background: red;">测试一下这个垂直居中的东西 卧槽</p>
</div>
.test {
display: flex;
align-items: center;
justify-content: center;
}
HTML5
inpu的type有哪些值
button，checkbox，radio，file（文件上传），image，password，reset，submit，text，hidden
