比较运算符:
浮点数问题:
console.log((1/3)===(1-2/3))
结果为false,尽管数值是都等于1/3
尽量避免使用小数计算,因为精度问题
java的数值必须是相同类型的对象,js中不一样,数组课存放不同类型
var arr = [1,2,3,'hello',null,true]
取数组下标如果越界了,只会提示为定义undefined
对象
java创建对象:Person p = new Person("zhang",19)
js创建对象:var Person = {name:'zhang',age:19,arr:[...]}
js的对象用大括号,每个属性用逗号隔开
局部变量
前提:idea需要设置支持ES6语法
建议都是用let去定义(之前定义局部变量都是直接i=1),现在要let i= 1
‘use strict’:(放在第一行)严格检查模式,预防js的随意性导师产生的一些问题
'use strict'
let i = 1
模板字符串
//拼接两个变量
let name = "zhang";
let age = 19;
let msg = '你好呀,${name}' // 显示为你好呀,zhang
1、长度
arr.length
2、indexOf(),通过元素获得下标索引
arr.indexOf(2) //找到元素为2的下标
3、slice(),截取数组的一部分,返回一个新数组,类似于String中的substring
4、push()、pop() 在尾部操作元素
push(): 压入元素到尾部
pop(): 弹出尾部的一个元素
5、unshift(),shift() 在头部操作
unshift: 压入元素到头部
shift: 弹出头部的一个元素
6、sort() 排序
7、reverse() 元素反转
8、concat() 拼接元素
arr = ['a','b','c']
arr.concat([1,2,3]) //拼接新数组
打印arr.concat([1,2,4])为['a','b','c',1,2,3]
但是打印原数组arr则跟之前一样:['a','b','c']
注意:concat并没有修改数组,只是会返回新数组
9、join 连接符 打印拼接数组,使用特定的字符串连接
arr = ['a','b','c']
arr.join("-")
->"a-b-c"
10、javascript中所有的键都是字符串,值是任意对象
1、对象定义
var person = {
name:"zhang",
age:3,
}
2、添加属性值
person.tianjia = "tianjia"
3、 判断属性值是否在这个对象 ‘xxx’ in xxx
'age' in person //true
1、if判断
2、while循环&for循环
3、forEach循环
var age = [12,43,64,7,8]
age.forEach(function (value){
console.log(value)
})//打印数组
4、forin循环
//for (var index in arr){
if (age.hasownProperty(num)) {
console.log("存在")
console.log(age[num])
}
}
1、Map
var map = new Map([['tom',10],['jack',20],['haha',30]]);
var name = map.get('tom'); // 通过key获得value
map.set('admin',12); // 新增或修改
map.delete('tom'); // 删除元素
2、Set 无序不重复的集合
set.add(2); //添加
set.delete('tom') // 删除
console.log(set.has(3));// 是否包含某个元素
1、数组遍历:
//通过forof遍历,forin遍历时用下标
var arr = [3,4,5]
for(var x of arr){
console.log(x)
}
2、map集合遍历
var map = new map(['jack',20],['haha',10],['tom',10])
for(let x of map){
console.log(x)
}
3、set集合遍历
var set = new set([5,6,7]) //集合记得用[]包围
for(let x of set){
console.log(x)
}
定义方式一
绝对值函数
function abs(x){
return x;
}else{
return -x;
}
一旦执行到return代表函数结束,返回结果
定义方法二
var abs = function(x){
return x;
}else{
return -x;
}
function(x){}是一个匿名函数,可以吧结果赋值给abs,通过abs就可以调用函数
方法一和方法二等价
调用函数:
abs(10)
abs(-10)
**参数问题:**javascript可以传任何个参数,也可以不传参数
参数进来是否存在的问题?假设不存在参数,如何抛出异常?
var abs = function(x){
//手动抛出异常来判断
if (typeof x !== 'number') {
throw 'not a number';
}
if (x>=o) {
return x;
}else{
return -x;
}
}
arguments对象:
加入函数的实参没有写多个,但使用时传入了多个参数,使用arguments对象可以把这多个参数用数组返回,argument对象其实就是传入的所有参数的数组。
特性:
1.arguments对象和Function是分不开的。
2.因为arguments这个对象不能显式创建。
3.arguments对象只有函数开始时才可用。
使用方法:
虽然arguments对象并不是一个数组,但是访问单个参数的方式与访问数组元素的方式相同
例如:
arguments[0],arguments[1],。。。arguments[n];
在js中 不需要明确指出参数名,就能访问它们,例如:
function test() {
var s = "";
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
s += arguments[i] + ",";
}
return s;
}
test("name", "age");
//结果为name,age
rest参数
例如:函数定义了两个参数,但是传入了第三个参数,要怎么取出第三个参数呢?
function test(a,b){
console.log('a->'+a);
console.log('b->'+b);
//以前的方法取第三个元素:
if (arguments.length>2) {
for(var i = 2; i<arguments.length;i++){
console.log(arguments[i])
}
}
}
//现在的方法(rest参数):在函数中定义rest参数
function test1(a,b,...rest){
console.log('a->'+a);
console.log('b->'+b);
console.log(rest);
}
变量的作用域
function a(){
var x = 1;
//内部函数可以访问外部函数的成员,反之不行
function a1(){
var y = x +1; //2
}
//外部访问了内部函数的变量,会不行
var z = y+1; //报错
}
变量的一般使用
一般都先定义,后调用
function zhang(){
var x,y,z;
//之后再赋值调用
}
全局对象window
var x ='xxx';
window. alert(x);
var o1d_ _alert = window. alert;
//o1d_ alert(x);
window.alert = function () {};
//发现alertO 失效了
window. alert(123);
//恢复
window.alert = o1d_ _alert;
window. alert(456);
局部作用域let
ES6let关键字,解决局部作用域冲突问题,现建议大家都用let去定义局部变量
function aaa() {
for(vari=0;i<100;i++){
console.log(i)
}
console.log(i+1); //问题? i 出了这个作用域还可以使用
}
//使用let后
function aaa() {
for(leti=0;i<100;i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
常量const
在ES6之前,定义常量使用全部大写字母命名的变量就是常量
var PI = '3.14' ;
console.' 1og(PI);
PI = '213'; //可以改变这个值
console.1og(PI);
在ES6之后,用const定义常量
const PI = '3.14';
console.log(PI);
PI = '123'; //报错,常量不允许修改
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var person = {
name: 'zhang';
brith: 1997;
//方法
age: function(){
var now = new Date().getFullYear();
return now - this.brith; //this是默认指向调用它的那个对象,这里值person
}
}
//属性调用
person.name;
//方法调用,方法一定要带()
person.age();
apply方法
apply方法是可以控制this指向的,该方法有两个参数,第一个是getArg要使用的是那个对象,第二个是数组
function getAge(){
var now = new Date().getFullYear();
return now - this.brith;
}
getAge.apply(person,[]); //this指向了person,参数为空
标准对象
typeof 123
“number”
typeof ‘123’
‘string’
typeof true
“boolean”
typeof NaN
“number”
typeof []
"object’
typeof {}
“object”
typeof Math. abs
“functi on”
typeof undefined
“undefined”
基本使用
var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
now. getMonth(); //月0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutes(); //分
now. getseconds(); //秒
now. getTimeO); //时间戳全世界统一1970 1.1 0:00:00 毫秒数
console. log(new Date(1578106175991)) //时间戳转为时间
转换
now = new Date (1578106175991)
sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now. toLocalestring //注意,调用是一个方式,不是一一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
"2020/1/4上午10:49:35"
now. toGMTString()
'Sat, 04 Jan 2020 02:49:35 GMT"
早期,所有数据传输习惯使用XML文件!
json字符串和js对象的转换
var user = {
name :
"qinjiang",
age: 3,
sex: '男'
}
//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user);
//输出为{"name" : "qinjiang","age":3,"sex" :"男"}
//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"qinjiang" , "age" :3,"sex":"男"}');
//输出为{name:"qingjiang",age:3,sex:"男"}
json和js对象的区别:
var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'
1、原型对象
当创建一个新函数时,系统会根据一组特定的规则为函数创建一个prototype属性,该属性会指向一个名为原型对象的对象,在默认情况下,该对象会自动生成一个构造函数(constructor),该构造函数是一个指向函数的指针。而在原型对象中,除了有这个构造函数,我们还可以添加其他的属性和方法。
通俗来讲就是,当我们新建一个函数A时,函数A内部会有一个属性,该属性指向一个对象(名字叫原型对象),而这个对象里面默认有一个构造函数,这个构造函数指向我们最初新建的函数A。然后,我们还可以在原型对象中添加属性和方法
//①默认情况下,构造函数是空的
function Person(){//构造函数首字母大写
}
//②添加属性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(){
alert(this.name);
};
//③定义好构造函数和其他属性方法之后,就可以创建实例了
var person1=new Person();
var person2=new Person();
class关键字是在ES6引入的
1、添加方法
//给student添加一个方法
//1、先定义一个类、属性、方法
class student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
//使用方法
var person = new student('小明');
person.hello();
2、继承
class student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
class xiaoStudent extends student{
constructor(name,grade){
super(name);
this.grade = grade;
}
mygrade(){
alert('我是一个小学生')
}
}
//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);
本质:查看对象原型
原型链
浏览器介绍
JavaScript和浏览器关系?
JavaScript诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型
window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试
Navigator
Navigator,封装了浏览器的信息
navigator . appName
"Netscape"
navigator . appVersion
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML, like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML, like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator. platform
"Win32"
大对数我们不会使用navigator对象,因为会被认为修改
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1920
screen.Height
1080
lacation
代表当前页面的URL信息
location属性:
document
document代表当前的页面,HTML DOM文档树
//获取具体的文档树节点:
<d1 id="app">
<dt> Javadt>
<dd> JavaSEdd>
<dd> JavaEEdd>
d1>
<script>
var d] = document. getElementById(' app ');
script>
//获取cookie
document.cookie
//劫持cookie原理:把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'>script>
//服务器端可以设置cookie为httpOnly
history
history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
核心
浏览器网页就是一个Dom树形结构(与div包围的标签差不多)
<div>
<h1>标题一h1>
<p id='p1'>p1p>
<p class='p2'>p2p>
div>
<script>
//对应css选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
var p1 = document.getElementByID('p1');
var p2 = document.getElementByclassName('p1');
var father = document.getElementByID('father');
var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
script>
这是原生代码,之后都用jQuery
<div id="id1">
div>
<script>
var id1 = document.getElementByID('id1')
script>
id1.innerText = '123' //innerText方法修改文本内容
id1.innerHTML = '<strong>123strong>' //innerHTML解析HTML超文本的 可以修改id的样式
id1.style.color = 'red' //style.什么:style方法修改css样式。即可以在js里操作修改样式
id1.style.padding = '2em' //属性使用字符串包裹
删除节点的步骤: 先获取父节点,通过父节点删除自己
<div>
<h1>标题一h1>
<p id='p1'>p1p>
<p class='p2'>p2p>
div>
<script>
var self = document.getElementByID('p1');
var father = p1.parentElement; //找到p1的父节点
father.removechild(self) //通过父节点使用removechild删掉自己(只有标记为id选择器的节点才可以删除
script>
注意:删除多个节点是,children是时刻变化的,不能直接father.removechild(father.children[0])这样从第一个索引开始删
我们获得了某个dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个dom节点以及存在元素了,就不能这么干了,因为会产生覆盖,这个时候就使用追加节点的方法:
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var js = document.getElementByID('js'); //获取想要加入的节点
var list = document.getElementByID('list'); //获取想要加入的父节点
list.appendchild(js); //在list节点下追加子节点
script>
<script>
//第一个方法:通过js创建一个新节点
var new = document.creatElement('p'); //创建一个p标签
new.id = 'new';
new.innerText = 'hello'; //在这个标签上输入文本
list.appendchild(new); //在父节点下加进去
//用第二种方法创建一个有自己属性的标签节点
var myScript = document.creatElement('script');//创建一个script标签节点
myScript.setAttribute('type','text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名,第二个参数为属性值。生成效果为