js笔记整理

JS笔记整理

 

初识JavaScript

1.js特点

  • 轻量级语句

  • 单线程语言

  • 弱语言

  • 解释型脚本语言，代码不需要编译；

  • 跨平台

  • 基于对象，使用JavaScript不仅可以创建对象，也能操作使用已有的对象

2.数据类型

  • number类型（所有的数值）

  • 字符串类型 String （单引号 双引号 都是字符串）

  • boolean类型 （true false）

  • null 空类型 （是null值的情况）

  • undefined 未定义 （当前没有给值）

  • object （对象类型 引用数据类型）

  • Symbol (创建私有成员、防止属性名冲突,Symbol的值是唯一的、独一无二的，不会重复。)注意：不支持语法new Symbol() es6新增

  • Bigint (比Number的范围要大的多，使用方法：bigint（”125555444541216445“）

五种基本类型：Undefined、Null、Boolean、Number和String
引用类型主要有：Object、Array、Function、RegExp、Date

 

使用typeof来查看对应的类型（基本数据类型返回的是对应的类型名 null类型object）

 

3.进制转换

常用的进制 二进制（计算机能识别的基础） 四进制 八进制 （逢8进1）十六进制（逢16进1） 十进制（常用的）

十进制转二进制 （除2取余法）
二进制转十进制 根据对应的位数乘以对应的2的次方将所有值相加
十进制转8进制 （除8取余）
十进制转16进制 （除16取余）
toString方法和对应的parseInt方法 里面的参数可以填可以不填 不填默认转为10进制
通过拿到8进制 16进制 2进制的内容得到一个十进制的数（parseInt parseFloat）
//将对应的8 或者 16进制等转为10进制的数值
var number = "30" //八进制的内容
//将对应的八进制30转为10进制
console.log(parseInt(number,8));
var str = '6a'
console.log(parseInt(str,16));
//前面写了0x表示当前是16进制数
var str = '0x6a'
console.log(parseInt(str));
//前面写0的情况下 他会转为对应的8进制或者是10进制 具体看后面的参数
var str = '061'
console.log(parseInt(str,8));
将10进制的数值转为对应的8 或者 16进制的字符串 （toString）
//将10进制的数值转为对应的8 或者 16进制的字符串
//toString
var number = 24
//将对应的10进制转为8进制
console.log(number.toString(8));
//将对应的10进制转为16进制
console.log((106).toString(16));

条件控制语句及表达式

 

1.运算符

  • () 前面不能直接写++

    console.log(++(a--)); //() 不能和++ 一起使用  ===>报错

  • 字符串和数值进行比较（字符串会自动转为数值）

  • 出现NaN 一般都是false

  • undefined是null的派生所以对应的值是相等的

    //undefined（null的派生子类） 和 null
console.log(undefined==null);//true
console.log(undefined===null);//false

  • 布尔类型的值和null进行比较

    //boolean类型的值和null进行比较 自动转数值(出现NaN是false)
console.log(true>null);//true
console.log(true>undefined);//false  ==>undefined转为数值为NaN

  • null值及undefined跟0进行比较

    //undefined和0进行比较
console.log(undefined == 0);//NaN false
//null是空对象引用  对应的是一个引用类型 引用类型比较的是地址 null和0进行比较
console.log(null == 0); //false
逻辑运算符
//逻辑运算符  && 短路与 &断路与 || 短路或 |断路或 !
//&& 所有的同时满足才为真 && 只要前面有一个是假后面的就不会看了 & 看完全部
var a=10,b=20,c=30
console.log(a>b && b<c);//false
console.log(c>b && b<c);//true
//|| 有一个是true就是true 前面只要出现了true 就不看后面的 | 看完全部
console.log(c>b || a>b);//true
//！ 取反
console.log(!c>b || a>b); //false
console.log(!(c>b || a>b)); //false
// || 常用 有一个是true 取true
console.log(a>b || 20); //20
var i = 0 || 10
console.log(i);//10
//如果俩个都是false 取最后一个
var str = undefined || ''
console.log(str);//''
//如果俩个都是true的情况下 取第一个为true的
var str1 = "A" || "B" 
console.log(str1);//A
var str2 = "" || 'false' || 'true'
console.log(str2);//false字符串
//三目运算 逻辑运算优先级会高于三目运算符,因此需要用括号括起来
var str3 = (10 > 20 ? '' : '123') ||  (30 > 20 ? '' : '456')
console.log(str3);//123
//如果出现false 直接取false 如果全是true 取最后一个
var str4 = 10 && 20 //20
var str5 = undefined && '' //undefined
//转成boolean类型
var str6 = !123 //false
console.log(str4);//20
console.log(str5);//undefined
console.log(str6);//false

数组

数组的方法

  • push 添加到数组的最后一个

  • pop 删除最后一个

  • shift 删除第一个

  • unshift 添加到数组的第一个

  • reverse 反转数组

  • sort 将数组升序排列

  • splice 数组删除 splice（开始下标，删除数量）

  • slice 数组截取 slice(开始下标，结束下标) ===> 包含开始不包含结束下标

es5新增数组方法（高阶函数）
forEach 遍历
var arr = [1,2,3,4,5]
//forEach 遍历的 value表示里面的值 index表示里面的下标 array表示当前遍历的数组
var forEachObj = arr.forEach(function(value,index,array){
    console.log(value); //打印里面的值 1,2,3,4,5
    console.log(index) // 打印下标  0,1,2,3,4
    console.log(array) //当前遍历的数组 [1,2,3,4,5]
})
map 遍历
//map 遍历的 value表示里面的值 index表示下标 array表示当前的遍历的数组
var mapObj = arr.map(function(value,index,array){
    console.log(value); //打印里面的值 1,2,3,4,5
    console.log(index) // 打印下标  0,1,2,3,4
    console.log(array) //当前遍历的数组 [1,2,3,4,5]
    return value+1
})

forEach和map的区别

  • forEach没有返回值 里面没有return

  • map有返回值 所以里面可以使用return关键词 他的返回值是一个数组

reduce 从左到右计算的 reduceRight（从右到左计算）
//pre 前一个值 current 当前值 index 下标 array 数组
//reduce函数 利用前一个和后面值进行运算的操作 得出对应的值
var sum = arr.reduce(function(pre,current,index,arr){
    return pre+current
})
console.log(sum);
filter 过滤的
//filter返回的是一个数组 value index arr
var filterArr = arr.filter(function(value,index,arr){
    return value>3
})
console.log(filterArr);
some 有一些满足就返回true 否则返回false
//some 一些 every 每一个
var value = arr.some(function(value,index,arr){
    return value>4
})
console.log(value);//true
every 每一个满足就返回true 否则返回false
var value = arr.every(function(value,index,arr){
    return value>4
})
console.log(value);//false
indexOf 返回对应的下标
lastIndexOf 返回对应的下标
console.log(arr.indexOf(1,2));//从下标开始找 找这个1这个数字第一次出现的位置(左到右)
console.log(arr.lastIndexOf(1,5));//从下标5开始找 找1第一个次出现的位置(右到左)
es6新增数组方法

find 查找

findIndex 查找下标

var li = Array.from(lis).find(function(li){
    return li.innerText == '5'
}) //找到对应匹配的元素
console.log(li);
//findIndex 查找对应的元素的下标  返回第一个找到的元素下标
var index = Array.from(lis).findIndex(function(li,index,arr){
    return li.innerText == '5'
})
console.log(index);
静态方法（使用类名.）

Array.of() 将一组数据转为数组

Array.from() 将伪数组转为数组

var array = Array.of(1,2,3,4,5)
console.log(array);
//具备某些数组的特性的对象称为伪数组 arguments NodeList HTMLCollection等
var lis = document.querySelectorAll('li')
// 伪数组是不具备数组的函数的
Array.from(lis).forEach(function(li){
    console.log(li.innerText);
})

函数

在程序执行之前有个预编译过程

预编译会做的事情

1.他会声明对应的function和var关键词修饰的变量（开辟内存的操作）

2.对应的function的内存空间开辟以后他会将对应的代码块放到其中 等待调用

3.var 修饰的关键词 只会开辟一个空间 并不会进行赋值（默认给他的一个undefined的值）

 

字符串

为什么string可以拥有方法
var realMessage="Said I love you but I lied";
var myMessage=realMessage.substring(5,15);
console.log(myMessage); //"I love you"

在执行到realMessage.substring(5,15)这行代码时，发生了很多事。

首先，它会从内存中读取realMessage的值。当处于这种读取模式下的时候，后台就开始干活了。JS高程是这样描述后台完成的这些动作的：

  • 创建String类型的一个实例；

  • 在实例上调用指定的方法；

  • 销毁这个实例

其实不是基本类型string执行了自身方法，而是后台为它创建了一个对应的基本包装类型String，它根据基本类型的值实例化出了一个实例，让这个实例去调用指定方法，最后销毁自己

 

字符串方法

通过下标找字符串（char 字符）

charAt(下标)

var str = 'abc'
str.charAt(0) //返回的是a

charCodeAt （ACSII码）

var str = 'abc'
str.charCodeAt(0) //返回的是97
通过字符串找下标（找不到返回-1 找的到返回对应的下标值 number（第一次出现的））

indexOf 

var str = 'abc'
console.log(str.indexOf('ab')) //返回的下标0
console.log(str.indexOf('d')) //找不到返回-1
//可以有俩个参数 第一个参数为 对应需要查询的字符串  第二个参数为 开始查找的下标
console.log(str.indexOf('b',2)) //从下标2开始找 找第一个出现b的位置 返回-1
var str = 'abbbccde'
console.log(str.indexOf('b',2)) //从下标2开始找 找第一个出现b的位置 2

lastIndexOf

console.log(str.lastIndexOf('b')) //3
console.log(str.lastIndexOf('b',0)) //-1 从0的位置往前找
console.log(str.lastIndexOf('b',4)) //3
//也就是说默认的情况下 对应的后面的下标可以省略 str.length-1

search 方法（和indexOf一样 支持正则表达式）

var str = 'abc'
console.log(str.search(/ab/)) //0 /ab/正则表达式
console.log(str.search(/ab/,0)) //从0的位置开始找 匹配ab的内容
静态方法（通过构造方法名直接调用的叫做静态方法 他是对应的static修饰的）

fromCharCode 将对应的ascii码转为字符串

var str = String.fromCharCode(97) //返回的是一个字符串
console.log(str) //a
concat 将多个字符串转为连接成一个字符串返回
var str = 'hello'.concat('world')
console.log(str)//hello world
支持正则的方法（4个）

search 查找（找到返回下标 没找到返回-1）

var str = "abcacc"
//默认只找第一个匹配的 加入到数组
var arr = str.search('a')
console.log(arr);//0   返回找到的第一个下标

replace 替换 （将找到的第一个字符串替换成一个新的字符串）

var str = 'abca'
var str1 = str.replace('a','hello')//将a替换成hello
console.log(str1)

split 分割（返回数组）

//分割 成为一个数组 split  数组变成字符串 join （默认以,连接）
var str = '1,2,3'
//默认不是以,作为分割 默认不分割 直接填入到数组
console.log(str.split()); //['1,2,3']
console.log(str.split(',')); //['1','2','3']

match 匹配（返回数组）

//match 返回一个数组 （匹配的内容）
var str = "abcacc"
//默认只找第一个匹配的 加入到数组
var arr = str.match('a')
console.log(arr);//[a]
截取的方法

substring(开始的下标,结束的下标)

substr(开始的下标,个数)

//截取的方法 substring substr 
var str = "abcdef"
//substring(开始的下标,结束的下标) 不包含结束的下标
console.log(str.substring(1));//bcdef
console.log(str.substring(1,3));//截取不包含最后一个下标 （默认不填str.length）bc
// substr(开始的下标,截取的个数)
console.log(str.substr(1));//默认的情况是截取到最后 bcdef
console.log(str.substr(1,3));//从下标1开始截取 截取个数为3个 bcd
转大写 （toUpperCase）
var str = 'abcA'
console.log(str.toUpperCase())
转小写 （toLowercase）
var str = 'abcA'
console.log(str.toLowerCase())
将数组转为字符串方法（join）

特点：

  • 如果数组中有undefined或null会被转换为空字符串

  • 如果元素为对象，则调用对象的toString方法抓获为字符串

console.log(['a', 'b', 'c'].join());
// 'a,b,c'
console.log(['a', 'b', , 'c'].join('+'));
// 'a+b++c'
console.log(['a', 'b', null, 'c'].join('+'));
// 'a+b++c'

 

posted @ 2022-08-25 21:09  啊wei  阅读(41)  评论(0)    收藏  举报