JavaScript 基础数据类型与方法全解析

一、String 字符串

1、String 字符串类型

(1)字符串引号

字符串可以包含在单引号 ''、双引号""或反引号 ``

(2)模版字符串

反引号允许我们通过 ${…} 将任何表达式嵌入到字符串中

let str2 = 'jsx';
let str3 = ${'hello' + '\t' +${str2}};
console.log(str3);
(3)字符串拼接

加号拼接字符串(隐式类型转换)当字符串类型与其它类型之间使用 + 加号时会将其它类型转换为字符串然后拼接组合在一起
拼接前,会把与字符串相加的这个数据类型转成字符串,然后再拼接成一个新的字符串

字符串 + 任意数据类型 = 拼接之后的新字符串;
console.log('js' + 1); //js1
console.log('js' + true); // jstrue
console.log('js' + null); // jsnull
console.log('js' + 'hello'); //jshello
console.log('js' + [1, 2, 3]); // js1,2,3
console.log('js' + undefined); // jsundefined
console.log('js' + {name: 'jsx', age: 23}); // js[object Object]
(4)字符串不可变

字符串 的值是 不可变的,这意味着一旦字符串被创建就不能被改变。
例如,下面的代码:

var arry = "Amy";
arry[0] = "yan";

是不会把变量 myStr 的值改变成 “Job” 的,因为变量 myStr 是不可变的。
注意,这 并不 意味着 myStr 永远不能被改变,只是字符串字面量 string literal 的各个字符不能被改变。
改变 myStr 中的唯一方法是重新给它赋一个值,就像这样:

var myStr = "Amy";
myStr = "little";

2、转义字符

字符描述
\n换行
\r回车:不单独使用。Windows 文本文件使用两个字符 \r\n 的组合来表示换行
\', \"引号
\\反斜线
\t制表符
\b, \f, \v退格,换页,垂直标签 —— 为了兼容性,现在已经不使用了。
\xXX具有给定十六进制 Unicode XX 的 Unicode 字符,例如:‘\x7A’ 和 ‘z’ 相同
\uXXXX以 UTF-16 编码的十六进制代码 XXXX 的 unicode 字符
例如 \u00A9 —— 是版权符号 © 的 unicode。它必须正好是 4 个十六进制数字
\u{XXXX}(1 到 6 个十六进制字符) 具有给定 UTF-32 编码的 unicode 符号。
一些罕见的字符用两个 unicode 符号编码,占用 4 个字节。如此可以插入长代码了

3、字符串方法

(1)length 属性

字符串的 length 属性可以获取整个字符串的长度

var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txt.length + "</p>");

输出:

12
26

(2)str.charAt(index) 和 str[index]

访问字符串返回指定索引位置的字符,没有找到字符返回一个空字符串 ‘’

var str = new String('smyhvae');
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}

输出:

s
m
y
h
v
a
e

(3)字符串大小写
str.toLowerCase() 字符转换为小写
str.toUpperCase() 字符转换为大写

例:

var a="WATERmelon"
var b=a.toLowerCase()
document.write(a+'<br>'+b)

输出:

WATERmelon
watermelon

(4)删前后空格

str.trim()会从一个字符串的两端删除空白字符。
例:

let str = ' hello '
console.log(str.trim())
//输出:hello

使用正则表达式:

//str为要去除空格的字符串:
去除所有空格:
str = str.replace(/\s+/g,"");
去除两头空格:
str = str.replace(/^\s+|\s+$/g,"");
去除左空格:
str=str.replace( /^\s/, '');
去除右空格:
str=str.replace(/(\s$)/g, "");
(5)字符串替换

str.replace(searchValue, newValue)用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的字符串

  • 方法不会改变调用它的字符串。它返回的是新字符串
  • 对大小写敏感,只替换首个匹配,如果要全局替换,需要使用正则
(6)重复字符串

str.repeat(count),字符串复制指定次数,重复次数不能为负数,count 参数用来设置重复的次数,次数不能为负数

repeatString("*", 3);		//"***".
repeatString("abc", 3);		//"abcabcabc".
repeatString("abc", 4);		//输出"abcabcabcabc".

var str = "Runoob";
str.repeat(2);
//输出:RunoobRunoob
(7)连接字符串
str.concat(str1, str2, ..., strN);

用于连接两个或多个字符串,该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串

console.log('hello'.concat(' world').concat('!'));
// 不会改变字符串,返回连接字符串的新值

输出:

hello world!

(7)字符串分隔

str.split(delim, length)通过给定的分隔符将字符串分割成一个数组
length 对数组长度的限制,如果使用参数,那么超出长度限制的元素会忽略
带有空参数的 split(),会将字符串拆分为字母数组

// split() 通过分隔符将字符串分隔为一个数组
let str = 'javascript';
// 空参数会将字符串拆分为单个字母
console.log(str.split('')); 
输出:['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']'

let str1 = 'jsx, ljj, ddc, zdj';
console.log(str1.split(',')); 
输出:['jsx', ' ljj', ' ddc', ' zdj']

//第二个参数控制数组长度,超出设置的长度会忽略
console.log(str1.split(',', 2));
输出:['jsx', ' ljj']

4、查找子字符串

(1)search()

str.search(seachValue)用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回某个指定的字符串值在字符串中首次出现的位置索引
区分大小写,无法设置第二个开始位置参数
如果没有找到任何匹配的字符,则返回 -1

let str = 'hello';
console.log(str.search('o')); // 4
// 如果没有找到任何匹配的字符,则返回 -1
console.log(str.search('p')); // -1
// 可以使用正则表达式
console.log(str.search(/E/i)); // 1 忽略大小写匹配字符串
(2)indexOf()

str.indexOf(searchValue, start)返回某个指定的字符串值在字符串中首次出现的位置

区分大小写,如果没有找到匹配的字符串则返回 -1

可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 str.length - 1。如省略该参数,则将从字符串的首字符开始检索

let str = 'hello javascript hello jsx';

console.log(str.indexOf('h')); // 0
// 如果没有找到匹配的字符串则返回 -1

console.log(str.indexOf('b')); // -1
// 可以设置第二个参数,参数为字符串开始检索的起始位置

console.log(str.indexOf('l', 10)); // 19 跳过了前面两个字符
(3)lastIndexOf()

str.lastIndexOf(searchValue, start)返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索,合法取值是 0 到 str.length - 1

区分大小写,如果没有找到匹配的字符串则返回 -1

该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置

let str = 'jsx ljj';

console.log(str.lastIndexOf('j')); // 6
// 当知道第二个参数时,则在一个字符串中的指定位置从后向前搜索

console.log(str.lastIndexOf('j', 3)); // 0

// 如果没有找到匹配字符串则返回 -1
console.log(str.lastIndexOf('p')); // -1
(4)includes()

str.includes(searchValue, start)用于判断字符串是否包含指定的子字符串,区分大小写,如果找到匹配的字符串则返回 true,否则返回 false

如果不指定参数,则默认为 0 字符串的首字符开始检索;如果指定,则规定了检索从起始位置开始检索,合法取值是 0 到 str.length - 1

 let str = 'jsx ljj zdj ddc ljj zdj ddc';
// 如果找到匹配的字符串则返回 true,否则返回 false

console.log(str.includes('ljj')); // true
console.log(str.includes('ccm')); // false

// 可以指定第二个参数,规定了检索从起始位置开始检索(没有第二个参数则从索引0开始)
console.log(str.includes('jsx', 2)); // false 从索引2开始检索
(5)startsWith()

str.starstWith(searchValue, start)用来判断当前字符串是否是以另外一个给定的子字符串“开头”的,根据判断结果返回 true 或 false。

如果不指定参数,则默认为 0 字符串的首字符开始检索;
如果指定,则规定了检索从起始位置开始检索,合法取值是 0 到 str.length - 1

let str = 'hello';

// 如果字符串是以指定的子字符串开头返回true,否则返回false
console.log(str.startsWith('h')); // true
console.log(str.startsWith('e')); // false

// 可以指定第二个参数,规定了检索从起始位置开始检索(没有第二个参数则从索引0开始)
console.log(str.startsWith('h', 1)); // false
(6)endsWith()

str.endsWith(searchValue, length)用来判断当前字符串是否是以指定的子字符串结尾的,区分大小写,如果传入的子字符串在搜索字符串的末尾则返回 true;否则将返回 false

length 参数设置字符串的长度。默认值为原始字符串长度

let str = 'hello';

// 如果传入的子字符串在搜索字符串的末尾则返回 true;否则将返回 false
console.log(str.endsWith('h')); // false
console.log(str.endsWith('o')); // true

// 可以指定第二个参数,设置字符串的长度。默认值为原始字符串长度
console.log(str.startsWith('e', 1)); // true

5、获取子字符串

(1)slice()

str.slice(start, end):可提取字符串的某个部分,并以新的字符串返回被提取的部分

let str = 'hello';
console.log(str.slice(1, 3)); // el

// 当没有指定第二个参数时,slice()函数会执行到字符串末尾
console.log(str.slice(2)); // llo

// 参数的值可以为负数, 负数则开始位置索引为字符串末尾
console.log(str.slice(-4)); // ello
console.log(str.slice(-3, -1)); // ll
(2)substring()

substring(start, end),start 与 end 之间(包括 start,但不包括 end) 负值代表 0

const quote = "We Stand Together";
const part = quote.substring(3, 8);
// Stand

如果end省略索引,它将提取到字符串的末尾。
const quote = "We Stand Together";
const part = quote.substring(3);
// Stand Together
(3)substr()

substr(start, length)从 start 开始获取长为 length 的字符串 允许 start 为负数

const quote = "Winter is coming";
const part1 = quote.substr(0, 6);
//Winter
const part2 = quote.substr(10, 6);
//coming

6、比较字符串

纯数字之间比较

alert(1<3);//true

数字字符串比较,会将其先转成数字

alert("1"<"3");//true
alert("123"<"123");//false

纯字符串比较,先转成ascii码

alert("a"<"b");//true
alert("abc"<"aad");//false,多纯字母比较,会依次比较ascii码

汉字比较

alert("我".charCodeAt());//25105
alert("的".charCodeAt());//30340
alert("我"<"的");//true,汉字比较,转成ascii码

当数字和字符串比较,且字符串为数字。则将数字字符串转为数字

alert(123<"124");//true,下面一句代码得出124的ascii码为49,所以并不是转成ascii比较
alert("124".charCodeAt());//49
①charCodeAt()

str.charCodeAt(pos),返回指定位置字符的 Unicode 编码,返回值是 0 - 65535 之间的整数

只能分别返回前两个字节和后两个字节的值,如果在指定的位置没有元素则返回 NaN

let str = '*^%';
console.log(str.charCodeAt(1)); 
——>> 输出94

// 如果在指定的位置没有元素则返回 NaN
console.log(str.charCodeAt(4)); // NaN
②fromCharCode()

String.fromCharCode(code),用于从 Unicode 码点返回对应字符,但是这个方法不能识别码点大于0xFFFF的字符

var n=String.fromCharCode(72,69,76,76,79);
document.getElementById("demo").innerHTML=n;
//输出:HELLO
③codePointAt()

str.codePointAt(pos),能够正确处理 4 个字节储存的字符,返回一个字符的 Unicode 码点

String myStr = "Hello";
int result = myStr.codePointAt(0);
System.out.println(result);

输出:

72

④fromCodePoint()

String.fromCodePoint(code),用于从 Unicode 码点返回对应字符,可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足

console.log('吉'.codePointAt(0));
console.log('吉'.codePointAt(1));

输出

134071
57271

二、Number 数值

在JS中所有的数值都是 Number 类型,包括整数和浮点数(小数)。

var a = 100; // 定义一个变量 a,并且赋值整数100
console.log(typeof a); // 输出变量 a 的类型

var b = 12.3; // 定义一个变量 b,并且赋值浮点数 12.3
console.log(typeof a);

上方代码的输出结果为:

number
number

再次补充:在 JS 中,只要是数,就是 Number 数值型的。

1、数值范围

由于内存的限制,ECMAScript 并不能保存世界上所有的数值。

最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
最小值:Number.MIN_VALUE,这个值为: 5e-324

如果使用 Number 表示的变量超过了最大值,则会返回Infinity。

无穷大(正无穷):Infinity
无穷小(负无穷):-Infinity

注意:typeof Infinity的返回结果是number。

2、NaN

NaN:是一个特殊的数字,表示Not a Number,非数值。比如:

 console.log("abc" / 18);  //结果是NaN
 console.log("abc" * "abcd"); //按理说,字符串相乘是没有结果的,但如果你非要让JS去算,它就一定会给你一个结果。结果是NaN

注意:typeof NaN的返回结果是 number。

Undefined和任何数值计算的结果为 NaN。NaN 与任何值都不相等,包括 NaN 本身。

总结:如果加号两边都是 Number 类型,此时是数字相加。否则,就是连字符(用来连接字符串)。

例1:

var a = "1";
var b = 2;
console.log(a + b);

控制台输出:

12

例2:

var a = 1;
var b = 2;
console.log("a" + b);	//"a"就不是变量了!所以就是"a"+2 输出a2

控制台输出:

a2

【重要】:在变量中加入字符串进行拼接,可以被同化为字符串。

3、隐式转换

console.log(“2”+1)得到的是字符串,但console.log(“2”-1)得到的结果却是数值1,这是因为计算机自动帮我们进行了“隐式转换”。

也就是说,-*/%这几个符号会自动进行隐式转换。例如:

var a = "4" + 3 - 6;
 console.log(a);

输出结果:

37

注:虽然程序可以对-*/%这几个符号自动进行“隐式转换”;但最好自己完成转换,方便程序的可读性。

4、运算精度问题

整数的运算基本可以保证精确;但是小数的运算,可能会得到一个不精确的结果。所以不要使用JS进行对精确度要求比较高的运算。
例:

var a = 0.1 + 0.2;
console.log(a);  //打印结果:0.30000000000000004

上方代码中,打印结果并不是0.3,而是0.30000000000000004

这是因为,计算机在做运算时,所有的运算都要转换成二进制去计算。然而,有些数字转换成二进制之后,无法精确表示。比如说,0.1和0.2转换成二进制之后,是无穷的,因此存在浮点数的计算不精确的问题。

5、Number.isInteger() 判断是否为整数

console.log(Number.isInteger(123));
输出:true

6、toFixed() 小数点后面保留多少位

let num = 1.234;
let num2 = num.toFixed(2);

console.log(num); // 打印结果:1.234
console.log(num2); // 打印结果:1.23

console.log(typeof num); // number
console.log(typeof num2); // string

解释:将数字 myNum 的小数点后面保留 num 位小数(四舍五入),并返回。不会改变原数字。注意,返回结果是字符串。

7、Math.abs():获绝对值

console.log(Math.abs(-10)); //输出:10

8、Math.random() 方法:方法定义:生成 [0, 1) 之间的随机浮点数。

1.生成 [0, x) 之间的随机数
Math.round(Math.random()*x)
2.生成 [x, y) 之间的随机数
Math.round(Math.random()*(y-x)+x)

9、pow():乘方

Math.pow(a, b); 如果想计算 a 的 b 次方
在这里插入图片描述

10、sqrt():开方

Math.sqrt(5);

在这里插入图片描述

⭐内置对象 Math 的常见方法

方法描述备注
Math.PI圆周率Math对象的属性
Math.abs()返回绝对值
Math.random()生成0-1之间的随机浮点数取值范围是 [0,1)
Math.floor()向下取整(往小取值)
Math.ceil()向上取整(往大取值)
Math.round()四舍五入取整(正数四舍五入,负数五舍六入)
Math.max(x, y, z)返回多个数中的最大值
Math.min(x, y, z)返回多个数中的最小值
Math.pow(x,y)乘方:返回 x 的 y 次幂
Math.sqrt()开方:对一个数进行开方运算

三、Boolean 布尔值

Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

Boolean 对象属性

属性描述
constructor返回对创建此对象的 Boolean 函数的引用
prototype使您有能力向对象添加属性和方法。

Boolean 对象方法

方法描述
toString()把布尔值转换为字符串,并返回结果。
valueOf()返回 Boolean 对象的原始值。

四、Null 空

Null 类型是第二个只有一个值的数据类型,这个特殊的值就是null。

例:

let myObj = null;
cosole.log(typeof myObj); // 打印结果:object

补充:
Null 类型的值只有一个,就是 null。比如 let a = null。
使用 typeof 检查一个 null 值时,会返回 object。

五、Undefined 未定义

一、undefined的特点

1.undefined既是JavaScript中的原始数据类型之一,也是一个原始值数据
2、undefined是全局对象上的一个属性
3、undefined不可删,不可重新定义,不可枚举
4、undefined不是JavaScript的关键字和保留字,

二、什么情况下会出现undefined

1、已声明但未被初始化的变量默认赋值undefined

let a;
console.log(a);//undefined

2、未被声明的变量使用typeof操作符检测数据类型时返回undefined

 console.log(typeof a)//undefined

3、当函数没有明确指定返回值时,默认返回undefined

function fun(){
	console.log(333);
}
console.log(fun());//函数默认会返回一个undefined

当函数有明确的返回值时,则返回指定的值

function fun(){
	console.log(333);
	return "666666"//指定函数返回值,则不再返回undefined
	}
console.log(fun());

4、viod()返回undefined
使用viod操作任何值返回的都是undefined
以下代码均输出undefined

console.log(void(122));//undefined
console.log(void(0));//undefined
console.log(void(3));//undefined
console.log(void("南山"));//undefined

三、undefined在类型转换中的结果

在使用Number(),parseInt(),parseFloat(),+,- 运算符进行类型转换时,会转换成NaN。
在使用!运算符转换时会转换成true
undefined==null,undefined不等于0
undefined 没有toString方法,将其转换成字符串是,不能使用toString方法,但是可以使用String()方法。

 console.log(Number(undefined));//NaN
 console.log(parseInt(undefined));//NaN
 console.log(parseFloat(undefined));//NaN
 console.log(+undefined);//NaN
 console.log(-undefined);//NaN
 console.log(undefined==null);//true
 console.log(!undefined);//true
 console.log(undefined==0);//false

资料来源各网站up主,侵删!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俎树振

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值