中午用csdn还没有改版,晚上这就改版了,这效率还真是快啊,有点不太习惯哈哈。
最近秋招真的每天都忙的要死,昨天去面试走太多路,晚上回去发现脚底都磨出水泡了,今天早上六点就醒了,9点到11点做了去哪儿的笔试,又是赛码网,赛码网真的跟我相克啊,我每次用本地编译能通过,但是赛码线上编译就是通不过,心塞。中午午觉没睡,下午一点半斗鱼的笔试,可是北森网又出了问题,题目一直进不去,跑到牛客底下去给斗鱼校招留言,然后3点左右接到电话问我进去没,说是现在可以进去了。120分钟的题我快速的用了不到一个小时做完了。。。因为还约了4点半的电话面试。。。
现在总结一下我没答上了还有忽略的地方。
关于let和const
let和const是ES6语法中新增的,跟var相比,主要存在以下特性:
1、let和const不能变量提升,存在暂时性死区;
console.log(b);//undefined
console.log(a);//报错,Uncaught ReferenceError: a is not defined
let a = 1;
var b = 2;
2、let和const有块级作用域,而var没有;
var i = 1;
if(i==1){
let b = 2; //若是var b = 2;就不会报错
}
console.log(b);//报错,Uncaught ReferenceError: b is not defined
3、let和const不允许重复声明;
var a = 1;
var a = 2; //不会报错
let b = 3;
let b = 4; //报错,Uncaught SyntaxError: Identifier 'b' has already been declared
const c = 5;
const c = 6; //报错,Uncaught SyntaxError: Identifier 'c' has already been declared
4、let和const之间也存在一些区别
这一点是我之前没有注意到的
(1)、let可以声明之后不初始化,const声明的变量,必须立即初始化,不能留到以后赋值;
let a;
console.log(a); //undefined
const b;//报错,Uncaught SyntaxError: Missing initializer in const declaration,就是说const的声明缺少初始化
console.log(b);
(2)、let声明之后可以重复赋值,而const不可以
const声明的是一个只读常量,一旦声明了,常量的值就不能改变。
let a = 1;
a = 2;
console.log(a); //2
const b = 2;
b = 3;
console.log(b); //报错,Uncaught TypeError: Assignment to constant variable.
(3)、结合(2)关于const再补充
这一点是我所忽略的:
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
若const声明的是一个数组或是对象,是可以对数组或对象进行操作的。
const arr = [1,2,3];
arr.push(4);
console.log(arr); //[1,2,3,4]
const obj = {};
obj.name = "dbb";
console.log(obj.name); //dbb
关于怎么添加class的问题
这个问题我平时真的没有注意过哎,明天要来好好看一下,今天到此为止,明天再来总结。
来了,新版的这个csdn编辑貌似有bug哎,不知道他们的程序员发现了没,修改上面的内容的时候,一打字页面就会自动跳转到下面。
关于添加class的问题,我之前还真的没有注意过,刚才好好百度了一下,发现了很多隐藏知识,哈哈,看来我的知识面还是不够广啊。下面来总结一下:
1、使用setAttribute()方法
通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式,也就是说就算你写的是‘CLASS’也会被转换成‘class’;
setAttribute()接受两个参数:要设置的特性名和值;
var div1 = document.getElementsByTagName('div')[0];
div1.setAttribute('class','one');
问题:只能添加一个class,后面再次会覆盖
2、直接使用className这个属性
className,与元素的class特性对应,即为元素指定的CSS类。没有将这个属性命名为class,是因为class是ECMAScript的保留字。可用于设置或返回元素的class属性。
var div1 = document.getElementsByTagName('div')[0];
div1.className = 'one'; //直接使用className属性
div1.className += ' two'; //在后面追加一个,这里two前面要加一个空格,否则会跟前一个连在一起
3、使用HTML DOM classList属性
classList属性返回元素的类名,作为DOMTokenList对象,该元素用于在元素中添加、移除及切换CSS类,classList属性是只读的,但你可以使用add()和remove()方法修改它。
classList的属性:length;返回列表中类的数量;
classList的方法:
add(class1,class2,…)在元素中添加一个或多个类名,若指定的类名已存在则不添加。 contains(class) 返回布尔值,判断指定的类名是否存在。
item(index) 返回类名在元素中的索引值,索引值从0开始,若索引值在区间范围外则返回null;
remove(class1,class2,…) 移除一个或多个类名,若移除不存在的类名,也不会报错;
toggle(class,true|false) 在元素中切换类名,第一个参数为要在元素中移除的类名,并返回false;若该类名不存在则会在元素中添加类名,并返回true;第二个是可选参数,是个布尔值,用于设置元素是否强制添加或移除类,不管该类名是否存在。
var div1 = document.getElementsByTagName('div')[0];
div1.classList.add('one','two'); //一次添加多个类
div1.classList.add('three');//可以在后面追加
console.log(div1.classList.contains('one')); //true
console.log(div1.classList.length); //3
关于事件委托中的target的一些相关问题
经典问题:添加10个li标签,给这10个li标签添加点击事件
解决:动态添加li标签,可以先创建一个临时容器,先将li标签添加到临时容器中,再将临时容器添加到DOM结构中,这样就减少了DOM渲染;10个点击事件的添加使用事件委托,将点击事件绑定在父级元素上,利用事件冒泡的原理,以达到只绑定一个事件而能监听到所有子级元素的目的,从而大大提升性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<div>事件委托
<ul id="list"></ul>
</div>
<script type="text/javascript">
var Ul = document.getElementById('list');
var flag = document.createDocumentFragment();//创建临时容器
var Li = null;
for(var i=0;i<10;i++){
Li = document.createElement('li');
Li.innerHTML = "新增li " + (i+1);
flag.appendChild(Li);
}
Ul.appendChild(flag);
Ul.addEventListener('click',function(event){//点击事件绑定在li标签的父级元素Ul上
var e = event || window.event;
var target = e.target || e.srcElement;
if(target && target.nodeName.toLowerCase() == 'li'){ //通过target找到事件目标
console.log('li');
}
})
</script>
</body>
</html>
event.target和event.currentTarget区别:
event.target表示事件发生点击的元素;
this表示的是注册点击事件的元素,this始终等于event.currentTarget;
若是直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。