类
- 使用class关键字来声明一个类，之后以这个类来实例化对象
- 类抽象了队形的公共部分，泛指一大类
- 对象特指某一个通过类实例化的结果
- 创建类
class className{
class body
}
- 构造函数 constructor()，共有属性放在构造函数中进行赋值
- 共有方法写在class body中，类中的所有函数不需要写function，多个方法之间不需要添加逗号
class Star{
constructor(name,age){
this.name=name;
this.age=age;
}
sing(song){
console.log("sing "+song);
}
}
- 对象的创建
new className();
- 类的继承 与java中的继承类似，使用extends关键字
class Father{
constructor（name）{
this.name=name;
}
eat(){
console.log("I eat");
}
}
class Son extends Father{
}
var son = new Son("张三");
var name = son.name;
- super关键字 调用父类的函数（构造函数和普通函数）
- 使用super关键字要在构造函数的最前面要在this之前
class Father {
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y);
}
}
class Son extends Father{
constructor(x,y){
super(x,y);//这里不能用this给对象赋值是因为son对象要调用Father中的sum方法，若用this则调用父类方法时this.x会报undefined
}
}
var son = new Son(2,3);
console.log(son.sum());
- 类中共有的属性和方法一定要加this使用
constructor(name){
super(name);
this.name=name;
this.eat();//不能直接写成eat();
this.btn=document.querySelector("button");
this.btn.btn.onclick=this.sing;//都要加上this
原型
https://blog.csdn.net/qq_45147812/article/details/106219400
ES5新增方法
- 迭代遍历
- array.forEach(function(currentValue,index,arr));//三个参数：数组当前项的值，当前项索引，数组本身
var arr = [1,2,3];
arr.forEach(function(value){ //参数用到哪个写哪个就行
console.log(value);
});
- array.filter(function(currentValue,index,arr));//返回一个新的数组
var newArr = arr.filter(function(value){
return value>1;
});
console.log(newArr);//2,3
- array.some(function(currentValue,index,arr));//返回true或false
var flag = arr.some(function(value){
return value>2;
)};
- 对象方法
- Object.defineProperty() 定义对象中新的属性或修改原有的属性，三个参数：目标对象，属性名，目标属性特性
var obj ={ id:1,name:'小米',price:3999};
Object.defineProperty(obj,'num',{ value:100});//增加num属性，值为100
Object.defineProperty(obj,'price',{ value:4000});//修改price属性
- 使用 Object.defineProperty() 可让某一属性值不可修改或不可删除，不能被遍历等
Object.defineProperty(obj,'id',{
writable:false, //id属性不可被修改
enumerable:false, //不能被遍历（遍历时不显示此属性）
configurable:false //不能被删除
})
- 函数定义的第三种方式，使用 Function创建实例，这种方法的参数必须是字符串格式
- 所有函数都是Function的实例
var f = new Function('console.log("hahaha")');
var fn = new Function('a', 'b' , 'console.log(a+b)');
严格模式
- 在< script>标签最前面或者函数中加上“use strict”开启严格模式
- 严格模式用来解决js中的一些不合理的地方
- 相关规定
- 变量必须用var声明才能使用
- 不能删除用var定义的变量
- 严格模式下全局作用域中函数的this是undefined
- 若构造函数不用new调用则报错
- 函数参数名不允许重复
- if{},for(){}的花括号内不允许写函数
高阶函数
- 对其他函数进行操作的函数，接受函数作为参数或者将函数作为返回值
闭包
- 有权访问另一个函数作用域中变量的函数
- 作用：延伸变量作用范围
- 缺点：占用内存时间长，容易造成内存泄漏
function fn(){
var num =10;
function fun(){
console.log(num);
}
fun();
}
fn();
//若想在fn外面也可访问fn内部的局部变量，可将函数返回
function fn(){
var num =10;
function fun(){
console.log(num);
}
return fun;
}
var f = fn();
f();
- 例子：动态获取li的索引
//未用闭包
var lis = document.getElementsByTagName("li");
for(var i =0;lis.length;i++){
lis[i].num = i;
lis[i].onclick = function(){
console.log(this.num);
}
}
//使用闭包
var lis = document.getElementsByTagName("li");
for(var i =0;i<lis.length;i++){
(function(i){
lis[i].onclick=function(){
console.log(i);
}
})(i);
}
//立即执行函数也称为小闭包，因为立即执行函数会生成一个块级作用域，里面任何一个函数都可以访问对应的i
递归
- 自己调用自己，与java相同
- 必须有退出条件
//利用递归求阶乘
function fn(n){
if(n===1){
return 1;
}
return n*fn(n*1);
}
深拷贝、浅拷贝
- 浅拷贝只拷贝一层，深拷贝拷贝所有
- 浅拷贝可用ES6中的Object.assign(o,obj)
var obj ={
name:"haha",
age:18
}
var o ={};
for(var k in obj){
o[k]=obj[k];//k为属性名，obj[k]为属性值
}
//浅拷贝若遇到属性值是对象会将对象地址拷贝给新对象，而深拷贝会讲嵌套对象的属性依次拷贝过去，不会出现修改新对象旧对象也被修改的情况
function deepCopy(newobj,oldobj){
for(var k in oldobj){
if(oldobj[k] instanceof Array){
newobj[k]=[];
deepCopy(newobj[k],oldobj[k]);
}else if(oldobj[k] instanceof Object){
newobj ={};
deepCopy(newobj[k],oldobj[k]);
}else{
newobj[k]=oldobj[k];
}
}
}
let关键字
- let声明的变量只在所在块中有效（{}中），let在if{}和for{}与var不同，var是全局let是块级
- let的作用就在于防止循环变量变成全局变量
for(var i=0;i<2;i++){
}
console.log(i);//打印2
for(let i=0;i<2;i++){
}
console.log(i);//打印undefined
- 使用let关键字声明不存在声明提升，必须先声明再使用
- 暂时性死区
var a=123;
function c(){
console.log(a);//这里会报错
let a=3;
}
c();
- 面试题
var arr =[];
for(var i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr[0]();//输出2
var arr =[];
for(let i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr[0]();//输出0
const关键字
- 声明常量，值（内存地址）不能被修改
- 声明是必须付出只，否则会报错
const PI = 3.14;
PI = 100;//报错
const arr = [100,200];
arr[0]=0;//不报错，因为没有修改常量的地址
arr=[1,2];//报错
解构
- 数组解构
var arr = [100,200];
var [a,b,c] = arr;
console.log(a);//输出100
console.log(c);//输出undefined
- 对象解构
var person ={
name:"zhangsan",
age:20
}
var {name,age} = person;
console.log(name);//输出zhangsan
var {name:myName,age:myAge} = person;
console.log(myName);//输出zhangsan
箭头函数
- 使用（）=>{}定义函数
- 作用：简化函数定义的语法
- 若函数体中只有一句代码，且执行的是return，可省略花括号和return
- 箭头函数不建立执行上下文，所以箭头函数中的 this 取决于它的外部函数
- 若形参只有一个可以省略小括号
var doubleA = a=>a*2;
console.log(doubleA(5));//打印10
扩展运算符…
- 拆分数组
var arr = [1,2,3];
console.log(...arr);//输出1,2,3，逗号不输出
console.log(1,2,3);//结果相同
- 合并数组
var arr1 = [1,2,3];
var arr2 = ['a','b','c'];
var arr = [...arr1,...arr2];
//或者
arr1.push(...arr2);
console.log(arr);
- 将伪数组转化为数组
var divs = document.getElementsByTagName("div");
console.log(divs);
var arr = [...divs];
//或者
arr=Array.from(divs);
console.log(arr);
模板字符串
- 使用反引号``（键盘左上角数字1左边的的按键）
- 解析变量
var name= "hahah";
var str = `Hello ${name}`;
console.log(str);//打印hahah
- 模板字符串保留换行
var name= "hahah";
var html= `<div>
<span>${name}</span>
</div>`
console.log(html);
- 模板字符串可调用函数
var fn = ()=>{
return '我是函数';
}
var html = `我是模板字符串 ${fn()}`;
console.log(html);//输出我是模板字符串 我是函数
扩展方法
Array的扩展方法
- Array.from()；将其他类似的变量转化为数组
var divs = document.getElementsByTagName("div");
var arr=Array.from(divs);
- find()
var arr= [{id:1,name:'zhangsan'},
{id:2,name:'lisi'}];
var target = arr.find(item=>item.id==2);
console.log(target);
- findIndex() 返回找到的第一个元素的索引
var arr= [{id:1,name:'zhangsan'},
{id:2,name:'lisi'}];
var index = arr.findIndex(item=>item.id==2);
console.log(index);//输出1
- includes()
[1,2,3].includes(2);//返回true
String扩展方法
- startWith(),endWith()
var str ="Hello world";
console.log(str.startsWith("H"));//true
- repeat()
var ch= 'y';
console.log(ch.repeat(5));//重复五次
set数据结构
- 使用new Set()创建一个set对象
- 利用set实现数组去重
var arr = [1,1,2,3,4,4,4];
var set = new Set(arr);
arr=[...set];
console.log(set);
console.log(arr);
- set相关方法
- add() 添加 可链式调用
var set = new Set();
set.add("a").add("b");
console.log(set);
- delete()删除
set.delete("a");
- has()是否包含
console.log(set.has("b"));
- clear()清空set对象
set.clear();
- forEach()
set.forEach(value=>{
console.log(value);
});
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
