码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 之 let / const

时间:2018-09-06 12:26:55      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:你好   --   ``   rom   拼接   引号   from   使用数组   回调   

ES6 之 let / const

本博文配合 阮一峰 《ES6 标准入门(第3版)》一书进行简要概述 ES6 中的 let 与 const。

历史遗留问题

由于 JS ES3语法中的 var 提升变量、没有块级作用域,因而搞出来了一大波的 "副产品",匿名立即执行函数、闭包,都是 ES3 JS 遗留下来的产物。
所以学过 C 和 Python 再来看 JS ,会感觉很奇怪。
因为 ES6 之前,没有块级作用域,只有通过立即执行函数+闭包的方式造一个局部函数作用域。

let

let的出现解决了 JS 曾经没有块级作用域的问题,即终于在 JS 中出现了正常思维逻辑的语法糖... 即 {} 划分作用域,要想使用变量,必须let声明过该变量。

{
  let a = 1
  console.log(a)
}
如果在 {}外使用变量,就会报错,因为let{}中声明的是局部变量,仅供这个块级作用域使用。
{
  let a = 1
}
console.log(a)  //报错

const

用法和let几乎一致,唯一不同的是const只要一次赋值的机会。

{
  let a = 1
  console.log(a)  //1
  a = 2
  console.log(a)  //2
}
{
  const a = 1
  console.log(a)  //1
  a = 2
  console.log(a)  //报错
}
2. 模板字符串
//es5
$(‘#mark‘).append(
    ‘出售中 <span>‘ + obj.num + ‘</span> ‘ +
    ‘剩下的, ‘ + ‘<span>‘ + obj.showNum + ‘</span> 卖完了!‘);
//es6
//在es6中,内容模板,可以定义在 `` 包起来的字符串中,其中的内容会保持原有格式
//另外可以在字符串中直接使用模板语言进行变量填充,优雅而简洁
$(‘#mark‘).append(`
  出售 <span>${obj.num}</span> 剩下 <span>${obj.showNum}</span>`);
3. 字符串遍历输出, 补全
for (let item of ‘str‘) {
    console.log(item);
}
//s
//t
//r
4. 数组扩展
let a = [1, 2];
let b = [2, 3];
let c = [...a, ...b]; //[1, 2, 2, 3] 所有内容合并,但并不会去除重复
.keys() - 获得数组中所有元素的键名( 实际上就是下标索引号)
    .values() - 获得数组中所有元素的数据
    .entries() - 获得数组中所有数据的键名和数据
for (let i of[‘x‘, ‘y‘].keys()) {
    console.log(i); //0 1
}
for (let elem of[‘x‘, ‘y‘].values()) {
    console.log(elem); //x y
}
for (let [index, elem] of[‘x‘, ‘y‘].entries()) {
    console.log(index, elem); // 0 "x"    1 "y"
}
5. 对象扩展
//直接使用变量/常量的名称个为对象属性的名称
let a = ‘abc‘;
let b = { a }; //{a: ‘abc‘}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
判断对象是否为数组
if (Object.isArray(obj)) {}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
对象内容合并
Object.keys() - 获得对象中所有的键名, 以数组的形式返回
var obj = { a: 1, b: 2 };
var names = Object.keys(obj); //[‘a‘, ‘b‘]
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
Object.values() - 获得对象中所有的值内容, 以数组的形式返回
var obj = { a: 1, b: 2 };
var values = Object.values(obj); //[1, 2]
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
Object.entries() - 获得对象中所有的成员数据, 以数组的形式返回, 成员的内容也是数组形式
var obj = { a: 1, b: 2 };
var values = Object.entries(obj); //[[‘a‘,1], [‘b‘,2]]
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
解构赋值
let [a, …b] = [1, 2, 3];
//这里 b 的值为[2,3],这样可以快速使用剩余的数据赋值给变量,
let [a, b, c] = [1, 2, 3];
//定义了三个变量,并对应赋了值;如果值的个数与变量名个数不匹配,没有对应上的变量值为 undefinedlet obj = {a: 1, b: 2};
let { a, b } = obj; //a=1,b=2
使用变量的方式进行结构赋值, 需要严格匹配名称, 数组的模式是严格匹配下标
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
6. 模块化
//app.js
let act = { a: 1, b: 2, c: 3 };
export default act;

//index.js
import act from ‘app.js‘; //假设 app.js 与index.js 同在一个目录中
console.log(act.a); //1

//--------------------------------------------------------------------分割
//ES6字符串扩展方法,三个方法都支持第二个参数,表示开始搜索的位置;
let str = ‘Hello world!‘;
console.log(str.includes(‘o‘)) // true ----表示是否找到了参数字符串;类似ES5 indexOf()
console.log(str.startsWith(‘Hello‘)) // true ----表示参数字符串是否在原字符串的头部;
console.log(str.endsWith(‘!‘)) // true ----表示参数字符串是否在原字符串的尾部;
    //ES6字符串扩展方法----模板字符串
let hello = ‘你好‘;
let str1 = `${hello},这节课学习字符串模板`;
console.log(str1); //你好,这节课学习字符串模板,省去拼接的烦恼;
alert `123`
    // 等同于
alert(123)
    //ES6解构赋值
let res = {
    id: 1,
    status: "OK",
    list: [{
        name: ‘bob‘,
        age: 20
    }]
}
let {
    id,
    status,
    list
} = res;
console.log(id, status, list);
// 1, "OK", [{name: ‘bob‘,age: 20}]
//const 声明常量 === var a = 1, b = 2, c = 3;or const a = 1;const b = 2;const c = 3;
const [a, b, c] = [1, 2, 3];
console.log(a, ‘aaaaa‘); //1 "aaaaa"
console.log(b, ‘bbbbb‘); //2 "bbbbb"
console.log(c, ‘ccccc‘); //3 "ccccc"
//使用扩展运算符(...)拷贝数组
let test = [1, 2, 3, 4, 5]
let [...test1] = test
test[2] = 5
console.log(test, ‘原数组‘) //[1, 2, 5, 4, 5] "原数组"
console.log(test1, ‘深拷贝的数组‘) //[1, 2, 3, 4, 5] "深拷贝的数组"
    //不要在模块输入中使用通配符。因为这样可以确保你的模块之中,有一个默认输出(export default)。
    // bad
    //import * as myObject from ‘./importModule‘;
    // good
    //import myObject from ‘./importModule‘;
    //reset参数---rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中
function add(...values) {
    let sum = 0;
    for (var val of values) {
        sum += val;
    }
    return sum;
}
console.log(add(2, 5, 3)) // 10
    //箭头函数
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    return num1 + num2;
};
console.log(sum(1, 4), ‘求和‘) //5 "求和"
    //如果只有单个参数
var fun = age => age; //or var fun = (age) => age;
// 等同于
var fun = function(age) {
    return age;
};
console.log(fun(20), ‘箭头函数单个参数‘) //20 "箭头函数单个参数"
    //扩展运算符加箭头函数
const sumList = (...num) => num;
console.log(sumList(1, 2, 3, 4, 5), ‘扩展运算符运用场景一‘) // [1, 2, 3, 4, 5] "扩展运算符运用场景一"
const getList = (name, ...obj) => [name, obj];
console.log(getList(1, 2, 3, 4, 5), ‘扩展运算符运用场景二‘) // [1,[2,3,4,5]] "扩展运算符运用场景二"
    //ES6数组扩展******将一个数组添加到另一个数组的尾部
    // ES5的 写法
var test2 = [0, 1, 2];
var test3 = [3, 4, 5];
//console.log(test2.push(test3),‘push直接跟数组‘)// 4 "push直接跟数组" push方法的参数不能是数组;
Array.prototype.push.apply(test2, test3);
console.log(test2, ‘没用...前‘) //[0, 1, 2, 3, 4, 5] "没用...前"
    // ES6 的写法
let test4 = [0, 1, 2];
let test5 = [3, 4, 5];
test4.push(...test5);
console.log(test4, ‘使用...后‘) //[0, 1, 2, 3, 4, 5] "使用...后"
    //ES6将类数组转为数组的方法;dom类似除了document.getElementById()之外的找到的dom都为类数组;另外有length属性的;
let toList = {
    ‘0‘: ‘bob‘,
    ‘1‘: ‘20‘,
    ‘2‘: ‘man‘,
    length: 3
};
// ES5的写法
var newArr = [].slice.call(toList);
console.log(newArr, ‘[].slice.call的方法‘) //["bob", "20", "man"] "[].slice.call的方法"
    // ES6的写法
let newArr1 = Array.from(toList);
console.log(newArr1, ‘Array.from方法‘) //["bob", "20", "man"] "Array.from方法"
    //find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组;如果没有符合条件的成员,则返回undefined。
let numList = [1, 5, 15, 20, 25];
let newNumList = numList.find((value, index, arr) => {
    return value > 20;
})
console.log(newNumList, ‘数组find方法‘) //25 "数组find方法"
    //findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
let numLogs = [5, 10, 15, 20];
let newNumLogs = numLogs.findIndex((value, index, arr) => {
    return value > 10
})
console.log(newNumLogs, ‘数组findIndex方法‘) //2 "数组findIndex方法"
    //ES6数组的 includes()  第一个参数是否包含一个指定的值,第二个参数表示搜索的起始位置,默认为0;
    //如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始;
    //没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值;
console.log([1, 2, 3].includes(4), ‘includes一个参数‘) //false "includes一个参数"
console.log([1, 2, 3].includes(3, -1), ‘includes两个参数‘) //true "includes两个参数"
    //ES6对象的结构和扩展运算符的运用*****...扩展运算符 解构赋值必须是最后一个参数(数组和对象都是一样) 解构赋值的拷贝是浅拷贝;
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x, ‘对象的第一个值‘); //1 "对象的第一个值"
console.log(y, ‘对象的第二个值‘); //2 "对象的第二个值"
console.log(z, ‘对象的第三个值‘); //{a: 3, b: 4} "对象的第三个值"
let obj = {
    name: ‘bob‘,
    age: 20
}
let obj1 = {
    sex: ‘sex‘,
    cash: 22
}
let newObj = {...obj, ...obj1 }; //等同于 let newObj = Object.assign({}, obj,obj1);
console.log(newObj, ‘扩展运算符合并对象‘) //{name: "bob", age: 20, sex: "sex", cash: 22} "扩展运算符合并对象"
    //ES6 async 函数   await 是顺序执行的,Promise.all() 是并行的;
function fun1() {
    console.log(‘第一‘) //第一
}

function fun2() {
    console.log(‘第二‘) //第二
}

function fun3() {
    console.log(‘第三‘) //第三
}
async function testasync() {
    try {
        await fun1()
        await fun2()
        await fun3()
    } catch (error) {
        console.log(error)
    }
}
testasync();
//let [res1, res2, res3] = await Promise.all([fun1(), fun2(),fun3()])
//async 函数中 return 的结果将作为回调的参数;
async function testCallback() {
    return ‘this is a test async function‘
}
testCallback().then(
        userName => console.log(userName)
    )
    // this is a test async function

 

 

总结

let

  • let的作用域在最近的{}之间
  • 如果在定义变量 let a 之前使用变量 a,那么报错
  • 如果重复定义let a,那么报错

const

  • 包含let的前面三条
  • 只有一次赋值机会,并且必须在声明的时候立马赋值


ES6 之 let / const

标签:你好   --   ``   rom   拼接   引号   from   使用数组   回调   

原文地址:https://www.cnblogs.com/sirlei/p/9597284.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!