我是靠谱客的博主 沉静老鼠，最近开发中收集的这篇文章主要介绍javascript学习计划2JavaScript学习计划22020.9.7 javascript学习计划，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
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循环 遍历对象属性
最后
以上就是沉静老鼠为你收集整理的javascript学习计划2JavaScript学习计划22020.9.7 javascript学习计划的全部内容，希望文章能够帮你解决javascript学习计划2JavaScript学习计划22020.9.7 javascript学习计划所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复