JS 基础 (一)
浏览 457 | 评论 1
黄文勇
2020年05月04日

  虽然从学校到工作都接触了很多js代码,但是自己本身对于js没有很大的理解与研究,只有很浅显的理解,有的更是听都没听过,最近也是补补课,多写一些博客来记录我的学习进程。

JS基本类型

JavaScript 的变量类型

Boolean、null、undefined、String、 Number 这5种基本类型的赋值是实际值,例如

let a= '哈哈';
let b= a;
b= '傻子';
console.log(a); // 哈哈
console.log(b); // 傻子

Array,Function或Object赋值时是对象在内存中地址信息,不是实际值,所以我们改变对象中的值,被赋值对象输出的值也会相应发生改变

let a = { name: '张三' }
let b= a;
b.name = '李四';
console.log(a); // {name: "李四"}
console.log(b); // {name: "李四"}

JavaScript 常见数组方法

map、filter、reduce

map:返回一个数组,其中每个元素都使用指定函数进行过转换。

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 2);
console.log(mapped);
//输出: [3, 4, 5, 6, 7, 8]

filter: 返回一个数组,只有当指定函数返回 true 时,相应的元素才会被包含在这个数组中。

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 3 || el === 6);
console.log(filtered);
//输出: [3, 6]

reduce:按函数中指定的值累加

const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
//输出: 21

find, findIndex, indexOf

find:返回与指定条件匹配的第一个实例,如果查到不会继续查找其他匹配的实例。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 7);
console.log(found);
//输出: 8

注意: 虽然8之后的数字都满足条件但是,find的语法只会输出第一个找到的值,之后就停止运行了,这个适合for循环里停止之后的无意义循环

findIndex: 这与find几乎完全相同,但不是返回第一个匹配元素,而是返回第一个匹配元素的索引。

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
//输出 1

indexOf:与findIndex几乎完全相同,但它不是将函数作为参数,而是采用一个简单的值。当检索到第一个值时返回当前值在数组中的位置,如果检索不到时返回-1

const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
//输出: 1

push, pop, shift, unshift

push:这是一个相对简单的方法,它将一个项添加到数组的末尾。它就地修改数组,函数本身会返回添加到数组中的项。

let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr); //输出: [1, 2, 3, 4, 5]
console.log(pushed); //输出: 5

pop:这将从数组中删除最后一项。同样,它在适当的位置修改数组,函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr); //输出: [1, 2, 3]
console.log(popped);//输出: 4

shift:从数组中删除第一项。同样,它在适当的位置修改数组。函数本身返回从数组中删除的项。

let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr); //输出: [2, 3, 4]
console.log(shifted); //输出: 1

unshift:将一个或多个元素添加到数组的开头。同样,它在适当的位置修改数组。与许多其他方法不同,函数本身返回数组的新长度。

let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr); //输出: [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted); //输出: 7

splice, slice

splice:通过删除或替换现有元素和/或添加新元素来更改数组的内容,此方法会修改了数组本身。

下面的代码示例的意思是:在数组的位置 1 上删除 0 个元素,并插入 b。

let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')

slice:从指定的起始位置和指定的结束位置之前返回数组的浅拷贝。 如果未指定结束位置,则返回数组的其余部分。 重要的是,此方法不会修改数组,而是返回所需的子集。

let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
//输出: ['c', 'd']
console.log(arr);
//输出: ['a', 'b', 'c', 'd', 'e']

sort

sort:根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或 0,则顺序保持不变。如果返回正数,则交换元素顺序。

let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr); //输出: [-1, 1, 2, 3, 5, 7, 7]
本文作者:黄文勇
本文链接:https://www.3dcw.cn/index.php/archives/491/
最后修改时间:2020-05-29 17:45:04
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
评论
与本文无关评论请发留言板。请不要水评论,谢谢。
textsms
支持 Markdown 语法
email
link
评论列表
已有 1 条评论
2020-05-08 09:40
学习了学习了