js 算法

275 阅读3分钟

js深拷贝

function cloneDeep(target,map = new WeakMap()) {
  if(typeOf taret ==='object'){
     let cloneTarget = Array.isArray(target) ? [] : {};
      
     if(map.get(target)) {
        return target;
    }
     map.set(target, cloneTarget);
     for(const key in target){
        cloneTarget[key] = cloneDeep(target[key], map);
     }
     return cloneTarget
  }else{
       return target
  }
 
}

封装promise

// promise 封装实现:

function getJSON(url) {
  // 创建一个 promise 对象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();

    // 新建一个 http 请求
    xhr.open("GET", url, true);

    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;

      // 当请求成功或失败时,改变 promise 的状态
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };

    // 设置错误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };

    // 设置响应的数据类型
    xhr.responseType = "json";

    // 设置请求头信息
    xhr.setRequestHeader("Accept", "application/json");

    // 发送 http 请求
    xhr.send(null);
  });

  return promise;
}

手动promiseall

function PromiseAll(promiseArray) {    //返回一个Promise对象
     return new Promise((resolve, reject) => {
     
        if (!Array.isArray(promiseArray)) {                        //传入的参数是否为数组
            return reject(new Error('传入的参数不是数组!'))
        }

        const res = []
        let counter = 0                         //设置一个计数器
        for (let i = 0; i < promiseArr.length; i++) {
            Promise.resolve(promiseArr[i]).then(value => {
                counter++                  //使用计数器返回 必须使用counter
                res[i] = value
                if (counter === promiseArr.length) {
                    resolve(res)
                }
            }).catch(e => reject(e))
        }
    })
}


扁平化

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

交集

arr3 = str1.fifter(function(num){
    return str2.indexOf(num) !== -1
})

计算字符出现的次数

//随便打一串字符做测试
var str = "sdwprwqsjxg",json = {};
 
for (var i = 0, l = str.length; i < l; i++) {
    json[str[i]] = (json[str[i]] + 1) || 1;
}
 
console.log(JSON.stringify(json));
//-> {"s":2,"d":1,"w":2,"p":1,"r":1,"q":1,"j":1,"x":1,"g":1}

js实现驼峰

 function transformStr ( str ) {
        var newStr = '';
        var arr = str.split('-');//split是分隔字符串
        for(var i = 0;i<arr.length;i++){
            var s = arr[i];
            if(i == 0){
                newStr += s;
            }else{
                newStr += s.substr(0,1).toLocaleUpperCase();
                newStr += s.substr(1,s.length-1);
            }
        }

        return newStr;
    }

fifter实现

function filter(arr, filterCallback) {
  // 首先,检查传递的参数是否正确。
  if (!Array.isArray(arr) || !arr.length || typeof filterCallback !== 'function') 
  {
    return [];
  } else {
    let result = [];
     // 每次调用此函数时,我们都会创建一个 result 数组
     // 因为我们不想改变原始数组。
    for (let i = 0, len = arr.length; i < len; i++) {
      // 检查 filterCallback 的返回值是否是真值
      if (filterCallback(arr[i], i, arr)) { 
      // 如果条件为真,则将数组元素 push 到 result 中
        result.push(arr[i]);
      }
    }
    return result; // return the result array
  }
}

实现阶乘

 function JX(num){
            var sum = 1;
            for(i=num;i>0;i--){
                sum = sum*i
            }
            return sum
        }
        console.log(JX(4));

最大值最小值

var max = arr[0];
        for(i=0;i<arr.length;i++){
            if(arr[i]>max){
                max = arr[i];
            }
        }
        console.log(max);
  //math方法
  var max = arr[0];
        for(i=0;i<arr.length;i++){
            max = Math.max(arr[i],max)
        }
        console.log(max)

封装max

function Max(arr){
     var max = arguments[0];
     for (var i = 0; i < arguments.length; i++) {
          if (max < arguments[i]) {
          max = arguments[i];
           }
        }
       return max;
    };
}

斐波那契数列

var Fb = function(n) {
	if( n==1 || n == 2 ){
		return 1
	}else{
		return Fb(n-2) + Fb ( n-1 )
	}
}

function printFb(n){
	for( let i =1; i<=n ; i++){
		console.log(Fb(i))
	}
}

排序

function num(a, b){{
		 return a - b
	 }}
	 var arr = [1,9,8,5,6,2,3,7,4,8,6,3,6,8,9]
	 console.log(arr.sort(num))

数组去重

function chong(arr){
	for( i= 0, i<= arr.length,i++){
		for(j = i+1, i<= arr.length,j++){
			if(arr[i] == arr[j]){
				arr.splice(j,1)
			}
		}
	}
	return arr
}
// set方法

取偶数

        var temp = [];
        for(i=0;i<arr.length;i++){
            if(arr[i]%2==0){
                temp.push(arr[i]);
            }
        }
        console.log(temp);
      filter
      console.log(arr.filter(x=>(x%2==0)))

反转数组

  console.log(arr.reverse());

复制数组

 var arr = [1,2,3,4,5];
    var b = arr.concat();
    console.log(b);

json对象与字符串之间相互转换

  1. json字符串----->json对象
  • 使用JSON.parse()函数
var jsonStr = '{"name":"zhangsan","age":23,"email":"chentging@aliyun.com"}';
var json = JSON.parse(jsonStr);
console.log(json);//输出:Object {name: "zhangsan", age: 23, email: "chentging@aliyun.com"}
  1. json对象------>json字符串
  • JSON.stringify()
   var json = {name: "zhangsan", age: 23, email: "chentging@aliyun.com"};
    var jsonStr = JSON.stringify(json);
    console.log(jsonStr);//输出:"{"name":"zhangsan","age":23,"email":"chentging@aliyun.com"}"

字符串转化为数组

  1. parseint
  2. number

数组站华为字符串

  1. string---->array
  • split
  1. array---->string
  • join 传入的是分割符号
  • tostring

数组方法

  • push 从数组最后面添加
  • unshift 从数组最前面添加
  • concat 不改变数组结构
  • pop 从后面删除
  • shift 从前面删除
  • splice(下标,值)
  • arr[index] = value
  • slice:(startIndex,endIndex)不改变数组结构,返回截取内容
  • indexof
  • arr[index]
  • charat(index)

字符串方法

  1. slice 分割
  2. indexof 查找
  3. concat 连接多个数组

封装原生ajax请求

var xhr = new XMLHttpReaqust()
xhr.open('get', uel)
xhr.send()
a.onreadystatechange = function () {
            if (a.readyState === 4 && a.status == 200) {
                //JSON.parse()将字符串转为json对象
                var reponse = JSON.parse(a.responseText);
                console.log(reponse)
            }
        }

jq 封装ajax

$.ajax({
            url:"https://douban.uieee.com/v2/movie/top250",
            type:"get",
            dataType:"jsonp",
            success:function(res){
                var subjects = res.subjects;
                var data = subjects[0];
                var img = data.images.small;
                var title = data.title;

vue

 new Vue({
            el: '#app',
            data: {
                msg: "hello world"
            },
            //创建之前
            beforeCreate() {
                var url = 'https://douban.uieee.com/v2/movie/top250';
                $.get(url,res=>{
                    console.log(res);
                },"jsonp")
            }

        })

react

    componentDidMount(){
        var url = "https://douban.uieee.com/v2/movie/top250";
        $.ajax({
            url,
            type:"get",
            dataType:"jsonp",
            success: res=> {
                var subjects = res.subjects[0];
                var img = subjects.images.small;
                var title = subjects.title;
                this.setState(()=>{
                    return {
                        img,
                        title
                    }
        
                })
            }
        })
    }
}

随背景滚动可见区域变化

  <style>
        body{
            height: 2000px;
            background: darksalmon;
        }
        .bg{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background: url('./pexels-photo-698319.jpeg');
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div class="bg"></div>
</body>