JS 学习笔记1

JavaScript简介

---

JavaScript介绍

JavaScript是一种轻量级的脚本语言，“脚本语言”指的是它不具备开发操作系统的能力，而是用来编写控制其他大型应用程序的“脚本”。JavaScript是一种嵌入式语言。

JavaScript：

1.具有操作浏览器的能力

2.使用领域广泛 ---前端、后端、小程序

---

将JavaScript引入到文件

1.嵌入到html文件中

2.引入本地独立js文件

3.引入网络来源文件

---

输入语句

获取的数据默认类型为字符串

prompt('请输入信息')

输出语句

document.write('')//可以识别标签，变量不需要加''
alter('')
console.log('')
打印变量时不能加 ' '
console.log(  )

变量

存储数据的容器

声明变量

var 不存在块级作用域 ，可以先使用，后声明，可以多次声明同一变量

建议使用let

let uname

变量赋值

uname = 'num'

命名规范

1.有效符号：大小写字母、数字、下划线、$

2.关键字和保留字不能用于命名

3.不能以数字开头命名

4.尽量用有意义的词命名

5.命名用小驼峰命名法1

常量

存储数据的容器，存储的数据不能再变化

const 常量名

const GENDER = 'm'

基本数据类型

对于js弱数据语言，只有赋值之后才知道数据类型

检查数据类型

typeof()

字符串类型 string

let b = "欢迎加入js"
//内容有引号时用单双引号互相嵌套使用
let c = '这是一本"书"'

字符串拼接

let a = 'name'
document.write(`<h1>姓名是：${name}</h1>`)

其他类型

布尔类型

返回将结果 true/false

console.log(2 > 3)//返回结果为false

undefined未定义

null空

NAN--not a number

数据类型转换

隐式转换

如  prompt('请输入信息')  会将输入的数字转换为字符串类型

显示转换

Number(str)

let num1 = Number( promt() )
let num1 = +( promt() )

parseInt

尽可能转化为整型

parseFloat

尽可能转化为浮点型

运算符

基本运算符

+ - * / %

自增自减：

b++
b--
//赋值运算符的优先级高于后减减，前减减的优先级大于赋值运算符

比较运算符

= 是赋值

== 只判断数值是否相等 ，有隐式转换，把字符串转换为数字类型

=== 判断是否全等，包括类型

比较 ：> 、< 、>= 、<=

逻辑运算符

&&   与 两真才真，一假则假
||   或 一真则真，两假才假
！    非 取反 

分支语句

单分支语句

基本语法：

if(判断条件){
  执行代码块
}

双分支语句

基本语法：

if(条件语句){
	执行代码块1
} else{
	执行代码块2
}

多分支语句

基本语法：

if（条件1）{
	执行代码块1
}else if(条件2){
	执行代码块2
}else if(条件3){
	执行代码块3
}
......
else{
	执行代码块n
}

三元运算符

判断条件 ？ 成立时执行的代码 ： 不成立时执行的代码

3 < 5 ? alert('正确') : alert('错误')

switch语句

switch(  ){
	case "1":
		alert('    ')
		break
	case "2":
		alert('    ')
		break
	case "3":
		alert('    ')
		break
	......
	default:
		alert('    ')
}

循环

for循环

for(let i;i<=100;i++){

}

while循环

while(循环条件){
	循环内容
}

do while 循环

do{
	循环内容
}while(循环条件)

continue/break

continue //结束本次循环，提前进入下一次循环
break //结束循环

循环嵌套

for(	){
	for(	){
	
	}
}

数组

存储多个数据的容器 , 数组存在数组下标，从0开始

声明方式：

let arr =  [ ]

常用数组操作

添加元素

arr.push(添加值)
//在数组末尾添加
arr.unshift(添加值)
//在数组前面添加

删除元素

arr.pop()
//删除并返回数组的最后一个元素
arr.shift()
//删除并返回数组的第一个元素

splice

删除元素：删除两个参数的时候，第一个参数代表要删除的元素的位置，第二个参数代表要删除几个

添加元素：第二个参数必须为0

arr.splice()
arr.splice(2, 0, 1, 2, 3)//添加
arr.splice(2, 3)//删除

连接数组

连接两个或者多个数组的，并返回结果，返回的是一个新数组

let arr1 = ['10086', '10010']
let arr2 = ['1314', '4488']
let arr3 = arr1.concat(arr2)

将数组放入字符串

 把数组中所有的元素放在一个字符串里边，元素通过指定的分隔符进行拼接

arr1.join( )

颠倒数组中元素的顺序

颠倒数组中元素的顺序  原来的数组改变

newArr.reverse()

对数组的元素进行排序

按照utf码进行排序

newArr.sort()

字符串对象

// length   属性
console.log(str.length)

// split()将字符串分隔为数组并返回
let a = str.split('a')

// endsWith       startsWith
str.startsWith('nihao')

// indexOf   字符串中是否包含某字符
str.indexOf('gouxin')

// match   匹配字符串，支持正则
let c = str.match(/a/g)

// replace  查找、替换，支持正则匹配
let f = str.replace('huanying', 'jujueni')

函数

函数：完成特定功能的代码块，能够精简代码、提高复用率

函数的声明方式

function   函数名(){代码块}

函数声明完成后，必须进行调用才能执行

调用：函数名()

函数传参

// 函数小括号里用于接受实参的叫做形参
function sayHi(msg) {
            console.log(`用户说:${msg}`)

        }
// 函数调用时，传进去的参数，叫做实参
sayHi('今天天气真好')

函数返回值

返回值：return

return  结束函数的作用，之后的代码不会再执行

function getSum(arr) {
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i]
            }
            return sum
        }

函数没有返回值，默认返回undefined

值传递和引用传递

这里a，b将自身的值传进函数，本身的值并不改变

let a = 11
let b = 22
function change(x, y) {
    x = 21
    y = 33
}
change(a, b)
 console.log(a, b)

数组：引用数据类型，将自己的地址传递给函数

let arr = [1, 2, 3, 4, 5]
function change2(arr) {
    arr.push(100)
}
change2(arr)
console.log(arr)

默认值参数

默认值参数写在形参的最后

function area(r, PI = 3.14) {
    return PI * r * r
}

伪数组arguments

在函数中作为数组储存数据

function getSum() {
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            return sum

        }

let a = getSum(1000, 1, 2, 3, 4, 5, 6, 7, 8, 9)
console.log(a)

匿名函数

没有名字的函数

函数表达式：

let fn = function () { console.log("你好") }
fn()

普通的具名函数，可以在声明前去使用，而函数表达式，只能先声明，后使用

立即执行函数：

(function () {
    let num = 1
    console.log(num)
}())

构造函数

构造函数的基本格式：

function Obj(uname, age) {
    this.uname = uname,
        this.age = age,
        this.sing = function () {
            console.log('我要唱歌了')
    }
}

实例化对象： 

let obj1 = new Obj('zhangjie', 21)
console.log(obj1)
obj1.sing = function () {
    console.log('sing')
}
obj1.sing()

作用域

作用域：一段代码中所用到的名字不是一直有效且可用的，而限制这个名字可用范围的就是这个名字的作用域，不同作用域之间相互不影响

全局作用域：整个全局声明的变量             局部作用域 ：函数内部声明的变量

全局变量 ：script里边，函数外边声明的变量       局部变量：函数内声明的变量(外部不能访问)

函数的形参也可以理解为局部变量

递归

把一个问题，尽可能的拆分成小问题，直到不能拆分

 function jiecheng(n) {
            if (n === 1) {
                return 1
            }
            return n * jiecheng(n - 1)
        }
//求阶层

闭包

可访问一个函数作用域里变量的函数

function outer() {
    let money = 100
    function inner() {
        console.log(money)
    }
    return inner
}
let a = outer()
a()
console.log(money)

对象

对象：无序的数据集合(无下标)

声明方法：   

let  对象名={}  
let 对象名=new  Object()

对象：属性和方法      

属性：信息或者特征        

方法：行为或者动作   

查

//对象名.属性名
console.log(obj.age)
console.log(obj.uname)
//对象名['属性名']
console.log(obj['gender'])

增

//对象.新属性=属性值
obj.like = 'text'

改

obj.uname = 'zs'

删

delete obj.gender

对象方法调用

obj.sing()

对象遍历

let obj = {
    uname: 'gouxin',
    age: 21,
    gender: 'nv',
    sing: function () {
    console.log('我要唱歌了，请保护你的耳朵')
    }
}

for (let k in obj) {
    console.log(obj[k])
}

Math模块

Math是 JavaScript 的原生对象，提供各种数学功能。

// ceil()向上取整
console.log(Math.ceil(3.1415))
// floor()向下取整
console.log(Math.floor(3.1415))
// abs取绝对值
console.log(Math.abs(-3.1415))
// pow 函数返回基数的指数次幂
console.log(Math.pow(2, 3))

时间模块

Date对象是 JavaScript 原生的时间库。以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天

创建一个新Date对象的唯一方法是通过new操作符，例如：let now = new Date(); 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
let hh = date.getHours()
let mm = date.getMinutes()
let ss = date.getSeconds()
let week = date.getDay()

 // 补零：

m = m < 10 ? '0' + m : m
d = d < 10 ? '0' + d : d
hh = hh < 10 ? '0' + hh : hh
mm = mm < 10 ? '0' + mm : mm
ss = ss < 10 ? '0' + ss : ss

原型对象

对象：都具有prototype的属性，即都有原型对象，而原型对象本身又是对象

javascript里：万物皆对象

原型对象中的constructor被覆盖丢失。重新指回去：constructor：Obj

获取元素

1.通过css选择器获取  document.querySelector只获取满足条件的第一个元素对象

document.querySelector('css选择器')
console.log(typeof (btn))
document.querySelectorAll将所有的满足条件的元素对象获取并保存至伪数组

2.class名

let box = document.getElementsByClassName('box')

3.标签名

let input = document.getElementsByTagName('input')

 4.id

document.getElementById('id')

修改dom元素内容

1、获取元素

2、修改元素内容

let div = document.querySelector('div')
// 1、innerText()   无法识别标签
div.innerText = `<h1>我被修改过</h1>`

// 2、innerHtml()   可以识别标签 
div.innerHTML = '<h1>我又又又被改了</h1>'