Js语法学习实战 -数据类型
Js语法学习实战 -数据类型
- 1. undefined
- 2. null
- 3. Boolean
- 4. Number
- 5. String
-
- 5.1 常用方法
- 5.2 字符串迭代遍历方法
- 5.3 字符串替换
- 6. Symbol类型
- 7. Object
-
- 7.1 基本使用
- 7.2 方法
- 7.3 对象遍历
- 7.4 复制对象方法
- 8. 数组 - Array
-
- 8.1 数组的常用方法
- 8.2 数组遍历
- 9. Function
- 10. Map
-
- 10.1 基本操作
- 10.2 JavaScript Object 对比 Map
W3CSchool - JavaScript
JS语法学习实战系列合集
javascript包括九种数据类型：1、Undefined；2、Null；3、Boolean；4、Number；5、String；6、Symbol类型；7、Object；8、Array；9、Function。其中，Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。
1. undefined
Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。
回到目录
2. null
Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。
null和undefined的区别:
1.null:表示值为空，指定和清空一个变量的时候可以使用 age = null
2.undefined:表示从未被定义过，当声明一个变量且未初始化时，该变量的默认值是undefined
回到目录
3. Boolean
即布尔类型，该类型只有两个值：true、false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。
- Boolean函数：
- 判断为假 - false：0、空字符串、undefined、NaN、null
当Boolean(表达式)为false时，if(表达式)也为false:
- 判断为真 - true：除上述外
- 布尔值操作：
- 定义示例：
var flag = true; - 赋值示例：
flag = false;
回到目录
4. Number
该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。
回到目录
5. String
String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。
基本定义：
var s1 = "字符串";
var s2 = '字符串';
5.1 常用方法
var l1 = “efghij”;
| 方法 | 功能 | 示例 |
|---|---|---|
| .length | 字符串的长度 | l1.length |
| charAt(index) | 访问字符串中特点字符 | l1.charAt(1) 等价于 l1[1] -> f |
| charCodeAt(index) | 得到字符编码 | l1.charCodeAt(1) -> 101 |
| concat(str) | 用于将一个或多个字符串拼接起来，返回拼接后的新字符串 | l1.concat(“der”) 等价于 l1+“der” -> efghijder |
| slice(s,e) | 截取字符串（s子字符串开始位置,e子字符串结束位置） | l1.slice(1,5) |
| substring(s,e) | 截取字符串（s子字符串开始位置,e子字符串结束位置） | l1.substring(1,5) |
| indexOf(substr) | 从字符串的开头向后搜索子字符串，返回第一个匹配子字符串的位置，若没有找到，则返回-1 | l1.indexOf(“krd”) -> -1 |
| lastIndexOf(substr,index) | 从字符串的末尾向前搜索子字符串，返回第一个匹配子字符串的位置，若没有找到，则返回-1 | l1.indexOf(“e”) -> 0 |
| trim() | 删除前置及后缀的所有空格 | l1.trim() |
| includes() | 判断一个字符串是否包含在另一个字符串中，返回 true 或 false | l1.includes(“ef”)->true |
| startsWith() | 判断当前字符串是否以另外一个给定的子字符串开头,返回 true 或 false | l1.startsWith(“fs”) ->false |
| toUpperCase() | 所有字符转大写 | l1.toUpperCase() |
| toLowerCase() | 所有字符转小写 | l1.toLowerCase() |
| match(exe) | 匹配，接收一个正则表达式或者RegExp对象，结果会返回一个数组 | bfg |
| search(exe) | 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回第一个匹配项的索引，若没有匹配,返回-1。 | l1.search(“df”) |
| replace(s1,s2) | 替换子字符串的方法 | l1.replace(“gh”,“fe”) |
| split(s1,index) | 指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中 | l1.split(‘,’, 2) .split(‘,’) |
| localeCompare(s1) | 具体返回的正数和负数未必是1和-1，需看实现 | l1.localeCompare(‘yellow’) |
| fromCharCode() | 接收一个或多个字符编码，然后将它们转换成一个字符串 | var s = String.fromCharCode(104,101,108,108,111) |
| startsWith() | 如果字符串以指定值开头(区分大小写)，则返回true，否则 false | “hello world”.startsWith(“Hello”) // 返回 false |
| endsWith() | 如果字符串以指定值结尾，则返回true，否则false | text.endsWith(“Gates”) // 返回 true |
| 回到目录 |
5.2 字符串迭代遍历方法
var str = ‘hello’
（1）循环遍历
for (let i = 0; i < str.length; i++) {
console.log(str[i]) // 字符串每项的值
}
（2）of 遍历
for (const n of str) {
console.log(n) // 字符串每项的值
}
（3）in遍历
for (const i in str) {
console.log(i) // 字符串每项的索引值（string类型）
}
5.3 字符串替换
js中字符串替换主要使用 str.replace() 方法：
- 只替换第一个查找到的字符：str.replace(“需要替换的字符串”，“新字符串”)
- 全局替换查找到的字符：str.replace(/需要替换的字符串/g，“新字符串”)
>var s = "one three five ";
>console.log("首个替换："+s.replace("e", "1"));
首个替换：on1 three five
>console.log("替换全部："+s.replace(/e/g,"1"));
替换全部：on1 thr11 fiv1
回到目录
6. Symbol类型
符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是唯一的并且是不可修改的。Symbol 函数前不能使用 new 命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述
回到目录
7. Object
Object数据类型，称为对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名（包含空字符串在内的任意字符串）的属性。
7.1 基本使用
- 自定义对象方法： - 对象创建
（1）let a = new Object;
（2）let b = {};或let s1 = {'usernane':'xie', 'age':18} - 自定义对象的赋值：
对象名.属性名 = 属性值
（1）属性为实际的值
（2）属性为其他对象 ：a.info = s1;
（3）属性为函数： //方法实际上是以属性值的形式存储的函数定义。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
含有相同的键的赋值，新的赋值会替换原来的值
- 自定义对象取值：
对象名.属性名或对象名["属性名"]
>let a = new Object;
>let b = {};
>let s1 = { 'usernane': 'xie', 'age': 18 }
>a.sex = "女";
>b.sex = "女";
>b.sex = "男";
>s1.sex = "女";
>console.log("a:" + a);
a:[object Object]
>console.log("a.sex:"+a.sex);
a.sex:女
>console.log("b:"+b);
b:[object Object]
>console.log("b.sex:" + b.sex);
b.sex:男
>console.log("s1:" +s1);
s1:[object Object]
>console.log("s1.usernane:" + s1.usernane);
s1.usernane:xie
>console.log("s1.sex:" + s1.sex);
s1.sex:女
- 访问对象方法:
objectName.methodName()
name = person.fullName();
如果不使用 () 访问 fullName 方法，则将返回函数定义：
实例
name = person.fullName;
objectName.methodName()
7.2 方法
var a = {'user':12213,'name':'张三'}
a.sex = '男'
a // {user: 12213, name: '张三', sex: '男'}
- 获取对象所有的key键值：
Object.keys(obj)
var c = Object.keys(a)
// ['user', 'name', 'sex']
- 获取对象所有的value值：
Object.values(obj)
var v = Object.values(a)
//(3) [12213, '张三', '男']
- 分割对象 - 获取对象所有的键值对：
Object.entries(obj)
keys\values\entries 遍历可枚举的属性，只包含对象本身可枚举属性，不包含原型链可枚举属性
- 对象相等判断：
Object.is(obj1boj2)
它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
5.指示对象自身属性中是否具有指定的属性：obj.hasOwnProperty(属性名称)
方法会返回一个布尔值
let o = {a: 1 }
o.hasOwnProperty('a') //true
o.hasOwnProperty('b') //false 对象自身没有属性b
o.hasOwnProperty('toString'); //false 不能检测对象原型链上的属性
如何遍历一个对象的所有自身属性，例子：
var buz = {
fog: 'stack'
};
for (var name in buz) {
if (buz.hasOwnProperty(name)) {
console.log("this is fog (" + name + ") for sure. Value: " + buz[name]);
}
else {
console.log(name); // toString or something else
}
}
7.3 对象遍历
for (var key in s1) {
let v = s1[key];
console.log(key + "：" + v);
}
输出结果：
7.4 复制对象方法
（1）遍历每个元素复制：
var obj1 = {};
for (var i in obj) { //遍历obj对象，把它的所有成员赋值给对象obj1
obj1[i] = obj[i];
}
（2）直接赋值：直接用=的方式把一个对象赋值给另一个对象，JavaScript 中对象的赋值是默认引用赋值的（两个对象指向相同的内存地址），会导致修改新对象时，原对象也发生变化
var obj1 = {'name': '1111'};
var obj2 = obj1;
obj2.name = '2222';
console.log(obj1.name); //'2222'
（3）使用 Object.assign() 方法复制对象：Object.assign()只是让对象里第一层的数据没有了关联性，但是对象内的对象则跟被复制的对象有着关联性的。
// 使用 Object.assign() 方法复制对象
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
- Object.assign(obj) --浅拷贝
- Object.assign({},obj) --只有第一层深拷贝 （ES6中扩展运算符…也是如此
回到目录
8. 数组 - Array
使用单独的变量名来储存一系列值，相当于python中的列表。JavaScript 数组用方括号书写，数组的项目由逗号分隔。
基本定义及使用：
>var l1 = [1,2,3,4,5]
>console.log(l1[1])
2
8.1 数组的常用方法
| 方法 | 功能 | 示例 |
|---|---|---|
| .length | 数组的长度 | l1.length |
| .push | 尾部追加 | l2.push(1000) |
| .pop | 获取尾部元素 | l2.pop() |
| .unshift | 头部插入 | l2.unshift(200) |
| .shift（） | 移除头部元素 | l2.shift() |
| .slice() | 切片操作，顾头不顾尾 | l1.slice(1,3) |
| .reverse() | 反转 | l1.reverse() |
| .join() | 将数组元素连接成字符串 | l1.join() |
| .concat() | 连接数组 | l1.concat(l2) |
| .sort() | 排序 | l1.sort() |
| .forEach() | 将数组的每个元素传递给回调函数 | |
| .splice() | 删除元素，并向数组添加新元素 | l2.splice(0,1,1000) |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 |
回到目录
8.2 数组遍历
arr 是要遍历的数组
（1）循环遍历
for(var i = 0; i < arr.length; i++){
arr[i] 是遍历的数组的元素，i 是数组的元素对应的下标(索引号)
}
（2）for of 方法
for(var item of arr) {
item 遍历的数组的元素
}
（3）foreach遍历
arr.forEach(function(item,index,self){
item 遍历出的每一个元素 index 元素对应的下标 self 数组本身
无返回值
})
# 示例
var arr = [1,2,3];
arr.forEach(function(item,index,self){
console.log(index+":"+item);
});
输出：
（4）map 映射：
arr.map(function(item,index,self){
item 遍历出的每一个元素 index 元素对应的下标 self 数组本身
有返回值 ： 数组元素个数不变，但是按照一定的条件转换
})
（5）、filter 过滤
arr.filter(function(item,index,self){
item 遍历出的每一个元素 index 元素对应的下标 self 数组本身
有返回值：返回满足某个条件的元素构成的数组
})
（6）reduce 高阶函数（迭代（累加器））
arr.reduce(function(total,item,index,self){
total 初始值或计算结束后的返回值
item 遍历出的每一个元素 index 元素对应的下标 self 数组本身
有返回值 ： 返回计算结束后的total值
},初始值);
（7）every
arr.every(function(item,index,self){
item 遍历出的每一个元素 index 元素对应的下标 self 数组本身
有返回值 : 检测数组里的每一个值是否满足指定条件:
* 如果有一个值不满足，返回false，剩余的值不再进行检测
* 如果所有的值都满足，则返回true
});
（8）some
arr.some(function(item,index,self){
item 遍历出的每一个元素 index 元素对应的下标 self 数组本身
有返回值 ： 检测数组里的每一个值是否满足指定条件
* 如果有一个值满足，返回true，剩余的值不再进行检测
* 如果所有的值都不满足，则返回false
});
回到目录
9. Function
ECMAScript中的函数是对象，与其他引用类型一样具有属性和方法。因此，函数名实际是一个指向函数对象的指针。
- 语法结构
function func(形参){
函数体代码
return 返回值
}
- 参数：参数个数不需要一一对应 如果需要限制参数个数需要使用关键字arguments
function func(a,b){
if (arguments===2){
console.log(a,b)
}else{
console.log('参数没有意义对应')
}
}
- 匿名函数
function(a,b) {
return a-b;
}
- 箭头函数
var f = v => v;
等同于
var function f(v){
return v;
}
示例：
var f = () => 5;
等同于
var f=function(){
return 5;
}
var sum = (num1,num2) => num1 + num2;
等同于
var sum = function(num1, num2){
return num1+num2;
}
回到目录
10. Map
10.1 基本操作
- 特性：
（1）Map 保存键值对，其中键可以是任何数据类型。
（2）Map 会记住键的原始插入顺序。
（3）Map 提供表示映射大小的属性。 - map创建
- 通过将数组传递给 new Map() 构造函数来创建 Map：
var fruits = new Map([
["apples", 500],
["bananas", 300]
]);
- 使用 set() 方法将元素添加到 Map 中:
var fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
- Map 方法
| 方法 | 描述 | 示例 |
|---|---|---|
| map对象.get(“属性值”) | 获取属性值 | v=fruits.get(“apples”);//500 |
| map对象.clear() | 清空map中所有元素 | fruits.clear() // |
| map对象.delete(“属性值”) | 删除某个键指定的元素 | fruits.delete(“apples”);//true |
| map对象.has(“属性值”) | 如果键存在于Map中,返回 true。 | fruits.has(“apples”);//false |
| map对象.size() | 返回 Map 元素的数量 | const a = fruits.size();//1 |
| map对象 instanceof Map | 返回true | fruits instanceof Map //true |
| typeof map对象 | 返回object | typeof fruits //object |
- 遍历
-
迭代器遍历
方法 | 描述 | 示例
------ | -----| -----
map对象.entries() |返回迭代器对象，其中包含 Map 中的 [key, value] 键值对|const a = fruits.entries();
map对象.keys() |返回迭代器对象，其中包含 Map 中的键|const a = fruits.keys();
map对象.values() |返回迭代器对象，其中包含 Map 中的值|const a = fruits.values(); -
forEach() 方法为 Map 中的每个键/值对调用回调：
// 列出所有条目
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
10.2 JavaScript Object 对比 Map
JavaScript 对象与映射之间的差异：
回到目录