javascript初学篇

js

01

js定义

​ JS 是由 ECMAScript DOM(文档对象模型) BOM(浏览器对象模型)

输出操作

alert(“去去去”) // 弹出一个警告框 只有确定按钮
confirm(“1234”) 也是一个 提示框 带有确定和取消按钮
prompt(“你爱我吗”) 也是一个弹出框 带有一个 输入框 和 确定取消按钮

​ console.log(“在控制台打印输出”)
document.write(“随便写点啥”)

变量命名

规则 必须遵守的
1、只能由 数字 字母 _ $ 组成
2、不能是数字开头
3、不能使用关键字或者保留字
关键字 JS 内部已经使用 所以你不能用
保留字 JS 内部现在没有使用 可能以后会使用 所以你不能用
4、JS 严格区分大小写
5、不能超过 255 个字符

    规范  不是官方规定 但是大家都这么做 
    1、尽量有语义化 看到这个变量名 大概知道是什么意思 
    2、使用  驼峰命名法 

数据类型

1、number 2、string 字符型 3、Boolean 布尔型 4、undefined 未定性 5、null 空

isNaN() 半段类型（）内添加想判断的类型,判断是不是 非数字

特殊的字符 是被 (转译符号) 转译后的字符 是在 控制台里面使用
// \r 空格
// \n 换行
// \t 制表符 tab 键

检测数据类型

typeof 是字符串的形式

检测字符串是 用 typeof(str1)

检测null 时返回时object

数据类型转换

1、Number() 可以认识小数点 把数据当成一个整体进行识别

Number("") 0 ， Number(undefined) NaN ，Number(NaN) NaN，Number(null) 0，

2、parseInt() 从头(从左往右)开始识别 不认识小数点 取整 只要遇到不是数字的 就不会再往后识别

3、parseFloat() 识别小数点 但是只识别一个 后面的小数点不再识别
也是从左到右开始识别 其他的规则和 parseInt 一致

4、隐式转换 除了 + 以外的数学运算 - * / %

5、String() 把数据当成一个整体进行转化

6、数据.toString() null 不能使用 .toString 的这个方法 undefined 也不能使用 .toString 的这一个方法

7、隐式转换 + 在 JS 里面 可以是运算符 + 也可以是字符串拼接 两侧 有一个是字符串类型 就是拼接 都是数字 就是加法运算

8、Boolean() 以下转换为false 0，""，NaN，undefined ，null 其他为true

特殊比较操作的返回值

1、undefined == 0 false

2、"" == 0 true

3、NaN == NaN false

4、undefined === undefined true

02

逻辑运算符（面试）

// var aa = 0 && 1;
// alert(aa); // 0
// var bb = 1 && 0;
// alert(bb); // 0
// var cc = 1 && 8;
// alert(cc); // 8

    // var a = 1 && 3 && 5;   
    // alert(a);               // 5
    // var b = 0 && 2 && 4;
    // alert(b);               // 0
    // var c = 5 && 0 && 7;
    // alert(c);               // 0

    // console.log(0 || 1);        // 1
    // console.log(1 || 0);        // 1
    // console.log(1 || 3);        // 1
    // console.log(3 || 1);        // 3


    // var a = 5 && 0 || 1;    // 0 || 1  =>  1
    // var b = 4 || 0 && 8;    // 4 || 0  =>  4
    // var c = 0 || 8 && 9;    // 0 || 9  => 9
    // alert(a), alert(b), alert(c);

    var a = 4 + 8 && 3;         // 12 && 3  => 3
    var b = 0 && 7 + 1;         // 0 && 8   => 0
    var c = 4 || 3 && 8 - 1;    // 4 || 3 && 7  =>   4 || 7   =>   4

小数后保留位数

保留几位小数 toFixed() 括号里边是 保留几个小数就写几

03

continue和break

continue 跳出本次循环 直接进入下次循环

break 直接打断 后面的东西不在执行

函数

创建

// 函数声明式
function fun(){
console.log(“我是 fun 函数”)
}
// 函数表达式
var fun = function(){
console.log(“num”)
}

// 函数声明式 可以在 定义之前调用
// 函数表达式 不能再定义之前调用

// 函数在定义阶段发生的事儿
// 1、开空间
// 2、把这个空间的地址给到函数的名字
// 3、把要执行的代码(当做字符串)放到函数里面

    // 函数在调用阶段发生的事儿
    // 1、通过函数的名字(地址)找到这个函数
    // 2、把函数里面的代码 拿出来执行

arguments

arguments 是所有实参的集合 是一个伪数组

    // function fn(a,b,c){
    //     // console.log(arguments.length)
    //     // console.log(arguments[arguments.length - 1])
    //     for(var i = 0 ; i < arguments.length ; i++){
    //         console.log(arguments[i])
    //     }
    // }
    // fn(1,2,3,4,5,6,7,6,5,4,3,2,1)

04

预解析

预解析的无节操性
// 1、return 后面的代码不会执行但是会进行预解析
// 2、判断条件里面 条件不满足的时候不会执行代码 但是会进行预解析

作用域

// 作用域 域 区域 范围 变量起作用的范围
// 作用域 全局作用域 和 局部作用域(私有作用域)
// 一个页面就一个全局作用域 里边的变量 大家都能用
// 全局作用域 生命周期 从页面打开就有 页面关闭就没有了
// 私有(局部作用域) 目前为止 只有函数有局部作用域 每一个 函数 {} 里面都是自己 私有的 不能使用 别人的私有作用域里面的变量

作用域的访问规则
如果自己的作用域里面有 就直接拿来用
如果自己的作用域里面没有 就向上一层查找 如果有就直接拿来用 如果没有 继续向上找
直到找到全局作用域 有的话就直接拿来用
没有就报错 …is not defined

如果自己的作用域里面有这个变量 直接给它赋值
如果自己的作用域里面没有这个变量 就向上一级查找 如果有 直接给上一级的这个变量 直接赋值
如果上一级也没有这个变量 就一直往上 直到找到全局作用域 如果有 直接赋值
如果全局都没有这个变量 就在全局定义一个再赋值

常见事件

浏览器事件
onload
onscroll 浏览器滚动事件
鼠标事件
onclick
ondblclick 双击
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
onmouseleave 鼠标离开
onmouseenter 鼠标进入

            onmouseover 鼠标经过
        键盘事件
            onkeydown 键盘按下
            onkeyup  键盘抬起
        移动端事件
            ontouchstart  手指接触到手机屏幕
            ontouchmove    手指移动
            ontouchend  手指离开屏幕
        表单事件

            onchange  输入
            oninput   输入
            onsubmit 提交

递归（了解）

// 递归 函数的一个高级应用
// 函数自己调用自己
// 先写一个结束条件

对象

​ // 字面量
​ var obj = {}
​ // 内置构造函数创建对象
​ var obj1 = new Object()

往对象 里面加东西 . “的” name

[] 里面打了 “” 和 直接写 obj.name 不大引号 是一样的意思

当 [] 中间的东西 没有 “” 的时候 就是作为一个变量来进行解析

对象的遍历

// for in 专门用来遍历对象
// 对象里面有多少个键值对 for in 就会循环多少次

// key 只是一个变量的名称 用什么无所谓
for(var key in obj){}

05

数组

// 字面量
var arr = [1,2,3,4]
// 内置构造函数
var arr1 = new Array() 传入一个参数 数组的长度 传入多个参数的时候 就是数组里面的数据

数据内存

内存 栈内存 堆内存
// 基本数据类型 都是在 栈 里面直接存的 值
// 复杂数据类型 都是存在 堆内存里面

数组的方法

1、删除数组的最后一项
// 语法：数组.pop()
// 返回值 ： 删除的那一项数据
// 会改变原始数组

2、向数组的末尾添加一个数据
// arr[arr.length] = “这是我新加的数据”
// console.log(arr)
// 语法：arr.push(“要添加的数据”)
// 返回值 ：改变后的数组的长度
// 会改变原始数组

3 、shift() 删除第一项
// 语法：数组.shift()
// 返回值：删除的那一项数据
// 会改变原始数组

4、unshift() 在前面添加一个数据
// 语法:数组.unshift(要添加的数据)
// 返回值：改变后的数组的长度
// 会改变原始数组

5、indexOf() 查找某一个数据
// 语法：数组.indexOf(要查找的数据)
// 返回值 ：1、如果有这个数据 返回的就是这个数据的下标 (第一个查找到 符合要求的)
// 2、如果数组里面没有这个数据 返回的就是 -1
// 不会改变原始数组

6、concat 拼接数组
// 语法：数组.concat(你要拼接的数据或者数组)
// 返回值：拼接好以后的新的数组
// 不会改变原始数组

7、reverse() 反转数组 就是把数组里面的数据 换一个顺序 颠倒过来
// 语法：数组.reverse()
// 返回值：就是改变后的原数组
// 会改变原数组

8、join() 以特定的符号把数组里面的内容连接成一个字符串
// 语法：数组.join(以什么符号连接) 如果没穿参数 默认是 ,
// 返回值 ： 连接好的字符串
// 不会改变原数组

9、splice() 截取数组里面的数据
// 语法： 数组.splice(开始截取索引，截取的个数 , 替换被截取的数据 )
// 返回值 ：截取好的数据放到一个新的数组里面返回
// 会改变原数组

10、sort() 排序
// 没有传参数的时候 是 按照第一位数字的大小进行排列
// 语法：数组.sort() 参数接收的事一个函数 函数有两个参数 a , b return a- b 按照从小到大的顺序排列
// return b - a 按照从大到小的顺序排列
// 返回值 ：改变后的原数组
// 会改变原数组

 var res = arr.sort(function(a,b){
        return  b - a 
    })

06

this

this 是一个关键字 声明变量的时候 不能使用 this
// 在全局作用域 里面 就指向 window
// this 一般是在作用域里面使用 this 在私有作用域(函数)里面指向的是谁
// this 不是一个变量 和作用域的查找规则和赋值规则通通没有关系
// console.log(this)

1、不管函数写在哪个位置 也不管函数里面写了什么东西 只要是 函数名() 调用 函数里面的 this 都指向 window
2、如果是 对象.函数名 调用 函数里面的 this 指向 . 前面的那个东西
3、如果是事件处理函数 里面的 this 指向的是 事件源(谁身上的事件)

严格模式

// 严格模式只是我们写代码的一种开发模式
// ‘use strict’

字符串

// 字符串的创建方式也有两种 字面量创建 和 内置构造函数

// 如果使用内置构造函数创建的字符串 也有数组一样的下标 和 length 属性
// 字符串是一个基本数据类型 它也叫做包装数据类型
// 如果你要使用 length 和 索引 那么他就变成 内置构造函数创建的样子 拿来给你使用 使用完以后 又变成一个普通的字符串

字符串的方法

1、charAt() 查找 (下标)
// 返回值 是对应位置的字符
// 不会改变原字符串

2、charCodeAt() 查找
// 返回值是 对应位置字符的编码
// 不会改变原始字符串

3、indexOf() 查找
// 返回值 是对应字符的索引 如果没有找到 返回 -1
// 不会改变原字符串

4、toLowerCase() 转为 小写
// 返回值 是转换后字符串
// 不会改变 原字符串

5、toUpperCase() 转为大写字母
// 返回值 是转换后的字符串
// 不会改变原字符串

6、split() 把字符串以某种符号分割为数组 *****
// 返回值 以符号分割好的数组
// 不会改变原字符串

    // 如果字符串里面没有这个符号   那么把整个字符串当成一个整体 放到一个数组里面返回  
    // 如果没有传参数  那么把整个字符串当成一个整体 放到一个数组里面返回  

7、substring() 截取字符串
// var res = str.substring(2,6) //接收 2 个参数 第一个是开始截取的位置 第二个是结束的位置 包前不包后 截取出来的字符串 包括开始索引位置的字符 但是不包括结束索引位置的字符
// // 返回值 是截取出来的字符
// // 不会改变原字符串

8、substr() 截取字符串
// 返回值就是截取出来的字符串
// 不会改变原字符串
// var res = str.substr(2,3) // 接收 2个参数 第一个是开始截取的位置 第二个是 截取的个数

9、replace() 替换字符串当中的某些字符
// 返回值 替换后的字符串
// 不会改变原字符串

ECMAScript 发展史 （了解）

​ 1995 ES1
​ 1996 ES2
​ 1997 ES3 (目前学习的都是 ES3 里面的语法)
​ 2000 ES4 对 ES3 的一个推翻 搁置
​ var fn = function(){}
​ var fn = () => {}
​ 很多开发者不接受 浏览器厂商
​ 2009 ES5 (ES3.1)
​ 2011 ES5 (ES5.1)
​ 2012 基本上所有的主流浏览器都支持 ES5 的语法
​ 2015 ES6 ES2015 1234
​ 2016 ES7
​ 2017 ES8…

数组方法ES5

1、forEach() 数组里面有多少项数据就会循环多少次
// 参数接收的是一个 function 这一个 function 有三个参数 第一个参数 就是数组的每一项 第二个参数是 索引 第三个参数就是原数组
// forEach 没有返回值
// 没有改变原数组 但是 在某些特定情况下forEach 可以改变原数组

var res = arr.forEach(function(item,index,arr){
   })

2、map() 就是数组的一个映射 把数组的每一项进行操作以后 返回出去作为一个新的数组的其中一项
// 返回的是一个新的数组
// 不会改变原数组

var res = arr.map(function(item,index,arr){}

3、filter() 过滤数组当中符合条件的数据 作为一个新的数组返回
// 返回的是一个新