ES6（待补充）
变量的声明let与const
let
-
let不会存在预解析
// 报错，flag不存在或未定义 console.log(flag); let flag = 123; // 正确 cosole.log(flag); var flag = 123; -
let声明的变量不允许重复（在同一作用域内）
// 报错，不允许 let flag = 123; let flag = 456; // 正确 var flag = 123; var flag = 456; -
块级作用域
// 报错，块内部let定义的变量，在外部是不可以访问的 if (true) { let flag = 123; } console.log(flag); // 正确 if (true) { var flag = 123; } console.log(flag); // 123{ // 这里是块级作用域 let flag = 111; console.log(flag); } // 外部不可以访问 console.log(flag); // 报错for (let i = 0; i < 3; i++) { // for循环括号中声明的变量只能在循环体重使用 console.log(i); }// 在块级作用域内部，变量只能先声明在使用（暂时性死区） // 在声明变量之前的区域内是不允许访问这个声明的变量 var flag = 456; if (true) { // 变量声明之前开始的区域 console.log(flag); // 报错，不会当前外部的全局变量来处理的 // 变量声明之前结束的区域 let flag = 123; }
const
用来声明常量，同样适用于let的规则
- const声明的常量不允许重新赋值
- 在声明的时候必须初始化
变量的解构赋值
ES6之前的解构赋值
var a = 1;
var b = 2;
var c = 3;
// 等价于下面
var a=1, b=2, c=3;
ES6的数组解构赋值
// 全部赋值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出结果 1 2 3
// 只对中间的变量赋值，两边的省略
let [a, b, c] = [, 123, ];
console.log(a, b, c); // 输出结果 undefined 123 undefined
// 设置默认值
let [a = 111, b, c] = [, 123, ];
console.log(a, b, c) // 输出结果 111 123 undefined
ES6的对象解构赋值
// 全部赋值，无顺序要求
let {foo, bar} = {foo : 'hello', bar : 'hi'};
console.log(foo, bar); // hello hi
// 对象属性别名（如果有了别名，那么原来的名字就无效了）
let {foo:abc, bar} = {bar: 'hi', foo : 'nihao'};
console.log(abc, bar); // nihao hi
console.log(foo, bar); // 报错 foo未定义
// 内置对象赋值, 直接把右边的已有属性和左边的名称对应赋值
let {cos, sin, random} = Math;
conlose.log(typeof cos); // function
conlose.log(typeof sin); // function
conlose.log(typeof random); // function
// 指定默认值
let {foo:a = 'hello', bar} = {bar : 'hi'};
console.log(a, bar); // hello hi
ES6的字符串解构赋值
// 全部赋值
let [a, b, c, d, e] = "hello";
console.log(a, b, c, d, e); // h e l l 0;
// 前面的变量与后的字符长度不对应
// 没有任何影响
let [a, b, c, d] = "hello";
console.log(a, b, c, d); // h e l l
// 用下面的办法无法利用对象解构赋值得到字符串的长度
let [a, b, c, d, length] = "hello";
console.log(a, b, c, d); // h e l l 0
// 得到字符串的长度
let [length] = 'hi';
console.log(length); // 2
ES6的字符串相关扩展
-
includes(‘子串’, 索引)
判断字符串中有没有相应的子串,有返回true否则返回false// 第一个参数 匹配的子串 let flag = 'hello world'.includes('world'); console.log(flag); // true// 第二个参数（索引）, 从第几个字符开始匹配 let flag = 'hello world'.includes('world', 7); console.log(flag); // false -
startsWith()
判断字符串是否以特定的字符串开始let url = 'admin/index.php'; console.log(url.startsWith('admin')); // true; -
endsWith()
判断字符串是否以特定的字符串结束let url = 'admin/index.php'; console.log(url.startsWith('php')); // true; -
模板字符串
// 反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据 // 支持简单的表达式运算 let fn = function (info) { return info; } let obj = { username : '李四', age : ‘12’, sex : '男' } // ES6之前的拼接 let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.sex+'</span></div>' console.log(tag); // 无格式，输出在一行上 // ES6拼接 let tp1 = ` <div> <span>${obj.username}</span> <span>${obj.age}</span> <span>${obj.sex}</span> <span>${1+1}</span> <span>${fn('nihao')}</span> </div> `; console.log(tp1); // 带格式的输出
函数扩展
参数默认值
-
ES6之前设置默认值
function foo (param) { let p = param || 'hello'; console.log(p); } foo(); // hello foo('hi'); // hi -
ES6设置默认值
function foo (param = 'hello') { console.log(param); } foo(); // hello foo('hi'); // hi
参数解构赋值
// 利用参数解构赋值必须传参,或者设置默认值
function foo ({uname, age} = {}) {
console.log(uname, age);
}
foo(); // undefined undefined
// 设置默认值
function foo ({uname = '张三', age = 19} = {}) {
console.log(uname, age);
}
foo(); // 张三 19
foo({uname : '李四', age : 20}); // 李四 20
rest参数（剩余参数）
// 第一个参数由a接受， 其他的参数用param接收
function foo (a, ...param) {
console.log(a, param);
}
foo(1, 2, 3); // 1, [2, 3]
…扩展运算符
function foo (a, b, c, d, e, f) {
console.log(a+b+c+d+e+f);
}
let arr = [1,2,3,4,5,6];
foo(...arr); // ==> foo.apply(null, arr);
应用：合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
箭头函数
-
ES6之前的做法
function foo() { console.log('hello'); } foo(); // hello -
ES6的做法
// 等效于上方的做法 let foo = () => console.log('hello'); foo(); // hello -
传一个参数
function foo (v) { return v; } // 相当于 let foo = v ==> v; let res = foo(111); console.log(res); // 111 -
传二个及两个以上
let foo = (a, b) => console.log(a + b); foo(1, 2); // 3 -
方法体代码二行及二行以上
let foo (a, b) => {let c = 1; console.log(a + b + c);} foo(1, 2); // 4 -
作为匿名函数使用
let arr = [123, 456,789]; arr.forEach(function (element, index) { console.log(element, index); }); // 等价于 arr.forEach((element, index) => { console.log(element, index); });
箭头函数的注意事项
-
箭头函数中this取决于函数的定义，而不是调用
function foo () { console.log(this); } foo(); // 在nodejs环境中打印的是nodejs帮我们生成的 foo.call({num:1}); // {nul:1}function foo () { // 使用call调用foo时，这里的this其实就是call的第一个参数 setTimeout(()=>{ console.log(this.num); }, 100); } foo.call({num:1}); // 1 -
箭头函数不可以new
let foo = () => {this.num = 123;} new foo(); // 报错 foo not constructor -
箭头函数不可以使用arguments获取参数列表，可以使用rest参数代替
let foo = (...param) => { console.log(param); } foo(1, 2, 3); // 1, 2, 3
类与继承
function Animal(name){
this.name = name;
}
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
