一、变量
es5中使用var来声明一个变量,var的特性与常规的编程语言都不太相同,因此,es6中,提供了与常规语言类似的声明变量的方法。
let与var不同之处在于:
1.变量声明不会被提升,即在变量声明之前无法使用该变量
例如:
console.log(a);
let a=1;
结果会出错,let声明不能提升
2.具有局部作用域,即let声明的变量只能在对应代码块中使用
例如:
{
let a=1;
}
console.log(a);
被一个大括号包起来的块是一个作用域,并且是局部作用域,声明的变量只能在该作用域内使用。因此,这块会报a没有被定义的错误。
3. 不允许重复声明。
例如:
let b = 1;
let b = {}
重复声明一个变量也会出错。
二、常量
es6中的变量使用let来声明,常量使用const来声明,const除了有与let相同的特性外,还有一条特性是:
const声明的变量在声明的时候就需要赋值,并且只能赋值一次,不能修改。
例如:
const a=1;
a++;
console.log(a);
三、解构
解构:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。
es6的集中常用解构:
1.数组解构(使用中括号):
(1)完全解构:等号两边的模式相同,左边的变量就会被赋予对应的值
let [a,b,c]=[1,2,3];
console.log(a,b,c);
输出结果为:1 2 3
let [a,b,c] = [1,[2,3],4];
console.log(a,b,c);
输出结果为:1 [2,3] 4
(2)不完全解构:等号左边的模式只匹配一部分的等号右边的数组,且能解构成功。
let [a,b]= [1,2,3,4];
console.log(a,b);
输出:1 2
let [a,[b],c] = [1,[2,3],4];
console.log(a,b,c);
输出结果:1 2 4
(3)集合解构:使用…扩展运算符,可以接收多余数据,返回数组。
let [a,...b]=[1,2,3,4];
console.log(a,b);
输出结果:1 [2,3,4]
(4)默认值为数字时,(当匹配值严格等于undefined时,默认值生效)
let [a, b = 2] = [1, 3];
console.log(a, b);
输出结果:1 3
当let [a,b=2]=[1]
console.log(a,b);
输出结果为1 2 //因为左边的a会匹配到右边的1,b没有匹配的内容,就会返回undefined,这时默认值生效,所以b=2
(5)默认值为函数
function myFun(){
console.log('123');
}
let [a=myFun()]=[];
console.log(a);
输出结果为undefined //因为这里的myFun函数没有返回值
默认值为函数,且函数有返回值
function myFun(){
console.log('123');
return 10;
}
let [a=myFun()]=[];
console.log(a);
2.对象解构:等号左边的变量放到大括号内部,匹配右侧数组中的元素。对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
变量名和属性名一致时,
可写为:let { foo, bar } = { foo: “aaa”, bar: “bbb” };// foo = "aaa”; bar = "bbb”
可简写为:let { foo, bar } = { foo: “aaa”, bar: “bbb” };// foo = "aaa”; bar = "bbb”
变量名和属性名不一致时,
必须写成:var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; //baz = "aaa”
嵌套解构:
let obj={p:['hello',{y:'world'}]};
let{p:[a,{y:b}]}=obj;
console.log(a+b);
输出结果为:helloworld
3.字符串解构:等号左边的变量如果放在中括号内进行的类似于数组解构,从字符串中获取指定字符;如果放在大括号内进行的类似于对象解构,从实例属性获方法中解构。
等号左边的变量放在中括号内(类似于数组解构)
const [a, b, c] = 'hello';
console.log(a, b, c);//h e l
等号左边的变量放在大括号内(类似于对象解构)
let { length, toString } = 'hello';
console.log(length, toString);//5 [Function: toString]
四、对象
1.对象简写:ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法,此时属性名为变量名, 属性值为变量的值。
例如:
let username='张三';
let obj={
username,//是username:username的简写
sayName:function(){
// ES5在对象中声明函数的方法
},
sayAge(){
// ES6在对象中声明函数的方法
}
}
2.对象的静态方法
(1)Object.is(value1,value2):是比较两个值是否一样。该方法不会强制转换类型。
“==”表示在进行比较的时候会先进行类型转换,然后比较是否相等
“===”表示先比较类型,只要类型不相同 那么一定不相等
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():深克隆,放一个参数就是克隆,放两个参数是进行拼接
let obj={
name:'张三'
}
let obj1={
name:'李四',
age:12
}
let newObj={};
// 克隆
Object.assign(newObj,obj);//将obj里面的内容克隆到newObj这个空对象里面
// 拼接
Object.assign(newObj,obj,obj1);//此处将obj和obj1的内容进行拼接克隆到newObj里面,这个输出为name:李四,age:12,对于相同的属性后面的会覆盖前面的
(3)Object.setPrototypeOf(obj,prototype):设置对象的原型对象,如果第二个参数不是一个对象或者是null那么函数不做任何事情。
let obj1 = {
name: 'zhangsan',
age: 12
}
let obj2 = {
name: 'lisi',
gender: 'male'
}
// 设置obj1的原型
Object.setPrototypeOf(obj1, obj2);
// 获取obj1的原型
console.log(obj1.__proto__);
console.log(obj1.constructor.prototype);
console.log(Object.getPrototypeOf(obj1));
(4)Object.keys(obj) 返回对象本身的可枚举的所有属性的array不包含原型链。
即返回的是所有属性组成的一个数组。
Object.values(obj)获取对象的所有属性的值,返回对象的本身可枚举属性值的array,即返回所有属性值组成的一个数组
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。
let obj1 = {
1: '张三',
2: '李四',
3: '王五'
}
let key = Object.keys(obj1);
let value = Object.values(obj1);
let entry = Object.entries(obj1);
console.log(key);
console.log(value);
console.log(entry);
五、数组
- 拓展符:使用三个点'...'表示。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
(1)利用拓展运算符将数组合并
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1,...arr2];
console.log(arr);
(2)拓展运算符,放在等号右边,是展开(剥离)的作用
let obj1={
name:'zhangsan',
age:12
}
let obj2={
...obj1,
gender:male,
hobby:'篮球',
}
console.log(obj2);
(3)字符串转为数组
let newArr=[...'hello'];
console.log(newArr);
2.数组的静态方法(Array.of())
let arr=new Array(3);//表示的是arr数组的长度为3,这种方法当只有一个参数,表示的是长度。
console.log(arr);//会输出3个空项
let arr3 = new Array('3');//表示只有一项内容,并且为3
console.log(arr3);
let arr1=Array.of(3);//传的是为3的元素
let arr2=Array.of(3,3,3,3);//传的是每项的内容
console.log(arr1);
console.log(arr2);
3.数组实例方法
(1)find方法返回满足条件的第一个元素
let arr1=['李四','王五','老六','张三'];
//find方法返回满足条件的第一个元素
let result = arr1.find(item => {
return item === '张三'
})
console.log(result);
(2)findIndex()返回满足条件的第一个元素的索引
let result = arr1.findIndex(item => {
return item === '张三'
})
console.log(result);
(3) includes() 方法用于判断字符串是否包含指定的子字符串。
let result = arr1.includes('张三');
console.log(result);//true
(4)fill()填充数组,将数组内部所有元素都用实参填充
arr1.fill(1)
console.log(arr1);
(5)keys(),values(),entries()方法的使用
let arr1 = ['张三', '李四', '王五', '老六'];
let key = arr1.keys();
let value = arr1.values();
let entry = arr1.entries();
console.log(key);
console.log(value);
console.log(entry);
返回的是数组的迭代器对象,可用通过.next()访问内部的值:{ value: 0, done: false }
console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(key.next());
console.log(key.next());
当done为false表示后面还有元素,当为ture表示没有后续值。这里的数组中有四个元素,当有第五个.next()进行访问则显示为{ value: undefined, done: true }