ES6基础语法
1.变量 声明
let const
1.let 用于声明一个变量 1 变量不会提升,即在变量声明之前无法使用该变量 2.不可以重复声明 3.具有块级作用域,只在当前作用域有效 2.const 用于声明一个常量 1.变量声明不会被提升,即在变量声明之前无法使用该变量 2.不允许重复声明。 3.具有局部作用域,即const声明的变量只能在对应代码块中使用 4.const声明的变量在声明的时候就需要赋值,并且只能赋值一次,不能修改。
2.解构
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。
1.数组解构 等号左边的变量放到中括号内部,匹配右侧数组中的元素。
1.let [a,b,c]=[1,2,3];
console.log(a,b,c);
2.let [a,b,c,d,e]=[1,2,3,[4,5],6];
console.log(a,b,c,d,e);
3.不完全解构
let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
console.log(a,b,c,d,e);
4.集合解构 ...扩展运算符
let [a,...b]=[1,2,3,4,5];
console.log(a,b);
5.默认值解构(当匹配值严格等于undefined时,默认值生效)
let [a=1,b=2,c=3]=[4,5,6];
console.log(a,b,c);
let [a=1,b=2,c=3]=[];
console.log(a,b,c);
6.默认值也可以是函数
function(){console.log('hello')}
let [a=test()]=[1];
console.log(a);
let [a=test()]=[];
console.log(a);
7.let arr=[1,2,3,4];
let [...a]=arr;
console.log(a===arr);//false
2.对象解构 等号左边的变量放到大括号内部,匹配右侧对象中的元素。对象的属性没有次序,变量必须与属性同名,才能取到正确的值
1.let {foo,bar}={foo:'hello',bar:"world"};
console.log(foo,bar);
2.如果变量名和属性名不一致,需要重命名
let {foo:baz}={foo:"hello",bar:"world"}; baz:hello
3.对象的解构赋值是下面形式的简写 前面属性名后边变量名
let {foo:foo,bar:bar}={foo:'hello',bar:"world"};
4.嵌套结构
let obj={p:['hello',{y:"world"}]};
let {p:[a,{y:b}]}=obj;
console.log(a,b);hello world
5.默认值结构
let {x:y=3}={};
console.log(y);3
经典面试题:
const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);
3.字符串解构 1.可以使用对象解构或者是数组解构,使用数组结构可以获取指定字符;使用对象结构可以获取实例属性方法;
let [a,b,c]='hello';
console.log(a,b,c);h e l
2.也可以将string字符串转换为数组
let [...arr]='hello';
console.log(arr)
3.使用对象解构
let {toString,valueOf,length}='hello';//相当于把‘hello’当成String基本包装器类型
console.log(toString,valueOf,length)
4.数值解构 可以获取到数值包装器构造函数原型中指定的方法。
let {toString,valueOf}=10;
console.log(toString,valueOf)
5.布尔值解构
let {toString,valueOf}=true;
console.log(toString,valueOf)
3.对象
ES6中对于Object的拓展主要是静态方法的拓展。
1.对象简写 ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法,此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。
let name='larry';
let age=12;
let obj={
name,
age,
//es5 sayName:function(){}
// sayName(){
// console.log(this.name) --按照这种形式写this依然指向调用者
// },
// sayName:()=>{
// console.log(this)
// }
sayName(){
//this-->obj
return ()=>{
console.log(this)
}
}
}
obj.sayName()();
----------------------------------------------------------
let name='larry';
let age=12;
let sayName=()=>{
console.log(this)
}
let obj={
name,
age,
//es5 sayName:function(){}
// sayName(){
// console.log(this.name)
// },
// sayName:()=>{
// console.log(this)
// }
sayName(){
return sayName
}
}
// obj.sayName()()
//箭头函数没有自己的this,内部this指向声明箭头函数时外部作用域中的this。
obj.sayName()()
2.箭头函数 es5函数内部属性有this和arguments,箭头函数内arguments不再保存实参,如果想接受实参,可以使用rest参数
let test=(a,...b)=>{
//console.log(this,arguments);
console.log(a,b);a--1 b--[2,3,4,5]
}
test(1,2,3,4,5)
3.扩展运算符 使用拓展运算符可以解构数组和对象,并返回解构后的新数组或者新对象
//...用到左侧是聚合 用到右侧是展开
let arr=[1,2,3,4,5]
let [...a]=arr;
console.log(a);
console.log(a===arr);//false
let obj={name:'zhangsan',age:12};
let {...b}=obj;
console.log(b);
console.log(b===obj);//false
4.函数参数解构
1.函数参数对象解构
function test({name,age,...a}){ ...a解构剩余对象中的属性并返回一个新对象
console.log(name,age,a)
}
test({name:"zhangsan",age:12,gender:1})
2.函数参数对象默认值解构
function test({name,age=1,...a}){
console.log(name,age,a)
}
test({name:"zhangsan",gender:1})
3.函数参数数组解构
function test([a,b,c,d]){
console.log(a,b,c,d)
}
test([1,2,3,4])
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。通常情况下,定义了默认值的参数,应该是函数的尾参数,函数的length属性,将返回没有指定默认值的参数个数
function log(x, y = 'World',d) {
console.log(x, y);
}
// log(1,2)
console.log(log.length)
5.对象API拓展
1.Object.is(a,b); 判断a和b的值是否相等
例子1:
console.log(1===1);//true
console.log(Object.is(1,1));//true
console.log(Object.is(1,2));//false
console.log(+0===-0)//true
console.log(Object.is(+0,-0));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
2.Object.assign(o,obj); 两个参数实现对象复制、拷贝 第一个参数是目标对象
1.let o={};
let obj={
name:"zhangsan",
age:12
}
let result=Object.assign(o,obj);把obj中的内容复制到o对象当中并返回o对象
console.log(o)
console.log(result)
console.log(o===result)
2.Object.assign(o,obj,obj1); 三个参数代表的是合并对象obj,obj1到o当中并返回o对象
let o={}
let obj={
name:"zhangsan",
age:12
}
let obj1={
name:"lisi"
gender:1
}
let result=Object.assign(o,obj,obj1);
console.log(o)
console.log(result)
3.获取原型对象中的方法
Object.setPrototypeOf()
let obj={
name:"",
age:1
}
console.log(obj.__proto__);
console.log(obj.constructor.prototype)
console.log(Object.getPrototypeOf(obj))
4.设置原型对象中的方法
Object.setPrototypeOf(obj,obj1) 设置obj的原型对象为obj1
Object.setPrototypeOf(obj,obj1);
console.log(obj.__proto__);
console.log(obj.constructor.prototype)
console.log(Object.getPrototypeOf(obj));
5.Object.keys() Object.values() Object.entries()
let obj={
name:'terry',
age:12
}
// 获取所有属性名组成的数组
console.log(Object.keys(obj));
// 获取所有属性值组成的数组
console.log(Object.values(obj));
// 获取键值对组成的数组
console.log(Object.entries(obj));
4.数组
数组在静态方法与实例方法中都有所拓展
1.Array.from();//将类数组对象转换为数组
2.Array.of();//参数是数组元素,为了解决new Array()传递一个数组,创建length
let a=Array.of(10,'hello')
console.log(a)
3.Array.prototype.find() find方法返回第一个满足条件的元素或者undefined 参数回调函数
let arr=[1,2,3,2,3];
let result=arr.find((item)=>{
return item>2
})
console.log(result)
4.Array.prototype.findIndex();//参数回调函数
findIndex返回第一个满足条件的元素的索引或者-1
let arr=[1,2,3,2,3];
let result=arr.findIndex((item)=>{
return item>2
})
console.log(result)
5.Array.prototype.includes(); includes是否包含某个元素,返回true/false
console.log(arr.includes(300));
6.Array.prototype.fill() 用来填充数组
arr.fill(8);
console.log(arr)
7.Array.prototype.keys()
8.Array.prototype.values()
9.Array.prototype.entries()
//keys,values,entries变量当前是迭代器对象
let arr = [2, 3, 4, 5, 6, 2];
let keys=arr.keys();
let values = arr.values();
let entries = arr.entries();
console.log(keys, values, entries); // 迭代器实现了Iterator接口,只要有实现了Iterator接口就可以for-of遍历
1.ajax复习
1.什么是AJAX? AJAX即“Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网 页开发技术,用于浏览器和服务器之间进行数据交互。
1.get无参数// 1.创建实例对象
var xhr=new XMLHttpRequest();
// 2.打开一个连接
xhr.open("get",'http://47.93.206.13:8002/index/findAllCategory');
// 3.发送请求
xhr.send();
// 4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState===4&xhr.status===200){
console.log(xhr.responseText)
}
}
2.get携带参数 var qs=Qs
// 创建一个实例
var xhr=new XMLHttpRequest();
// 2.打开一个连接
let obj={
page:1,
pageSize:10
}
console.log(qs.stringify(obj))
xhr.open('get',"http://47.93.206.13:8002/index/pageQueryArticles"+'?'+qs.stringify(obj));
xhr.send();
// 4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState===4&xhr.status===200){
console.log(xhr.responseText)
}
}
3. post携带参数 // 创建一个实例
var xhr=new XMLHttpRequest();
// 2.打开一个连接
let obj={
username:'admin1',
password:123321
}
xhr.open('post',"http://47.93.206.13:8002/user/login");
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(
JSON.stringify(obj)
);
// 4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState===4&xhr.status===200){
console.log(xhr.responseText)
}
}