总结
2.1 数组
2.2 字符串
2.3 函数
2.4 作用域
2.4 对象
计算机基础
-
编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，最终得到结果的过程。
-
计算机语言：指人与计算机之间的通讯的语言。
-
计算机语言分为机器语言，汇编语言、高级语言。
-
汇编语言只是指令采用英文缩写和指令符，更容易识别和记忆。
-
高级语言：包括c语言、c++、java、c#、php、javascript等。
-
编程语言有很强的的逻辑和行为能力，是主动的，标记语言（html）不用于向计算机发出指令，常用于格式化链接，是用来被读取的，是被动的。
-
计算机硬件（输入设备、输出设备、cpu、硬盘、内存），软件（系统软件、应用软件）
-
数据存储单位
大小关系：bit < byte < kb < GB < TB<.....
- 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）
- 字节(Byte)：1B = 8b
- 千字节(KB)：1KB = 1024B
- 兆字节(MB)：1MB = 1024KB
- 吉字节(GB): 1GB = 1024MB
- 太字节(TB): 1TB = 1024GB
计算机运行软件的过程：
1）. 打开某个程序时，先从硬盘中把程序的代码加载到内存中
2）. CPU执行内存中的代码
10. javascript是一种运行在客户端的脚本语言（）。
11. ### JavaScript的作用
- 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
- 浏览器分为渲染引擎（内核）用来解析HTML和CSS、js引擎（解释器，逐行解释执行）用来解读网页中的js代码。
10.js组成：ECMAScript（基础语法）、DOM（文档模型，元素操作）、BOM(浏览器对象模型) - 文档对象模型**（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- 浏览器对象模型**(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
- prompt（）输入框 alert警示框 输出的 console.log控制台输出给程序员看的
JS语法
变量
- 变量就是装数据的容器，是在内存中申请存放数据的空间
- 变量的数据类型只有程序在运行过程中，根据等号右边的值来确定的。js是动态语言，变量的数据类型是可以变化的。
- js数据类型分为简单数据类型，字符型。布尔型。
- isNaN（）用来判断变量是否是非数字。
- 字符串string单引号 ；通过length属性检测字符串长度；
- 变量和字符串相连引引加加
- boolean布尔型true1、false0，
- undefined未定义数据类型，null空值，NaN非数字的。
- 数字转换字符串①num.tostring②string（num）③num+‘’。
- 字符串转换为数字①parseInt②parseFloat③Number（）④使用运算符减除乘等于。
- 转换为布尔型boolean
运算符
- 运算符：算数运算符、递增递减运算符、比较运算符、逻辑运算符、赋值运算符。
- 前置递增、先自加，后运算。后置递增先原值运算后自加。单独使用运行结果相同。
- 逻辑与&&and、逻辑或||or、逻辑非！not。
4.
流程控制
- 流程控制就是来控制我们代码按照什么结构来执行，分为顺序结构、分支结构、循环结构。
- if语句里：三元表达式由三元运算符？：组成的式子。条件表达式 ？ 表达式1 ： 表达式2 。 如果条件表达式结果为真则返回表达式1的值，如果是假则返回表达式2的值。
- 分支语句：if else语句 、switch语句（针对特定值）。
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')
}
- 循环语句：for循环（初始化变量、条件表达式、操作表达式）
- while循环（条件表达式）
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)
- continue退出本次循环break退出整个循环
数组
- 数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式 。
- 创建数组的两种方式
// 字面量方式
let arr = []
// new Array()
let arr = new Array()
- 检测是否为数组：
1. isArray()方法
let arr = []
let flag = Array.isArray(arr)
console.log(flag); // true
2. instanceof方法 可以判断一个对象是否是某个构造函数的实例
let istrue = arr instanceof Array
console.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; i<this.length; i++) {
sum += 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); // 1
let 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))
</script>
```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 = null
temp = arr[i]
arr[i] = arr[j]
arr[j] =temp
}
}else if(flag == 'b-a') {
if(arr[i] < arr[j]) {
var temp = null
temp = 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); // jfkd
let 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 = 2
demoSon();
}
demo();
// 函数预解析
// var num;
// function demo() {
// var num;
// function demoSon() {
// num = 3;
// }
// console.log(num);
// num = 2;
// demoSon();
// }
// num = 1;
// demo();
作用域
- JavaScript作用域 ： 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突。
- 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量。
- 如果在函数内部 没有声明直接赋值的变量也属于全局变量。
- 从执行效率来看全局变量和局部变量
- 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
- 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
- 预解析：
- 我们js引擎运行js 分为两步： 预解析 代码执行
- 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
- 代码执行 按照代码书写的顺序从上往下执行
- 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
- 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
- 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
对象
- 对象是由属性和方法组成的。
- 使用对象字面量创建对象
var obj = {}; // 创建了一个空的对象
var obj = {
uname: '张三疯',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');
}
}
- 利用 new Object 创建对象
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…in 语句用于对数组或者对象的属性进行循环操作
for (var k in obj) {
console.log(k); // k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值
}
我们使用 for in 里面的变量 我们喜欢写 k 或者 key
内置对象
1. Math对象
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; }
DOM
- 根据id获取元素
getElementByld通过 驼峰命名法 ，返回元素对象或null。 - 根据标签名
getElementsByTagName，获取的是相同元素名（‘li’）以伪数组的方式存储。是一个对象的集合。
H5新增获取元素：getElementsByClassName根据类名获得某些元素集合，querySelector返回指定选择器的第一个元素对象querySelectorAll()返回指定选择器的所有元素对象集合
1.获取body 元素
var bodyEle = document.body;
2.获取html 元素
var htmlEle = document.documentElement;
事件
- 执行事件步骤:
- 获取事件源 ,
- 绑定事件 注册事件,
- 添加事件处理程序
操作元素
-
修改元素内容：
- innerText 不识别盒子内html标签 非标准 去除空格和换行，
- innerHTML 识别html标签 W3C标准 保留空格和换行的
- 这两个属性是可读写的 可以获取元素里面的内容
-
修改元素属性： src、href、id、alt、title
表单属性操作：type、value、checked、selected、disabled 样式属性操作： 通过js修改元素的大小、颜色、位置 -
自定义属性操作：
- 获取属性值：
element.getAttribute('属性’) - 设置属性值：
element.setAttribute('属性’， ‘值’)； - 移出属性：
element.romoveAttribute('属性’)
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示
- 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
- 元素节点node type为1；属性节点node type为2；文本节点node type为3（包括文字、空格、换行）
- 父级节点node.parentNode 所有子节点parentNode.childNodes 子元素节点parentNode.children(非标准，重点掌握）
- 创建节点
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 属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
// 添加类名
focus.classList.add('current');
// 移除类名
focus.classList.remove('current');
// 切换类
focus.classList.toggle('current');
DOM事件流
- DOM 事件流会经历3个阶段： 捕获阶段、当前目标阶段、冒泡阶段 。
- 事件对象属性和方法：
e.target返回触发事件对象
e.type返回事件类型
e.preventDefault()该方法阻止默认事件默认行为
e.stopPropagation()阻止冒泡标准。
- target 和 this 的区别
- this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
- e.target 是事件触发的元素。
4.移除事件：
box.removeEventListener('click', myFun)
常用的键盘事件：
- onkeyup某个键盘松开时触发
- onkeydown某个键盘被按下时触发
- onkeypress某个键盘被按下时触发，不识别功能键，区分大小写。
- 三个的执行顺序down>press>up
BOM
- BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
- DOM和BOM的区别：
- DOM是文档对象模型，顶级对象是document，主要学习的是操作页面元素。是W3c标准规范。
- BOM是浏览器对象模型，，顶级对象是window。bom学习浏览器窗口交互一些对象。
- BOM 比 DOM 更大，它包含 DOM。
window对象：
//一、 入口函数
window.onload = function() {
}
window.addEventListener('load', function() {
})
// 二 、调整窗口大小触发事件
window.onresize = function(e) {
console.log(123);
}
window.addEventListener('resize', function() {
console.log(456);
})
// 三、定时器
// 循环打印123
let timer = setInterval(() => {
console.log(123);
}, 1000);
// 清除定时器
clearInterval(timer)
// 只打印一次
setTimeout(() => {
console.log(456);
}, 1000)
location对象：
navigator对象
console.log(window.navigator)
history对象
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() 编码后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据sessionStorage.setItem(key, value)；
获取数据sessionStorage.getItem(key)
删除数据sessionStorage.removeItem(key)
清除数据sessionStorage.clear()
window.localStorage
1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
JS高级
面向对象
- 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
- 可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象。
- 利用super 调用父类的构造函数super 必须在子类this之前调用。
构造函数
- 静态成员和实例成员。
- 构造函数原型：构造函数通过原型分配的函数是所有对象所共享的。
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 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性
不允许在修改第三个参数里面的特性 默认为false
configurable: 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);
- 严格模式：严格模式可以应用到整个脚本或个别函数中。因此在使用时，我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。
- 闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
- 作用：延伸变量的作用范围。
- 递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数
**注意：**递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（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]/i
console.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 都返回为true
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何
一个字母返回 true
如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
- 大括号 量词符. 里面表示重复次数
- 中括号 字符集合。匹配方括号中的任意字符.
- 小括号表示优先级
- 量词符: 用来设定某个模式出现的次数。* 相当于 >= 0 可以出现0次或者很多次 。+ 相当于 >= 1 可以出现1次或者很多次。 ? 相当于 1 || 0。{3 } 就是重复3次。{3, } 大于等于3。{3, 16} 大于等于3 并且 小于等于16。
//{} 匹配3-6次
let newReg =/^[2]{3,6}$/
console.log(newReg.test(222)) // true
//* 大于0次
let newReg =/^[2]*$/
console.log(newReg.test(00)) // false
console.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
- replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。//全部替换g ， //忽略大小写i
var str = 'aAbcAba';
var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"
ES6新增
- ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
- 使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
- 使用let关键字声明的变量没有变量提升。使用let关键字声明的变量具有暂时性死区特性。
- 使用const关键字声明的常量具有块级作用域，使用const关键字声明的常量必须赋初始值。
- let、const、var 的区别
- 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
- 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。
- 解构赋值 ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。
- 箭头函数：() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
const fn = () => {}//代表把一个函数赋值给fn。
箭头函数不绑定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); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
es6的内置对象扩展
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.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);
- 将类数组或可遍历对象转换为真正的数组。
- 构造函数方法：Array.from()，将伪数组或可遍历对象转换为真正的数组。
- 实例方法：find()用于找出第一个符合条件的数组成员，如果没有找到返回undefined。
var ary = [{
id: 1,
name: '张三'
}, {
id: 2,
name: '李四'
}];
let target = ary.find(item => item.id == 3);
- 实例方法：findindex（）用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。
let ary = [10, 20, 50];
let index = ary.findIndex(item => item > 15);
console.log(index)
- 实例方法：includes()，判断某个数组是否包含给定的值，返回布尔值。
- String的扩展方法：模板字符串模板字符串中可以解析变量，模板字符串中可以换行，在模板字符串中可以调用函数。
- 实例方法：startsWith() 和 endsWith()
- startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
- endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值。
- 实例方法：repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串。
11. Set 数据结构
- add(value)：添加某个值，返回 Set 结构本身
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
- has(value)：返回一个布尔值，表示该值是否为 Set 的成员
- clear()：清除所有成员，没有返回值
- Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
2499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
