JS面试题：join，typeof，querySelector，冒泡事件，值类型，引用类型【诗书画唱】
代码索引：
var arr = ['bar','foo','mee'];
var str = arr.join('@');
console.log(str);
//给下拉框添加一些选项
var sel = document.querySelector('#sel');
sel.add(new Option('本科','本科'));
前言：之后更新的内容都是需要记的，至少提问时，你能回答，并且默写式操作，有时我会创作些视频来进行演示默写式操作。我认为常常记录些演示对我的进步帮助很大。恕我直言，其实目前很多知识都不用记忆，只要保持在网络就可以，但是目前面试都是落后的面试提问等的筛选方法（没办法，因此只能记一些东西），如果有人问你一些“基本”知识，你答不出来，不一定代表你“菜”。
你有能力创作满足各种需求的作品等等就是“牛”。同时我认为很重要的就是记录“演示”。
建议：边“上课”等时，边去跟着”老师等人“写几乎所有的代码等等。无论是整理衣物还是别的生活物品，自己的专栏，记录笔记等等我都有一个我很好的习惯和认为是很好的方法：把常用的放在显而易见的地方。一般我追求的都是高效，自己认为如何高效就如何做，其实有些东西记录后查记录或复制粘贴等等更高效我就这么做，有些记忆到脑子里或自己敲代码等等更高效我就这么做，像js的部分其实自己敲代码等等还更高效一点，以为代码等等也不多且不难理解等等。
发现后的感想：发现“=function(){”这个部分的代码很常见，比如
window.onload=function(){
}
个人想法索引：
其实多记录一些对某些内容的想法都自己的理解，记忆，运用等等都有很大的好处。
其实这题理解值类型和引用类型就很容易了：值类型就是赋值一次后就变成固定不可变值，不可重新赋值。引用类型就是可以可变值，可重新赋值。Java中String和js中的object是可以重新赋值的“引用类型”，但在js中string，number，boolean是不可以重新赋值的“值类型”。
面试题索引： 用JavaScript实现， 鼠标点击页面中的任意标签，alert该标签的名称。
单词：其实很多单词等等内容有时内容不用记，我只记我认为够用的部分。
target[ˈtɑːɡɪt]
n.目标
ify
使动;
ify---为后缀, 使成，使……化
这和ize类似
ize---为后缀,做成，变成，……化
serial --> serialize：序列化
simple-->simplify 简单化，简化 （这是个较好理解的例子）
string --> stringify ：字符串化
科普索引：
事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
即子级元素先触发，父级元素后触发。
如果对象是值类型，你给其添加.color或.name等等属性都是没有用的，控制台打印时，打印出来的是undefined
单选框统一设置为name="sex"，自动有只选中一个的效果
边看教程视频做的学习笔记索引：
JS中的3种打印语句：一般的话就是使用图中我写的前2种方法来进行测试等等。
变量没有赋值就是会用typeof检测出undefined
有时的话，所有typeof类型检测运算符时，打印function时，是function类型，但是可以把function看成object类型
typeof可以返回function类型
如果有人问你js数据类型有哪些，一般就说：“number，string，boolean，undefined，null，object”
遍历的2种方式：for，foreach（for...in...)
需要熟悉的对象的遍历，使用for（var XXX in XXX）
Dom获取元素的ID等选择器
和HTML关联的JS代码都要写在window.onload=function(){}中，就是会执行HTML代码后再执行其中的代码
使用querySelector获取元素
获取声明为radio的input单选框的话，可以使用querySelectorAll（’[name="sex"]')等方法获取其“男”，“女”的value值
使用querySelectorAll和innerHTM;L控制台打印获取的div中的文字于console控制台中
doucument.querySelectorAll（’.XXX‘）就是类似于类选择器的作用，效果，功能......
使用querySelector或querySelectAll可以代替其他ID选择器，类选择器，标签选择器，name等相关的选择器等等的效果
设置属性
class为js关键字，所以className对应的是标签的class属性
不常用dom嵌入，防止HTML和JS代码紧密耦合
如果使用图中显示的用document.querySelector(XXX).onclick=function(){}等的方法进行直接js绑定事件，2个方式相同了，就是会前面的一个方式失效，最后的方式才有效
最后一个绑定的事件有效，前面的事件失效的情况，产生了方法覆盖
我理解的事件冒泡就是：给有父子关系的元素，比如包裹方和相对的被包裹方分别是父元素和子元素，即图中的div相对于form，分别是div为父元素，form为子元素，给父子元素都绑定相同的点击事件等等，运行后就都会分别执行事件，由里的子元素到外的父元素的顺序来执行事件，这里不会出现事件覆盖
阻止事件冒泡的方法
关于XXX.toString=function(){}方法
通过JSON.parse(XXX)方法或eval（’(‘+XXX+')');将不可以获取pwd等属性的string值类型JSON字符串，转换成引用类型的js对象，方便引用出其pwd等属性的对应的值
使用JSON.stringify(XXX)方法将数组或js对象转换成JSON字符串
作业索引：
1、创建三个数组，用for循环对数组进行遍历，使用console.log进行打印。
2、创建三个对象，用foreach遍历，对对象中的属性进行遍历，并且console.log进行打印。
3、创建一个单选框，通过js获取到选中的选项并且打印值。
4、创建一个多选框，通过js获取到选中的选项，要求这些选项使用,进行分割，最后打印出一个总的字符串。
5、创建一个下拉框，通过js添加一些选项进去，并设置某一个选项为默认选中。
6、对第1题的三个数组中的值进行字符串的拼接。
['bar','foo','mee'],拼接成bar,foo,mee的字符串
边看教程视频做的学习笔记 START
js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Null,Undefined）,和一种混合数据类型（Object）。
前面说到js中变量是松散类型的，因此有时候我们需要检测变量的数据类型。
typeof操作符可以检测变量的数据类型（输出的是一个关于数据类型的字符串）。
返回如下6种字符串：number,string,boolean,object,undefined,function.且看如下例子：
var x = 1;console.log(typeof x);//number
var a = undefined;console.log(typeof a);//undefined
var b = null;console.log(typeof b);//object，（null是空对象引用/或者说指针）。
var c = new Object();console.log(typeof c);//object
var e = [1,2,3];console.log(typeof e);//object
var d = function(){ // ... 语句块}console.log(typeof d);//function上面代码中，null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用。
边看教程视频做的学习笔记 END
面试题 START
2. (7分) 用JavaScript实现， 鼠标点击页面中的任意标签，alert该标签的名称。
个人对这题的想法：其实这题用事件冒泡做就很容易。
事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
即子级元素先触发，父级元素后触发。
3. (5分) 请写出下方代码段的执行结果，并说明原因。
var s1 = "abc";
vars2=newString(s1);
s1.color = "blue";
s2.color = "red";
console.log( s1===s2， s1.color, s2.color）
答案：false，undefined，red
个人对这题的想法：其实这题理解值类型和引用类型就很容易了：值类型就是赋值一次后就变成固定不可变值，不可重新赋值。引用类型就是可以可变值，可重新赋值。Java中String和js中的object是可以重新赋值的“引用类型”，但在js中string，number，boolean是不可以重新赋值的“值类型”。
面试题 END
作业 START
1、创建三个数组，用for循环对数组进行遍历，使用console.log进行打印。
<!--
1、创建三个数组，用for循环对数组进行遍历，使用console.log进行打印。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var arr1=["诗书画唱1","三连1","关注1"]
var arr2=["诗书画唱2","三连2","关注2"]
var arr3=["诗书画唱3","三连3","关注3"]
for(var i=0;i<arr1.length;i++){
console.log(arr1[i]);
}
for(var i=0;i<arr2.length;i++){
console.log(arr2[i]);
}
for(var i=0;i<arr3.length;i++){
console.log(arr3[i]);
}
</script>
<body>
</body>
</html>
2、创建三个对象，用foreach遍历，对对象中的属性进行遍历，并且console.log进行打印。
<!--
2、创建三个对象，用foreach遍历,对对象中的属性进行遍历，并且console.log进行打印。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var obj1= {
id: '1',
name: '诗书画唱1',
age: 21,
sex: '男'
};
var obj2= {
id: '1',
name: '诗书画唱2',
age: 22,
sex: '男'
};
var obj3= {
id: '1',
name: '诗书画唱3',
age: 23,
sex: '男'
};
for(var i in obj1) {
console.log(obj1[i]);
}
for(var i in obj2) {
console.log(obj2[i]);
}
for(var i in obj3) {
console.log(obj3[i]);
}
</script>
<body>
</body>
</html>
3、创建一个单选框，通过js获取到选中的选项并且打印值。
<!--
3、创建一个单选框，通过js获取到选中的选项并且打印值。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload=function(){
// var arr=document.querySelectorAll('input');
//
// for(var i=0;i<arr.length;i++){
// if(arr[0].checked){
//// console.log(arr[i].value)
//arr[1].checked=false;
//
// }
// if(arr[1].checked){
//// console.log(arr[i].value)
//arr[0].checked=false;
//
// }
// }
// document.querySelector('body').addEventListener('click',function(e){
// alert(e.target.value);
// });
document.querySelector('#sex1').onclick = function(e){
console.log(e.target.value);
}
document.querySelector('#sex2').onclick = function(e){
console.log(e.target.value);
}
}
//单选框统一设置为name="sex"，自动有只选中一个的效果
</script>
<body>
<input type="radio" id="sex1" name="sex" value="男" checked="checked"/>男
<input type="radio" id="sex2" name="sex" value="女" />女
</body>
</html>
4、创建一个多选框，通过js获取到选中的选项，要求这些选项使用,进行分割，最后打印出一个总的字符串。
<!--
4、创建一个多选框，通过js获取到选中的选项，要求这些选项使用,进行分割，最后打印出一个总的字符串。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload=function(){
document.querySelector('#button').onclick = function(e){
var s="";
var arr=document.querySelectorAll('[type="checkbox"]')
for(var i=0;i<arr.length;i++){
// alert(arr[i].checked)
if(arr[i].checked){
s=s+arr[i].value}
}
console.log(s)
}
}
</script>
<body>
<input type="checkbox" value="点赞"/>
<input type="checkbox" value="投币"/>
<input type="checkbox" value="收藏"/>
<button id='button'>点击后打印选中的多选框拼接的字符串</button>
</body>
</html>
5、创建一个下拉框，通过js添加一些选项进去，并设置某一个选项为默认选中。
老师的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var sexs = document.querySelectorAll('[name="sex"]');
for(var i = 0;i < sexs.length;i ++) {
if(sexs[i].checked) {
console.log(sexs[i].value);
}
}
//给下拉框添加一些选项
var sel = document.querySelector('#sel');
sel.add(new Option('本科','本科'));
sel.add(new Option('大专','大专'));
sel.add(new Option('高中','高中'));
sel.add(new Option('初中','初中'));
//默认选中大专选项
sel.value = '大专';
var arr = ['bar','foo','mee'];
var str = arr.join('@');
console.log(str);
}
</script>
</head>
<body>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked />女
<br>
<input type="checkbox" name="hobbys" value="唱歌" />唱歌
<input type="checkbox" name="hobbys" value="吉他" />吉他
<input type="checkbox" name="hobbys" value="街舞" />街舞
<br>
<select id="sel">
</select>
</body>
</html>
我的方法：
6、对第1题的三个数组中的值进行字符串的拼接。
['bar','foo','mee'],拼接成bar,foo,mee的字符串
<!--
1、创建三个数组，用for循环对数组进行遍历，使用console.log进行打印。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var arr1=["诗书画唱1","三连1","关注1"]
var arr2=["诗书画唱2","三连2","关注2"]
var arr3=["诗书画唱3","三连3","关注3"]
arr11="";
for(var i = 0;i <arr1.length;i ++){
arr11=arr11+arr1[i];
// console.log(arr1[i])
}
arr22="";
for(var i = 0;i <arr2.length;i ++){
arr22=arr22+arr2[i];
}
arr33="";
for(var i = 0;i <arr3.length;i ++){
arr33=arr33+arr3[i];
}
console.log(arr11+arr22+arr33)
var arr4=['bar','foo','mee'];
arr44=arr4[0];
for(var i = 1;i <arr4.length;i ++){
arr44=arr44+","+arr4[i];
}
console.log(arr44)
</script>
<body>
</body>
</html>
作业 END
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//在控制台打印
//console.log('hello');
//弹出警告框
//alert('world');
//在页面上打印
//document.write('abc');
//JS中的数据类型根据变量的赋值来确定
//JS中的变量的数据类型是可以改变的
//数据类型
//number:在js中部分整形和浮点型
var num = 1;
//console.log(typeof num);//number
num = 'Hello world';
//console.log(typeof num);//string
var b = true;
num = false;
//console.log(typeof b);//boolean
//console.log(typeof num);//boolean
//当定义了一个变量，但是没有赋值那么就会产生undefiend
var a;
//console.log(typeof a);//undefined
a = null;
//console.log(typeof a);//object
var o1 = {
name: 'Tome',
age: 19
};
var o2 = new Object();
//console.log(typeof o1);//object
//console.log(typeof o2);//object
var arr = [1,2,3];
//console.log(typeof arr);//object
var fn = function(){
///console.log('Hello world');
}
function fn1(){
}
//console.log(typeof fn);//function
//console.log(typeof fn1);//function
//数组的遍历
var pro = ['德芙巧克力','辣条','力士香皂'];
//for循环
for(var i = 0;i < pro.length;i ++) {
//console.log(pro[i]);
}
//foreach遍历
for(var i in pro) {
//console.log(pro[i]);
}
//对象的遍历
var stu = {
sno: 's0009',
name: '张三',
age: 20,
sex: '男'
};
for(var attr in stu) {
//console.log(stu[attr]);
}
//写在onload方法中的js代码在html代码执行完成以后再执行
window.onload = function(){
var act = document.querySelector('#act').value;
console.log(act);
var ss = document.querySelectorAll('[name="sex"]');
for(var i = 0;i < ss.length;i ++) {
console.log(ss[i].value);
}
var ds = document.querySelectorAll('div');
for(var i = 0;i < ds.length;i ++) {
console.log(ds[i].innerHTML);
}
var es = document.querySelectorAll('.ft');
for(var i = 0;i < es.length;i ++) {
es[i].style.color = 'red';
es[i].style.backgroundColor = 'blue';
}
//给btn按钮绑定点击事件
//这种绑定方式后面绑定的函数会覆盖前面绑定的函数
// document.querySelector('#btn').onclick = function(e){
// alert('abc');
// }
// document.querySelector('#btn').onclick = function(){
// alert('def');
// }
//这种绑定方式不会覆盖，按照绑定的顺序依次执行绑定的函数
//多播事件委托
// document.querySelector('#btn').addEventListener('click',function(e){
// alert('abc');
// });
// document.querySelector('#btn').addEventListener('click',function(e){
// alert('def');
// });
document.querySelector('#mp').onclick = function(e){
alert('按钮的点击事件被触发啦');
//阻止事件冒泡
e.stopPropagation();
}
document.querySelector('#frm').onclick = function(){
alert('表单的点击事件被触发啦');
}
document.querySelector('#myDiv').onclick = function(){
alert('div的点击事件被触发啦');
}
document.querySelector('body').onclick = function(e){
alert(e.target.tagName);
}
}
</script>
</head>
<body>
<div id="myDiv">
<form id="frm">
<input id="mp" type="button" value="冒泡演示" />
</form>
</div>
<input type="button" value="点击" id="btn" />
<input type="text" id="act" value="admin" class="ft"/>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<div>测试文字一</div>
<div class="ft">测试文字二</div>
<div class="ft">测试文字三</div>
<p class="ft">Hello world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//number,string,boolean都是值类型
//object是引用类型
//值类型和引用类型的区别
var str = 'kop';//值类型
var sr = new String(str);//引用类型
str.name = 'Hello';//无效的代码
console.log(str.name);//undefined
sr.name = 'Hello';//有效的代码
console.log(sr.name);//Hello
//覆盖toString方法
sr.toString = function(){
return 'Hello world';
}
//调用了sr的toString方法
//alert(sr);
str.toString = function(){
return 'aaa';
}
//alert(str);
var jsonStr = '{"act":"ADMIN","pwd":123}';
//console.log(typeof jsonStr);//string
//console.log(jsonStr.act);
//将字符串转换成js对象
//方法一：
var obj = JSON.parse(jsonStr);
//console.log(typeof obj);
console.log(obj.act);
//方法二：
var obj1 = eval('(' + jsonStr + ')');
console.log(typeof obj1);
console.log(obj1.pwd);
var sn = '[1,2,3]';
//将sn变成一个数组
var a2 = JSON.parse(sn);
for(var i = 0;i < a2.length;i ++){
console.log(a2[i]);
}
var a3 = eval('(' + sn + ')');
for(var i = 0;i < a3.length;i ++){
console.log(a3[i]);
}
//将js对象转换成json字符串
var stu = {
name: 'tom',
age: 20
};
//将stu转换成一个字符串
var sj = JSON.stringify(stu);
//console.log(sj);
var a1 = ['one','mee','test'];
//console.log(typeof a1);//object
//将a1转换成字符串
var so = JSON.stringify(a1);
//console.log(so);
</script>
</head>
<body>
</body>
</html>
