JavaScript笔记

嘿 ......

已于 2024-08-12 10:12:34 修改

阅读量473

点赞数 1

分类专栏： js练习文章标签： javascript 前端 vue.js

于 2022-11-30 13:57:15 首次发布

本文链接：https://blog.csdn.net/qq_55031668/article/details/128113938

版权

js练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

&lt; &lt; &gt; &gt;  -----   <<>>
<strong></strong>加粗
<em></em>倾斜
<del></del>删除线
<ins></ins>下划线

1、数组元素转字符串数字-----反之

var arr = [1,2,3,4]   -------------['1','2','3','4']
---
arr.map(String)

var arr = ['1','2','3','4']   -------------[1,2,3,4]
arr.map(Number)

2、判断简化 includes()

if(a===undefined||a===10||a===20||a===null){
	console.log("请重新填写");
}
//可：
if([undefined,10,20,null].includes(a)){
	console.log("请重新填写");
}

3、遍历对象 object.key()语法

 Object.keys(obj2).forEach(function(key){
     console.log(key, obj2[key]);
 })

    // 得到的是： name---a
    //          list---{a:"value",b:"value"}
    //          num----13

Object.keys、.values()、.entries()的方法

let arr = ['a', 'b', 'c']
        let newArr = []
        for (let index of arr.keys()) {
            console.log(index);

        }
        // 0
        // 1
        // 2
        for (let item of arr.values()) {
            console.log(item);
            // newArr.push(item)
        }
        console.log('newArr----' + newArr);
        console.log(typeof(newArr));
        // 'a'
        // 'b'
        // 'c'
        for (let [index, item] of arr.entries()) {
            console.log(index, item);
        }
        // 0 'a'
        // 1 'b'
        // 2 'c'

        let obj = {
            name: "张三",
            sex: "男",
            age: 20
        }

        for (let key of Object.keys(obj)) {
            console.log(key)
        }
        // name
        // sex
        // age

        console.log(Object.values(obj))
            // ['张三', '男', 20]

        for (let val of Object.values(obj)) {
            console.log(val)
        }
        // 张三
        // 男
        // 20

        for (let val of Object.entries(obj)) {
            console.log(val)
        }
        // (2) ["name", "张三"]
        // (2) ["sex", "男"]
        // (2) ["age", 20]
        for (let [key, val] of Object.entries(obj)) {
            console.log(key, val)
        }
        // name 张三
        // sex 男
        // age 20

4、字符串截取

var str = '50_01'
场景一：截取符号前面所有
let newStr =str.substr(0,str.lastIndexOf("_"))
场景二：截取符号后面所有
let newStr =str.substr(str.lastIndexOf("_") + 1)
场景三：截取从下标为5的两位。
var str = '我的名字叫张三';
console.log(str.substr(5,2));   //张三     
场景四：截取前三位
var str = '我的名字叫张三';
console.log(str.substr(0,3));   //我的名   
场景五.截取掉前三位字符，保留后几位
1.slice方法
var str="abc12345";
console.log(str.slice(3))            //12345
2.substring方法
var str="abc12345";
console.log(str.substring(3));      //12345
场景六：删除后三位
var str="abc12345";
let newStr = str.slice(0, str.length - 3)  //abc12
let newStr = str.substring(0, str.length - 3)  //abc12
let newStr = str.substr(0, str.length - 3)  //abc12
删除后三位
let str="lizhienshinushenhhh"
let newStr = str.substring(str.length-3) 
截取中间两位值
let str="web前端工程师"
let newStr = str..match(/web(\S*)工程师/)[1]
console.log(newStr)//前端

5、取字符的某一位charAt()

let obj="张三"

console.log(obj.charAt(0))    ==》 "张"
console.log(obj.charAt(1))    ==》 "三"

注意：如果obj为null、undefined会报错，所以可以在obj后面加上“?”
在这里插入图片描述
加上“？”这样写要注意版本号，要把这两个升级到2.7.0

6、检测是否为数组
(1)instanceof 运算符他可以用来检测是否为数组

 var arr = [];
 var obj = {};
 console.log(arr instanceof Array);    //true
 console.log(obj instanceof Array);    //false

(2)Array.isArray(参数)（H5新增的方法 ie9以上版本支持）

var arr = [];
var obj = {};    
console.log(Array.isArray(arr));    //true
console.log(Array.isArray(obj));    //false

7、大小写转换：
toUpperCase()----------------转大写
toLowerCase()-------------转小写

 var a = 'lizhien';
 var daxie = a.toUpperCase()----------------转大写
 console.log(daxie);//LIZHIEN

 var b = 'LIZHIEN';
 var xiaoxie = b.toLowerCase()-------------转小写
 console.log(xiaoxie);//lizhien

8、 1.forEach() 迭代（遍历）数组

array.forEach(function(currentValue,index,arr));

currentValue：数组当前项的值

index：数组当前项的索引

arr：数组对象本身

//forEcth 迭代（遍历）数组
    var arr = [1,2,3];
    var sum = 0;
    arr.forEach(function(value,index,array){
        console.log('每个数组元素' + value);
        console.log('每个数组元素的索引号' + index);
        console.log('数组本身' + array);
        
        sum += value;
    })
    console.log(sum);    //6

9、2.filter() 筛选数组

array.filter(function(currentValue,index,arr));

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。

注意：它直接返回一个新数组
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

//filter 筛选数组
    var arr = [12,66,4,88,3];
    var newArr = arr.filter(function(value,index){
        // return value >= 20;
        return value % 2 === 0;    //求偶
    })
    // console.log(newArr);   //[66, 88]

    console.log(newArr);   //[12, 66, 4, 88]

过滤数组：
let arr=[
	{id:1,name:'张三',num:10},
	{id:2,name:'李四',num:2},
	{id:3,name:'王五',num:9}
]
let str={id:1,name:"一号"};
let newArr =  arr.filter(x => x.id !== str.id)

10、3.some() 查找元素

array.some(function(currentValue,index,arr));

some()方法用于检测数组中的元素是否满足指定条件。通俗点查找数组中是否满足条件的元素

注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false.

如果找到第一个满足条件的元素，则终止循环，不在继续查找。
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身

//some 查找数组中是否有满足条件的元素
    var arr = [10,20,30,40];
    var newArr = arr.some(function(value){
        return value >= 20;
    })
    console.log(newArr);    //true

    var arr1 = ['red','pink','blue'];
    var newArr1 = arr1.some(function(value){
        return value = 'pink';
    })
    console.log(newArr1)   //true

总结

1.filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来

2.some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

11、数组扁平化：

let arr=[1, 2, [3, 4],  [5, 4, 3]]

方法一：es6中的flat()
let newArr = arr.flat()
 
方法二：toString() + split()方法
let newArr = arr.toString().split(',').map(item => Number(item))

方法三：join() + split() 实现
let newArr = arr.join(',').split(',').map(item => Number(item))

方法四：扩展运算符实现
while (arr.some(item => Array.isArray(item))) {
      arr = [].concat(...arr);
}
console.log(arr)

方法五：递归实现
let res = [];
   arr.forEach(item => {
       if (Array.isArray(item)) {
           res = res.concat(...item)
       } else {
         res.push(item);
     }
});
console.log(res);

12、分隔符（例如千位，加“，”号）

 function _comma(number) {
     //原生-简便
     // return number.toLocaleString()
      //正则
      // var str = number.toString();
      // var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      // return str.replace(reg, "$1,");
      //保留两位小数
      // return number.toFixed(2).toString().replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
      // //保留整数
      // return number.toFixed(0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
}
  console.log(_comma(-2012.112)); //-2,012.112

13、在小程序中渲染富文本中图片问题

//解决图片底部空白间隙的问题
//解决 .webp 格式图片在 ios 设备上无法正常显示的问题：
 res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')

14、在数组中查找对应的对象，使用find

let arr=[{id:1,name:"张三"},{id:2,name:"李四"},{id:3,name:"王五"},{id:4,name:"赵六"}]
let str={id:1,name:"张三"};
const findResult = arr.find((x) => x.id === str.id);
console.log(findResult );// {id: 1, name: "张三"}

15、遍历对象数组中某个（num）属性，求和

let arr=[
	{id:1,name:'张三',num:10},
	{id:2,name:'李四',num:2},
	{id:3,name:'王五',num:9}
]
//第一种方式
 let sum=0
 arr.forEach(item=>sum+=item.num)
 console.log(sum)--------21

//第二种方式使用reduce方法：(0默认为初始值)
let sum = arr.reduce((total, item) => total += item.num, 0)
console.log(sum)--------21

16、repeat方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

1、参数如果是小数，会被取整。
	'na'.repeat(2.9) // "nana"

2、如果`repeat`的参数是负数或者`Infinity`，会报错。
	'na'.repeat(Infinity)

3、 如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于`-0`，`repeat`视同为 0。
	'na'.repeat(-0.9) // ""

4、参数`NaN`等同于0
	'na'.repeat(NaN) // ""

5、如果`repeat`的参数是字符串，则会先转换成数字。
	'na'.repeat('na') // ""
	'na'.repeat('3') // "nanana"

17、将对象转为数组

let obj = {
    a: 1,
    b: 2,
    c: 3
};
console.log(Object.entries(obj));          //[['a', 1], ['b', 2], ['c', 3]]

18、获取数组中最大值、最小值

const arr = [0, 1, 2, 3];
const min = Math.min(...arr);             ------------------------0
const max = Math.max(...arr);           ------------------------3

19、switch

Operate(c) {
      switch (c) {
        case "shanchu":
        		方法......
          break;
        case "bianji":
        		方法......
          break;
        default:
          return;
      }
    },

20、对象数组根据下标，获取当前数据。

let Arr = [
	{
		Id:1,
		Name:'张三'
	},
	{
		Id:2,
		Name:'李四'
	},
	{
		Id:3,
		Name:'王五'
	},
]

let index = 2//下标值
let obj = Arr .filter((item, i) => i == index)
console.log(obj)   -------------------{Id:3,	Name:'王五'}

21、隐藏手机号、邮箱中间四位

<span>{{ phone | phoneFilter }}</span>     //132****5454
<span>{{ mailbox | mailboxFileter }}</span>

data

phone: "13244445454",
mailbox:"1903025467@qq.com",

filters.js文件

filters:{
	//手机号过滤器
	phoneFilter(val){
		let reg =/^(.{3}).*(.{4})$/;
		return val.replace(reg, "$1****$2");
	}
	//邮箱过滤器
	mailboxFileter(val){
		let reg=/^(.{3})·*(.{9})$/;
		return val.replace(reg,"$1****$2")
	}
}

22、取数组最后一个元素

let list = [1,3,4,5,6]
let b = list[list.length- 1]    ======> 6

23、数组去重

let arr = [1, 2, 2, 3, 4, 4, 5, 5, 6];
let newArr = [...new Set(arr)];
console.log(newArr ); // 输出: [1, 2, 3, 4, 5, 6]

24、剩余参数 rest

userInfo:{
	name:'小满',
	age:18,
	test:111
}
const {name,age,...rest} = this.userInfo
console.log(rest)    //test:111

嘿 ......

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录