js的一些基础-CSDN博客

本文链接：https://blog.csdn.net/euphrioa/article/details/121480874

1.数据类型

== 和 ===的区别：
两个=判断相等，类型不等值相等也会判断为true。如 “1”和1
三个=则是绝对相等
判断是否为数字（NAN），不能使用NAN===NAN，需要使用isNAN()判断。
var a = 5 ; isNAN(a)

数组
定义：var array=[1,2,3,'hello',null]
或是 new Array(1,2,3,'hello',null)
取数组时，如果下标越界只会显示undefined。

数组的长度是可以通过赋值改变的，如果赋的过小会导致元素丢失。

array.length=2; //导致下标大于1的元素丢失

截取数组部分元素的方法.slice()

array.slice(1,4) //截取第二个到第四个，留头去尾

数组中元素的操作

array.push('x') //向数组尾部压入元素x
array.pop() //数组尾部弹出一个元素
array.unshift('x') //在头部压入元素x
array.shift() //在头部弹出
array.sort() //排序数组
array.reverse() //反序数组
array.concat([1,2,3]) //拼接数组,不修改原数组，返回新的数组
array.join('-') //以指定字符连接数组中的元素

对象
若干个键值对。

var person = {
	name:"mike",
	age:18,
	tags:['js','html','flutter']
}
 person.name //取对象
 delete person.age //删除对象中的属性
 'age' in person //判断属性是否在对象中
 person.hasOwnProperty('toString) //判断是否是自己定义的属性

var 和 let
let用于声明局部变量，所声明变量只在let命令所在代码块内有效。
var声明的变量是全局的。
使用use strict在js中设置严格检查模式。
5.1 变量提升
```
var v='Hello World';
(function(){
alert(v);
var v='I love you';
})()
```
为什么输出会是undefined？这就要提到js中的变量提升机制了。在定义var v = 'I love you'时，实际上js把变量v提到了函数的top地方。也就是说，在function的第一行其实是存在一个隐形的定义 var v;的。
let定义的变量不存在变量提升机制，且不允许重复声明。

字符串
定义 var a = '123' 或是 var a ="123"
转义字符\n \tab \'等，反斜杠后跟转义字符。
多行字符串使用``包裹。
模板字符串let msg = 'hello,${name}' name是另外的变量。
一些字符串操作函数:

str.length //获取字符串的长度
str.toUpperCase() //转换成大写 
str.toLowerCase() //转换成小写
str.indexOf('e') //获取某个元素在数组的下标
str.subString(1,3) //截取第二到第四个字符串

Set和Map
Set和Map是ES6中新增的数据结构。Set为无序不重复的数组，Map本质上是一组键值对的集合。

var map = new Map(['name','huijunyu'],['age',19])
var name = map.get('name') //根据key拿value
map.set('age',20) //设置value
map.delete('name') //删除指定key
map.keys() map.values() map.entries
map.has("key") //判断Map中是否有某个key对应value
map.clear() //清空map对象的内容

Loop循环

for i in array{
console.log(array[i]) //i为索引值
}
for i of array{
console.log(i) //i为属性值
}
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);  //forEach方法为每个数组元素调用一次函数	
function myFunction(value) {
  txt += value;
}

2.函数

定义函数
function f1(x){}
var f1 = function(x){}
arguments rest 关键字
arguments包含了所有的参数，是一个数组。js的函数在接收参数时可以接收任意个，使用arguments可以进行全部参数的访问。
rest可以获取除了定义要接收的参数以外的其他参数。形式如下
function f1(a,b,...rest){}
rest同样是一个数组。

apply函数
js中，apply函数可以改变this指针的指向。

function f1(){
return this.name} //有点怪异，让它返回名字。本来的this是windows，找不到name。
var classA = {
name:'hjy',
age:f1};
f1.apply(classA,[]); //this指针指向了classA

json对象
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它是一个格式化的字符串，可以和js对象相互转化。

var user = {
	name:'hjy',
	age:18,
	sex:'男'
}
var jsonUser = JSON.stringify(user); //js对象转json字符串
var obj = JSON.parse('{"name":"hjy","age":18,"sex":"男"}') //json字符串转js对象

要注意json和js对象的区别!

3、BOM和DOM

BOM

window 代表浏览器窗口
window.alert
window.innerHeight等属性和方法
Navigatot 封装了浏览器的信息
navigator.platform
navigator.appName Navigator可能会被人为修改，不建议用之中的属性判断和编写code
screen 代表屏幕
screen.width screen.height
location 代表当前页面的URL信息
location.host location.reload()
location.assign('url') //设置新的地址
history 获取浏览器的历史记录
history.forward() history.back()

DOM

浏览器实际上就是一个DOM树，我们需要对它其中的一个个div，各种元素进行操作。

获取DOM节点
document.getElementById('id') //最常用的
document.getElementByClassName('class')
document.getElementByTagName('tag')
操作DOM节点
var a = document.getElementById('id') a.innerText='text' a.innerHTML='<strong>text</strong>'
innerHTML可以识别HTML标签
a.style.color='yellow'
还可以操作节点的css属性

删除DOM结点
不能直接删除，要获取父节点，通过父节点删除

var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)

创建DOM节点

var newP = document.createElement('p') //创建一个p标签 
newP.setAttribute('id','newP')
newP.setAttribute('innerText','Hello World')
list.append(newP) //插入DOM结点