//获得页面所有HTML标签。一是获取，二是去重
var a = document.getElementsByTagName('*');
var arr = [],ar=[];
function m(){
for(var i=1;i<a.length;i++){
ar.push(a[i].tagName);
}
for(var j=0;j<ar.length;j++){
if(arr.includes(ar[j])===false){
arr.push(ar[j]);
}
}
return arr;
}

//Best方案ES6，利用set特性去重
let tags = [...document.getElementsByTagName('*')].map((v) => {
	return v.tagName
})
tags = [...new Set(tags)]

//快速排序
function quicksort(x){
	if(x.length<= 1){//必须<=
		return x;
	}

let middle = x.splice(Math.floor(x.length/2),1);
let left = [],right = [];

for(let i = 0;i<x.length;i++){
	if(x[i]<middle){
		left.push(x[i]);
	}else{
		right.push(x[i])
	}
}
return quicksort(left).concat(middle,quicksort(right));
}
var result = quicksort([2,1,4,7,3,8,5,0]);

//冒泡排序
function bubblesort(x){
for(let i = 0,len = x.length;i<len;i++){
	for(let j = i+1;j<len;j++){//区间继续优化
		if(x[i]>x[j]){
			let temp = x[i];
			x[i] = x[j];
			x[j] = temp;
		}
	}
}
return x;
}
var result = bubblesort([2,1,4,7,3,8,5,0]);
console.log(result);

function chose(x) {
    var len = x.length,
        minindex, middle;
    for (let i = 0; i < len; i++) {
        minindex = i;
        for (let j = i + 1; j < len; j++) {
            if (x[j] < x[minindex]) {
                minindex = j; //不断循环找最小值的索引
            }
        }
        middle = x[i];
        x[i] = x[minindex];
        x[minindex] = middle;

    }
    console.log(x);
}
chose([2,4,0,1,2,8,5])

function deepclone(obj){
let newObj = obj.constructor=== Array?[]:{};
	for(let i in obj){
	newObj[i] = typeof obj[i] === 'object'?deepclone(obj[i]):obj[i];
	}
return newObj;
}
var result = deepclone({m:[1,2],n:{k:5}});
console.log(result);

var str = 'aasjhdhdhjjjsssa';
str = str.split('').sort().join(''); //排序
var value = '',
    index = 0;
var re = /(\w)\1+/g;
str.replace(re, function($0, $1) {
    //$0 是aaa dd ...这几项。$1是a d ..这几项
    //执行时是一个个执行的，先是aaa，再是dd这样子
    if (index < $0.length) {
        index = $0.length; //不断覆盖长度短的，故最终的index就是最长的
        value = $1; //最终的value就是最长的那个元素
        //一个小bug，最长的有好几个怎么办，加入index===$0.length的判断
    }
})
console.log(index + 'is' + value)

//嵌套循环
function reduceDimension(arr){
    var reduced = [];
    for(var i=0;i<arr.length;i++){
        for(var j=0;j<arr[i].length;j++){
            reduced.push(arr[i][j]);
        }
    }
    return reduced;
}

//concat
function reduceDimension(arr){
    var reduced = [];
    for(var i=0;i<arr.length;i++){
            reduced = reduced.concat(arr[i]);
        }
    return reduced;
}

//apply concat
//apply参数1为被调用函数的this，参数2为被调用对象的arguments。即数组的各个元素依次成为被调用函数的各个参数。
function reduceDimension(arr){
return Array.prototype.concat.apply([],arr);
}

<button @click="getData"></button>
getData(){
    this.$emit('getData');
}

<son @getData='getData'></son>
<div></div>//获取的数据显示在这里

getData(){
    axios.get('url').then((res)=>{
        this.here = res;
    })
}

export default {
    method: 'get',
    url: 'localhost:6666',
    headers: {
        token: 'ftv1443qby6bdfa41t90sfvq89hg3h54u989m9imog79g4'
    },
    data: {
        id: 666,
        name: 'ColMugX'
    }
}

//主文件中引入
import axios from 'axios'
import config from './config'

let conf = config;
conf.url = '';//修改与配置不同的配置
//此处可以使用请求拦截器
/*axios.interceptors.request.use((config)=>{
        config.url = '';
        return config;
      })*/
axios(config).then(...)

function A(){
    return axios.get('');
}
function B(){
    return axios.post('','');
}
axios.all([A(),B()])
.then(axios.spread((res1,res2)=>{
    //对两个数据进行相应处理
}))

//axios封装为fetch，直接取链接就好 
//axio.js
import config from 'config.js'
//加个拦截器处理请求和响应
axios.interceptors.response.use(
    response => {
        return response
    },
    error => {
        if(error.response){
            switch (error.response.status){
                case 404:
                console.log('request 404');
                break
                case 500:
                console.log('request 500')
                break
            }
        }
        console.log(error);
        return Promise.reject({code:'-100',message:'wait'})
    }
)
//封装请求并暴露出来
export function fetch(url,options) {
     var opt = options||{}
    return new Promise((resolve,reject)=>{
        axios({
            method:opt.type || 'get',
            url: url,
            params: opt.params || {},
            // 判断是否有自定义头部，以对参数进行序列化。不定义头部，默认对参数序列化为查询字符串。
            data: (opt.headers ? opt.data : stringify(opt.data)) || {},
            responseType: opt.dataType || 'json',
            // 设置默认请求头
            headers: opt.headers || {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
        })
        .then(res => {
            if(res.data.code===0){
                rersolve(res.data)
            }else if(res.data.code==='000'){
                resolve(res.data)
            }else{
                reject(res.data)
            }
        })
        .catch(error=>{
            console.log(error)
        })
    })
}
export default axios
//父组件中调用时
fetch('url',{}).then()
//options可选，比如请求类别等均可在调用时覆盖

<div id="content">
    <div class="left">sub</div>
    <div class="right">extra</div>
    <div class="main">main</div>
</div> //注意先写两侧栏再写中间栏,否则侧栏会被挤到下一列

 <div id="bd">         
    <div class="main"></div>        
    <div class="left"></div>        
    <div class="right"></div>  
</div> 
<style>
.main {        
    float: left;       
    width: 100%;   
 }  
 .left {       
    float: left;        
    width: 190px;        
    margin-left: -100%;               
    position: relative;  
    left: -190px;  
}   
.right {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
    position: relative; 
    right: -230px;  
 }
#bd {        
    padding: 0 230px 0 190px;   
 }
 </style>

<div id="main-wrap" class="column">
      <div id="main">#main</div>
</div>
<div class="left"></div>        
<div class="right"></div>
<style>
#main-wrap {        
    float: left;       
    width: 100%; 
 }  
 .left {       
    float: left;        
    width: 190px;        
    margin-left: -100%;
    height:400px; 
}   
.right {        
    float: left;        
    width: 230px;       
    height:400px; 
    margin-left: -230px; 
 }
#main {    
    margin: 0 230px 0 190px;
}
</style>

<meta http-equiv="refresh" content="2;url=http://www.baidu.com">

@media screen and (min-width:300px) { //横竖屏切花也是使用media screen
    body{
        background-color:red;//当屏幕宽度小于300px时背景变红。
    }
}  //设置多种视图宽度，比如在200px-500px之间的格式...

<img srcset="1-320w.jpg 320w,
             2-480w.jpg 480w,
             3-800w.jpg 800w"
     sizes="(max-width:320px) 280px,
            (max-width:480px) 440px,
            800px"
     src="3-800w.jpg" alt="xx">

<picture>
  <source media="(max-width: 600px)" srcset="111.jpg">
  <source media="(min-width: 800px)" srcset="11.jpg">
  <img src="11.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

var data = {counter:0}
data(){
    return data //在使用多个计算器按钮子组件时，避免互相之前影响数值变化。
}

*子组件 son.vue:*
//props:['xx']  //这个xx的值由父组件传入，在模板中使用可以为``
props:{xx:{
    type:String,
    default:'', //也可以是函数
    validator:function(value){
        return value>1
    }
}
}

 
props:['modalOption']
computed:{
    modal:{
        get(){
            let modal = this.modalOption;//此处接收父组件的参数并赋值给modal
            modal = {//再次赋值是为了初始化默认值，比如有的父组件未传参，直接取默认值就好
            title:modal.title,
            text:typeof modal.text==='String'?modal.text:'a'
            }
            return modal;//这样最终得到的参数兼具传参和默认值了
        }
    }
}

 
*子组件*
<button @click="dothis"></button>
dothis(){
    this.$emit("dothis","data")//将data传到父组件后直接执行相应事件
}
*父组件*
<div @dothis="showdata"></div>
showdata(data){
console.log(data) //父组件中使用了子组件传过来的参数
}

 
<son ref="son"></son>
import son from 'son.vue'
methods:{
    x(){
        this.$refs.son.someMethod();//执行子组件son中的方法。this指的是当前vue实例。
    }
}

 
<ul>
<li :is="son"></li>
</ul>

 
<keep-alive>
<component :is='currentView'></component>//currentView可以设置为任意子组件，keep-alive保证切换出去的子组件仍然保留在内存中。
</keep-aliev>

 
filters:{
    cap(value){
        return value.split('');
    }//将message绑定的字符串转换为数组
}

 
computed:{//依赖缓存！！！如只要message不变，多次访问reMes也不变
reMes(){
    return this.message.split('').reverse().join('');//本质是属性reMes的getter
}
}

 
<input v-model="input"></input>
data:{
    input:'' //输入值
}