01-随机数并去重排序
解析：数组去重方法：indexOf---如果得到-1就是不存在，如果不是-1就是存在，inclued---存在就返回true，不存在就返回false
set: 以键值的形式返回，没有键，只有值，类似数组的形式返回
还可以借助对象键唯一的特性实现数组去重
<script>
//需求：随机选取10-100之间的10个数字，存入一个数组，按从小到大排序,并去重
// 获取随机数组：
function getRandom(min, max, total) {
let arr = [];
for (let i = 0; i < total; i++) {
arr.push(Math.floor(Math.random() * (max - min + 1) + min));
}
return arr;
}
let randomArr = getRandom(10, 100, 10);
console.log(randomArr);
// 排序：
let newArr = randomArr.sort((a, b) => {
return a - b;
});
console.log(newArr);
let obj = {}
newArr.forEach(ele => {
obj[ele] = ele;
});
console.log(Object.values(obj));
02-字符串反转
//方法一：
//需求：自定义一个函数， 实现字符串的反转
<script>
function getRevStr(str) {
let newStr = '';
for(let i = str.length - 1; i <= 0; i--) {
newStr += str.charAt(i);
}
return newStr;
}
let str = 'abcdefghijklmn';
console.log(getRevStr(str));
</script>
//方法二：
function getStr(str) {
let newStr = null;
for(let i = 0; i < str.length; i++) {
newStr = str.split('').reverse().join().replace(',','');
}
return newStr
}
let str = 'abcdefg';
console.log(getStr(str));
03-斐波拉契数列
<script>
//需求： 手写一个方法求斐波那契数列的第N项的值
//求斐波拉契数列---前两项之和等于等三项
function getFei(n) {
//设置两个初始值
let one = 1, two = 2;
//设置第三个值
let num = 0;
for(let i = 0; i < n; i++) {
if(n <= 2) {
num = 1;
}else {
one = two;
two = num;
num = one + two;
}
}
return num;
}
console.log(getFei(6));//8
</script>
04-统计一个数出现的次数
<script>
//需求:程序实现对数据统计其出现的次数并按出现次数进行排序
//获取随机数组
function getRandom(min,max,total) {
let arr = [];
for(let i = 0; i < total; i++) {
arr.push(Math.floor(Math.Random() * (max - min + 1) + min))
}
return arr;
}
let result = getRandom(0,10,10);
//获取每一个数字出现了几次
function getCount(arr) {
//声明一个空对象，用来存储数组中出现了几次，主要是利用对象中覆盖的特性
let obj = {};
arr.foreach(ele => {
//是为了计算出现的次数
//如果之前没有出现过这个值，就将对象的这个值的value赋值为1
if(obj[ele] == undefined) {
obj[ele] = 1;
}else {
//如果已经存在了就在原来的基础上加1次
obj[ele]++;
}
});
//遍历对象，取出相对应的变量值
for(let key in obj) {
console.log(key + '出现了' + obj[key] + '次');
}
}
//调用函数
getCount(result);
</script>
05-行转列
<script>
/*转换 =>
let newArr = [
['前端','后端','UI','ETL工程师'],
['3人','5人','2人','10人'],
['8-15k','10-25k','9-11k','6-12k'],
['本科','研究生','大专','大专'],
];
*/
let arr = [
['前端','3人','8-15k','本科'],
['后端','5人','10-25k','研究生'],
['UI','2人','9-11k','大专'],
['ETL工程师','10人','6-12k','大专'],
];
//方法一：
function getNewArr(arr) {
//声明一个新数组
let newArr = [];
for(var i = 0; i < arr[0].length; i++) {
//给新数组添加几个空数组元素
newArr[i] = [];
for(var j = 0; j < arr.length; j++) {
//将arr的行列值赋值给新数组的行列
newArr[i][j] = arr[j][i];
}
}
return newArr;
}
console.log(getNewArr(arr));
//方法二：使用 map 实现
</script>
06-对象转数组
<script>
/*var basket = [
{fruit: "苹果", veg: "胡萝卜", nut: "花生"},
{fruit: "梨", veg: "西芹", nut: "坚果"},
{fruit: "香蕉", veg: "土豆", nut: "杏仁"},
{fruit: "西瓜", veg: "豆芽", nut: "核桃"}
]
// 转换 =>
let arr = [['苹果','胡萝卜', '花生'], ['梨', '西芹', '坚果'], ["香蕉", "土豆", "杏仁"], ["西瓜","豆芽", "核桃"]];
*/
var basket = [
{fruit: "苹果", veg: "胡萝卜", nut: "花生"},
{fruit: "梨", veg: "西芹", nut: "坚果"},
{fruit: "香蕉", veg: "土豆", nut: "杏仁"},
{fruit: "西瓜", veg: "豆芽", nut: "核桃"}
]
//方法一：
function getNewArr(arr) {
let newArr = [];
basket.forEach(ele => {
newArr.push(Object.values(obj));
})
return newArr;
}
console.log(getNewArr(basket));
//方法二：
let result = Array.from(basket, e => Object.values(e));
console.log(result);
</script>
//需求：对象转数组后进行种类分类
let basket = [
{ fruit: '苹果', veg: '胡萝卜', nut: '花生' },
{ fruit: '梨', veg: '西芹', nut: '巴旦木' },
{ fruit: '香蕉', veg: '土豆', nut: '核桃' }
]
function getNewArr(arr) {
let Arr = [];
basket.forEach(ele => {
Arr.push(Object.values(ele));
});
let newArr = [];
for (let i = 0; i < Arr[0].length; i++) {
newArr[i] = [];
for (let j = 0; j < Arr.length; j++) {
newArr[i][j] = Arr[j][i];
}
}
return newArr;
}
console.log(getNewArr(basket));
07-根据id查找内容
<script>
// 员工数组
var employees= [{
name: '张三', // 员工名字
empId: 0, // 员工id
age: 29, // 员工年龄
compId: 1 // 所属公司id
}, {
name: '李四',
empId: 1,
age: 26,
compId: 2
}, {
name: '王五',
empId: 2,
age: 28,
compId: 1
}, {
name: '小明',
empId: 3,
age: 32,
compId: 3
}];
var companies = [{
name: '百度', // 公司名称
id: 1 // 公司id
}, {
name: '阿里巴巴',
id: 2
}, {
name: '腾讯',
id: 3
}];
// 上面两个数组转换=>
//var newArr = ['员工张三，29岁，工作于百度', '员工李四，26岁，工作于阿里巴巴'，'员工王五，28岁，工作于百度', '员工小明，32岁，工作于腾讯']
//方法一：使用 函数原型 filter 进行过滤
let newArr = [];
employees.forEach(ele => {
companies.filter(item => {
if(ele.compId === item.id) {
newArr.push("员工" + ele.name + ',' + ele.age + '岁，工作于'+ item.name)
// console.log("员工" + ele.name + ',' + ele.age + '岁，工作于'+ item.name);
}
})
});
console.log(newArr);
//方法二：
let newArr = [];
employees.forEach(e => {
companies.forEach(ele => {
if(e.compId === ele.id) {
newArr.push("员工" + e.name + ',' + e.age + '岁，工作于'+ ele.name);
}
})
})
console.log(newArr);
</script>
08-去除不及格的学生
<script>
let arr = [
{
id: 1,
groupname: '小组1',
students: [
{id: 1, name: '张小娴', score: 90},
{id: 2, name: '李小宏', score: 70},
{id: 3, name: '吴小说', score: 40},
{id: 4, name: '五小加', score: 99},
]
},
{
id: 1,
groupname: '小组2',
students: [
{id: 5, name: '问小世', score: 60},
{id: 6, name: '萨小斯', score: 50},
{id: 7, name: '权小韦', score: 80},
{id: 8, name: '离小天', score: 55},
]
},
{
id: 1,
groupname: '小组3',
students: [
{id: 9, name: '世小想', score: 70},
{id: 10, name: '邓小睿', score: 78},
{id: 11, name: '沃小考', score: 90},
{id: 12, name: '沙小酱', score: 59},
]
},
]
// 转换 =>
/*let newArr = [
{
id: 1,
groupname: '小组1',
students: [
{id: 1, name: '张小娴', score: 90},
{id: 2, name: '李小宏', score: 70},
{id: 4, name: '五小加', score: 99}
]
},
{
id: 1,
groupname: '小组2',
students: [
{id: 5, name: '问小世', score: 60},
{id: 7, name: '权小韦', score: 80}
]
},
{
id: 1,
groupname: '小组3',
students: [
{id: 9, name: '世小想', score: 70},
{id: 10, name: '邓小睿', score: 78},
{id: 11, name: '沃小考', score: 90}
]
},
]*/
arr.forEach(ele => {
ele.students.forEach((e,i) => {
if(e.score < 60) {
ele.students.splice(i,1);
}
});
// console.log(ele.students);
});
console.log(arr);
</script>
09-判断一个对象是否是数组
function isArrary(arg) {
// 判断传递进来的参数是否是一个对象
if(typeof arg === 'object') {
// 对象原型对象身上的原型方法获取表示该对象的类型
//toString() 方法返回一个表示该对象的字符串
return Object.prototype.toString(arg) === '[object arrary]';
}else {
// 如果不是直接判断为不是数组
return false;
}
}
let obj = {}
console.log(isArrary(obj));
10-冒泡排序
// 冒泡排序：每次比较相邻的两个数，如果后一个比前一个小，换位置
function bubbleSort(arr) {
// 比较的次数
for (let i = 0; i < arr.length - 1; i++) {
// 每次比较几次
for (let j = 0; j < arr.length - 1; j++) {
if (arr[j + 1] < arr[j]) {
// ES6的互换变量
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
return arr;
}
let arr = [3, 2, 4, 1, 5];
console.log(bubbleSort(arr));
分析：
// 原数据：3，2，4，1，5
// 两两相比较：（3，2）（2，4）（4，1）（1，5）
// 第一次：(2，3)，4，1，5
// 第二次：2，3，(1，4)，5
// 第三次：2，(1，3)，4，5
// 第四次：(1，2)，3，4，5
11-快速排序法（二分法）
<script>
// 快速排序法（二分法）：采用二分法，取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边
function quickSort(arr) {
// 判断数组里是否有数据，如果没有返回一个空数组
if (arr.length === 0) {
return [];
}
// 中间数的索引 Math.floor---向下取整
let centerIndex = Math.floor(arr.length / 2);
// 获取中间数
let centerNum = arr.splice(centerIndex, 1);
// 左边数组
let leftArr = [];
// 右边数组
let rightArr = [];
for (let i = 0; i < arr.length; i++) {
// 和中间数进行比较，小的放在左边数组，大的放在右边数组
if (arr[i] < centerNum) {
leftArr.push(arr[i]);
} else {
rightArr.push(arr[i])
}
}
// 递归进行以上操作，并将分割的三部分连接起来 concat()数组连接
return quickSort(leftArr).concat(centerNum, quickSort(rightArr));
}
let arr = [3, 1, 4, 5, 2];
console.log(quickSort(arr));
</script>
12-统计一个字符串出现频率最高的字母/数字
<script>
// 统计一个字符串出现频率最高的字母/数字
function strHeight(str) {
str = String(str);//将数字转换为字符串
let strArr = [...str];//分割成数组
let max = 0;//最多次数
let maxValue = '';//出现最高的值
let obj = {};
strArr.forEach(item => {
// obj[item] 表示 obj 中 item 键的键值
// 利用对象的键只能出现一次的特性，判断之前该键有没有值，如果没有就赋值为1，如果有就在此基础上加1
obj[item] = obj[item] === undefined ? 1 : obj[item] + 1;
if (obj[item] > max) {
max = obj[item];
maxValue = item
}
});
return (`出现频率最多的是${maxValue}，出现了${max}次`);
}
let str = 1123464576532346576
console.log(strHeight(str));
</script>
13-实现一个sleep函数
<script>
//实现一个sleep函数----根据传递的时间，等待执行时间
function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(resolve, time);
})
}
sleep(1000).then(() => {
console.log('你好世界');
})
</script>
14-大小写转换
<script>
let str = 'aBc';
str = str.replace(/[a-zA-Z]/g, content => {
// content.toUpperCase()---转大写
// content.toLowerCase() ---转小写
return content.toUpperCase() === content ? content.toLowerCase() : content.toUpperCase();
})
console.log(str);
</script>
15-三种合并对象的方法
letarr1={a:1,b:2,c:3};
letarr2={d:4,e:5,a:6};
//方法一：拓展运算符，后面相同的属性覆盖前一个
letarr3={...arr1,...arr2};
//方法二：Object.assign()，后面相同的属性覆盖前一个
letarr3=Object.assign(arr1,arr2);
//方法三：Object.keys()，相同的属性只取第一个
Object.keys(arr1).forEach(key=>{arr2[key]=arr1[key]})
16-去重的几种方式
<script>
// 方法一： Set
let arr = [1, 2, 2, 3, 2, 4, 3, 5, 5, 7, 6, 7];
let arr1 = [...new Set(arr)];
// console.log(arr1);
// 方法二：fillter
let arr2 = arr.filter((item, index) => { return arr.indexOf(item) === index })
// console.log(arr2);
// 方法三：
function qc(arr) {
let obj = {};
let arr3 = [];
arr.forEach(item => {
if(obj[item] === undefined) {
obj[item] = obj[item]+1;
arr3.push(item);
}
});
return arr3;
}
console.log(qc(arr));
</script>
17-数组扁平化并排序
<script>
// 将数组扁平化并去除其中重复数据，最终得到一个升序且不重复的数组
// 数组扁平化:多维数组转化为一维数组
// 数组扁平化的几种方式
// 方式一：
let arr = [1, [2, [3, [4, 3, 2,[5,2]]]], 6];
// let arr_flat = arr.flat(Infinity);//数组扁平化
let arr_flat = Array.from(new Set(arr.flat(Infinity))).sort((a, b) => { return b - a });//扁平化并升序排列
// console.log(arr_flat);
// 方式二：
// 获取到扁平化后的数组
let str_replace = Array.from(arr.toString().replace(/[]/g, '').split(',').map(item => {return Number(item);}));
// 对数组进行去重并升序排列
let arr1 = str_replace.filter((item,index) => {
return str_replace.indexOf(item) === index
}).sort((a, b) => { return b - a });
console.log(arr1);
// 方式三：
let str_join = arr.join(',').split(',').map(item => {
return parseInt(item);
}).sort((a, b) => { return b - a })
// console.log(str_join);
// 方式四：
// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）,会循环遍历
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr).sort((a, b) => { return b - a });
}
return arr;
}
// console.log(flatten(arr));
17-原生js实现双向数据绑定
<body>
</h3>
<!-- <script>
/*
oninput: 是监听绑定输入框的事件
原生js 实现数据双向绑定：
defineProperty：给对象动态绑定属性
Object.defineProperty(绑定数据名称,绑定数据属性,配置项)
*/
var ipt = document.querySelector('#ipt');
var title = document.querySelector('#title');
// 创建一个对象，用于存储生成的数据
var data = {}
Object.defineProperty(data, 'msg', {
// get: 给 msg 赋的初始值
get: function () {
return '你好世界'
},
// set: 当你拿到最新的数据，需要做的事情
set: function (newVal) {
ipt.value = newVal;
title.innerHTML = newVal;
}
})
// 将 msg 绑定到元素身上
ipt.value = data.msg;
title.innerHTML = data.msg;
// input 输入框发生改变时执行的函数
function iptChange(val) {
// 修改数据源，会自动触发 set 方法
data.msg = val;//将输入框中的 value 值赋值给 msg
}
</script> -->
<script>
// 获取元素
var ipt = document.querySelector('#ipt');
var title = document.getElementById('title');
// 声明一个对象，专门拿来存储数
var data = {};
// Object的原型成员 defineProperty(绑定数据名称,绑定数据属性,配置项);
// 作用： 实现动态创建对象属性，实现数据的双向绑定
Object.defineProperty(data,'msg', {
get: function() {
return '你好世界'
},
set: function(newVal) {
ipt.value = newVal;
title.innerHTML = newVal;
}
});
ipt.value = data.msg;
title.innerHTML = data.msg;
function iptChange(val) {
data.msg = val;
}
</script>
</body>
