程序员JavaScriptPing说前端三剑客

JavaScript之数据类型

2021-01-17  本文已影响0人  Ping开源

二、数据类型

目录:字符串类型详解、数组类型详解、对象类型详解、分支和循环详解、Map和Set集合(ES6新特性)、iterator迭代

1.字符串类型详解

正常字符串使用单引号和双引号来包裹。
1)注意转义字符
①\ ' 单引号
②\ n 换行
③\ t 水平制表
④\ u### Unicode字符 例:\ u42d表示中
⑤\ x## 例:\ x41表示A
······
2)多行字符串编写:用反引号来包裹

var msg =
  `hello
  world
  你好
  世界`

3)模板字符串:用美元符加大括号${ }来包裹

let name = "xiaoming";
let age = 3;
let msg = `你好呀,我叫${name},今年${age}岁。`

4)长度字符串

str.length

5)字符串的可变性
JS中字符串是不可变的。
注:可像数组一样用下标来获取字符串中的元素。

student[0]=1;
console.log(student);

结果仍为student。
6)大小写转换

①转大写

student.toUpperCase()

②转小写

student.toLowerCase()

注:这里是方法,不是属性了。
7)获取下标

student.indexOf('t')

结果为1。
8)截取字符串substring

student.substring(1)//从第2个字符串截取到最后一个字符串

结果为tudent。

student.substring(1,3)//从第2个字符串截取到第3个字符串

结果为tu。
(x,y)截取时包含x,但不包含y,与Java相似。

2.数组类型详解

Array可以包含任意的数据类型。
定义数组

var arr = [1,2,3,4,5,6];

通过下标取值和赋值

arr[0] = 0;

1)长度

arr.length

注:假设给arr.length赋值,数组的长度大小就会发生变化,调用未赋值的元素为undefined,但如果赋值过小,元素就会丢失。
2)indexOf():通过元素获得下标索引

arr.indexOf(2)

结果为1。
3)slice():截取Array的一部分,返回一个新的数组,类似于String中的substring。
4)尾部操作push()、pop()
①push():压入到尾部。
②pop():弹出一个尾部元素。
4)头部操作unshift()、shift()
①unshift():压入到头部。
②shift():弹出一个头部元素。
6)排序sort()

var arr1 = ["B","A","C"],
arr1.sort()

结果为["A","B","C"]。
7)元素反转reverse()

var arr2 = ["A","B","C"];
arr2.reverse()

结果为["C","B","A"]。
8)拼接concat()

arr2.concat([1,2,3])

结果为["C","B","A",1,2,3]。
注意:concat()并没有修改数组,只是会返回一个新的数组。
9)连接符join:打印并拼接数组,使用特定字符串连接。

arr2.join('-')

结果为"C-B-A"。
10)多维数组

arr3 = [[1,2],[3,4],["5","6"]];

3.对象类型详解

这是由若干个键值对组成。
定义对象

var 对象名 = {
  属性名: 属性值,
  属性名: 属性值,
  属性名: 属性值
}

例:定义了一个person对象,它有四个属性。

var person = {
  name:"xiaoming",
  age:3,
  email:2585801995@qq.com,
  score:0
}

注:@符号可能有影响。
JS中,{……}表示一个对象,键值对描述属性xxxx: xxxx,,多个属性之间用逗号隔开,最后一个属性不加逗号!
1)对象属性赋值

person.name = "xiaoming";

2)使用不存在的对象属性:不会报错,返回undefined。
3)动态的删除属性:通过delete删除对象属性。

delete person.name

4)动态的添加:直接给新的属性添加值即可。

person.say = "haha";

5)判断属性值是否在这个对象中 xxx in xxx

'age' in person

结果为true。

'toString' in person//继承

结果为true。
6)判断一个属性是否是自身拥有的 hasOwnProperty

person.hasOwnProperty('age')

结果为true。

person.hasOwnProperty('toString')

结果为false。
JavaScript中的所有的键是字符串,值是任意对象。

person['age']

4.分支和循环详解

1)if判断

if(score>=60) {
  alert("过");
} else if(score<60&&score>0) {
  alert("挂科");
} else {
  alert("重修");
}

2)while循环
注:避免程序死循环。

while(i<100) {
  i=i+1;
  console.log(i);
}
do {
  i=i+1;
  console.log(i);
}while(i<100)

区别:do-while一定会执行一次,while先判断,有可能会不执行。
3)for循环

for(let i=0;i<100;i++) {
  console.log(i);
}

4)forEach(5.1引入的特性)

var arr = [1,2,12,3,23,4];
arr.forEach(function(value,index,arr) {
  console.log(value)
})//通过函数

5)for…in循环
语法

for(var index in arr) { }

for(var num in arr) {
  console.log(arr[num])
}

5.Map和Set集合(ES6的新特性)

1)Map:与Java的Map相似,相当于Python的字典。

var map = new Map([['tom',100],['jack',90],['peter',80]]);
var name1 = map.get('tom');//通过key获得value
map.set('david',60);//新增或修改
map.delete("tom");//删除

2)Set:无序不充分集合
①添加:set.add();
②删除:set.delete();
③是否包含某个元素:set.has();

6.interator迭代

for…in只能用下标来遍历
for…of

var arr = [3,4,5];
for(let x of arr) {
  console.log(x);
}

注:for…in也支持map和set。
百度搜索symbol中的iterator迭代器

上一篇 下一篇

猜你喜欢

热点阅读