1.Math(算术对象)
2.运算符★★★
3.循环与跳出循环
4.数组的map,reduce与filter
5.原生JS实现树状结构列表★★★

1.Math

Math对象,提供科学数学计算,也同样具有属性与方法

  1. Math对象属性

  2. Math 对象方法

扩展:当求数组中最大/最小值时,我们也可以使用Math对象

  • ES5:Math.max.apply(null,targetArray)
  • ES6:Math.max(…targetArray)

2.运算符

  1. 算术运算符
  • + - * / 加减乘除
  • % 取余
  • ++ 自增
  • -- 自减
  1. 赋值运算符
运算符 说明
= 简单赋值
+= 作和赋值
-= 作差赋值
*= 作乘赋值
/= 作除赋值
%= 取余赋值
  1. 比较运算符
  • == :判断是否值相等
  • === :判断值和数据类型是否相等
  • != :不等于
  • > < >= <= :基本判断
  1. 逻辑运算符
  • && :逻辑与
  • || :逻辑或
  • ! :逻辑非

在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为true

  1. 条件运算符

(condition) ? value1 : value2 逻辑为真时,值为value1;逻辑为假时,同理

  1. 位运算符

位运算符工作于32位的数字上,任何数字操作都将转换为32位。结果会转换为JavaScript数字

运算符 描述 实例 等同 结果 实际值
& AND x = 5 & 1 0101 & 0001 0001 1
竖线 OR x = 5 竖线 1 0101 竖线 0001 0101 5
~ 取反 x = ~ 5 ~0101 1010 -6
^ 异或 x = 5 ^ 1 0101 ^ 0001 0100 4
<< 左移 x = 5 << 1 0101 << 1 1010 10
>> 右移 x = 5 >> 1 0101 >> 1 0010 2

常见几个短小却令人惊叹的 JavaScript 代码

1
2
3
4
5
1. 随机数:Math.random()*1000|0 比 Math.floor() 写起来简单多了
2. 判断奇偶性:222 % 2 == 0 还可以写成 (222 & 1) == 0
3. 取最近的偶数:(1111 | 1) - 1 结果为 1110,比写 if 判断奇偶再-1是不是更直接
4. 除2取整:最基础Math.floor(5/2),最快的方法 X>>1,起码可以提高60%运行效率+26%编程效率
5. 向下取整: x >> 0 或者 ~~x 或者 x|0 均可以实现浮点数取整(等于Math.floor)

3. 循环与跳出循环

条件判断

if…else if…else if…else

循环语句

  1. 普通for循环

for(let i=1;i<=1000;i++){}

  1. for-in循环

for (key in items){ items[key] } for-in循环是为遍历对象而设计的,并不适用于遍历数组

1
2
3
4
5
6
7
8
9
10
// 创建一个js对象
let b = {name: "chd", age: 18, sex: "man"};
for (let index in b){
console.log(index+":"+b[index]);
}
/* 运行结果
name:chd
age:18
sex:man
*/
  1. forEach循环

JavaScript5开始启用,回调函数中的value,index,array分别为值,索引,数组本身

1
2
3
4
5
6
7
8
9
10
let myArray = [1,3,5,7,9,"hello world"];
myArray.forEach(function (value, index, array) {
console.log("索引:"+index+" => "+value);
console.log("数组本身:"+array);
});

// 回调函数改为箭头函数(仅适用于ES6语法及以上)
myArray.forEach((value, index) => {
console.log("索引:"+index+" => "+value);
});

forEach缺陷:不能中断循环(即不能使用break语句,continue语句或使用return语句)

  1. for-of循环

ES6新语法,适用于遍历可序列化数据结构,字符串、数组、Map、Set

for–of循环并不能直接使用在普通的对象上,但如果我们按对象所拥有的属性进行循环,可使用内置的Object.keys()方法

1
2
3
4
let someObject = {a:1, b:2, c:3};
for (let key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
  1. while循环

while(true){}

在循环体中,跳出循环常用三种:continue,break,return

  1. continue:无论在单层,多层循环中,都只会结束最里层循环中的本次循环
  2. break:无论在单层,多层循环中,都只会跳出最里层循环
  3. return:无论在单层,多层循环中,遇到return都会直接跳出函数,for循环后面的语句也不再执行

4.数组的map,reduce与filter

map(),reduce()与filter()方法的参数均为匿名函数(也可以为箭头函数),即不存在函数名的函数

  • map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
1
2
3
4
5
6
7
'use strict';   //严格模式
let arr = [1, 2, 3, 4];
let newArr = arr.map(function(item) {
// 使用map方法将每一个元素变为两倍
return item * 2;
});
console.log(newArr); // [2, 4, 6, 8]
  • filter()函数用于筛选出符合要求的数据,并返回该数据集合.
1
2
3
4
5
6
7
let arr = [1, 2, 3, 4];
let newArr = arr.filter(function(item) {
// 使用filter方法:判断每一个元素,如果是奇数,则直接返回该值
if (item % 2 !== 0) {
return item;}
});
console.log(newArr); // [1, 3]
  • reduce()函数用于把数组或对象归结为一个值,并返回这个值,使用方法为arr.reduce(func,memo),其中func为处理函数,memo为初始值,初始值可缺省.
1
2
3
4
5
6
'use strict';
let arr = [1,2,3,4];
let newArr=arr.reduce(function(a,b){
return a+b;
},0);
console.log(newArr) ; // 10

5.原生JS实现树状结构列表

此方法的数据结构层次没有限制,均为动态层数,若节点的上级节点不存在,便会将其作为一级节点

  1. 确定原始数据结构

原始数据是需要按照下面这种结构来定义的,如果原始数据已经是被后端处理成树状结构,就可以省略这一步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let data = [{
"id": "1",
"name": "1",
"fatherId": "0",
},{
"id": "2",
"name": "1-1",
"fatherId": "1"
},{
"id": "3",
"name": "1-2",
"fatherId": "1"
},{
"id": "4",
"name": "1-1-1",
"fatherId": "2"
},{
"id": "5",
"name": "1-1-2",
"fatherId": "2"
},{
"id": "6",
"name": "2",
"fatherId": "0"
},{
"id": "7",
"name": "1-2-1",
"fatherId": "3"
}];
  1. 使用map处理数据

其中的id表示节点id,fatherId表示当前节点的父类id,children表示子集列表,这几个变量名都是可自定义的。

1
2
3
4
5
6
7
8
9
10
11
12
13
const map = {}; // 将数据存储为以id为 KEY的 map索引数据列
const val = []; // 返回的最终树状结构json
data.forEach((item) => {
map[item.id] = item;
});
data.forEach((item) => {
const parent = map[item.fatherId]; // 以当前遍历项的parentId去map对象中找到索引的id
if (parent) { // 如果找到索引,说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
(parent.children || (parent.children = [])).push(item);
} else {
val.push(item); // 如果没有在map中找到对应的索引ID,那么直接把当前的item添加到val结果集中,作为顶级
}
});

参考网址:


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议