javascript学习计划2

最新推荐文章于 2024-03-24 13:38:02 发布

代码搬运工的菜鸟

最新推荐文章于 2024-03-24 13:38:02 发布

阅读量230

点赞数

分类专栏： js 前端文章标签： javascript

本文链接：https://blog.csdn.net/MengKun822/article/details/108469549

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

5 篇文章 1 订阅

订阅专栏

JavaScript学习计划2

避免不必要的变量

fullname = this.firstName +" "+this.lastName
document.getElementById('app').innerHTML = fullName

//更好的做法：
document.getElementById("app").innerHTML = this.firstName+" "+this.lastName

ES5的特性：
- string.strim()是去除字符串两边的空格
- array.IsArray()是判断array是不是为数组
- array.forEach()是遍历array数组的所有元素
- array.map()
- array.filter()返回一个过滤后的新数组；如果返回true就留下，false就过滤掉
- array.reduce() 收敛
- array.reduceRight()
- array.every()返回一个布尔值，需要每一项都是true，才返回true
- array.some()返回一个布尔值，只要一个是true，就返回true
- array.indexof()检测某元素在数组中的位置
- array.lastIndexof()从数组的尾部开始检索数组中某元素出现的位置
- JSON.parse()是将文本转化为JavaScript对象
- Date.now()是获取当前的时间
- ES5中的getter和setter的属性
  - getter的方法就是读取对象中的某个值
  - setter的方法是给对象中的某个属性赋值

const person ={
	name: 'Bill',
	age: 30,
	get lang(){
		return this.language
	},
	set lang(value){
		this.language = value
	}
}
//使用setter的属性方法将Chinese赋值给对象中的lang
person.	lang = "Chinese"
//使用getter的属性方法将person对象中的lang渲染到html页面上
document.getElementById('app').innerHTML= person.lang

object.defineProperty(）新的对象属性和方法，允许修改对象的属性、更改对象的属性值、元数据

const person ={
	name: 'Bill',
	age: 30,
	get lang(){
		return this.language
	},
	set lang(value){
		this.language = value
	}
}
//修改person中age的属性
object.defineProperty(person,'age',{
	value : 25,
	writable:true,
	enumberable:true,
	configurable:true
	
})

对象属性的方法
- object.defineProperty(object,property,descriptor) //添加或者修改对象属性值
- object.defineProperties(object,descriptor) //添加多个对象属性值
- object.getOwnPropertyDescriptor(object, property) //访问对象中的属性
- object.getOwnPropertyNames(object) //将所有属性以数组形式返回
- objec.keys(object) //将可枚举属性作为数组返回
- object.getPrototypeOf(object) //获取数组的原型
- object.preventExtensions(object) //禁止向对象添加属性
- object.isExtensible(object) //判断对象是否可以添加属性如果可以则返回true否则false
- object.seal(object) //防止更改对象属性（不是值）
- object.isSealed(object) //判断对象是否被密封，如果是被密封则返回true
- object.freeze(object) //防止对对象进行任何修改
- obect.isFrozen(object) //如果对象被冻结则返回true
对字符串的属性访问 charAt()方法返回想要查询的字符串所在位置

let str = 'China'
console.log(str.charAt(0))

ES6的特性
- javascript let
- javascript const
- 幂(**)
- 默认参数
- array.find()
- array.findIndex()
let 允许使用块作用域声明局部变量

var x = 10 // 此处x=10
function(){
	let x = 6  //此处x=6
}
//此处x = 10

幂（**）与math.pow(x,y)一样 x是底数，y为幂

var x = 3
let y = x ** 2  ==》 math.pow(3,2) //y的结果为9

允许默认参数

function myFunction(x,y=4){
	return x+y;
}
myFunction(5)   //将5赋值给x，对于y则默认是4

array.find()中find方法是检测数组中第一元素的值

let array = [10,23,434,32,2,55,33,41]
array.find(myFunction)
function myFunction(value,index,array){    //注意此函数接收三个值  项目值value,项目索引index,数组本身array
	return value >29
}

新的数字方法
- number.isInteger() //若果参数为整数则返回的是true否则false
- number.isSafeInteger() //安全整数可以确确为双精度的整数

console.log(number.isIteger(10))  //结果为true
console.log(number.isSafeInteger(101.2932322))  //结果为false

两个全局数字的方法
- isFinite() //如果参数是finite或者是NaN的话返回就是false,否则是true
- isNaN() //如果参数是NaN，则isNaN返回的是true否则返回的是false

console.log(isFinite('China'))   //true,China不是一个NaN
console.log（isNaN('China '))    //true

箭头函数：不需要再写function,{}大括号，return

es5
  let a = function (x = 7,y = 8){
  	return x+y
  }
 es6
 let a =(x = 7,y = 8)=> x+y

注：

箭头函数没有自己的this，不合适定义对象方法

使用const比var更安全，因为函数的表达式通常是常量值

JSON是存储数据和传输数据的格式，JSON通常是服务器传送数据给页面使用的（javascript object notation）

JSON是轻量级的数据交换格式

JSON的语法规则：
- 数据是键值对
- 数据由逗号分开
- 花括号保存对象
- 方括号保存数组

JSON.parse()将JSON文本转为对象

2020.9.7 javascript学习计划

自动html表单验证required判断表单是否为空，为空则停止上传

<form action = '/*'>
	<input type= 'text' name = 'username' required>
    <input type = 'submit'>
</form>

验证有HTML约束验证、

disabled	对input输入框禁止输入
max	约束input输入框输入元素的最大值
min	约束input输入框输入元素的最小值
pattern	规定input输入框的输入元素的值模式
required	规定input输入框的值为必填
type	选择input元素的类型

css伪选择器验证

：disabled	设置了disabled属性的input元素
：invalid	选择带有无效的input的元素
：optional	设置required的属性的input元素
：required	选择设置了required的属性的input元素
:valid	选择带有效值的input元素

约束dom的方法

checkValidity()	如果返回true,则说明输入的是有效的数据
setCustomValidity()	设置input元素的validationMessage的属性

<body>

<p>输入数字并点击提交：</p>

<input id="id1" type="number" min="100" max="300" required>

<button onclick="myFunction()">提交</button>

<p>如果该数字小于 100 或大于 300，将显示错误消息。</p>

<p id="demo"></p>

<script>
function myFunction() {
  var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "输入有效";
  } 
} 
</script>

</body>

属性	描述
customError	设置为 true，如果设置自定义的合法性消息。
patternMismatch	设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow	设置为 true，如果元素值大约其 max 属性。
rangeUnderflow	设置为 true，如果元素值小于其 min 属性。
stepMismatch	当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong	设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch	当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing	设置为 true，如果元素（包含 required）没有值。
valid	设置为 true，如果元素值是有效的。

对象

javascript定义了五种原始数据类型

1、number

2、String

3、Boolean

4、null

5、undefine

访问对象的属性：object.property或者object[‘property’]或者object[‘expression’] // x=0 object[x]

javascript 的for in循环遍历对象属性

代码搬运工的菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习计划2

JavaScript学习计划2避免不必要的变量fullname = this.firstName +" "+this.lastNamedocument.getElementById('app').innerHTML = fullName//更好的做法：document.getElementById("app").innerHTML = this.firstName+" "+this.lastNameES5的特性：string.strim()是去除字符串两边的空格array.IsAr
复制链接

扫一扫