数据类型

JS中数据类型分为两类：基本数据类型、引用数据类型

基本数据类型
- 字符串 string
- 数字 number
- 布尔值 boolean
- 未定义 undefined
- 空 null
- 唯一值 symbol ES6新增（了解）
- 超大数 bigInt ES10新增（了解）
引用数据类型
- 对象 object：原生对象 object、数组 Array、函数 Function 等等

基本数据类型

字符串 string

所有用隐含包裹的都是字符串类型

var str = 'hello'
var str = '123';
var str = "";

转义符：

var str = '我叫"提莫"';
var str = "我叫\"提莫\"";
var str = "我叫\\提莫\\";
var str = "我叫\\\\提莫\\\\";

换行符：

var str = "我叫\n提莫"

字符串拼接： +

var str1 = "hello";
var str2 = "world"
console.log(str1 + ' ' + str2)

注意：如果一个数字和字符串相加，会得到另一个字符串

数字类型 number

var num = 10
var num = 10.1 //浮点数
var num = 1.23e5  //  eX  10的X次方
console.log(0.3-0.2 == 0.2-0.1)  //false
var num = -12345e1000  //-Infinity无穷小   Infinity无穷大

布尔值 boolean

只有两个值：true、false

var boo = true
var boo = false

未定义 undefined

只有一个值 undefined，声明了一个变量，没有赋值会得到一个undefined

var str;
var str = undefined;

空 null

只有一个值，就是null，一般表示为空

var str = null;

console.log(null == undefined) //true
console.log(null === undefined) //false

typeof 判读数据类型，智能检测基本数据类型

typeof "123"  //string
typeof 123    //number
typeof true   //number
typeof undefined   //undefined
typeof null   //object

引用数据类型

对象

原生对象 { }
数组 [ ]
函数 function（）{ }

var obj = {}
console.log(obj, typeof obj)  //object

var arr = []
console.log(arr, typeof arr) //object

var func = function(){}
console.dir(func, typeof func) //function   prototype——object

数据类型的转换

强制转换

通过一些方法（函数），强制让数据类型变化

转字符串

toString（）
String（）

var str =  num.toString()
// console.log(window)
// window.String()
var str = String(num)

console.log(str ,typeof str)

区别：

toString（）这个方法不能转换null和undefined

String（）可以转换任意类型为字符串

转数字类型

Number（）转为数字类型
parseInt（）取整，并且转为数字类型
parseFloat（）保留浮点数，并且转为数字类型

// var str = '10.1'      10.1    10    10.1
// var str = '10.1a'     NaN    10    10.1
var str = 'a10.1'	//   NaN     NaN    NaN

console.log(Number(str)); 
console.log(parseInt(str));
console.log(parseFloat(str));

NaN：not a number

转布尔值

Boolean（）

var num = 1   //true
var num = 0   //false

var str = 'abc'  //true
var str = ''  //false

var a = undefined  //false
var a = null  //false
var a = -0  //false
var a = false
var a = true

var boo = Boolean(num)
var boo = Boolean(str)
var boo = Boolean(a)

除了 0、-0、“”、undefined、false、null、NaN，这7种转布尔值都是 false；除了这7种以外转成布尔值都是 true。

隐式转换

通过运算符和其他的方式，隐式转换

转字符串

// var num = 10
// var boo = true
// boo = boo + ""
var boo = null
boo = boo + ""

// console.log(typeof (num + "") ) //string
// console.log(typeof boo, boo) //string
console.log(typeof boo, boo) //string

任何类型只要通过 “ + ”号，拼接了一个空的字符串，那都会转成字符串类型

转数字

// var str = '10a'
// var str = undefined

console.log(str - 0)
console.log(str * 1)
console.log(str / 1)
console.log( ~~str )  //具体转为多少不知道
console.log( +str )
console.log( parseInt(str) )

转布尔值

取反：！，任意类型要取反时，都会转成布尔值再去取反

var num = 0 
!num 	//  true
!!num   // false

var str = ""
!str  	//true
!!str 	//false

数组

概念

数组，是一些有序数据的集合，即数组能保存多个数据，并且保持一定的顺序

定义数组

构造函数法

var arr = new Array(数据1,数据2,数据3,...)

字面量法

var arr = [数据1,数据2,数据3,...]

数组的特点：
- 数组可以存储任意数据类型的数据
- 数组可以通过一些手段名，对数组进行：增、删、改、查
数组的下标：
- 表示存放数据的位置，通过数字来表示，0代表第一条数据，第三条数据下标就是2
- 最后一条数据，就是数组的长度 length - 1
数组的长度：length
- 数据有多少，length 就是多少

数据的处理

查询数据

var arr = [1,'2',true,undefined,null,NaN,[1,2,3]]

console.log(arr.length)  //7
console.log(arr[1])   // '2'
console.log(arr[arr.length-1][0])  // [1,2,3]--->1

查询数组中没有的数据时，会返回 undefined

新增数据

var arr = [1,'2',true,undefined,null,NaN,[1,2,3]]
arr[arr.length] = 'hello'
console.log(arr)  //[1,'2',true,undefined,null,NaN,[1,2,3],'hello']

修改数据

var arr = [1,'2',true,undefined,null,NaN,[1,2,3]]
arr[0] = 9
arr[arr.length-1] = 'ABC'
console.log(arr[0])  //9
console.log(arr[arr.length-1])  //'ABC'

删除数据

var arr = [1,'2',true,undefined,null,NaN,[1,2,3]]
arr.length = arr.length - 1
arr.length--
--arr.length

delete arr[0]  //删除对应下表的数据
console.log(arr[0]) //undefined
console.log(arr) //[空白,'2',true,undefined]

遍历数组

通过循环，依次查询数组里的每一条数据

var arr = [3,4,7,9,0,1,2,5,6,8]

for(var i = 0; i < arr.length;i++){
    //console.log(arr[i]) 
    //的到为7的数字
    if(arr[i] == 7){
        console.log(i , arr[i]);
        break;
    }
}

二维数组

一层数组下的数据又是一层数组

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

遍历二维数组

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

for(var i = 0; i < arr.length ; i++){
    // console.log(arr[i])
    for(var j = 0; j < arr[i].length; j++){
        console.log(arr[i][j])
    }
}

数组的 API

api：application programming interface 用户编程接口

每一个 API 就是一个函数（方法），是由程序内部提供的，每一个 API 就对应了一个功能：alert（）、parseInt（）、toString（）等等

增删改查API

push（）：向数组末尾添加新元素，array.push( item1, item2 )，会改变原数组，返回数组长度
unshift（）：向数组开头添加新元素，array.unshift( item1, item2 )，会改变原数组，返回数组长度
pop（）：删除数组的最后一个元素，array.pop( )，会改变原数组，返回删除的元素
shift（）：删除数组的第一个元素，array.shift( )，会改变原数组，返回删除的元素
splice（）：
- 只有一个参数时会将指定下标元素和之后的元素删除
- 有两个参数时可以删除指定位置的元素
- 多个参数时可以修改任意位置的元素
- array.splice（开始下标（包含），删除元素个数，新增元素1，新增元素2，.....，删除元素n）
- 返回删除的元素

查询API

查询API：查询数组中，是否存在之歌数据，还有查询数据的位置

indexOf（）：查询元素在数组中第一次出现的下标，array.indexOf（item），不会改变原数组，如果找到返回下标，未找到则返回 - 1
lastIndexOf（）：查询元素在数组中最后一次出现的下标，array.lastIndexOf（item），不改变原数组，如果找到返回下标，未找到则返回 - 1
includes（）：查询元素在数组中是否存在，array.includes（item），不改变原数组，返回 true 和 false

var arr = ['提莫','亚索','德玛西亚','贾克斯','男枪','德玛西亚']

var res1 = arr.indexOf('德玛西亚')      // 2
var res = arr.indexOf('皇子')          // -1
var res2 = arr.lastIndexOf('德玛西亚')  // 5

var res =  arr.includes('皇子') //false

排序API

reverse（）：反转数组中元素的顺序，array.reverse（），会改变原数组，返回反转后的数组
sort（）：
- 适用于全小写或全大写的字母排序
- a - b 从小到大排序
- b - a 从大到小排序
- array.sort( )
- array.sort( function( a , b ){ return a - b})

遍历API

for 循环：for ( let i = 0 ; i < array.length; i ++){console.log(arr[i])}
for of ：其中 item 是数组中的每一个元素，arr 是要遍历的数组名，for ( let item of array){ console.log( item)}，不会改变原数组
forEach（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标，array.forEach( function (item, index){console(item,index)})，不改变原数组，返回值为 undefined
map（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标。返回一个长度一致的新数组，array.map(function (item, index) {console.log(item，index); return item})，不改变原数组，返回一个新数组
filter（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标。返回一个筛选过后的新数组，array.filter(function (item, index) {console.log(item，index); return 筛选条件})，不改变原数组，返回一个新数组
every（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标。根据判断条件返回真假，一假则假，array.every(function (item, index) {console.log(item，index); return 判断条件})，不改变原数组，返回值为布尔值
some（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标。根据判断条件返回真假，一真则真，array.some(function (item, index) {console.log(item，index); return 判断条件})，不改变原数组，返回值为布尔值
find（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标。根据判断条件返回第一个满足条件的item，array.find(function(item, index){console.log(item，index); return 判断条件}})，不改变原数组，返回第一个满足条件的 item，没有符合的则返回 undefined
reduce（）：其中 item 是数组中的每一个元素名，index 是对应元素的下标。total为初始值或先前返回的值，array.reduce(function(total, item, index), 初始值)，不改变原数组，返回遍历完最后一次的返回结果

数组的拼接和截取

concat（）：方法用于拼接两个或多个数组，array1.concat(array2, array3, ..., arrayX)，不改变原数组，返回合并后的新数组
slice（）：根据对应下标（可以是负数），截取数组中的某一个部分，array.slice(开始下标（包含）, 结束下标（不包含）)，不改变原数组，返回截取后的新数组

//1. 拼接数组
var arr1 = [1,2,3,4];
var arr2 = [5,6,7,8];
var arr3 = [9,0];

var newArr = arr1.concat(arr2,arr3,);

//扩展运算符    浅拷贝   ES6新增
var newArr = [...arr1,...arr2,...arr3];

//2.数组的截取
var arr = [1,2,3,4,5,6,7,8,9]

var newArr = arr.slice(0,3)
var newArr2 = arr.slice(3,arr.length)
console.log(newArr)
console.log(newArr2)

数组转字符串

join（）：将数组里的元素按照指定字符拼接成一个字符串，array.join(分隔符（默认逗号）)，不改变原数组，返回字符串

//3.数组转字符串
// var str = arr.toString()  //1,2,3,4,5
// var str = String(arr) //1,2,3,4,5
var str = arr.join('') //12345

console.log(str)

判断是否是数组

Array.isArray（）：

var arr = [1,2,3,4,5,6,7,8,9]
//var arr = 1234

// typeof arr //object
var res = Array.isArray(arr) 
console.log(res) //true

函数

作用：

当代码量庞大时，我们可以针对其中一些核心逻辑，提取出来封装成函数。
当我们在使用不断重复的代码时，通过函数将这些代码包装起来，后续只需调用即可

创建函数

函数声明式

function 函数名(){
    
}

函数名()

函数表达式

var 变量 = function(){
    
}

变量()

区别：

函数声明式有函数声明提升，在代码的最顶部，声明了这个函数，这个函数可以在当前作用域的任意位置调用
函数表达式：把一个匿名函数交给了一个变量，会将这个变量提升到代码的最顶部，并且赋给这个变量为 undefined，这种情况在函数表达式之前去调用函数时就会报错，not a function 不是一个函数

调用函数：可以在后续调用多次

函数的参数

对数据进行传递，外部的数据可以传递给函数内部

作用：当创建一个函数后，希望里面的某些数据是动态变化的。这个时候就可以利用函数的参数来解决。

语法：

function 函数名(形参1,形参1,形参1,...){
    console.log(形参1,形参1,形参1)
}
函数名(实参1,实参2,实参3,...)

注意：

从语法上来讲，函数的参数数量可以不一致
函数的参数可以是任意类型的数据

函数的返回值

在函数外部使用函数内部的数据时，可以通过 return 关键字将数据返回出来

var s = sum(2,5)

function sum(num1,num2){
    var total = num1 + num2
    return total
}

console.log(s)

注意：

return 可以打断函数里的代码继续向下执行
一个函数如果没有 return 真正的数据出去，外部得到的返回值是一个 undefined
可以返回多个值 return { sun ， total }

argunments

function func(){
	console.log(arguments)
}

arguments 是一个类数组对象，传进来的所有参数都会被这个 arguments 所接收

作用域：变量的活动范围

当一个函数创建成功时，该函数就会把函数的内部和外部分成两个区域，就是分成了两个作用域：

函数外部：全局作用域，变量在任意位置都可以使用，包括另一个局部作用域里

函数内部：局部作用域（函数作用域），内部的变量只能在这个作用域内部使用

箭头函数：ES6 的新特性，=> 取代了 function 关键字

箭头函数的声明：函数表达式的方式来声明

var func = (str) => {
    console.log('hello ' + str)
}
var func = str => {
    console.log('hello ' + str)
}
var func = str => console.log('hello ' + str)
var func = str => 'hello ' + str  //省略掉了return
func()  //'hello ' + str

this：代表函数的执行环境

var obj = {
    func1:function(){
        console.log(this)
    },
    func2:()=>{
        console.log(this)
    }
}

obj.func1()  //obj这个对象
obj.func2()  //obj的作用域——>全局对象

对象 object

概念

数组：存储简单数据，只能通过遍历和下表查找，再复杂但数据操作就会比较麻烦。[ ]

对象：可以存储相对复杂的数据，{ }

对象中每一条数据都有自己的名字，称为键，数据本身称为值，在对象中保存的数据都是以键值对的方式来保存的，对象中的数据是无序的

创建对象

字面量法（常用）

//字面量法
var student = {
    'name': 'kunkun',
    'age': 18,
    gender: 'man'
}

console.log(student)

构造函数法

//构造函数法
var obj  = new Object()
obj.name = 'lisi'

console.log(obj)

对象中的数据

var stu = {
    键1:值1，
    键2:值2，
    键3:值3，
    ...
}

注意：

对象的键是一个字符串类型，但是在 JS 对象中可以省去这个引号
JS 对象的值可以是任意类型的数据类型

var student = {
    'name': 'kunkun',
    'age': 18,
    gender: 'man',
    hobby:['唱','跳','rap','ball'],
    isTrue:true,
}

操作对象

数据的增删改查

var student = {
    'name': 'kunkun',
    'age': 18,
    gender: 'man',
    hobby:['唱','跳','rap','ball'],
    isTrue:true,
}
//点运算

//访问对象数据
console.log(student.name)
// console.log(student.age)

//修改对象数据
student.age = 25
// console.log(student)

//新增
student.id = 1
// console.log(student)

//删除
delete student.isTrue
console.log(student)

通过 [ ] 去访问对象

基础语法：

student['键名']

通常来说，如果访问的键名是一个变量来保存的，这时候才使用 [ ]

var str = 'name'
student[str]

//通过变量去设置键名
var str2 = 'sex'

var student2 = {
    'name': 'kunkun',
    'age': 18,
    [str2]: 'man',
    hobby:['唱','跳','rap','ball'],
    isTrue:true,
}

console.log(student2)

对象的属性和方法

因为对象中可以保存任意数据类型，所以也可以是一个函数，我们就可以根据数据是不是函数来决定数据的分类：

对象的属性
对象的方法

var student = {
    'name': 'kunkun',
    'age': 18,
    gender: 'man',
    hobby:['唱','跳','rap','ball'],
    isTrue:true,
    study:function(){
        console.log('来凡云上网课')
    },
    sleep:function(str){
        console.log( str + '睡')
    }
}

student.study()
student.sleep('上班')

遍历对象（了解）

for in

for(var key in student){
    // console.log(key)
    console.log(student[key])
}

Object.key（）

Object.keys(student).forEach(function(key){
     console.log(key,student[key])
})

对象的简写 ES6 提供的方法

对象中属性的简写

var stuName = 'kunkun'
var age = 18
var gender = 'man'

var student = {
    stuName,
    age,
    gender,
    hobby:['唱','跳','rap','ball'],
    isTrue:true,
}

console.log(student)

对象中方法的简写

var student = {
    study(){
        console.log('来凡云上网课')
    },
    sleep(str){
        console.log( str + '睡')
    }
}
student.study()
student.sleep('放学')

对象中的 this （了解）

this 是存在于函数中的动态指针，指代当前调用的对象，this 的目的是在函数内部指代这个函数的运行环境

在自己创建的对象中的方法，如果是使用了 this，this 就指向这个创建的对象
在全局作用域中创建的函数，这里的 this 就指向window

特殊：箭头函数没有 this，如果非得在箭头函数中使用 this，这个 this 指向所在父级的作用域上，就指向 window

对象的分类

JS 中万物皆对象

分类：

宿主对象 host object：

js 的运行环境决定了 js 的宿主对象是谁。浏览器提供： window 对象

原生对象：

自定义对象：js 运行的时候创建的对象——自己编写的
内部对象：由 js 语言规范（ECMA）提供的对象，不是宿主对象，也不是自己写的
- 本地对象 native object：通过 new 创建的对象：Array、Object、Date、RegExp 等等
- 内置对象 build-in object：不需要 new：Math、JSON、Global 等等

Array：数组对象、通过数组对象上的属性和方法

数组属性：

length：设置或返回数组元素的个数

数组方法：

concat（）：连接两个或更多的数组，并返回结果
every（）：检测数值元素的每个元素是否都符合条件
filter（）：检测数值元素，并返回符合条件所有元素的数组
find（）：返回符合传入测试（函数）条件的数组元素
findIndex（）：返回符合传入测试（函数）条件的数组元素索引
forEach（）：数组每个元素都执行一次回调函数
includes（）：判断一个数组是否包含一个指定的值
indexOf（）：搜索数组中的元素，并返回它所在的位置
isArray（）：判断对象是否为数组
join（）：把数组的所有元素放入一个字符串
keys（）：返回数组的可迭代对象，包含原始数组的键（key）
map（）：通过指定函数处理数组的每个元素，并返回处理后的数组
pop（）：删除数组的最后一个元素并返回删除的元素
push（）：向数组的末尾添加一个或更多元素，闭关返回新的长度
reduce（）：将数组元素计算为一个值（从左到右）
reverse（）：反转数组的元素顺序
shift（）：删除并返回数组的第一个元素
slice（）：选取数组的一部分，并返回一个新数组
some（）：检测数组元素中是否有元素符合指定条件
sort（）：对数组的元素进行排序
slice（）：从数组中添加或删除元素
toString（）：把数组转换为字符串，并返回结果
unshift（）：向数组的开头添加一个或更多元素，并返回新的长度

String：字符串对象

Math：数学对象

Date：日期对象

RegExp：正则对象

Share

[前端复习] JavaScript 基础 Part Two