ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【学习笔记】JS数据类型

2022-09-13 12:30:46  阅读:280  来源: 互联网

标签:arr console log person 数据类型 笔记 JS 字符串 var


【学习笔记】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:

//创建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:无序不重复的集合

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

image-20220913120215324

 

  • 遍历集合,使用 for... of

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有