ES6
2019-04-23 本文已影响0人
大庆无疆
ES6引入了块级作用域(花括号之间就是一个块,比如if/else语句,或者单单的一个{})
1、变量声明:let const
let不存在预解析,只能先声明再使用
let声明的变量不允许重复(在同一个作用域内)
const用来声明常量---》声明的时候必须初始化,并且值不能再被修改
const也不存在预解析,const的变量名大写
2、变量的解构赋值
同时声明多个变量
let [a, b, c] = [1,2,3]; --->数组的解构赋值
console.log(a, b, c); // --->1 2 3
可有默认值:let [a = 4, b, c] = [1,2,3];
let {name, age} = {name: 'hq', age: 21}; --->对象的解构赋值
console.log(name, age); // --->hq 21
可有默认值:let {name = 'jialing', age} = {name: 'hq', age: 21};
let [i, ii, iii] = 'jia'; --->字符串的解构赋值
console.log(i, ii, iii);// --->j i a
可有默认值:let [i , ii, iii = 'cc'] = 'ji';
3、字符串的扩展
(1)相关方法
includes();
startsWith();
endsWith();
includes();--> 判断某字符串中是否包含指定的字符串
let str1 = 'hello';
let str2 = 'llo';
console.log(str1.includes(str2));
startsWith();--> 判断某字符串是否以指定的字符串开头
console.log(str1.startsWith(str2));
endsWith();--> 判断某字符串是否以指定的字符串结尾
console.log(str1.endsWith(str2));
(2)模板字符串
let obj = {
name: 'heqing',
age: 21,
sex: 'male'
}
将对象中的内容拼接到html格式的字符串中
以前做法
let h = '<div><span>'+obj.name+'</span><span>'+obj.age+'</span><span>'+obj.sex+'</span></div>'
console.log(h);//输出:<div><span>heqing</span><span>21</span><span>male</span></div>
使用模板字符串--->使用 `` 来包含内容,通过 ${} 来填充数据,里面也可以进行运算,甚至是函数调用(相当于在全局作用域中)
let h2 = `
<div>
<span>${obj.name}</span>
<span>${obj.age}</span>
<span>${obj.sex}</span>
</div>
`;
console.log(h2);
下面输出的是上头的 模板字符串 方式拼接的字符串(因为把这个放到上面引起格式不对,就放这里了)
// 输出:------>有一定的格式
<div>
<span>heqing</span>
<span>21</span>
<span>male</span>
</div>
4、函数扩展
--------------1、参数默认值
ES5
function fn(a) {
a = a || '我是默认值';
console.log(a);
}
fn(0);如果没有传入参数或者传入0的话,结果就变成了'我是默认值',不是我们指定的值
ES6
function fn(a = '我是默认值') {
console.log(a);
}
fn(); //-> 我是默认值
fn(0); // -> 0
fn(11); // -> 11
--------------2、参数解构赋值
function fn({name, age} = {name: 'hq', age: '33'}) {
console.log(name, age);
}
---------------3、rest参数(剩余参数)
function fn(a, b, ...param) {
console.log(a, b, param);
}
fn(2,3,4,5,2); // 2 3 [4, 5, 2]
把剩余的参数放在 param形成数组
----------------4、扩展运算符 ...
与剩余运算符相反,他是把数组中的元素展开
function fn(a, b, c, d) {
console.log(a+b+c+d);
}
var arr = [2,4,1,4];
fn(...arr); // --->输出 11
例子演示,合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1, ...arr2]; //相当于把 arr1 和 arr2 中的元素展开然后放进去
console.log(arr); // [1, 2, 3, 4, 5, 6]
------------------5、箭头函数
第一个
function fn(a) {
console.log(a);
}
------>等价于
let fn = (a) => {console.log(a);}
第二个 关于返回值
(1). let fun1 = ()=>1+2 //执行后结果 3
(2). let fun2 = () => {1+2} //执行后结果 undefined
(3). let fun3 = () => {return 1+2 } // 执行后结果 3
总结:如果箭头后有{ },则{}内有return 则返回return后的值,没有 则返回undefined
如果箭头后没有{ }如第一种简写写法,其实是return 1+2
第三
(1)箭头函数不可以new
(2)箭头函数不可以使用arguments获取参数列表,可以使用rest参数代替,如:
let fn = (...param) => {
console.log(param); //打印参数列表
}
fn(1,2,3,4); // [1, 2, 3, 4]
(3)箭头函数中的this取决于函数的定义,不是调用
(箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this)
注意:通过 call 或 apply 调用箭头函数,第一个参数并不起作用
5、一个新增的数据类型(Symbol)
Symbol:表示独一无二的值(具体值是多少,我们无法知道,但就是独一无二的值,不可能和其他值相同),他是一种类似于字符串的数据类型
var x = Symbol('我是独一无二的x');// -->里面可以写参数,但没有什么作用
var y = Symbol();
console.log(x, y, typeof x, x === y, x instanceof Symbol); //Symbol(我是独一无二的x) Symbol() "symbol" false false
// 作用:如果我们定义一个对象,并且不想让其他人按照常规的方式(对象名.属性名)修改这个对象某个属性,就可以使用Symbol类型的变量作为属性值
var student = {
name: 'hq',
age: '21',
[x]: '永远最帅', //--->这里使用了上头定义的变量 x 作为属性名,x的值是独一无二的(所以如果把变量名作为属性名需要用 '[]' 引起来)
sex: 'male'
}
console.log(student[x]); //--->访问的时候student 和 [x]之间没有点
// 修改[x]属性的值
student[x] = '庆哥是无比的帅啊';
console.log(student[x]);
// 注意:并不是说使用Symbol类型的变量作为属性,属性值就不能修改了,而是我们不能通过常规的方式来修改。
// 常规情况下我们给对象添加属性:student.x = '好帅',而修改属性名为Symbol变量:student[height] = '确实很帅',所以我们对象的某个属性不想被修改就可以使用Symbol类型的变量,这样别人就知道这个属性是不想被修改的