Js语法学习实战 -数据类型
- 1. undefined
- 2. null
- 3. Boolean
- 4. Number
- 5. String
- 5.1 常用方法
- 5.2 字符串迭代遍历方法
- 6. Symbol类型
- 7. Object
- 7.1 基本使用
- 7.2 对象遍历
- 7.3 复制对象方法
- 8. 数组 - Array
- 8.1 数组的常用方法
- 8.2 数组遍历
- 9. Function
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) |
回到目录
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类型）
}
回到目录
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} - 自定义对象的赋值：
对象名.属性名 = 属性值
含有相同的键的赋值，新的赋值会替换原来的值
- 自定义对象取值：
对象名.属性名
>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:女
7.2 对象遍历
for (var key in s1) {
let v = s1[key];
console.log(key + "：" + v);
}
输出结果：
7.3 复制对象方法
（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;
}
回到目录
