0
点赞
收藏
分享

微信扫一扫

Javascript基础2

幸福的无所谓 2022-04-15 阅读 45
javascript
  • 垃圾回收GC
  • 数组array
    • 简介
    • 数组字面量
    • 数组方法
    • 数组的遍历
    • foreach
  • String字符串的方法
    • 属性
    • 方法
  • Date
    • 创建时间
    • 方法
  • Math
  • 包装类
    • String()
    • Number()
    • Boolean
  • 正则表达式
    • 介绍
    • 正则语法
    • 字符串和正则相关方法

垃圾回收GC

程序运行过程中会产生垃圾，会导致程序运行过慢

  • 当一个对象没有任何变量或属性对它进行引用，此时将无法操作该对象
  • 即改对象就是垃圾，必须进行清理。
  • JS拥有自动垃圾回收机制，会自动将垃圾对象中从内存销毁。
  • 需要做的就是将不再使用的对象设置为null
// 创建对象
let obj=new Object();

//对对象进行各种操作
obj=null;

数组array

简介

  • 数组也是对象（一切都是对象）
  • 和普通对象功能类似。
  • 不同的是：普通对象使用字符串作为属性名，数组使用数字作为索引操作元素。 

// 构造函数创建  ，并添加元素
let arr=new Array(10,20,30);
console.log(typeof arr);//Object
console.log(arr);//[10,20,30]
//向数组中添加元素
arr[0]=10;
console.log(arr);//[10, 10]
// 读取数组元素
console.log(arr[0]);//10
console.log(arr[2]);//所以越界，undefined
//设置（小于或大于原长度）或获取数组长度（或者 最大索引+1）
console.log(arr.length);//2

数组字面量

  • 数组元素可以是任意数据类型（包括对象）
 // 使用字面量创建数组
let arr=[];
//创建时指定数组元素
let arr2=[1,2,3,4,5];
console.log(arr2.length);//5
console.log(arr2);//[1,2,3,4,5]

//创建一个数组只有一个元素
arr=[10];
console.log(arr);//[10]

let arr3=new Array(10);
console.log(arr3);//长度为10的空数组[,,,,,,,,,]

//数组元素为对象
let obj={name:'孙悟空'};
let arr5=[obj];
console.log(arr5);//[{name:'孙悟空'},{sex: '男'}]
console.log(arr5[0].name);//孙悟空

//数组元素为函数
let arr6=[function(){alert('0');},function(){alert('1');}];
console.log(arr6);//[f,f]
arr6[0]();//运行函数

//数组元素为数组，二维数组
let arr7=[[1,2,3],[4,5,6],[7,8,9]];
console.log(arr7.length);//3
console.log(arr7[0]);[1,2,3]

数组方法


1.push() 向数组末尾添加元素（或数组，作为整体只占一个位置），并返回数组的长度

let arr1=['孙悟空','猪八戒','沙和尚'];

arr1.push('唐僧','蜘蛛精');
console.log(arr1);//['孙悟空','猪八戒','沙和尚'，'唐僧','蜘蛛精']
console.log(arr1.length);//5

2.pop() 删除数组的最后一个元素并返回

console.log(arr1.pop());//蜘蛛精
console.log(arr1);['孙悟空','猪八戒','沙和尚'，'唐僧']
console.log(arr1.length);//4

3.unshift() 向数组的开头添加元素（或数组，作为整体，只占一个位置）并返回数组长度

arr1.unshift('牛魔王','玉兔精');
console.log(arr1);//['牛魔王', '玉兔精', '孙悟空', '猪八戒', '沙和尚', '唐僧']
console.log(arr1.length);//6

4.shift 删除数组的第一个元素并返回

console.log(arr1.shift());
console.log(arr1);//['玉兔精', '孙悟空', '猪八戒', '沙和尚', '唐僧']
console.log(arr1.length);//5

5.slice(start,end) 从已有的数组中提取指定元素到新数组

  • 不会改变原数组，封装到新数组中
  • 包含start,不包含end
  • end可以省略不写
  • 索引可以传递负值（从后往前），-1表示倒数第一个，-2表示倒数第二个
let arr2=arr1.slice(0,2);
console.log(arr2);//['玉兔精', '孙悟空']
console.log(arr2.length);//2

//end省略不写，默认截取到最后一个元素
let arr3=arr1.slice(2);
console.log(arr3);//['猪八戒', '沙和尚', '唐僧']
console.log(arr3.length)//3

6.splice(start,length,[新元素1，新元素2]) 删除原数组中指定元素，并向前边开头添加新元素

  • 会改变原数组
  • 包含start,length表示删除的数量
//删除指定元素
let arr4=arr1.splice(0,3);
console.log(arr1);//['沙和尚', '唐僧']
console.log(arr1.length);//2

//删除指定元素，并在前边添加新元素
let arr5=arr1.splice(1,3,'王母娘娘','玉皇大帝');
console.log(arr1);//['玉兔精', '王母娘娘', '玉皇大帝', '唐僧']
console.log(arr1.length);//4

//去除数组中重复的数字
let arr_1=[1,2,3,2,1,3,4,2,5,6,6,6,7,8,9]
for (let i = 0, len = arr_1.length; i < len; i++) {
    // 获取当前元素后的所有元素
    for (let j = i+1, len = arr_1.length; j < len; j++) {
        if(arr_1[i]==arr_1[j]){
            //如果存在重复元素，则删除j对应的元素
            arr_1.splice(j,1);
            // 删除了j对应的元素之后，后边的元素自动补齐，此时将不会再比较这个元素
            // 需要再比较一次j所在位置的元素
            j--;
        }
    }
}
console.log(arr_1);//[1,2,3,4,5,6,7,8,9]

7.concat(A,...,B) 拼接数组，并返回新数组

  • 不会改变原数组
let arr1=['孙悟空','猪八戒','沙和尚'];
let arr2=['玉兔','王母娘娘','玉皇大帝'];

let arr3=arr1.concat(arr2);
console.log(arr3);//['孙悟空', '猪八戒', '沙和尚', '玉兔', '王母娘娘', '玉皇大帝']

8.join(str) 把数组转换为字符串，并使用str连接

  • 不会改变原数组
  • 是字符串，只是默认使用逗号连接
let arr4=arr1.join('...');
console.log(arr4);//孙悟空...猪八戒...沙和尚

9.reverse 反转数组

  • 会直接修改原数组
console.log(arr1.reverse());//['沙和尚', '猪八戒', '孙悟空']

10.sort 数组排序

  • 改变原数组
  • 默认按照unicode编码排序
  • 纯数字数组，也会按照unicode编码排序，需要自己指定排序规则
    • 使用回调函数指定数组排序规则
    • 定义2个形参，分别使用数组中的元素作为实参去调用回调函数.（a在b前边，但谷歌浏览器相反,b在a前边）
    • 使用哪个元素调用不确定。
  • 浏览器会根据回调函数的返回值决定元素顺序
    • >0，则元素交换位置
    • <0，元素位置不变
    • =0，元素相等，不交换
//按照unicode编码排序结果
let arr5=[12,5,7,23,56,4,3,78,54,36];
console.log(arr5.sort());//[12, 23, 3, 36, 4, 5, 54, 56, 7, 78]

//使用回调函数指定排序规则
arr5.sort(function(a,b){
    //升序
    return a-b;
    //降序
    return b-a;
})
console.log(arr5);//[3, 4, 5, 7, 12, 23, 36, 54, 56, 78]

数组的遍历

将数组中所有的元素都取出来

//for 循环
 let arr1=['孙悟空','猪八戒','沙和尚'];
for (let i = 0, len = arr1.length; i < len; i++) {
    console.log(arr1[i]);
}
//for in
for (let str in arr1) {
    //str表示索引
    console.log(arr1[str]);//孙悟空，猪八戒，沙和尚
}

//对象遍历
let obj={
    name:'孙悟空',
    age:18,
    sex:'男'
}
for (let str in obj) {
    //console.log('属性名：'+str);
    //console.log('属性值:'+obj[str]);
    console.log(obj[str]);//孙悟空，18，男
}

foreach

只支持IE8以上的浏览器

  • 需要一个函数作为参数：通常为匿名函数
  • 由我们创建但不由我们调用，即回调函数
  • 由浏览器调用
  • 每次执行时，浏览器会将遍历到的元素以实参的形式传递过来

三个参数

  • 正在遍历的元素
  • 元素的索引
  • 正在遍历的数组
personArr.forEach(function(value){
    console.log(value);
    });

   

personArr.forEach(function(value,index,obj){
    console.log(value,index,obj);
});

String字符串的方法

在底层：字符串是以字符数组的形式保存的。

操作字符串可以想象为操作数组

let str='hello';

//底层保存：['h','e','l','l','o']

属性

1.length
返回字符串的长度

 let str='hello';
console.log(str.length);//5

2.prototype
向对象中添加共有的属性和方法

方法

字符串的大部分方法不会修改原字符串，即字符串的内容不可变
1.charAt(munber) 获取指定位置（索引）的字符

let str='hello world';
console.log(str.charAt(1));//e

2.charCodeAt(number) 获取指定位置（索引）的字符的unicode编码

console.log(str.charCodeAt(1));//101

3.fromCharCode() 根据字符编码获取字符串

  • String调用
let result=String.fromCharCode(101);
console.log(result);//e

let result=String.fromCharCode(0x2682);
console.log(result);//特殊字符

4.concat(A,...,B) 连接字符串

  • 作用和+加号一样
let str1='北京，';
let str2='欢迎你！';
let str3=str1.concat(str2);
console.log(str3);//北京，欢迎你！

5.indexOf(str,index) 从index开始，检索字符串中是否含有指定字符串

  • 若存在，返回第一次出现的索引（从前往后）
  • 否则，返回-1
let str4='hello word!';
console.log(str4.indexOf('lo'));//3

let str4='hello hword!';
console.log(str4.indexOf('h',1));//6

6.lastIndexOf(str,index) 从index开始，检索字符串中是否含有指定字符串

  • 若存在，返回索引。（从后往前找）
  • 否则，返回-1
let str5='hehllo hworhd!';
console.log(str5.lastIndexOf('h',5));//2

7.slice(start,end) 截取字符串

  • 包括start,但不包括end
  • 没有end，则截取到后边所有的
  • -1 从后边计算
let str6='abcdefgh';
console.log(str6.slice(1,4));//bcd

8.subString(start,end) 截取字符串

  • 和slice类似
  • 但：substring不能接受负值，默认为0
  • 会自动调整参数位置，若第二个小于第一个，则交换位置
let str7='abcdefghij';
console.log(str7.substring(1,3));//bc
自动调整参数位置
console.log(str7.substring(5,2));//cde

9.substr(start,length) 截取字符串

let str8='abcdefghij';
console.log(str8.substr(1,3));//bcd

10.split(str) 将字符串拆分为数组，并用str分隔

  • 和数组的join相反:将数组转换为字符串，并用str连接
  • 若传递的是**('')**，则将每个字符都拆分为数组元素
let str9='hello,money,year,date';
console.log(str9);//hello,money,year,date
let result1=str9.split(',');
console.log(result1);['hello', 'money', 'year', 'date']

let result2=result1.join('-');
console.log(result2);//hello-money-year-date

11.toLowerCase 转为小写字母
12.toUpperCase 转为大写字母

 let str10='ABCdefGH';
console.log(str10.toLowerCase());//abcdefgh
console.log(str10.toUpperCase());//ABCDEFGH

Date

Date是构造函数

创建时间

  • 指定日期格式：月/日/年 时:分:秒
//使用构造函数创建--->当前代码执行的时间
let d=new Date();
console.log(d);//Tue Mar 29 2022 11:03:39 GMT+0800 (中国标准时间)

//创建指定的时间对象，传递表示时间的实参
let d2=new Date("03/29/2022 11:10:30");
console.log(d2);//Tue Mar 29 2022 11:10:30 GMT+0800 (中国标准时间)

方法

1.getDate() 获取当前日期对象是几日

let d1=new Date();
 console.log(d1);//Tue Mar 29 2022 13:56:55 GMT+0800 (中国标准时间)
console.log(d1.getDate());//29

2.getDay() 获取当前日期对象是周几

  • 会返回0-6的值，0表示周日......
console.log(d1.getDay());//day=2

3.getMonth() 获取当前日期对象的月份

  • 返回0-11的值，0表示1月
console.log('Month='+d1.getMonth());//Month=2

4.getFullYear() 获取当前日期对象的年份

console.log('Year='+d1.getFullYear());//Year=2022

5.getHours() 获取当前日期对象的小时
6.getMinutes() 获取当前日期对象的分钟
7.getSeconds() 获取当前日期对象的秒数
8.getMilliSecond() 获取当前日期对象的毫秒数

console.log('Hour='+d1.getHours());//Hour=14
console.log('Minutes='+d1.getMinutes());//Minute=4
console.log('Seconds='+d1.getSeconds());//Second=36
console.log('MilliSecond='+d1.getMilliseconds());//MilliSecond=302

9.getTime 获取当前日起对象的时间戳

  • 从格林威治的1970年1月1日，0时0分0秒到现在的毫秒数
  • 1秒=1000毫秒
console.log('Time='+d1.getTime());//Time=1648534040417

10.now获取当前时间戳

  • 可以利用时间戳测试代码执行的性能
let d2=Date.now();
console.log(d2);//1648534559277

let start=Date.now();
执行代码。
let end=Date.now();
let timespan=end-start//时间差就是中间代码执行的时间

Math

  • Math不是构造函数，属于工具类，不需要创建对象
  • Math封装了许多属性和函数（可以直接用）
//ceil  向上取整
//floor  向下取整
//round  （四舍五入）
//random   生成0-1之间的随机数（不包括0和1）
    console.log(Math.round(Math.random()*10));//生成0-10之间的整数
//max(x,...,y)  多个数之间的最大值
//min(x,...,y)  多个数之间的最小值
//pow(x,y)   x的y次幂
//sqrt(x)    根号x

包装类

基本数据类型：string number boolean null undefined symbol

引用数据类型：object(包括Function,Math,Date等)

通过3种包装类可以将基本类型数据转换为对象，可以添加属性和方法

  • 在实际应用中不会使用基本数据类型对象。
  • 在做比较时可能会带来一些不可预料的结果
  • 对基本数据类型调用属性和方法时：
    • 浏览器会使用包装类将数据封装为对象，然后再调用对象的属性和方法
    • 调用完以后，再转换为基本数据类型。

String()

将基本数据类型字符串转换为String对象

let num=new Number(3);
console.log('num='+num);//num=3
console.log(typeof num);//object

Number()

将基本数据类型Number转换为Number对象

let str=new String('hello');
console.log('str='+str);//str=hello
console.log(typeof str);//object

Boolean

将基本数据类型Boolean转换为Boolean对象

let bool=new Boolean('true')
console.log('bool='+bool);//bool=true
console.log(typeof bool);//object

正则表达式

介绍

正则表达式用于定义一些字符串的规则

  • 计算机可以根据正则表达式，检查一个字符串是否符合规则
  • 正则表达式
  • 匹配模式
    • i 忽略大小写
    • g 全局匹配模式
//构造函数创建正则表达式
let reg=new RegExp('正则表达式','匹配模式');

//检查字符串是否符合正则表达式的规则，严格五分大小写
reg.test(str)

正则语法

  • 字面量创建正则表达式 /表达式/匹配模式
//使用字面量创建正则表达式  
let reg=/正则表达式/匹配模式
let reg1=/a/i;
  • a|b 表示或者
  • [ab] 表示或者
  • [a-z] 任意小写字母
  • [A-Z] 任意大写字母
  • [A-z] 任意字母
  • [0-9] 任意数字
//创建正则表达式检查字符串是否有a或b
let reg2=/a|b/i;
console.log(reg2.test('bcd'));//true
 console.log(reg2.test('acd'));//true
 console.log(reg2.test('ab'));//true
 
 [ab]==a|b
 
 //检查字符串是否含有abc 或 adc 或 aec
 let reg5=/a[bde]c/;
  • [^n] 除了
//除了ab以外的字符串
let reg6=/[^ab]/;
console.log(reg6.test('ab'));
  • 量词{number} 设置内容出现的最少次数
    • 只对括号之前的一个内容起作用
    • 多个内容可以用括号括起来
et reg7=/a{3}/;
console.log(reg7.test('abc'));//false
console.log(reg7.test('aaabc'));//true

let reg8=/(ab){3}/;
console.log(reg8.test('abc'));//false
console.log(reg8.test('ababab'));//true

当前后都有内容时，严格限制出现的次数
let reg9=/d(ab){3}c/;
console.log(reg9.test('dababababc'));//false
console.log(reg9.test('dabababc'));//true
  • 量词{m,n} 设置内容出现的次数介于m-n之间
    • {m,} 表示m次以上
let reg10=/d(ab){1,3}c/;
console.log(reg10.test('dabc'));//true
console.log(reg10.test('dabababc'));//true
  • n+ 至少一个{1,}
  • n* 0个或多个{0,}
  • n? 0个或1个{0,1}
let reg11=/ab+c/;
console.log(reg11.test('dac'));//false
console.log(reg11.test('dabbc'));//true

let reg12=/ab*c/;
console.log(reg12.test('dac'));//true
console.log(reg12.test('dabbbc'));//true

let reg13=/ab?c/;
console.log(reg13.test('dac'));//true
console.log(reg13.test('dabc'));//true
console.log(reg13.test('dabbc'));//false
  • ^n 是否以n开头
  • n$ 是否以n结尾
//开头
let reg14=/^c/;
console.log(reg14.test('cde'));//true
console.log(reg14.test('dabbc'));//false

//结尾
let reg15=/a$/;
console.log(reg15.test('cda'));//true
console.log(reg15.test('dabbc'));//false

a既是开头立刻又是结尾
let reg16=/^a$/;
console.log(reg16.test('a'));//true
console.log(reg16.test('aba'));//false

以a开头或者以a结尾
let reg17=/^a|a$/;
console.log(reg17.test('ab'));//true
  • . 表示任意字符
    • 使用== \表示转义字符==
查找字符串是否含有  .
let reg19=/\./;
console.log(reg19.test('a.bc'));//true

查找字符串是否含有  \
let reg20=/\\/;
console.log(reg20.test('a\\bc'));//true
  • \w(任意字母、数字、下划线)
  • \W(除了字母数字、下划线)
  • \d(任意数字)
  • \D(除了数字)
  • \s(空格)
  • \S(除了空格)
  • \b(单词边界)（是独立的内容）
  • \B(除了单词边界)
/**
* 去除字符串的空格
*/
let str10="      h      e      l      lo";
//去掉字符串前后的空格，即用''代替空格
console.log(str10.replace(/\s/g,''));

//去掉去开头的空格
console.log(str10.replace(/^\s*/g,''));

//去掉开头或结尾的空格
console.log(str10.replace(/^\s*|\s*$/g,''));

邮件的正则表达式

/**
* 邮件的正则表达式
* hello  .nihao  @abc.com.cn
* 任意字母数字下划线.任意字母数字下划线@任意字母、数字.任意字母(2-5位).任意字母(2-5位)
*/
let mail=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
console.log('mail = '+mail.test('vienna_wa@163.com'));

字符串和正则相关方法

1.split 字符串拆分成数组

  • 方法中可以传递正则表达式作为参数，根据正则表达式拆分字符串
  • 默认全局匹配
let str='1a2b3c4d5e';
let result=str.split(/[A-z]/);
console.log(result);//['1', '2', '3', '4', '5', '']

2.search 搜索字符串中是否含有指定内容

  • 搜索到，则返回第一次出现的索引
  • 否则，返回-1
  • 还可以传递正则表达式作为参数
  • 只会查找第一次出现的
let str1='hello abc hello abc';
console.log(str1.search('abc'));//6

let str2='hello hello aec afc';
console.log(str2.search(/a[bde]c/));//12

3.match 根据正则表达式，将符合条件的内容提取出来

  • 默认：只会找到第一个符合要求的内容
  • 设置全局匹配模式，就可以找到所有符合条件的
  • 可以为一个正则表达式设置多个匹配模式
  • 结果被封装到数组中返回
let str2='1a2b3c4d5e';
console.log(str2.match(/[A-z]/));
//['a', index: 1, input: '1a2b3c4d5e', groups: undefined]

console.log(str2.match(/[A-z]/g));
//['a', 'b', 'c', 'd', 'e']

4.replace(A,B) 将字符串的指定内容，替换为新的内容

  • A可以是正则表达式
let str3='1a2b3c4d5eA8B9';
console.log(str3.replace('a','@-@'));//1@-@2b3c4d5eA8B9

console.log(str3.replace(/[A-z]/g,'@-@'));//1@-@2@-@3@-@4@-@5@-@@-@8@-@9

console.log(str3.replace(/[A-z]/g,''));//1234589
举报

相关推荐

javascript基础(2)

CSH5-2101视觉艺术

JavaScript基础（2）

javascript

JavaScript基础语法（2）

前端

JavaScript的基础知识点（2）

隐式转换算术运算符javascriptJavaScript前端开发yyds干货盘点

第二篇 JavaScript 基础入门 2

javascriptlinq开发语言

【JavaScript】JavaScript基础-函数

JavaScript全局变量局部变量编程语言JavaScript函数Python后端开发

JavaScript 2

javascript

2 JavaScript

javascript前端开发语言

JavaScript基础

日记本前端

JavaScript 基础

html字符串赋值JavaScript前端开发yyds干货盘点
0 条评论