Js语法学习实战 -数据类型

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值，只是标识符。

1. Boolean函数：

• 判断为假 - false：0、空字符串、undefined、NaN、null
  
  当Boolean(表达式)为false时，if(表达式)也为false:
  
• 判断为真 - true：除上述外

2. 布尔值操作：

• 定义示例：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. 自定义对象方法： - 对象创建
   （1）let a = new Object;
   （2）let b = {};或 let s1 = {'usernane':'xie', 'age':18}
2. 自定义对象的赋值：对象名.属性名 = 属性值
   （1）属性为实际的值
   （2）属性为其他对象 ：a.info = s1;
   （3）属性为函数： //方法实际上是以属性值的形式存储的函数定义。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

含有相同的键的赋值，新的赋值会替换原来的值

3. 自定义对象取值：对象名.属性名 或 对象名["属性名"]

>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:女

4. 访问对象方法: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: '男'}

1. 获取对象所有的key键值：Object.keys(obj)

var c = Object.keys(a)
// ['user', 'name', 'sex']

2. 获取对象所有的value值：Object.values(obj)

var v = Object.values(a)
//(3) [12213, '张三', '男']

3. 分割对象 - 获取对象所有的键值对：Object.entries(obj)
   

keys\values\entries 遍历可枚举的属性，只包含对象本身可枚举属性，不包含原型链可枚举属性

4. 对象相等判断：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中的函数是对象，与其他引用类型一样具有属性和方法。因此，函数名实际是一个指向函数对象的指针。

1. 语法结构

function func(形参){
    函数体代码
    return 返回值
}

2. 参数：参数个数不需要一一对应 如果需要限制参数个数需要使用关键字arguments

function func(a,b){
    if (arguments===2){
        console.log(a,b)
    }else{
        console.log('参数没有意义对应')
    }
}

3. 匿名函数

function(a,b) {
    return a-b;
}

4. 箭头函数

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. 特性：
   （1）Map 保存键值对，其中键可以是任何数据类型。
   （2）Map 会记住键的原始插入顺序。
   （3）Map 提供表示映射大小的属性。
2. 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);

4. 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

5. 遍历

• 迭代器遍历
  方法 | 描述 | 示例
  ------ | -----| -----
  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 对象与映射之间的差异：

回到目录