實現一些小功能1. 表格的隔行變色 odd取奇數，even取偶數。 2. 去掉a标签的默认样式 "router-link

1. 表格的隔行變色

odd取奇數，even取偶數。

table tr:nth-child(odd){background:#F4F4F4;}/* table下，第奇数个是tr的 背景灰色*/
table td:nth-child(even){color:#C00;} /*table下，第偶数个子元素是td的 字体红色*/
table tr:nth-child(5){background:#73B1E0;color:#FFF;}

完整代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Css3实现表格隔行变色或隔列变色</title>
<style>
body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;}
table{width:500px;border:0;margin:100px auto 0;text-align:center;border-collapse:collapse;border-spacing:0;}
table th{background:#0090D7;font-weight:normal;line-height:30px;font-size:14px;color:#FFF;}
table tr:nth-child(odd){background:#F4F4F4;}
table td:nth-child(even){color:#C00;}
table tr:nth-child(5){background:#73B1E0;color:#FFF;}
table tr:hover{background:#73B1E0;color:#FFF;}
table td,table th{border:1px solid #EEE;}
</style>
</head>
<body>
<table>
 <tr>
    <th>xHTML+CSS</th>
    <th>HTML5+CSS3</th>
    <th>Javascript</th>
    <th>jQurey</th>
 </tr>
 <tr>
     <td>xHTML+CSS</td>
     <td>HTML5+CSS3</td>
    <td>Javascript</td>
    <td>jQurey</td>
 </tr>
 <tr>
    <td>xHTML+CSS</td>
     <td>HTML5+CSS3</td>
    <td>Javascript</td>
     <td>jQurey</td>
 </tr>
 <tr>
     <td>xHTML+CSS</td>
    <td>HTML5+CSS3</td>
     <td>Javascript</td>
     <td>jQurey</td>
 </tr>
 <tr>
     <td>xHTML+CSS</td>
     <td>HTML5+CSS3</td>
     <td>Javascript</td>
     <td>jQurey</td>
 </tr>
 <tr>
    <td>xHTML+CSS</td>
    <td>HTML5+CSS3</td>
    <td>Javascript</td>
    <td>jQurey</td>
 </tr>
 <tr>
     <td>xHTML+CSS</td>
     <td>HTML5+CSS3</td>
    <td>Javascript</td>
    <td>jQurey</td>
 </tr>
</table>
</body>
</html>

2. 去掉a标签的默认样式

a {
    text-decoration: none;
    color: black;
  }

router-link也是会默认渲染为a标签，控制router-link激活后的样式可以使用 "router-link-active" 这个类名。
router-link的一些属性：

replace
添加这个属性的路由在导航后不会留下 history 记录，目测这是一个非常好用的属性，可以解决以前烦死人的 history 问题，大幅提高用户体验。
tag
route-link 会被默认渲染为 a 标签，如果你想让它渲染成其它的标签就可以使用 tag 属性，这样可以解决一些 a 标签的默认样式问题。 tag="div"
exact
设置了这个属性的路由会被认为是处于激活状态，最典型的应用就是导航栏了，比如说一组5个 tab，给第一个 tab 设置这个属性，那么它就是处于选中状态。
active-class
链接激活时的类名，其实这个也是为了方便导航栏切换状态的，设置这个属性就可以让链接在激活时自动切换相应的样式。
router-link-active
这是一个类名，也是上面第四条属性的默认值，就是说链接在被激活时会自动给加上这个 class，所以就可以把这个 class 写在 style 里面，里面写上导航在激活时的一些公共样式，比如字体颜色，大小等。

3. 字符串去重

3.1 正则表达式

简单去除相邻，reg=/(.)\1/gi; 即可。
要求只保留重复字符串的第一次出现的串，如对于字符串"adaaasfjjjbkk"去重后需为："adsfjbk"：

str = "adaaasfjjjbkk";
reg = /(.).*\1/g;
str1 = str.replace(reg,"$1")

3.2 for遍历

function quchong(str){
    let arr = str.split('');
    let newArr = [];
    let flag;
    for(let i = 0;i<arr.length;i++){
        flag=1;
        for(let j = 0; j<newArr.length; j++){
            if(newArr[j]===arr[i]){
                flag=0;
                break;
            }
        }
        if(flag){
            newArr.push(arr[i]);
        }
        
    }
    return newArr.join('');
}

3.3 indexOf


function quchong(str){
	let newStr="";
	for(letr i=0;i<str.length;i++){
		if(newStr.indexOf(str[i])===-1){
			newStr+=str[i];
		}
	}
	return newStr;
}

3.4 search()方法


function quchong(str){
	let newStr="";
	for(letr i=0;i<str.length;i++){
		if(newStr.search(str[i])===-1){
			newStr+=str[i];
		}
	}
	return newStr;
}

3.5 对象属性

function quchong(str){
	let obj={};
	let newStr="";
	for(let i=0;i<str.length;i++){
		if(!obj[str[i]]){
			newStr+=str[i];
			obj[str[i]]=1;
		}
	}
	return newStr;
}

3.6 set数组去重

function quchong(str){
    let arr = str.split('');
    let oSet = new Set(arr);
    let newArr = Array.from(oSet);
    return newArr.join('');
}