1.计算机基础
2.JS语法
2.1 数组
2.2 字符串
2.3 函数
2.4 作用域
2.4 对象
3.内置对象
4.DOM
5.BOM
6.触屏事件
7.本地存储
8.JS高级
8.1 正则表达式
9.ES6新增
编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,最终得到结果的过程。
计算机语言:指人与计算机之间的通讯的语言。
计算机语言分为机器语言,汇编语言、高级语言。
汇编语言只是指令采用英文缩写和指令符,更容易识别和记忆。
高级语言:包括c语言、c++、java、c#、php、javascript等。
编程语言有很强的的逻辑和行为能力,是主动的,标记语言(html)不用于向计算机发出指令,常用于格式化链接,是用来被读取的,是被动的。
计算机硬件(输入设备、输出设备、cpu、硬盘、内存),软件(系统软件、应用软件)
数据存储单位
大小关系:bit < byte < kb < GB < TB<.....
计算机运行软件的过程:
1). 打开某个程序时,先从硬盘中把程序的代码加载到内存中
2). CPU执行内存中的代码
10. javascript是一种运行在客户端的脚本语言()。
11. ### JavaScript的作用
var choice = prompt('请输入数字1-4')choice = parseInt(choice);switch(choice) {case 1:alert("数字1");break;case 2: alert('数字2');break;case 3: alert('数字3')break;case 4: alert('数字4')break;default: alert('请输入数值1-4')}
var add = prompt('请输入用户名:');var mima = prompt('请输入密码:');while (add != 'admin' || mima != '123456') {add = prompt('请输入用户名:');mima = prompt('请输入密码:');}alert('登录成功');
// do ... while语句var num = 0;do {console.log(num)document.write(num)num++;}while(num < 10)
// 字面量方式let arr = []// new Array()let arr = new Array()
1. isArray()方法let arr = []let flag = Array.isArray(arr)console.log(flag); // true2. instanceof方法 可以判断一个对象是否是某个构造函数的实例 let istrue = arr instanceof Arrayconsole.log(istrue); // true
1. push方法 末尾添加一个或多个元素let arr = new Array()arrL = arr.push(3,4,5,6) // 返回数组的长度console.log(arr) // [3,4,5,6]2. unshift方法 向数组的开头添加元素let arrL1 = arr.unshift(1,2) // 返回数组长度console.log(arr) // [1,2,3,4,5,6]3. pop方法 删除数组最后一个元素let arrL2 = arr.pop() // 返回删除的元素4. shift方法 删除数组的第一个元素let arrL3 = arr.shift() // 返回删除的元素console.log(arrL3)
// 默认升序排列newArr.sort()// 降序排列newArr.sort(function(a,b) {return b-a;})// 升序排列newArr.sort(function(a,b) {return a-b;})
一、数组的实例方法// find方法查询let target = arr.find((item, index) => item.id == 1);// findIndex查询符合条件的数据索引let tar = ary.findIndex(item => item > 4);// includes查询是否包含var flag = ary.includes(4);console.log(flag);二、数组的原型方法Array.prototype.sum = function() {var sum = 0;console.log(this)for(i=0; isum += this[i];}return sum;}var arr = [1,2,3,4];console.log(arr.sum());三、数组的索引方法let arrIndex = [1,2,3,4]let index = arrIndex.indexOf(2)console.log(index); // 1let index1 = arrIndex.lastIndexOf(3)console.log(index1); //2四、数组合并let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];let arr3 = [...arr1, ...arr2];console.log(arr3);五 、遍历数组:arr.forEach(function(value, index, array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组})//相当于数组遍历的 for循环 没有返回值六、 filter过滤数组:var arr = [12, 66, 4, 88, 3, 7];var newArr = arr.filter(function(value, index,array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组return value >= 20;});console.log(newArr);//[66,88] //返回值是一个新数组七 、some 查找数组中是否有满足条件的元素 var arr = [10, 30, 4];var flag = arr.some(function(value,index,array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组return value < 3;});
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环八、 数组的splice方法var arr = [1, 3, 4, 5];arr.splice(1, 1);从索引为1开始删除1个,arr.splice(0, 2, "andy", "andi");从索引为0开始修改两个值;arr.splice(1, 0, 6, 7);从索引为1前面增加两个值
九、 数组的去重第一种方法 用索引过滤数组var newArr = arr.filter(function(value, index, arr) {console.log(arr.indexOf(value));return arr.indexOf(value) === index;})第二种方法 删除多余function newArr(arr) {for (var i = 0; i < arr.length; i++) {for( j = i + 1; j < arr.length; j++) {if (arr[i] === arr[j]) {arr.splice(j, 1)j--}}}return arr}console.log(newArr(arr))第三种 创建新数组function newArr(arr) {var Array = []for (var i = 0; i < arr.length; i++) {if (Array.indexOf(arr[i]) == -1) {Array.push(arr[i])}}return Array}console.log(newArr(arr))利用set 去重function newArr(arr) {// new Set返回的是一个对象// Array.from 把对象转化为数组return Array.from(new Set(arr))}console.log(newArr(arr))```css// 冒泡排序let arr = [3,4,2,5,8,6,1]function Sort(arr, flag) {for(var i = 0; i < arr.length; i++) {for(var j = i + 1; j < arr.length; j++) {if(flag == 'a-b') {if(arr[i]>arr[j]) {var temp = nulltemp = arr[i]arr[i] = arr[j]arr[j] =temp}}else if(flag == 'b-a') {if(arr[i] < arr[j]) {var temp = nulltemp = arr[i]arr[i] = arr[j]arr[j] =temp}}}}return arr}console.log(Sort(arr,'b-a'))
字符方法charAt()
根据索引查询该索引位置的字符。
字符串操作方法concat()
拼接字符串,括号内跟要拼接的字符串,可以跟多个参数,用逗号隔开。
slice()
第一个参数是截取字符串开始位置,第二个参数是字符串结束字符的后面的位置。
substr()
第一个参数是开始截取的位置,第二个是返回字符的个数。
indexof()
根据字符返回位置(索引),没找到返回-1。
trim()
去掉字符串开始位置和结束位置的空格。
toLowerCase() toUpperCase()
字符串转换大小写。
replace()
第一个参数是被替换的字符,第二个参数是替换用的字符串。
split()
第一个参数是指定分割的字符,用来分割字符串,转化为数组,第二个参数指定分割数组的大小
字符串的不可变:当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。
let str = 'adjfkdf'// indexOf查询字符的索引let index = str.indexOf('j')console.log(index) // 2// lastIndexOf 查询字符的最后索引let lastIndex = str.lastIndexOf('f')console.log(lastIndex);// charAt 返回指定字符let id = str.charAt(1)console.log(id) // d// stustr 截取字符串第一个参数截取开始位置,第二个参数截取长度let str1 = str.substr(2,4)console.log(str1); // jfkdlet str2 = str.replace('adj', 'abc')console.log(str2); // abcfkdf// split 将字符串分隔为数组let newstr = str.split('')console.log(newstr); // ["a", "d", "j", "f", "k", "d", "f"]
定义:函数就是封装了一段可以被重复执行调用的代码块 目的: 就是让大量代码重复使用。
函数使用分为两步: 声明函数 和 调用函数。
在声明函数的小括号里面是 形参 (形式上的参数),在函数调用的小括号里面是实参(实际的参数。
(1) 多个参数之间用逗号隔开
(2) 形参可以看做是不用声明的变量。
return 终止函数,return 后面的代码不会被执行,如果函数没有 return 则返回undefined。
当不确定有多少个参数传递的时候,可以用 arguments 来获取,arguments 对象中存储了传递的所有实参。arguments展示形式是一个伪数组。
function getMax() { // arguments = [1,2,3]var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;}
.函数的两种声明方式:
// 声明定义方式
function fn() {...}
// 调用
fn();
调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
函数调用的代码必须写到函数体后面
var num = 1;function demo() {console.log(num);function demoSon() {num = 3;}var num = 2demoSon();}demo();// 函数预解析// var num;// function demo() {// var num;// function demoSon() {// num = 3;// }// console.log(num);// num = 2;// demoSon();// }// num = 1;// demo();
var obj = {}; // 创建了一个空的对象var obj = {uname: '张三疯',age: 18,sex: '男',sayHi: function() {console.log('hi~');}}
var obj = new Object(); // 创建了一个空的对象obj.uname = '张三疯';obj.age = 18;obj.sex = '男';obj.sayHi = function() {console.log('hi~');}
构造函数泛指某一大类,对象是指具体事物。 利用构造函数创建对象,通过 new 关键字创建对象的过程我们也称为对象实例化
构造函数的语法格式
function 构造函数名() {this.属性 = 值;
this.方法 = function() {}}new 构造函数名();
function Star(uname, age, sex) {this.name = uname;this.age = age;this.sex = sex;this.sing = function(sang) {console.log(sang);}}var ldh = new Star('刘德华', 18, '男');
for (var k in obj) {console.log(k); // k 变量 输出 得到的是 属性名console.log(obj[k]); // obj[k] 得到是 属性值}我们使用 for in 里面的变量 我们喜欢写 k 或者 key
1) Math 对象不是构造函数,它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等)可以使用 Math 中的成员。
属性、方法名 | 功能 |
---|---|
Math.PI | 圆周率 |
Math.floor() | 向下取整 |
Math.ceil() | 向上取整 |
Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
Math.abs() | 绝对值 |
Math.max()/Math.min() | 求最大和最小值 |
Math.random() | 获取范围在[0,1)内的随机值 |
2)获取指定范围内的随机整数function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
getElementByld
通过 驼峰命名法 ,返回元素对象或null。getElementsByTagName
,获取的是相同元素名(‘li’)以伪数组的方式存储。是一个对象的集合。getElementsByClassName
根据类名获得某些元素集合,querySelector
返回指定选择器的第一个元素对象querySelectorAll()
返回指定选择器的所有元素对象集合1.获取body 元素var bodyEle = document.body;
2.获取html 元素var htmlEle = document.documentElement;
修改元素内容:
修改元素属性: src、href、id、alt、title
表单属性操作:type、value、checked、selected、disabled样式属性操作: 通过js修改元素的大小、颜色、位置
自定义属性操作:
element.getAttribute('属性’)
element.setAttribute('属性’, ‘值’);
element.romoveAttribute('属性’)
document.createElement('tagName‘)
node.appendChild(child)
createdElement(tagName) //创建节点createTextNode() // 创建文本节点appendChild(nodde) // 追加节点insertBefore() // 在元素内部之前插入节点,第一个参数是新节点// ,第二个是插入到哪个子节点前面replaceChild() // 替换子节点removeChild() // 删除子节点cloneNode() // 加true深度克隆
var ul = document.querySelector('ul');ul.appendChild(li);
// 添加节点 node.insertBefore(child, 指定元素);)添加到前面
var lili = document.createElement('li');ul.insertBefore(lili, ul.children[0]);
console.log(div.nextSibling);下一个兄弟节点console.log(div.previousSibling);前一个兄弟节点
console.log(div.nextElementSibling);兄弟元素节点console.log(div.previousElementSibling);
classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。
// 添加类名
focus.classList.add('current');
// 移除类名
focus.classList.remove('current');
// 切换类
focus.classList.toggle('current');
e.target返回触发事件对象 e.type返回事件类型 e.preventDefault()该方法阻止默认事件默认行为e.stopPropagation()阻止冒泡标准。
4.移除事件:
box.removeEventListener('click', myFun)
常用的键盘事件:
//一、 入口函数window.onload = function() {}window.addEventListener('load', function() {})
// 二 、调整窗口大小触发事件window.onresize = function(e) {console.log(123);}window.addEventListener('resize', function() {console.log(456);})
// 三、定时器// 循环打印123let timer = setInterval(() => {console.log(123);}, 1000);// 清除定时器clearInterval(timer) // 只打印一次setTimeout(() => {console.log(456);}, 1000)
console.log(window.navigator)
btn.onclick = function() {//点击后退window.history.go(-1)}
元素偏移量offSet系列
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位
offset系列 经常用于获得元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得
offset.left/offset.top相对于定位父元素的距离,父元素没有定位则相对于浏览器的距离
offsetWidth/offsetHeight包含元素的内边距边框内容的长度
clientLeft/clientTop测出元素边框的宽度
clientWidth/clientHeight获取元素内容和内边距的大小,不包含滚动条
scrollTop/scrollLeft获取元素滚动时被卷曲的长度
scrollWidth/scrollHeight获取元素可滚动区域内的实际高度
window.pageYOffset获取页面被卷曲的头部距离
btn.ontouchstart = function(e) {// 触摸屏幕的所有手指列表console.log(e.touches);}
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大,sessionStorage约5M、localStorage约20M
4、只能存储字符串,可以将对象JSON.stringify() 编码后存储
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据sessionStorage.setItem(key, value)
;
获取数据sessionStorage.getItem(key)
删除数据sessionStorage.removeItem(key)
清除数据sessionStorage.clear()
1、声明周期永久生效,除非手动删除 否则关闭页面也会存在
2、可以多窗口(页面)共享(同一浏览器可以共享)
JavaScript 规定,每一个构造函数都有一个prototype 属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。
3. 对象原型:对象都会有一个属性 proto 指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 proto 原型的存在。
__proto__对象原型和原型对象 prototype 是等价的
proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype。
4. constructor构造函数:对象原型( proto)和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指回构造函数本身。
5. 原型链:
每一个实例对象又有一个__proto__属性,指向的构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链
构造函数的prototype属性指向了构造函数原型对象
2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数
只要是对象就有__proto 原型, 指向原型对象,
8. 我们Star原型对象里面的__proto__原型指向的是 Object.prototype
9. 我们Object.prototype原型对象里面的__proto__原型 指向为 null。
10.在构造函数中,里面this指向的是对象实例 ,原型对象函数里面的this 指向的是 实例对象。
var obj = {id: 1,pname: '小米',price: 1999};Object.defineProperty(obj, 'address', {value: '中国山东蓝翔技校xx单元',// 如果只为false 不允许修改这个属性值 默认值也是falsewritable: false,// enumerable 如果值为false 则不允许遍历, 默认的值是 falseenumerable: false,// configurable 如果为false 则不允许删除这个属性不允许在修改第三个参数里面的特性 默认为falseconfigurable: false});
// Object.keys用于获取对象自身所有的属性var obj = {id: 1,pname: '小米',price: 1999,num: 2000};var arr = Object.keys(obj);console.log(arr);//id pname price num
// 函数的定义方式// 1. 自定义函数(命名函数) function fn() {};// 2. 函数表达式 (匿名函数)var fun = function() {};// 3. 利用 new Function('参数1','参数2', '函数体');var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);// 4. 所有函数都是 Function 的实例(对象)console.dir(f);// 5. 函数也属于对象console.log(f instanceof Object);
**注意:**递归函数的作用和循环效果一样,由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件return。
// 字面量方式创建var reg1 = /^[123]$/console.log(reg1.test(1))// 匹配[]内的任意一个数字开头结尾// new RegExp对象创建var reg2 = new RegExp('^[123]$')console.log(reg2.test(3))// i的使用 i不区分大小写var reg3 = /^[wer]/iconsole.log(reg3.test('W')) // ^的使用查找不包含[]内的数字var reg4 = /^[^123]/console.log(reg4.test(5)) // \d 查找数字var reg5 = /^\d$/console.log(reg5.test(4))// \D 查找所有字母var reg6 = /^\D/console.log(reg6.test('e'))
var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为truevar rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 truevar rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 truevar reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
//{} 匹配3-6次let newReg =/^[2]{3,6}$/console.log(newReg.test(222)) // true//* 大于0次let newReg =/^[2]*$/console.log(newReg.test(00)) // falseconsole.log(newReg.test(2)) // true// + 大于等于一次let newReg =/^[2]+$/console.log(newReg.test(0)) // false// ? 匹配1或0次let newReg =/^[2]?$/console.log(newReg.test(22)) // false
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
const obj = { name: '张三'} function fn () { console.log(this);//this 指向 是obj对象return () => { console.log(this);//this 指向 的是箭头函数定义的位置,那么这个箭头函数定义在fn里面,而这个fn指向是的obj对象,所以这个this也指向是obj对象} } const resFn = fn.call(obj); resFn();箭头函数中不绑定this,箭头函数中的this指向是它所定义的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁
var age = 100;var obj = {age: 20,say: () => {alert(this.age)}
}obj.say();//箭头函数this指向的是被声明的作用域里面,
而对象没有作用域的,所以箭头函数虽然在对象中被定义,
但是this指向的是全局作用域
function sum (first, ...args) {console.log(first); // 10console.log(args); // [20, 30] }sum(10, 20, 30)
let ary = [1, 2, 3];...ary // 1, 2, 3console.log(...ary); // 1 2 3,相当于下面的代码console.log(1,2,3);
// 方法一 let ary1 = [1, 2, 3];let ary2 = [3, 4, 5];let ary3 = [...ary1, ...ary2];// 方法二 ary1.push(...ary2);
var ary = [{id: 1,name: '张三'}, {id: 2,name: '李四'}];let target = ary.find(item => item.id == 3);
let ary = [10, 20, 50];let index = ary.findIndex(item => item > 15);console.log(index)
repeat方法表示将原字符串重复n次,返回一个新字符串。
11. Set 数据结构