前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
如何截取字符串
<!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">
<title>substr</title>
</head>
<body>
<script>
//start 是一个字符的索引。首字符的索引为 0，最后一个字符的索引为 字符串的长度减去1
var str = "abcdefghij";
//substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。
console.log("(1,2): " + str.substr(1, 2)); // (1,2): bc
//负数表示strLength + start 10
console.log("(-3,2): " + str.substr(-3, 2)); // (-3,2): hi
console.log("(-3): " + str.substr(-3)); // (-3): hij
console.log("(1): " + str.substr(1)); // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20, 2)); // (-20, 2): ab
console.log("(20, 2): " + str.substr(20, 2)); // (20, 2):截取为空
</script>
</body>
</html>如何用javascript获取所有的checkbox值220422
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
</head>
<script language="javascript">
function aa() {
var r = document.getElementsByName('r')
for (var i = 0; i < r.length; i++) {
if (r[i].checked) {
console.log(r[i].value + ',' + r[i].nextSibling.nodeValue)
}
}
}
</script>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" name="r" value="1" />a<br />
<input type="checkbox" name="r" value="2" />b<br />
<input type="checkbox" name="r" value="3" />c<br />
<input type="checkbox" name="r" value="4" />d<br />
<input type="checkbox" name="r" value="5" />e<br />
<input type="checkbox" name="r" value="6" />f<br />
<input type="checkbox" name="r" value="7" />g<br />
<input type="checkbox" name="r" value="8" />h<br />
<input type="checkbox" name="r" value="9" />i<br />
<input type="checkbox" name="r" value="10" />j<br />
<br />
<input type="button" onclick="aa()" value="button" />
</form>
</body>
</html>如果ul下面有1000个li
<!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">
<title>Document</title>
</head>
<body>
<script>
window.onload = function(){
var ul=document.getElementById("ul")
ul.onclick = function(e){
e=window.event?window.event:e;
var who=e.target?e.target:e.srcElement;
console.log(who.innerHtml)
}
}
</script>
</body>
</html>字符串反转
<!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">
<title>Document</title>
</head>
<body>
<script>
function myreserve(arr){
// var arr=new Array();
for(var i=0;i<arr.length/2;i++){
var temp=arr[i]
arr[i]=arr[arr.length-i-1]
arr[arr.length-i-1]=temp
}
return arr
}
console.log(myreserve(["1","2","3","4","5"]))
//[5,4,3,2,1]
</script>
</body>
</html>宏任务和微任务
<!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">
<title>宏任务和微任务</title>
</head>
<body>
<script>
console.log(100)
setTimeout(() => {
console.log(200)
})
Promise.resolve().then(() => {
console.log(300)
})
console.log(400)
// 答案为： 100 400 300 200
// setTimeout是个宏任务，而pormise是个微任务，微任务要比宏任务执行的要早
</script>
</body>
</html>实现一个删除字符串前后空格的方法
<!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">
<title>Document</title>
</head>
<body>
<script>
//去除前后空格
String.prototype.deletePlace=function(){
var str=this
while(str[0]===" "){
str.substring(1)
}
while(str[str.length-1]===" "){
str.substring(0,str.length-1)
}
return str
}
</script>
</body>
</html>寄生式继承
<!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" />
<title>寄生式继承</title>
</head>
<body>
<script>
function object(obj) {
function F() {}
F.prototype = obj
return new F()
}
function createAnother(original) {
var clone = object(original) // 通过调用 object() 函数创建一个新对象
clone.sayHi = function () {
// 以某种方式来增强对象
console.log('我是歌谣')
}
return clone // 返回这个对象
}
var person = {
name: 'Nicholas',
friends: ['Shelby', 'Court', 'Van'],
}
//调用方法
var anotherPerson = createAnother(person)
anotherPerson.sayHi() //"我是歌谣"
//原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。无法传递参数
</script>
</body>
</html>寄生组合式继承
<!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" />
<title>寄生组合式继承</title>
</head>
<body>
<script>
function inheritPrototype(Son, Father) {
var prototype = Object.create(Father.prototype) // 创建对象，创建父类原型的一个副本
prototype.constructor = Son // 增强对象，弥补因重写原型而失去的默认的constructor 属性
Son.prototype = prototype // 指定对象，将新创建的对象赋值给子类的原型
}
0
// 父类初始化实例属性和原型属性
function Father(name) {
this.name = name
this.colors = ['red', 'blue', 'green']
}
Father.prototype.sayName = function () {
console.log(this.name)
}
// 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
function Son(name, age) {
Father.call(this, name)
this.age = age
}
// 将父类原型指向子类
inheritPrototype(Son, Father)
// 新增子类原型属性
Son.prototype.sayAge = function () {
console.log(this.age)
}
var instance1 = new Son('xyc', 23)
var instance2 = new Son('lxy', 23)
instance1.colors.push('2') // ["red", "blue", "green", "2"]
console.log(instance1)
instance1.colors.push('3') // ["red", "blue", "green", "3"]
console.log(instance1)
</script>
</body>
</html>总结
标签：function,知识点,console,log,记录,React,str,var,prototype From： https://blog.51cto.com/u_14476028/6501611我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣