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对象与字符串之间相互转换
- 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"}
- 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"}"
字符串转化为数组
- parseint
- number
数组站华为字符串
- string---->array
- split
- array---->string
- join 传入的是分割符号
- tostring
数组方法
- 增
- push 从数组最后面添加
- unshift 从数组最前面添加
- concat 不改变数组结构
- 删
- pop 从后面删除
- shift 从前面删除
- splice(下标,值)
- 改
- arr[index] = value
- slice:(startIndex,endIndex)不改变数组结构,返回截取内容
- 查
- indexof
- arr[index]
- charat(index)
字符串方法
- slice 分割
- indexof 查找
- 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>