js学习笔记

JS学习笔记

数据类型

原始数据类型(五种)：
String（字符串） Number（数字） Boolean（布尔值） Null（空） Undefined（未定义）
引用数据类型：
Object Array Function ......

数据类型转换

字符串
1. 变量.toString() 转换为字符串类型 (toString(2)可以转换二进制)
2. String(变量)
3. 字符串拼接 +

数值类型
1. Number(变量)
2. parseInt(变量)
3. parseFloat(变量)
4. 取正 或 取负 + -

布尔类型
Boolean(变量)

运算符 及优先级

1. ( ) 优先级最高
2. 一元运算符: ++ -- !
3. 算数运算符: 先 * / % 后 + -
4. 关系运算符: > >= < <=
5. 相等运算符: == != === !==
6. 逻辑运算符: 先 && 后 ||
7. 赋值运算符: =

++a :
a先加1,再把值赋给++a
a++:
先把a的值赋给a++,a再进行加1

&&:
如果两边都为true 则返回第二个true的结果
||:
如果左边为true 则返回左边 , 如果左边为false 则返回右边

内置对象

Math() 静态成员
Math.PI 圆周率
Math.random() 生成随机数
Math.floot()向下取整 / Math.ceil()向上取整
Math.round() 取整 四舍五入
Math.abs() 取绝对值
Math.max()最大值 / Math.min()最小值

Date() 实例对象
toString() 转换成字符串
valueOf() / getTIme 获取毫秒值
getFullYear()返回年份
getMonth()+1 返回月份
getDate() 返回日期
getDay() 返回星期几
getHours() 小时
getMinutes() 分
getSeconds() 秒
getMilliseconds() 毫秒

Array 数组对象

Array.isArray()判断一个对象是不是数组，返回的是布尔值
push() 在数组末尾添加元素,返回添加后的数组长度
pop() 此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度

let arr = [1, 2, 3, 4, 5]
    arr.pop()
    console.log(arr) //[1, 2, 3, 4]
    console.log(arr.length) //4

shift() 取出数组中的第一个元素,修改length属性

let arr = [1, 2, 3, 4, 5]
    arr.shift()
    console.log(arr) //[2, 3, 4, 5]
    console.log(arr.length) //4 

unshift() 在数组前面插入,返回数组的长度

let arr = [1, 2, 3, 4, 5]
    arr.unshift(6, 7)
    console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
    console.log(arr.length) //7 

reverse() 翻转数组
sort() 数组排序从小到大

concat() 此方法是一个可以将多个数组拼接成一个数组：。

let arr1 = [1, 2, 3]
      arr2 = [4, 5]
  let arr = arr1.concat(arr2)
  console.log(arr)//[1, 2, 3, 4, 5]

slice(start,end) 方法可从已有的数组中返回选定的元素。使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分
splice() 可实现数组的增删改 splice(从第几位开始, 删除几个, 需要添加的)

	var arr1 = [1, 2, 3, 4, 5];
    var arr2 = [1, 2, 3, 4, 5];
    var arr3 = [1, 2, 3, 4, 5];
    arr1.splice(2, 0, 'haha')
    arr2.splice(2, 3)
    arr3.splice(2, 1, 'haha')
    console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
    console.log(arr2) //[1, 2] 删除三个元素
    console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素

join()此方法将数组转化为字符串：

let arr = [1, 2, 3, 4, 5];
   let str1 = arr.join('')
   let str2 = arr.join(',')
   let str3 = arr.join('##')
   console.log(str1)// 12345
   console.log(str2)// 1,2,3,4,5
   console.log(str3)// 1##2##3##4##5

indexOf() 位置查找

let arr = [1, 2, 3, 4, 5, 6, 7]
    let index = arr.indexOf(4)
    console.log(index) // 3 找到了会返回首次出现的索引位置
    console.log(arr.indexOf(8))// 找不到  返回-1

迭代方法
1. Array.map()

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原数组保持不变
    //newArr = [2, 4, 6, 8, 10] 返回新数组

2. Array.forEach()
针对每一个元素执行提供的函数，对数据的索引操作会改变原数组, 没有返回值
使用场景：并不打算改变数据的时候，而只是想用数据做一些事情 ，比如存入数据库或则打印出来。

let arr = [1, 2, 3, 4, 5]
   arr.forEach(x => x*2)
   // arr = [1, 2, 3, 4, 5]  数组不改变(操作索引可以改变),注意和map区分

3. Array.filter()
此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5]
    const isBigEnough = value = value >= 3
    let newArr = arr.filter(isBigEnough )
    //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

4. Array.every()
此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：

let arr = [1, 2, 3, 4, 5]
    const isLessThan4 = value => value < 4
    const isLessThan6 => value => value < 6
    arr.every(isLessThan4 ) //fal```se
    arr.every(isLessThan6 ) //true

5. Array.some()
此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false：

let arr= [1, 2, 3, 4, 5]
    const isLessThan4 = value => value < 4
    const isLessThan6 = value => value > 6
    arr.some(isLessThan4 ) //true
    arr.some(isLessThan6 ) //false

6. Array.reduce()
此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：

let arr = [1, 2, 3, 4, 5]
   const add = (a, b) => a + b
   let sum = arr.reduce(add)
   //sum = 15  相当于累加的效果
   与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

7. Array.find()
返回第一个满足的值

const arr=[1,2,3,4,8,12,15];
    var arr1=arr.find(item => item > 8);
    console.log(arr1);// 12  返回第一个满足的值

8. findIndex()
返回满足条件的下标 不满足返回-1

const arr=[1,2,3,4,8,12,15];
    var arr1=arr.findIndex(item => item > 8);
    var arr2=arr.findIndex(item => item > 18);
    console.log(arr1);// 12  返回第一个满足的值
    console.log(arr2);// -1  不满足 返回-1

String对象

charAt() 获取指定位置处字符
charCodeAt() 获取指定位置处的AsscII码
fromCharCode() 把AsscII转为字符串
concat() 拼接字符串 , 等效于 +
slice(start, end) 截取字符串 从start处开始 到end位置(end取不到)
substr(start, index) 从start处截取 , 取length个字符
indexOf() 返回指定内容在字符串中的位置 找不到返回-1
lastIndexOf() 从后往前找 只匹配第一个找到的
trim() 去除空白 (只能去除字符串前后的空白)
toUpperCase() 转换大写
toLowerCase() 转换小写
replace(要替换的文本,替换成的文本) 只会替换第一个字符串

split() 切割字符串 可以转换为数组

var str = '1234567';
    var arr1 = str.split('4')
    var arr2 = str.split('')
    var arr3 = str.split()
    console.log(arr1) //["123", "567"]
    console.log(arr2) //["1", "2", "3", "4", "5", "6", "7"] 
    console.log(arr3) //["1234567"]

对象转换成字符串JSON.stringify(obj)
字符串转换成对象JSON.parse(str)

js选择器

获取单个
document.querySelector() ['.类名','#id名', '标签名', 'p div']...
获取多个
document.querySelectorAll()
获取ID
document.getElementsById()
获取类
document.getElementsByClassName()
获取标签
document.getElementsByTagName()
根据name名获取
document.getElementsByName()

自定义属性

box.getAttribute(' ') 获取自定义属性
box.setAttribute('属性名', '属性值') 设置自定义属性
box.removeAttribute(' ') 移除属性

事件

事件	描述
window.onresize	屏幕宽度改变时触发
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onblur	失去焦点时触发
onfocus	获取焦点时触发
onchange	内容改变时触发
onkeydown	键盘按下事件
onkeypress	键盘被按下或按住
onkeyup	键盘弹起事件
onmousedown	鼠标按下事件
onmouseup	鼠标弹起事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onLoad	页面加载完成触发
onsubmit	表单提交时触发
onunload	用户退出页面

DOM节点获取

节点	描述
parentNode	获取一个父节点
children	获取所有子节点
firstChild	获取第一个子节点
lastChild	获取最后一个子节点
nextSibling	下一个兄弟节点
previousSibling	上一个兄弟节点

追加节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>创建追加节点</title>
</head>
<body>
  <div class="box"></div>
  <script>
    var box = document.querySelector('.box')
    //创建一个h1标签
    var h1 = document.createElement('h1')
    //在标签里写入文本
    h1.innerHTML='我是h1标签'
    //把标签追加到div中
    box.appendChild(h1)
  </script>
</body>
</html>