web前端基础点 数组、对象、和变量的定义，以及var、let、const的区别

介绍一点web前端基础，本次主要讲述的是js结合es6语法糖的内容，以下的内容都是基于我自己的粗略认识，欢迎评论区开喷。

首先的就是定义变量

1.定义变量目前用的关键字，有var,let,const三个

1.var   这是js里面原生的定义变量的关键字，没有任何限制，定义之后，全局访问，因为作用域的不明确，所以不推荐使用

2.let    我认为是用于定义变量的，js是解释型语言，比较宽松，let定义的容器，赋什么值，他就是什么类型的

let str = 'a' 
console.log(typeof(str))  //控制台打印得到的是string
let obj = {
name:"obj"
}
 
console.log(typeof(obj))  //打印得到的object

3.const  通常认为是用于定义不会再改变的量，但当const用于定义数组或者对象的时候，其实你可以发现，还可以往数组里面添加值，或者删除值，浏览器也不会报错。

为了解释这个，我们要引入堆和栈的概念，但是你要知道，js的使用者是不需要显式地控制内存的，我们可以把变量进行分类，像数组，对象，我们可以称之为高级变量，其他的都是低级变量，我们通过const关键字创建对象的时候，js会隐式地在栈里面开辟空间，每个变量都开辟一块空间，低级变量就是直接在这块空间存值，而高级变量是还会在堆里面开辟一块空间，然后在栈里面开辟的空间存放堆里面开辟的空间的地址。

而const定义的其实是指不能改变这个变量在栈里面的值，所以改变低级变量的值，就会报错。高级变量改变的是在堆里面的值，在栈里面的地址没有变，所以改变也不会报错。

2.数组定义的方法和基础理解

定义高级变量，建议使用const

const arr = [1,2,3]
const arr2 = ['1','2',3]

js比较宽松，不像其他语言，定义什么数组就只能填什么类型的值，js不在乎这些

常用  数组名.lenght  返回数组的长度，这玩意是数组对象的自定义的方法

const arr = [1,2,3]
console.log(arr.lenght)  //控制台打印3

往数组添加值的方法如下，除了定义的时候，就只有通过方法来添加了

 1.  数组名.push(放入的值1，值2，...)   

const arr = [1,2,3]
let i = arr.push(4,5)
console.log(i)    //打印5
console.log(arr)    //打印 [1,2,3,4,5]

push方法会返回改变后数组的长度，可接，可不接，并且push方法，只能从数组末尾添加

2. 数组名.unshift(0,9,10)

const arr = [1,2,3]
let i = arr.unshift(0,9,10)
console.log(i)    //打印得到6
console.log(arr)   //[0,9,10,1,2,3]

unshift也是返回改变后的数组的长度，并且只能从数组前端开始加

从数组中删除元素的方法：

1，数组名.pop()  

const arr = [1,2,3]
let i = arr.pop()
console.log(i)  //打印3
console.log(arr)  //打印[1,2]

一次只能删一个，而且返回删除的元素，所以打印3

2. 数组名.shift()

const arr = [1,2,3]
let i = arr.shift()
console.log(i)  //打印1
console.log(arr)  //打印[2,3]

从开头开始删除，也是一次只能删一个，返回删除的元素

3.数组名,splice(数组下标，数字)

const arr = [1,2,3,4,5]
let i = arr.splice(1,1)    //找到下标为1的，从他开始数，删除第一个
console.log(i)  //打印2
console.log(arr)  //打印[1,3,4,5]

如果不写后面的数字的话，就是默认删除下标后面的所有的

3. 对象的定义

const obj1 = {
name:'言志志',
age:19,
home:'湖南'
}

// obj2和obj1完全等价，因为js在处理对象的时候，会自动把name变成字符串'name'，其他也同理
const obj2 = {
"name":'言志志',
"age":19,
"home":'湖南'
}

// obj3中，name和'name'完全等价，后者覆盖前者
const obj3 = {
name:'言志志',
"name":'Yzz',
age:19,
home:'湖南'
}

// obj4 中sce1定义函数是标准格式，sce2是语法糖
const obj4 = {
name:'言志志',
"name":'Yzz',
age:19,
home:'湖南',
sce1:function(){
    consolo.log('这是内部函数sce1')
}，
sce2(){
consolo.log('这是内部函数sec2 但和1完全等价')
}
}

对象的属性的添加，就是直接  对象名.属性 = “值”  如果有这个属性，那就是重新赋值，如果没有，那就是添加新属性

调用对象的属性和函数

let name1 = obj.name
let name2 = obj['name']
// 上面两个完全等价

obj.sce1()  //调用函数

数组的遍历一般是用for循环来，而对象的遍历一般是用变式 for in 来遍历

for(key in obj){
console.log(obj[key])     //这是关键
}

原因可看上面，因为使用for in 遍历时，会让key变成字符形式，然后还有let name2 = obj['name']，所以可以直接用。

对象一般结合数组使用，变成数组对象的形式

const arr = [
{name:'1号'，age:18},
{name:'2号'，age:20},
{name:'3号'，age:19},
]