建个HTML 直接copy吧 Alt + B + F12 看输出吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./js.ico">
<style>
div{
width: fit-content;
margin: auto;
font-size: 20px;
font-weight: 700;
color: black;
}
</style>
<title>基本功以及算法</title>
</head>
<body>
<div>前端开发--基本功以及算法</div>
<div>F12--Console</div>
<script>
// 一、charAt()方法
// 定义和用法
// charAt() 方法可返回指定位置的字符 => 调用时记得return 需要返回值
let str = 'Hello,world!'
console.log(str.charAt(1)) // e
// 二、charCodeAt()方法
// 定义和用法
// charCodeAt() 方法可返回指定位置的字符的 => Unicode 编码 这个返回值是 0 - 65535 之间的整数
let strCharCodeAt = 'Hello,world!'
console.log(strCharCodeAt.charCodeAt(2)) // 108
// 三、concat()方法
// 定义和用法
// concat()方法用于连接两个或多个数组
// 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
// 实例1、将参数连接到数组中
let strConcat = [1,2,3,4]
console.log(strConcat.concat(3,4)) // [1,2,3,3,4]
// 实例2、两个数组连接起来
let arrConcat = [1,2,3,4]
let arrConcat2 = [5,6,7,8]
console.log(arrConcat.concat(arrConcat2)) // [1, 2, 3, 4, 5, 6, 7, 8]
// 实例2、三个数组连接起来
let arrConcat3 = [9,10,11,12]
console.log(arrConcat.concat(arrConcat2,arrConcat3)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
// 四、fromCharCode()
// 定义和用法
// fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串
console.log(String.fromCharCode(72,69,76,76,79).toLowerCase())
// 五、indexOf()
// 定义和用法 => 找不到返回-1
// indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置
console.log(str.indexOf('o')) // 4
console.log(str.indexOf('Hello')) // 0
console.log(str.indexOf(',')) // 5
console.log(str.indexOf('world')) // 6
// 六、lastIndexOf()
// 定义和用法 => 找不到返回-1
// lastIndexOf()方法可返回一个指定的字符串值最后出现的位置 在一个字符串中的指定位置从后向前搜索
console.log(str.lastIndexOf('l',3)) // 3
console.log(str.lastIndexOf('l',5)) // 3
console.log(str.lastIndexOf('l',10)) // 9
// 八、match()
// 定义和用法 => 找不到返回null 正则中使用偏多
// match() 方法可在字符串内检索指定的值 或找到一个或多个正则表达式的匹配
console.log(str.match('Hello'))
console.log((str + 123).match(/\d+/g)) // 匹配出所有的数字返回处理
// console.log((str + 123).match("pp") ??= "huxiaolei") // null
// 九、test()
// 定义和用法 => 检索一个字符串是否匹配一个正则表达式 返回布尔值
console.log(/\d+/g.test(str)) // false
console.log(/\d+/g.test(str + '123')) // true
// 十、replace(需要替换的值, 用来替换的值)
// 定义和方法 => 替换字符
console.log(str.replace(/world/,'huxiaolei')) // Hello,huxiaolei!
// 将字符串中所有单词的首字母都转换为大写
let name = 'aaa bbb ccc';
uw = name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase() + word.substring(1);}
);
console.log(uw)
// 十一、substring和substr截取字符串区别
// 相同点：如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
console.log(str.substring(1)) // ello,world!
console.log(str.substr(1)) // ello,world!
// 不同点：第二个参数
console.log(str.substr(1,9)) // 第二个参数是截取这个字符串的长度
console.log(str.substring(1,9)) // 第二个参数是截取字符串最终的下标
// 十一、search()
// 定义和用法 => 用于检索字符串中指定的子字符串 或检索与正则表达式相匹配的子字符串 返回下标或-1
console.log(str.search(/Hello/)) // 0
console.log(str.search(/hello/)) // -1 对大小写敏感
console.log(str.search(/hello/i)) // 0 忽略大小写的检索
// -------------------------------------------------------------------------------------
// join 将数组连接成字符串
let arr1 = ['George','George','George']
console.log(arr1.join(''))
// replace() 去掉字符串的空格
let string00 = ' Hu xiao lei '
console.log(string00.replace(/\s+/g, ''),'去除所有的空格')
console.log(string00.replace(/^\s*/g, ''),'去除左边的空格')
console.log(string00.replace(/\s*$/g, ''),'去除右边的空格')
console.log(string00.replace(/^\s*|\s*$/g, ''),'去除两端的空格')
// 字符串的大小写转换
// toUpperCase() 大写
// toLowerCase() 小写
// 解析网址
var pop = 'sdfasdasdfwww.xiaohongshu.comdsjksdjsdj'
console.log(pop.substring(pop.indexOf('w'),(pop.indexOf('m')+1))) // substring()
console.log(pop.substr(pop.indexOf('w'),19)) // substr()
// 数组排序
let arrAy = [1,2,3,2,5,3,5,1,6,4]
// 正序
arrAy.sort((a,b)=>{
return a - b
})
console.log(arrAy)
// 倒序
arrAy.sort((a,b)=>{
return b - a
})
console.log(arrAy)
// 冒泡排序
function bubbleSort (arr) {
let len = arr.length;
for(let i=0; i<len; i++) {
for(j=0; j<len-1-i;j++) {
if(arr[j]>arr[j+1]) {
[arr[j],arr[j+1]] = [arr[j+1], arr[j]];
}
}
}
return arr;
}
console.log(bubbleSort(arrAy))
// 数组求和 取最大数 最小数
const array99 = [5, 4, 7, 8, 9, 2];
// 1、求和
console.log(array99.reduce((a,b) => a + b ))
// 2、最大数
console.log(array99.reduce((a,b) => a > b ? a : b))
// 3、最小数
console.log(array99.reduce((a,b) => a < b ? a : b))
// 从数组中过滤出虚假值
const array88 = [3, 0, 6, 7, "", false];
console.log(array88.filter(Boolean))
// 数组去重
let arr99 = ["a", "b", "a", "b", "z", "c", "x", "a", "x", "b", "c"];
let arr88 = []
for(let index = 1;index<arr99.length;index++){
if(arr88.indexOf(arr99[index],0) === -1){
arr88.push(arr99[index])
}
}
console.log(arr88)
// 或
console.log(new Set(arr99))
// 或
let arr999 = arr99.filter((item,index)=> arr99.indexOf(item,0) === index)
console.log(arr999)
// 浅拷贝 + 深拷贝
// 浅拷贝
// 浅拷贝只能拷贝一层属性 并且拷贝的是内存地址 相互之间修改会有影响
let obj22 = {
class: "UI",
age: 20,
love: "eat",
love: {
friuts: "apple",
meat: "beef",
},
};
function pos(b) {
let arr = {};
for (let k in b) {
arr[k] = b[k];
}
return arr;
}
console.log(pos(obj22));
// 深拷贝
// JSON方法
console.log(JSON.parse(JSON.stringify(obj22)))
// 递归算法
function pos2(b) {
let arr = {};
for (let k in obj22) {
if (typeof b[k] === "objeck") {
arr[k] = pos(b[k]);
} else {
arr[k] = b[k];
}
}
return arr;
}
console.log(pos2(obj22));
// 对象扁平化
function flatten (obj) {
const ans = {}
inner(obj, null)
function inner (o, prev) {
for (let key in o) {
if (o[key] instanceof Object) {
if (prev === null) {
inner(o[key], key)
} else {
inner(o[key], prev + '.' + key)
}
} else {
if (prev === null) {
ans[key] = o[key]
} else {
ans[prev + '.' + key] = o[key]
}
}
}
}
return ans
}
let obj = {a:{b:1,c:2,d:{e:5},b:[1,3,{a:2,b:3}],c:3}}
console.log(flatten(obj));
// {
// a: {
// b: 1,
// c: 2,
// d: {e: 5}
// },
// b: [1, 3, {a: 2, b: 3}],
// c: 3
// }
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
