常用方法总结

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();
 })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值