其他分享
首页 > 其他分享> > 【学习笔记】JS数据类型

【学习笔记】JS数据类型

作者:互联网

【学习笔记】JS数据类型

 

1.字符串详解

1.1、正常字符串我们使用 双引号 或 单引号 包裹

 

1.2、注意转义字符

var msg = "a\'"         a'
​
\'           '
\n          换行
\t          tab
\u4e2d      '中'     \u####  Unicode字符
\x41        'A'      Ascll字符

 

1.3、多行字符串编写

var mas = `hello
world
nihao`

使用 `` 来编写多行字符串

 

1.4、模板字符串

let name = 'wzt';
let age = 23;
​
let msg = `你好, ${name},${age}`;
console.log(msg)

如果要拼接字符串,可使用``来包裹字符串,然后用${},来包裹要拼接的字符串

 

1.5、字符串长度

str.length

 

1.6、字符串的可变性,不可变

image-20220913094227291

即使给字符串的某一位重新赋值,该字符串还是原来的值,说明字符串在js中也是不可变的

 

1.7、大小写转换

str.toUpperCase()    //小写变大写
str.toLowerCase()    //大写变小写

1.8、str.indexOf('t')

 

1.9、substring

str.substring(1)     //从第一个字符串截取到最后一个字符串
str.substring(1,3)   //[1,3)

 

2.数组类型详解

数组可以包含任意的数据类型,通过下标取值和赋值

var arr = [1,2,3,'a','b'];
arr[0];
arr[1] = 'c';

image-20220913101639016

2.1、长度

arr.length

注意:给arr.length赋值,数组大小会发生变化,如果赋值比原先的值小,元素就会丢失,赋值比原先的值大,数组后面就会出现empty,这几个empty都是undefined

image-20220913101705412

 

2.2、indexOf() 通过元素获得下标

['c', 2, 3, 'a', 'b', 空 ã5]
arr.indexOf(3)
>2

需要注意的是,数字1和字符串“1”是不一样的

 

2.3、slice() 截取数组的一部分

arr.slice(1,5)
(4) [2, 3, 'a', 'b']
arr.slice(1,6)
(5) [2, 3, 'a', 'b', 空]

和string中的substring相同

 

2.4、push() 和 pop() 在数组的尾部

arr.push('d')
arr
>(11) ['c', 2, 3, 'a', 'b', 空 ã5, 'd']
arr.pop()
'd'
arr
>(10) ['c', 2, 3, 'a', 'b', 空 ã5]
​
push:压入到尾部
pop:从尾部弹出一个元素

 

2.5、unshift() 和 shift() 在数组的头部

unshift():压入到头部
shift():从头部弹出一个元素
​
arr.unshift(9)
arr
 >[9, 'c', 2, 3, 'a', 'b', 空 ã5]

 

2.6、sort() 排序

var arr = ['B','C','A']
undefined
arr
(3) ['B', 'C', 'A']
arr.sort
ƒ sort() { [native code] }
arr
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']

 

2.7、元素反转 reverse()

arr.reverse()
(3) ['C', 'B', 'A']

 

2.8、拼接数组,concat()

arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]

注意:concat没有修改数组,而是返回了一个新的数组

 

2.9、连接符join

打印拼接数组,使用特定的字符串连接

arr.join("$")
'C$B$A'

 

2.10、多维数组

var arr = [[1,2],[3,4],['5','6']]
undefined
arr[1][0]
3

 

3. 对象详解

创建对象

var 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}
​
 var person = {
       name:'wzt',
       num:'2019',
       age:23
   }

js中 {......}表示一个对象,键值对描述属性,每个属性之间用逗号隔开,最后一个属性后面不加逗号

属性的键都是字符串,值可以为任意对象

 

3.1、对象赋值

person.age = 18
18
person.age
18

3.2、使用一个不存在的对象属性不会报错,只是会undefined

person.pet
undefined

3.3、属性的动态删减

delete person.num
true
person
{name: 'wzt', age: 18}

3.4、属性的动态添加,直接给新的属性赋值即可

person.pet = 'rich'
'rich'
person
{name: 'wzt', age: 18, pet: 'rich'}

3.5、判断属性值是否在这个对象中 xxx in xxx

'pet' in person
true

这里需要注意,属性名需要是字符串

如果是父类的属性或方法,通过in来判断,也是返回true

'toString' in person
true

image-20220913111325604

 

如果只想判断自己的属性或方法,可以使用hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('pet')
true

 

4.流程控制

4.1、forEach循环

var arr = [15,89,59,63,78,55,66,99];
arr.forEach(function (value) {
    console.log(value);
})

 

4.2、for....in for(var index in object)

var arr = [15,89,59,63,78,55,66,99];
for (var arrKey in arr) {
    console.log(arr[arrKey])
}

要注意的是for 中前面是索引

 

4.3、for of

var arr = [11,32,33,44,55]
for(var x of arr){
    console.log(x)
}

 

for....in 和 for....of 的区别:

在去给数组新增一个值,for....in会把这个值打印出来,for....of不会

var arr = [11,22,33];
for (let arrKey in arr) {
    console.log(arrKey)
}
for (let number of arr) {
    console.log(number)
}

image-20220913121509000

 

现在我们给arr新增一个属性name

var arr = [11,22,33];
arr.name = "tom";
for (let arrKey in arr) {
    console.log(arrKey)
}
for (let number of arr) {
    console.log(number)
}

image-20220913121613323

这是早期的漏洞

 

5.Map和Set

ES6新特性

 

//创建Map
var map = new Map([["wzt",100],["lf",90],["sl",80]])
  //根据key获得value
var name = map.get("wzt")
console.log(name)
//新增或修改
map.set("admin",123456)
//删除
map.delete("sl")

image-20220913115829147

 

//创建Set
var set = new Set([11,22,33,44,55]);
//添加
set.add(66);
//删除
set.delete(44);
//判断是否有某个元素
console.log(set.has(44));

image-20220913120215324

 

for (let mapElement of map) {
    console.log(mapElement)
}

image-20220913120812808

 

for (let number of set) {
    console.log(number)
}

image-20220913120912081

 

 

标签:arr,console,log,person,数据类型,笔记,JS,字符串,var
来源: https://www.cnblogs.com/wztblogs/p/16688755.html