Set()数组去重
const arr = [1,2,1,3,4,5,1,1,1,1,1]
const arrFilter = [...new Set(arr)]
console.log(arrFilter) // [1, 2, 3, 4, 5]
封装一个方法实现去重
var arr = [1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1]
function unique(array) {
var temp = {},
result = [],
len = array.length;
for (var i = 0; i < len; i++) {
if (!temp[array[i]]) {
temp[array[i]] = true
result.push(array[i])
}
}
return result
}
var uniqueArr = unique(arr);
console.log(uniqueArr); // 输出 [1, 2]
push() 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
var arr = [1,2,3];
arr.push('a')
arr = [1,2,3,"a"]
unshift() 该方法向数组开头添加一个或多个元素,并返回新的数组长度
var arr= ["a", "b", "c", "d"];
arr.unshift("e","f");
//输出e,f,a,b,c,d
pop() 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
var arr= ["a", "b", "c", "d"];
arr.pop();
//输出a,b,c
shift() 该方法可以删除数组的第一个元素,并将被删除的元素作为返回值返回
var arr= ["a", "b", "c", "d"];
arr.pop();
//输出b,c,d
splice() 用于数组【删除、替换或插入元素】,修改原始数组
splice(start, deleteCount, item1, item2, ...)
start 开始的索引位置,
deleteCount 指定了要删除的数量(可以为0),
item1...插入到数组中的元素
const array = [1, 2, 3, 4, 5];
const removedItems = array.splice(1, 3, 'a', 'b');
console.log(array); // 原数组[1, 'a', 'b', 5]
console.log(removedItems); //选中要替换的 [2, 3, 4]
向数组中[ 添加 / 插入 ]一个元素
var arr = [1,2,3,4,5];
arr.splice(1,1,88);
console.log(arr)//[1, 2, 3, 4, 5]
slice() 截取数组,原始数组不会被修改
slice(start, end):
start 起始位置(包括)
end 结束位置(不包括)
var arr=['aa','bb','cc','dd','ee','ff'];
var newarr= arr.slice(2,4);
console.log(newarr)//新数组data结果为: ["cc", "dd"]
substr()截取字符串:
- 第一个参数:截取开始位置的索引
- 第二个参数:截取的长度
var str = "hello world";
var substr = str.substr(1, 5);
console.log(substr);//输出 "ello "
forEach()遍历数组
第一个参数:就是当前正在遍历的元素
第二个参数:就是当前正在遍历的元素的索引
第三个参数:就是正在遍历的数组
var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function (value, index, obj) {
console.log(value + " #### " + index + " #### " + obj);
});
//输出
孙悟空 #### 0 #### 孙悟空,猪八戒,沙和尚
猪八戒 #### 1 #### 孙悟空,猪八戒,沙和尚
沙和尚 #### 2 #### 孙悟空,猪八戒,沙和尚
map() 遍历数组,返回一个新数组
var arr= [3, 4, 5, 6];
var err= arr.map(function (item) {
return item * item;
});
console.log(err);
// [9, 16, 25, 36]
filter() 过滤
var arr1 = ['', 2, 3, '', 5, 6, 7];
var arr2 = arr1.filter((item) => {
return item !==''
});
console.log(arr2)//[2, 3, 5, 6, 7]
find() :找到数组中满足给定条件的第一个元素,并返回该元素
var array = [1, 2, 3, 4, 5, 6, 7];
var result = array.find(function(item) {
return item > 4;
});
console.log(result); // 5
concat() 该方法可以连接两个或多个数组,并将新的数组返回,该方法不会对原数组产生影响
var arr1 = [1,2,3,4,5,6,7,8]
var arr2 = [9,0,10]
arr1.concat(arr2)
//输出[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 10]
join() 数组转字符串
const arr = ['apple', 'banana', 'orange'];
const str = arr.join('-'); // "apple-banana-orange"
split()
字符串转数组
var txt = "a,b,c,d,e";
var arr = txt.split(",");
console.log(arr); //结果:["a", "b", "c", "d", "e"]
replace()
替换在字符串中指定的值
var str = "hello, Tom!";
var res = str.replace("Tom", "Jerry");
console.log(res); //结果:hello, Jerry!
reverse() 反转数组(前边的去后边,后边的去前边),该方法会直接修改原数组
var arr= ["B", "O", "A", "M"];
arr.reverse();
//arr结果输出:M,A,O,B
call()
在指定的作用域中调用函数,可以传入多个参数
- 当你知道函数将接受的参数数量时,或者参数以明确的列表形式存在时,可以使用
call()
方法。 - 当你想直接调用一个函数,而不需要将参数放在数组中进行传递时,也可以使用
call()
方法。
function sayHello(name) {
console.log(`Hello, ${name}!`);
}
sayHello.call(null, 'Alice'); // 输出 "Hello, Alice!"
call()
和 apply()
都是 JavaScript 中用于调用函数的方法,它们的作用是改变函数内部的 this
指向,并且可以传入参数来调用函数
apply()
与 call()
类似,但第二个参数是一个数组或类数组对象
- 当你无法确定函数将接受的参数数量时,或者参数以数组形式存在时,可以使用
apply()
方法。 - 当你想通过一个数组来传递参数给函数时,也可以使用
apply()
方法。
function sayHello(name, age) {
console.log(`Hello, ${name}! You are ${age} years old.`);
}
sayHello.apply(null, ['Bob', 25]); // 输出 "Hello, Bob! You are 25 years old."
数组排序
sort() 该方法可以用来对数组中的元素进行排序,也会影响原数组,默认会按照Unicode编码进行排序,升序
var arr= ["B", "O", "A", "M"];
arr.sort();
//输出结果:A,B,M,O
降序:先升序再反转sort() ->reverse()
var arr = [1,4,6,8];
arr.sort().reverse();
console.log(arr)//[8, 6, 4, 1]
自定义排序:a-b为升序,b-a为降序
var arr = [1,3,5,4,10];arr.sort();console.log(arr)// [1, 10, 3, 4, 5]
//a-b为升序,b-a为降序
arr.sort(function (a,b){return a-b});
console.log(arr)//[1, 3, 4, 5, 10]
排序好的数组打乱:Math.random()随机数
var arr = [1,2,3,4,5,6];
arr.sort(function (){return Math.random() - 0.5});
console.log(arr)// [1, 2, 6, 3, 4, 5]
按照年龄给对象排序:a-b为升序,b-a为降序
var myFu = {name: 'xioafu',age: 20,};
var myFu2 = {name: 'xioafu',age: 13,};
var myFu3 = {name: 'xioafu',age: 26,}
var arr = [myFu, myFu2, myFu3];
arr.sort(function(a, b) {
return a.age - b.age;
})
按照字符串长度排序:a-b为升序,b-a为降序
var arr = ['aa', '35ff', 'b']
arr.sort(function(a, b) {
return a.length - b.length;
})
按照字符串字节排序:a-b为升序,b-a为降序
function retByteslen(str) {
var num = str.length;
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255) {
num++;
}
return num;
}
}
var arr = ['哈', '哈哈哈哈', '哈哈哈']
arr.sort(function(a, b) {
return retByteslen(a) - retByteslen(b);
})
reduce() 接收一个函数作为参数,这个函数有四个参数:previousValue、currentValue、index、array。这个函数会返回一个将被叠加到累加器的值,reduce方法停止后会返回这个累加器。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var sum = arr.reduce((previous, current) => previous + current);
// 55
Array.of() 将一组值,转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
charAt()方法演示:该方法可以根据索引获取指定位置的字符
var str = "Hello,World!";
console.log(str.charAt(1));
//输出e
charCodeAt()方法演示:该方法获取指定位置字符的字符编码(Unicode编码)
var str = "Hello,World!";
console.log(str.charCodeAt(1));
//输出101
Object.keys() 方法:返回一个给定对象自身的所有可枚举属性值的数组
示例:
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
Object.values()方法: 接收一个对象作为参数,返回该对象自身的所有属性值的数组
const person = {name: 'Alice',age: 30,gender: 'female'}
const values = Object.values(person)
console.log(values) // 输出:[ 'Alice', 30, 'female' ]
Object.entries()方法: 返回一个给定对象自身可枚举属性的键值对数组
示例:
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
Object.assign()方法:
合并两个或多个object
var obj1 = { a: 1, b: 2 };
var obj2 = { c: 3, d: 4 };
var obj3 = { e: 5, f: 6 };
var obj = Object.assign(obj1, obj2, obj3)
console.log(obj); //返回 { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }
定义变量时出现的意外:深拷贝问题的解决
// 没有解决深浅拷贝之前
const Tant = {
age:12,
sex:'man',
}
const Eane = Tant
Eane.age = 89
console.log(Eane.age, Tant.age) // 89 89
// 解决了之后
const Tant = {
age:12,
sex:'man',
}
const Eane = JSON.parse(JSON.stringify(Tant))
Eane.age = 89
console.log(Eane.age, Tant.age)// 89 12
toJSON()方法
JavaScript 对象的一个内置方法,用于在对象被序列化成 JSON 字符串时进行自定义的转换操作。当一个对象被传递给 JSON.stringify()
方法时,会调用该对象的 toJSON()
方法(如果存在)来获取序列化后的值
自定义对象的序列化:
const person = {
name: 'John',
age: 30,
toJSON: function() {
return {
name: this.name.toUpperCase(),
age: this.age
};
}
};
const jsonStr = JSON.stringify(person);
console.log(jsonStr); // {"name":"JOHN","age":30}
toString()
方法
将JavaScript 对象(数组、数字、日期、函数等等)转换为字符串的方法
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fruits2 = fruits.toString();
console.log(fruits2); //结果:Banana,Orange,Apple,Mango
Math.max()方法
返回一组数中的的最大值
var arr = [1, 2, 3];
var max = Math.max(...arr);
console.log(max); //返回 3
Math.random()随机数
indexOf()
方法返回字符串中指定文本首次出现的索引(位置)
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
console.log(pos); //结果:17
lastIndexOf()
方法返回指定文本在字符串中最后一次出现的索引
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
console.log(pos); //结果:51
toUpperCase()
把字符串转换为大写
var text1 = "Hello World!";
var text2 = text1.toUpperCase();
console.log(text2); //结果:HELLO WORLD!
toLowerCase()
把字符串转换为小写
var text1 = "Hello World!";
var text2 = text1.toLowerCase();
console.log(text2); //结果:hello world!
数值方法
toExponential()
返回字符串值,它包含已被四舍五入并使用指数计数法的数字
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0
toFixed()
返回字符串值,它包含了指定位数小数的数字
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
toPrecision()
返回字符串值,它包含了指定长度的数字
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
valueOf()
以数值返回数值
var x = 123;
x.valueOf(); // 从变量 x 返回 123
(123).valueOf(); // 从文本 123 返回 123
(100 + 23).valueOf(); // 从表达式 100 + 23 返回 123
Number()
可用于把 JavaScript 变量转换为数值
var x1 = true;
var x2 = false;
var x3 = new Date();
var x4 = "10"
var x5 = "10 20"
Number(x1); // 返回 1
Number(x2); // 返回 0
Number(x3); // 返回 1621842783539
Number(x4); // 返回 10
Number(x5); // 返回 NaN
parseInt()
函数可解析一个字符串,并返回一个整数。只返回首个数字
parseInt("10"); // 返回 10
parseInt("10.33"); // 返回 10
parseInt("10 20 30"); // 返回 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
parseFloat()
函数可解析一个字符串,并返回一个浮点数。只返回首个数字
parseFloat("10"); // 返回 10
parseFloat("10.33"); // 返回 10.33
parseFloat("10 20 30"); // 返回 10
parseFloat("10 years"); // 返回 10
parseFloat("years 10"); // 返回 NaN
resetFields() 方法重置表单
this.$nextTick(() => {
this.$refs["el-form标签上ref的值"].resetFields();
})