JS中常用知识点
1. 在前端页面实现价格的自动计算：即price = price1 + price2(价格均保留两位小数)
data(){
return{
formData:{
price1:'',
price2:'',
price:''
}
}
}
methods:{
//价格1输入框失去鼠标焦点时触发的函数
calcuPrice1(row){
if(this.formData.price1 ==='' || this.formData.price1 === undefined || isNaN(this.formData.price1))
return;
if(Number(this.formData.price1) === 0)
return;
//格式化价格1
const price1 = this.formData.price1 = Number(isNaN(this.formData.price1) ? 0:this.formData.price1).toFixed(2);
//计算价格
const price = parseFloat(Number(isNaN(this.formData.price2) ? 0:this.formData.price2).toFixed(2)) +
parseFloat(Number(isNaN(price1) ? 0:price1).toFixed(2));
this.formData.price = Number(isNaN(price) ? 0:price).toFixed(2);
},
//价格2输入框失去鼠标焦点时触发的函数
calcuPrice2(row){
if(this.formData.price2 ==='' || this.formData.price2 === undefined || isNaN(this.formData.price2))
return;
if(Number(this.formData.price2) === 0)
return;
//格式化价格2
const price2 = this.formData.price2 = Number(isNaN(this.formData.price2) ? 0:this.formData.price2).toFixed(2);
//计算价格
const price = parseFloat(price2) +
parseFloat(Number(isNaN(this.formData.price1) ? 0 : this.formData.price1).toFixed(2));
this.formData.price = Number(isNaN(price) ? 0 : price).toFixed(2);
}
}2. CSS样式中文字换行相关知识点（即在style标签中添加的相关样式）：
强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象 ：white-space:nowrap;
自动换行 ：div{ word-wrap: break-word; word-break: normal; }
强制英文单词断行 ：div{ word-break:break-all; }
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
3. CSS中的”大于号”的作用是：在嵌套标签中，将样式只作用于儿子辈的标签，而不作用于孙子辈的标签。
在less中，某个类的属性值的最后面加上!important，应用该样式的级别最高。
4. 宏是有一个变量名的模板片段。可以在模板中使用宏作为自定义指令
宏：
<#macro greet>
Hello Joe!
宏变量：greet
宏定义体：Hello Joe!
进行宏调用：<@greet/>
输出： Hello Joe!
通常将使用 <@...> 这称为 宏 调用。
greet 宏可以使用 nested 指令，进行内容的嵌套
5. VUE中watch的用法
值是包括选项的对象：选项包括有三个。
第一个handler：其值是一个回调函数。即监听到变化时应该执行的函
第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。
6. Object.keys()的用法
var obj = {'a': 'Beijing', 'b': 'Haidian'};
console.log(Object.keys(obj)); //['a', 'b']
传入字符串，返回索引值
var str = "Beijing";
console.log(Object.keys(str));
// ["0", "1", "2", "3", "4", "5", "6"]
this.datas.unshift(item):想datas数组的第一个位置中添加一个元素item;
7. 数组split()的用法
将一个字符串分割为子字符串，将结果作为字符串数组返回，
形式：
stringObj.split([separator,[,limit]])
stringObj 必选项 string对象或者文字 该对象不会被split方法修改
separator 可选项 字符串或者正则表达式对象
limit 可选项 返回数组中的元素个数
8. join方法
把数组中的所有元素放入一个字符串中
形式：
arrayObj.join(separator);
separator 可选项 省略该参数，则使用逗号作为分割符
9. Object.entries()用法
参数:obj 可以返回其可枚举属性的键值对的对象。
返回值: 给定对象自身可枚举属性的键值对数组。
其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
const obj = { a: 5, b: 7, c: 9 }; //Object.entries(obj)输出为[['a','5'],['b','7'],['c','9']]
for (const [key, value] of Object.entries(obj)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
10. for...in的用法
for in这种循环i是string类型的
作用于数组的for-in循环体除了遍历数组元素外，还会自身可枚举属性
如果给对象的原型加上方法，for in这种循环会把数组原型链上的属性都能被访问到。
在某些情况下，这段代码可能按照随机顺序遍历数组元素。
简而言之，for-in是为普通对象设计的，你可以遍历得到字符串类型的键，因此不适用于数组遍历。
//循环json
Object.prototype.aa=function(){}
var json={'name':111}
for(var i in json){
console.log(i);//"name","aa"
console.log(json[i])；//111,? (){}
}:hover在鼠标移到链接上时添加的特殊样式。
:link 选择器设置了未访问过的页面链接样式,
:visited 选择器设置访问过的页面链接的样式
:active选择器设置当你点击链接时的样式
11. JS HTML DOM的学习：
//当你离开输入框后，myFunction函数将被触发
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onfocus当输入字段获得焦点时，改变其背景色。
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
当用户重置窗口大小时添加事件监听：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = '你的窗口大小改变了';
});
12. 事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：
元素的点击事件先触发，然后会触发
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：
元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
JavaScript HTML DOM 元素 (节点)
appendChild()： 用于添加新元素到尾部
实例解析：
var para = document.createElement("p"); //用于创建 元素:
var node = document.createTextNode("这是一个新的段落。")： //为
元素添加文本节点：
para.appendChild(node); //将文本节点添加到
元素中：
insertBefore(): 将新元素添加到开始位置
removeChild(): 移除已存在的元素(要移除一个元素，你需要知道该元素的父元素)
以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
replaceChild(): 将 HTML DOM 中的元素替换成新的元素。13. JavaScript 对象的学习：
//使用函数构造对象
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
//在构造器函数内部定义对象的方法
function changeName(name){
this.lastname=name;
}
}
myMother=new person("Sally","Rally",48,"green"); //创建一个新对象实体
myMother.changeName("Doe"); //调用对象的方法
for...in 语句循环遍历对象的属性。
语法：
for (variable in object)
{
执行的代码……
}
其中variable为对象中的每个属性名称，obj[variable]为对象中对应的属性值
Object.entries()
参数:obj 可以返回其可枚举属性的键值对的对象。
返回值: 给定对象自身可枚举属性的键值对数组。
其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
const obj = { a: 5, b: 7, c: 9 }; //Object.entries(obj)输出为[['a','5'],['b','7'],['c','9']]
for (const [key, value] of Object.entries(obj)) {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}
14. Number 对象
JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。
toString(x) : 输出x进制的数。
无穷大（Infinity）：
NaN - 非数字值（可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。）
数字中的方法：
toExponential(n)：将数字用指数形式进行表示(n表示保留几位小数)
toFixed(n):将数字四舍五入保留n位小数
toPrecision(n): 在对象的值超出指定位数n时将其转换为指数计数法，precision指定的是数字的有效位数,
toString(radix)：将number转换为radix进制的字符串形式，radix默认是10.
Number.isNaN(x):判断x是否不是一个数字
15. Boolean对象：
var b = new Boolean() //b的值默认为false
typeof b; //object
b.valueOf(); //false
16.字符串（String） 对象
属性length：计算字符串的长度
indexOf(str,n)： 查找的是字符串前n位之后的第一个字符串str首次出现的位置，区分大小写，没找到返回-1（可统计一个字符串中某个字符出现的次数）
match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符；没找到返回null（正则表达式后面加i忽略大小写；g查找所有符合的字符串）
replace(oldStr,newStr) :在字符串中用newStr字符串替换oldStr字符串。
若想一次进行全局替换可以在后面加上 g，若想替换的内容忽略大小写 则加上 i。
var str="a,b,c,d,e,f,A";
var n=str.replace(/a/gi,'B');
console.log(n); //B,b,c,d,e,f,B toUpperCase() / toLowerCase()： 字符串大小写转换使用函数
split()： 将字符串分割为数组；
concat(str)：在字符串末尾追加字符串
slice(start,end) 从已有的数组中返回选定的元素，start必须，表示从何处开始选取
substr(start,length) 在字符串中抽取从 start 下标开始的指定数目的字符。 参数start 必需,要抽取的字串起始下标
substring(int beginIndex, int endIndex) 用于选取字符串中介于两个指定下标之间的字符
charAt(): 根据下标返回指定的字符
charCodeAt(): 返回指定字符的ASCII码值
fromCharCode(): 根据指定的ASCII码值返回对应的字符
localeCompare(): 可用于比较两个字符串是否相等，返回0表示相等，非0是不相等
search(regex): 根据正则表达式进行搜索，没找到返回-1
replace（regex,str）:将字符串中符合regex正则表达式的字符替换成str字符串(正则表达式中可以加i/g)
trim(): 去掉字符串两端的空格
17.Date（日期） 对象:日期对象用于处理日期和时间
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
18.Array（数组） 对象：使用单独的变量名来存储一系列的值。
创建一个数组，有三种方法。
下面的代码定义了一个名为 myCars的数组对象：
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
数组中常用的方法：
concat()：连接两个或更多的数组，并返回结果。
fojoin() 把数组的所有元素放入一个字符串。
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
reduce() 计算数组元素相加后的总和
sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。（默认排序顺序为按字母升序）
array.sort(sortfunction)，比较函数的一般形式是function (a, b) {…}, 若a<=b时则a在b之前, a>b时则a在b之 后.
some() 方法用于检测数组中是否有元素满足指定条件（函数提供）
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
array.slice(start, end)：提取字符串的某个部分，并以新的字符串返回被提取的部分
array.pop()： 移除数组的最后一个元素，并将这个元素作为返回值。array为空时，返回undefined。
array.shift()：移除array的第一个項，返回被删除的这个項。array为空时，返回undefined。
19. ES5新增的方法
ES5中的数组方法，首先大部分的方法第一个参数接收一个函数，并且对于数组的每个元素调用一次该函数，函数中的参数为 第一个参数为数组元素，第二个参数为元素的索引，第三个参数为数组本身
every()： 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意（ every() 不会对空数组进行检测；every() 不会改变原始数组。）
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.every(checkAdult)); //false
some()： 方法用于检测数组中的元素是否有元素满足指定条件（函数提供）。
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意：every() 不会对空数组进行检测；every() 不会改变原始数组。
var numbers = [1,2,3,4,5];
var someResult = numbers.some(function(item,index,array){
//item指代数组值;index指代数组下标;array指代数组本身；
console.log(item); //1,2,3
return (item>2);
});
console.log(someResult); // true
filter(): 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意：（ filter() 不会对空数组进行检测。filter() 不会改变原始数组。）
var numbers = [1,2,3,4,5];
var filterResult = numbers.filter(function(item,index,array){//item指代数组值;index指代数组下标;array 指代数组本身；
return (item>2);
});
console.log(filterResult ); //[3, 4, 5]
map(): 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
var numbers = [{name:'zhangsan',age:'21'},{name:'lisi',age:'21'}];
var datalist = [];
datalist = numbers.map(function(item,index,array){//item指代数组值;index指代数组下标;array指代数组本身；
return {
newName:item.name+'2',
newAge:item.age
}
});
console.log(JSON.stringify(datalist)); //[{"newName":"zhangsan2","newAge":"21"},{"newName":"lisi2","newAge":"21"}]
forEach(): 对数组中的每一项运行给定的函数。这个方法没有返回值。(本质上与使用for循环遍历数组一样的)
var numbers = [{name:'zhangsan',age:'21'},{name:'lisi',age:'21'}];
datalist = numbers.forEach(function(item,index,array){//item指代数组值;index指代数组下标;array指代数组本身；
console.log(item); // {name: "zhangsan", age: "21"} {name: "lisi", age: "21"}
});
20.JS中常用对象的方法
Object.entries(obj)：返回一个包含由给定对象所有可枚举属性的属性名和属性值组成的 [属性名，属性值] 键值对的数组 ，数组中键值对的排列顺序和使用for…in循环遍历该对象时返回的顺序一致。
var obj = { foo: “bar”, baz: 42 };
console.log(Object.entries(obj)); // [ [‘foo’, ‘bar’], [‘baz’, 42] ]
Object.keys(obj)：返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致
var arr = [“a”, “b”, “c”];
alert(Object.keys(arr)); // 弹出”0,1,2”
// 类数组对象
var obj = { 0 : “a”, 1 : “b”, 2 : “c”};
alert(Object.keys(obj)); // 弹出”0,1,2”
Object.values(obj)：返回一个包含指定对象所有的可枚举属性值的数组，数组中的值顺序和使用for…in循环遍历的顺序一样。
var obj = { foo: “bar”, baz: 42 };
console.log(Object.values(obj)); // [‘bar’, 42]
Object.getPrototypeOf(obj):返回指定对象的原型
21.函数：
函数中的属性：
caller:返回调用该函数的函数
arguments:返回包含形参参数的数组
arguments.callee():当前被调用的一个函数对象
函数中的方法：
toString():返回当前函数的源代码
22.Math对象：
方法：
Math.random():返回介于0到1之间一个随机数，不包括0和1。
Math.abs(num):取num的绝对值
Math.ceil():向上取整(大于该数的最小整数)
Math.floor():向下取整（小于该数的最大整数）
Math.round(num):对num进行四舍五入操作
Math.pow(num,power) 返回num的power次幂
Math.sqrt(num) 返回num的平方根
max(): 确定一组数值中的最大值
min(): 确定一组数值中的最小值 例子：
console.log("产生1-10的随机数"+Math.random()*10+1);
console.log("向上取整"+Math.ceil(12.3)+"====="+Math.ceil(12.5)+"======"+Math.ceil(12.9));
console.log("向下取整"+Math.floor(12.3)+"========"+Math.floor(12.5)+"=========="+Math.floor(12.9));
console.log("四舍五入"+Math.round(1234.5678,2));
console.log("返回3的2次幂"+Math.pow(3,2));
console.log("返回9的平方根"+Math.sqrt(9));
console.log("确定一组数值的最大值"+Math.max(12,3));
console.log("确定一组数值的最小值"+Math.min(12,3));
结果：
产生1-10的随机数4.12680296783634051
向上取整13=====13======13
向下取整12========12==========12
四舍五入1235
返回3的2次幂9
返回9的平方根3
确定一组数值的最大值12
确定一组数值的最小值3