JavaScript基础知识汇总

乱七八糟的，有知识点，有小技巧。想到什么写什么，目的加深印象（持续更新）

类数组的定义和转换

拥有length属性和若干索引属性组成的对象就是类数组，类数组和数组类似，可以被遍历，但是不能调用数组的方法。

// 使用call调用数组的slice
Array.prototype.slice.call(arrayLike);
// 使用call调用数组的splice
Array.prototype.splice.call(arrayLike, 0);
// 使用apply调用数组的concat
Array.prototype.concat.apply([], arrayLike);
// Array.from
Array.from(arrayLike);

快速将多维数组转换成一维数组，并排序

const arr = [[1, 2, 4, 7], [3, 5, 8, 11], [6, 9, 12, 14], [10, 13, 15, 16]]
// ES6
arr.flat().sort((a, b) => {return a - b});
// ES5
arr.toString().split(',').map(Number).sort((a, b) => {return a - b});
// .map(Number) // 将字符串数组转换为数字数组

vue无法探测普通的新增属性

之前项目中遇到的一个问题，声明一个对象，并赋值。之后给这个对象添加新属性时，死活不更新视图，开始以为是js报错，打断点发现正常执行了，只是没更新视图。之后查文档发现vue不允许在已创建的实例上动态添加根级响应式数据，可以使用 Vue.set() 方法将响应式属性添加到嵌套的对象上

Vue.set(target, propertyName/index, value)

数组快速去重

// filter 去重
const arr = [3,3,3,44,1,2,5,4,3,44];
const arr2 = arr.filter((item, index) => { return arr.indexOf(item) === index });
console.log(arr2); // [3, 44, 1, 2, 5, 4]
// 利用Set去重
const arr3 = Array.from(new Set(arr));
console.log(arr3)
// 利用扩展运算符和Set去重
const arr4 = [...new Set(arr)];
console.log(arr4);

获取数组中的最大值和最小值

const arr = [3,44,1,2,5,4];
const max = Math.max.apply(null, arr);
const min = Math.min.apply(null, arr);

阶乘函数

function factoriy(num) {
	if (num <= 1) {
		return 1;
	}
	return num * arguments.callee(num - 1);
}

函数内部属性 callee \ caller

严格模式下使用这两个属性会导致错误。
callee 该属性是个指针，指向拥有这个arguments对象的函数
caller 该属性保存着调用当前函数的函数的引用，定义目的是为了分清和arguments.caller 和函数的caller属性

function outer() {
	inner();
}
function inner() {
	alert(inner.caller); // arguments.callee.caller;
}
outer();

获取两个数之间的随机数

function getRandom(min, max) {
	const base = min - max + 1;
	return Math.floor(Math.random() * base + min);
}

正则表达式

// 字母+数字并且长度在6-20位
/^(?!0-9+$)(?!a-zA-Z+$)[0-9a-zA-Z]{6,20}$/
// 4位数字验证码
/^\d{4}$/
// 手机号
/^1[3|5|7|8|9]\d{9}$/

回文数

function isPalindrome(x) {
	let rem = x;
	let y = 0;
	while (rem) {
		y = y * 10 + rem % 10;
		rem = ~~(rem / 10); // ~~ 可以快速去掉小数位
	}
	return y === x;
}
isPalindrome(232) // true;
isPalindrome(-232) // false;

获取字符串中相同的字符串

function getSameStr(strs) {
	if (!strs.length) return ''
	let prefix = strs[0];
	const len = strs.length;
	for (let i = 1; i < len; i++) {
		if (strs[i].indexOf(prefix) !== 0) {
			prefix = prefix.substr(0, prefix.length - 1);
			if (!prefix.length) return '';
		}
	}
	return prefix;
}
const strs = ["abcd","abc","ab"];
getSameStr(strs); // ab

i++, ++i

• i++和++i都是数学计算中的累加1
• 区别是计算顺序
  • i++是后计算
  • ++i是先计算

// i++ 不同于 i += 1 和 i = i + 1，i++是纯粹的数学运算
let a = '10'
a += 1; // '101'
a = a + 1; // '101'
a++; // 11

str.slice(begin [, end])

从一个字符串中截取内容，并返回新字符串。不会影响之前的字符串

begin表示要开始截取的位置, 如果为负数，表示 str.length + begin
end可选，表示在该位置结束截取。如果不传，则一直截取到末尾。如果为负数，表示 str.length + end

let str = 'hello my girl!';
str.slice(-1); // '!'
str.slice(1, 4); // 'ello'
str.slice(1, -4); // 'ello my g'

str.substring(begin[, end])

提取从 begin 到 end（不包括）之间的字符

• begin和end如果相等，则返回空字符串""
• begin如果大于end，则实际两个参数的顺序会调换
• 如果省略end，则一直返回到字符串末尾
• 如果任一参数小于0或者NaN，则为0
• 如果任一参数大于str.length，则为str.length

let str = 'hello my girl!';
str.substring(-1, -2); // ''
str.substring(-1, 5); // 'hello'
str.substring(5, 1); // 'ello'

str.lastIndexOf(value[, fromIndex])

lastIndexOf() 方法返回调用String 对象的指定值最后一次出现的索引，在一个字符串中的指定位置 fromIndex处从后向前搜索。如果没找到这个特定值则返回-1

value表示查找的字符串
fromIndex可选，指定位置从后向前查找。如果不传，则默认从结尾开始。如果 fromIndex >= str.length ，则会搜索整个字符串。如果 fromIndex < 0 ，则等同于 fromIndex == 0

let str = 'hello my girl!';
str.lastIndexOf('ll'); // 2
str.lastIndexOf('H'); // -1 区分大小写

函数运行机制

首先创建函数，函数体会以字符串形式存储在堆内存中，当执行函数时，会开辟一个新的私有栈内存，将代码从头到位执行一次，执行完后会自动释放

数组常用方法

/*
 * @desc push() 向数组末尾添加元素
 * @params [any]
 * @return 返回最新的数组长度
 */
 arr.push('end')
 
/*
 * @desc unshift() 向数组开始添加元素
 * @params [any]
 * @return 返回最新的数组长度
 */
arr.unshift('start')

/*
 * @desc shift() 删除数组中的第一项
 * @params [any]
 * @return 返回删除的那一项
 */
arr.shift()

/*
 * @desc pop() 删除数组中的最后一项
 * @params [any]
 * @return 返回删除的那一项
 */
arr.pop()

/*
 * @desc splice() 向数组中任意位置添加/修改/删除元素
 * @params [any] 开始的索引，如果只传第一个参数，则会从开始索引删到末尾
 * @params [any] 个数
 * @params [any] 要插入/删除的元素
 * @return 把删除的部分用新数组存起来并返回
 */
arr.splice(start, num, ...value)

/*
 * @desc slice() 查询截取数组，不会改变原数组
 * @params [any] 开始的索引，如果只传第一个参数，则会从开始索引删到末尾
 * @params [any] 结束 查询不包含此项
 * @return 返回选择的区间
 */
arr.slice(start, end?)