Web前端----JavaScript的基础学习的总结

此文章是对JavaScript进行的一些基础的学习大概的的一个总结。

---

前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下JavaScript的语法，用来对JavaScript进行基础的学习，这篇文章是我对js的大概的一个总结，主要细节看我以前的文章，谢谢大家！

---

一、对JS整体学习的一个总结

1.1 定义一个变量

主要就是用var let const，普通定义变量就是let和var，var声明的变量会到window里去，let则不会，const是：定义变量。

代码示例如下：

字符串和数值类型：

加减乘除：

数字 + 字符串 = 字符串 + 字符串

字符串 -*/ 数字 = 数字 -*/ 数字 （隐式转换成数字类型）

字符串加数值类型：

字符串：

1.2 ==和===的区别

==只判断值，===先判断数据类型再去判断值。

1.3 数据类型转换

数字转字符串 String（）

字符串转数字 Number()、parseInt()转换成整形、parseFloat()转浮点型

1.4 ++a和a++

a++: 先赋值 再自增+1

++a: 先自增+1  再赋值

1.5 字符串拼接

变量和字符串一起输出 a + '我真帅'

1.6 NAN

 NaN: 数字 + undefined

1.7 取反

取反 : !

转换成布尔类型 : !!后面跟数据类型的值

布尔类型只有两个值，true和false；

加一个 !代表取反  加两个!! 代表转化布尔类型

let name = '奥特曼'

console.log(!!555);

数字类型(除了0以外) 、 字符串转成布尔类型 true

 undefined 是false

if(0){

console.log(11);

}

1.8 if语句

格式 : if(判断条件){ 执行的内容 }else if(判断条件){ 执行的内容 }else { 执行的内容 }

1.9 && 和 ||

&& :  ture && true 为true 如果有一个是false 就返回 false

|| :  ture || false 为 true 有一个是true就返回 true 都是false 的时候返回false

2.0 数据类型

字符串、数字、布尔、undefined、null 、NaN、对象、函数、数组

2.1 for循环

格式

for (let index = 0; index < 5; index++) {

执行的内容

2.2 函数返回值

作用：提供给外面变量使用

 function fn() { return 1  }

 let res = fn()  1

2.3 数组

[1,3,5,7,9]

2.4 循环数组

let arr = [1,3,5,7,9]

arr.forEach((每一项,索引)=>{})

2.5 type of :

检查数据类型

2.6 Math 内置对象

.Math.floor() 向下取整 Math.ceil() 向上取整 Math.random() 获取随机数 默认0-1

2.7 函数的传参

function fn (形参){} fn(实参)

函数的多个传参

不传参

函数的返回值

2.8 内置函数

alert('1') prompt('输入框') Number() String()

2.9 箭头函数

普通：function fn(){ }   箭头函数：let fn = ()=>{}

3.0 一元运算符

sum += 1  等于 sum = sum + 1   //   sum -= 1  等于 sum = sum - 1

3.1 三元运算符

判断条件?值1:值2  如果符合返回值1 否则 值2

3.2 延时器

setTimeout(()=>{执行的内容},毫秒)

3.3 定时器

setInterval(() => {  执行的内容 }, 毫秒);

延时器 格式： setTimeout(函数,执行的毫秒数)  等毫秒数倒计时结束后 执行这个函数     永远只执行一次！！

定时器 格式： setInterval(函数,执行的毫秒数)  每倒计时执行这个毫秒数 再去执行函数

区别：延时器只执行一次   定时器到一定时间段执行一次

3.4 字符串的截取

let str = '这是一句话'

str.slice(索引(包含当前索引),索引(不包含当前索引))

str.slice(索引(包含当前索引截取后面所有))

str.slice(-x) // 从末尾开始截取后面的

3.5 map方法

let arr = [1,2,3]

arr.map((it,idx)=>{it+2}) 每一项都+2

3.6 创建对象的三种方式

字面量创建对象 let obj = {}

new Object()

function Person() {}     new Person

3.7 数组的方法

push() 往末位添加一个元素  pop() 删除末尾的元素 shift() 删除前面的元素 unshift()往前面添加一个元素  splice(索引,删除个数,添加的内容) 删除、添加

数组

3.8 时间对象

let date = new Date()

let year = date.getFullYear()

3.9 this的指向

默认指向window  箭头函数指向上层作用域的this  对象里的函数 谁调用它它指向谁

4.0 数组转字符串

join('连接符')

4.1 字符串转数组

split('')

4.2 数组的过滤

let arr = [1,2,3,99,66]

let arr1 = arr.filter((item)=>{ return item>50 })

console.log(arr1);

4.3 简单数据类型和复杂数据类型

简单数据类型 存的是值  如果想修改某个值 其他的变量不会发生改变

复杂数据类型 他们存的引用地址 当引用地址 中有一个 变量变了  其他同一个地址也会发生改变

简单数据类型 ：Number、string Boolean null undefined

复杂数据类型 ：数组、函数、对象

4.5 深拷贝

JSON.parse(JSON.stringify())

如果不知道用哪个 就用 JSON.parse(JSON.stringify(obj))

4.6 递归

什么是递归 ？ 循环  递归：函数内部自己调用自己

4.7 遍历对象

        // let obj = {
        //     name:'奥特曼',
        //     age:10
        // }
        // for (const key in obj) {
        //     // 为什么不能写 对象. 原因：因为key对象里面没有定义没有这个键 如果有也不应该对象. 要使用[变量]
        //     console.log(obj,key,obj[key],obj.name);
        // }

4.8 解构

作用：方便使用

数组对象的解构：

数组的解构:

4.9 浅拷贝

let obj ={a:1}
let newObj = {}
Object.assign(newObj,obj)
console.log(newObj);

5.0 使用构造函数创建对象

5.1 使用new创建对象

5.2 数组的截取方法

5.3 forEach的使用

5.3 数组的for循环

---

总结

这一篇文章是对Web前端----JavaScript的基础学习的总结，谢谢大家的观看。