JavaScript基础

JavaScript基础这篇笔记是关于JavaScript基础语法的总结

1.js基础语法

1.1js介绍

是什么？：是一种运行在客户端的编程语言，实现人机交互
作用：网页特效，表单验证，数据交互，服务端编程
组成：ECMAScript，Web APIS

1.2 js的书写位置

1.内联 写在标签里面
2.内部 直接写在html文件 放入底部
3.外部 写在js文件中 <script src="">
注意：引入的script标签中间就不要写代码了

1.3js的注释

1.单行注释 // 快捷键Ctrl+/
2.多行注释 /* */

1.4js的结束符

1.代表语句结束 英文分号
2.换行符会自动标识为结束符

1.5js输入输出语法

1.向body输出内容 document.write('输出内容')
2.页面弹出警示框 alert（‘输出内容’）
3.控制台输出语法 console.log('输出内容')
4.prompt()输入语法

1.6变量

1.是什么？存储数据的容器，注意：变量不是数据本身，而是存储数据的容器
2.声明变量 : let 变量名; 赋值： 变量名 = 18;
变量初始化 let age =18;
let不允许多次声明一个变量
3.变量的本质 是内存中的一块空间，用来存储数据
4.变量名规则与规范

规则：1.不能出现关键字
            2.只能用下划线，字母，数字，$符号组成，且不能数字开头
            3.字母严格区分大小写
规范：1.见名知意
            2.遵循小驼峰命名法

5.变量扩展-数组

1.保存多个数据
2.let 变量名 = [数据1,数据2,数据3]
3.数组中的每个数据都有自己的编号，第一个编号是从0开始

1.7数据类型

1.基本数据类型

number 数字型
string 字符串型

1.引号必须成对  推荐使用单引号
2.外单内双，外双内单
3.转义符  \
4.字符串拼接  console.log(变量名1+变量名2)
5.模板字符串 `我叫${name}`

boolean 布尔型 true false
undefined 未定义
null 空引用

2.引用数据类型

对象，函数，数组

检测数据类型
typeof 例如：console.log(typeof 123)

1.8类型的转换

隐式转换

+号两边只要有一个是字符串，那么就会把另一个转换为字符串
除了+以外的算数运算符,-*/等都会把数据转换为数字类型
+号作为正号解析时，可以转换为数字类型

显式转换

1.转换为数字型
       Number('10')
       parseInt('10')   转换为数字型，只保留整数，没有四舍五入
       parseFloat('10.99') 转换为数字型，会保留小数
区别
1.1Number()：只能放数字类型的字符，否则返回NaN
1.2pasreFloat(): 
能放以数字开头的所有类型的字符串，pasreFloat 会自动过滤，只返回数字

2.转换为字符型
       1.String(数据)
       2.变量.toString(进制)

2.流程控制

2.1运算符

算数运算符 + - * / %
优先级 ：*/ %同等级，先乘除后加减，有括号先算括号
赋值运算符

= 赋值
+=    num += 1  等同于 num = num + 1
-=  *=  /=  %=

一元运算符

++ 自增
++num  前置自增  先自加，再使用  等同于num += 1
num++  后置自增  先使用，再自加  等同于num += 1
--  自减

比较运算符
> < >= <=
相等运算符

==  左右两边值是否相等，不管数据类型
=== 左右两边数据类型 ，值， 引用地址全等  常用
！== 值不等于
得到的结果true  flase
注意：
       1.NaN不等于任何值，包括它本身
       2.尽量不要比较小数
       3.不同类型之间比较会发生隐式转换
       4.开发中请用===

逻辑运算符

&&  并且  一假则假
|| 或者  一真则真
！ 取反 真变假 假变真

逻辑运算符里的短路  只存在于&&和||
&&左边为假flase就不判断右边了
||左边为真true就不判断右边了
注意：有5个值是当false来看的
      false为假
      数字0为假
      ‘’ 空字符串为假
      undefined为假
      null 为假
      NaN为假

运算符优先级
小括号> 一元运算符和取反！> 算数运算符>比较运算符>相等运算符>&&>||>赋值运算符=>逗号

2.2语句

顺序语句 从上到下依次执行

2.3分支语句

2.3.1if分支语句
if(){} else if(){} else{}
三元表达式
条件？输出1：输出2
switch语句

switch(数据){
            case 数据1:
                alert('取款')
                break
            case 数据2:
                alert('存款')
                break
            default:
                alert('重新输入')
        }

2.3.2循环语句
while循环

let i = 1  //变量起始值
while (i <= 100) {  //变量终止条件
     document.write(`hh`)
        i++   //变量变化
    }

for循环
1.for(let i = 1; i <= 10; i++) {循环体}
2.for循环的嵌套
continue和break的区别
1.continue 结束本次循环，继续下一次循环
2.break 直接退出本次循环

3.数组

语法：let 数组名 = []
数组长度 数组名.length
添加数组

arr.push(元素1，元素2)   在数组后面添加  返回新数组
arr.unshit(元素1，元素2)  在数组前面添加  返回新数组

删除数组

arr.pop()  只能删除最后一个元素  返回新数组
arr.shift()  只能删除第一个元素  返回新数组
arr.splice(从哪里删,删除几个)  删除指定元素

4.函数

4.1函数的基础使用

是什么？执行特定任务的代码块，可以实现代码复用
function 函数名() { 函数体 } 调用函数：函数名()

4.2函数传参

作用：提高函数的灵活性
function 函数名(形参1,形参2) { 函数体 } 调用函数:函数名(实参1,实参2)

4.3函数的返回值

return

1.函数内部可以有多个return，但返回值只能有一个，return后面的数据不要换行写
2.return会立即结束当前函数
3.函数可以没有return，但返回值会是undefined
4.return只能返回一个值
     例如  return a,b 那么此时，不会返回b
     解决:写成数组  return[a,b]

4.4作用域

全局作用域
整个script标签内部或者一个独立的文件，全局作用域下的变量谁都能使用
局部作用域
函数内的代码环境，因为跟环境有关，也被称为函数作用域，局部作用域只能在局部使用
块级作用域
块级作用域由{ }包括，if语句，for语句等，块级作用域只能在块级之中用

注意1：
如果函数内部或者块级作用域内部，没有用let声明的变量，却直接使用，也要把它当作全局变量
注意2：
函数内部的形参可以看做是局部变量

总结一句话：全局>局部=块级

4.5作用域链

是什么？根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链
查找变量的原则：就近原则
匿名函数(函数表达式)
语法:let fn = function (x,y) {函数体} 调用:fn(x,y)
立即执行函数 立即执行，无需调用
作用：能有效避免全局变量之间的污染
两种写法：
(function (x,y) {函数体})(x,y);
(function (x,y) {函数体}(x,y));
注意：必须加分号；结束符

arguments

1.伪数组，无法使用数组中的方法
2.有length
3.仅仅只在函数内有效

//示例：
function fn() { 
            let sum = 0  
            for(let i = 0;i < arguments.length;i++) {
                sum += arguments[i]
            }
            console.log(sum);
        }
        fn(1,2,3)

在写了实参却没有写形参时，可以使用argument伪数组

5.对象

5.1什么是对象

1.无序的数据集合
2.是一种数据类型
3.是由属性和方法组成

5.2对象的基本使用

let 对象名 = {属性名:属性值,方法名:匿名函数}
对象两种访问属性的方法

let goods = {
            name:'小米10',
            num:1000128164,
            weight:'0.55kg',
            address:'中国大陆'
        }
        console.log(goods.name);
        console.log(goods['name']);

访问方法：

1.对象名.属性名
2.对象名['属性名']
3.对象访问方法    对象.方法名()

5.3操作对象

查

对象名.属性名
对象名['属性名']

增

对象名.新属性名= 新属性值

改

对象.属性名 = 值
对象.方法 = 匿名函数

删

delete 对象名.属性

5.4遍历对象

1.对象没有数组的length属性，无法确定长度
2.对象里面是无序的键值对，没有规律，不想数组有下标

语法：for(let k(变量名) in 对象名) {}
k是变量名
因此，获得对象属性的是k
获得对象值是obj[k]
遍历数组对象

document.write(`    <table>
    <caption><h2>学生信息</h2></caption>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>家乡</th>
    </tr>
    `)
    let arr = [
        { name: '小民', age: 18, sex: '男', address: '河北' },
        { name: '小民', age: 18, sex: '男', address: '河北' },
        { name: '小民', age: 18, sex: '男', address: '河北' },
        { name: '小民', age: 18, sex: '男', address: '河北' },
        { name: '小民', age: 18, sex: '男', address: '河北' }
    ]
    for (let i = 0; i < arr.length; i++) {
            document.write(`
            <tr>
                <td>${i + 1}</td>
                <td>${arr[i].name}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].sex}</td>
                <td>${arr[i].address}</td>
            </tr>
            `)
    }
     
</table>`)

5.5内置对象

数学对象Math
math.pi 圆周率

math.abs 绝对值 如果是字符串的’-1’,输出也会是1，隐式转换

math.max 取最大值
如果未输入数字进去，返回-Infinity，
如果输入数字进去，则是取最大值
如果输入数字和字符串混合的，则是NAN

math.min 取最小值
math.ceil 向上取整
math.floor 向下取整

math.round 四舍五入 0.5 是往大的方向四舍五入

math.random（） 随机数
返回一个0-1之间随机的小数，包括0，不包括1
这个方法里面不跟参数

1-10之间的随机数
return Math.floor(Math.random() * (max-min+1)+min);

5.6数据类型的存储方式

简单数据类型按照值存储 存放在栈
复杂数据类型按照地址存储 存放在堆

复杂数据类型的地址

简单数据类型的值

总结：简单数据类型开辟的地址是不同的，无论几个简单数据去开辟同样的值，那他的地址照样不会改

总结：复杂数据类型的值是存放在堆里面的，而找到堆的值要通过栈的复杂数据类型的地址，复杂数据1只要赋值于复杂数据2，那么就获得了与复杂数据1同样的地址，同时能够读取到堆里面的值，而复杂数据2如果一改变，则会通过栈里面的地址找到堆里面的数据，同时会改变对里面数字的值，而此时复杂数据1的值也会因此改变