前端新手遇到的问题 ---含“ 显示Emoji表情、css属性值、字符串代码理解”知识

问题源自知乎—浪子神剑老师的前端面试每日 3+1，我仅在此为大家提供解题方案以及思路，在此感谢浪子神剑老师。

1. [html] 如何在页面上显示Emoji表情？

2. [css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解

3. [js] 根据下面代码：说出执行结果，并解释为何是会是这样的结果？

var str = 'abc';
console.log(str[1]);

var num = 123;
console.log(num[1]);

 

问题一：[html] 如何在页面上显示Emoji表情？

本次解决运用到了JQ的emoji.js库。

预备知识：本次主要学习了JS代码的先后执行,使用了promise。但是回想一下，其实两个函数的执行单单使用定时器也可以了。

1.Promise

初次调用的函数，进行返回promise函数，同时如果有延迟效果，应该在promise函数中书写

  return new Promise((resolve, reject) => {
    if (val) {
	setTimeout(function() {
	resolve('成功');//只可以传入一个参数值
	}, 1000);

    } else {
	  setTimeout(function() {
		reject('失败');
	  }, 1000);
    }
  }); 

另外，通常会写一个时间间隔函数用于来在then中返回，制造时间异步效果。

function f() {
	return new Promise(resolve => {
		setTimeout(function() {
			resolve();
		}, 2000);
	})
}
 
f()
	.then(function() {
		console.log(1);
		 return f();//返回后会以这个promise实例去执行，只是单单输出1后就马上输出2
	})
	.then(function() {
		console.log(2);
	});

2.localStorage

把值存到浏览器中

localStorage.setItem('Msg_leading_success',status)	

localStorage.getItem('Msg_leading_success') 

3.模板字符串

使用反引号   ` 

内部调用变量时，用法是   `${data.span}`

资源可以看emoji表情包开发工具

另外，编写代码时，遇到了一些错误。

1.讲status赋值给Msg_leading_success并不以为着，if中判断能直接使用，因为赋值是赋值了一个字符串，参考字符串除了空字符其余都为正确，所以只执行true的情况。

 

 

问题二：[css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解

预备知识：

initial 关键字（默认）用于设置 CSS 属性为它的默认值。

document.getElementById("b").style.color = "initial";

inherit 关键字（继承）指定一个属性应从父元素继承它的值。

document.getElementById("mySpan").style.color = "inherit";

unset关键字（不设置）是关键字 initial 和 inherit 的组合。

    如果该属性是默认继承属性，该值等同于 inherit

    如果该属性是非继承属性，该值等同于 initial

 

 

 

问题三：[js] 根据下面代码：说出执行结果，并解释为何是会是这样的结果？

var str = 'abc';
console.log(str[1]);

var num = 123;
console.log(num[1]);

字符串看上去可以理解为一个数组，但是与数组不一样，他不能修改那个位置的字符，只能读取。

数字就是数字，不是数组。

个人理解可能字符串是开辟了一块空间进行存储，而数字仅仅满足于一个字节故不存在空间不定的说法。