VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 4-es6(壹)

1. 新增关键字

1.1 let

let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是,var声明的变量只能是全局或者整个函数块的

就像const一样,let不会在全局声明时(在最顶部的范围)创建window对象的属性

  1. 作用域规则

let声明的变量只在其声明的块或子块中可用,而var声明的变量的作用域是整个封闭函数。

  1. 重复声明

在同一个函数或块作用域中重复声明同一个变量会引起SyntaxError错误

  1. 暂存死区

通过 let 声明的变量直到它们的定义被执行时才初始化。在变量初始化前访问该变量会导致 ReferenceError,该变量处在一个自块顶部到初始化处理的“暂存死区”中。

function die() {
    console.log(foo);
    alert('从die函数开始到下面let声明foo变量,foo变量都处在"暂存死区中"')
    let foo = 2;
}

1.2 const

常量是块级范围的,常量的值是无法(通过重新赋值)改变的,也不能被重新声明

此声明创建一个常量,其作用域可以是全局或本地声明的块。 与var变量不同,全局常量不会变为 window 对象的属性。所以必须在声明的同一语句中指定它的值。

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。例如,在引用内容是对象的情况下,这意味着可以改变对象的内容(常量可以定义成对象和数组)。

关于暂存死区的所有说明都适用于letconst

一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称。

1.3 var、let、const的区别总结

  1. let和const声明的都是块级作用域,var是全局或整个封闭函数的
  2. let和const不可以重复声明,var可以
  3. let和const存在暂存死区,未初始化前不能使用。var存在变量提升,可以先声明后赋值
  4. const在声明时必须初始化

2. 解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量

var a, b, rest;
[a, b] = [10, 20];//数组
console.log(a); // 10
console.log(b); // 20
({ a, b } = { a: 10, b: 20 });//对象
console.log(a); // 10
console.log(b); // 20
[a,b] = ["呀哈喽"]//字符串
console.log(a); // 呀
console.log(b); //

2.1 默认值

可以为任意对象预设默认值;函数的参数也可以设定默认值

var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

2.2 交换变量

在一个解构表达式中可以交换两个变量的值。没有解构赋值的情况下,交换两个变量需要一个临时变量

var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

2.3 接收函数的返回值

function f() {
  return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

2.4 嵌套的解构赋值

var a, b, c;
    [a, [b, c]] = [1, [2, 3]]
var { d: { e } } = { "parent": { "child": 1 } }

3. ES6-String

3.1 模板字符串

模板字符串是允许嵌入表达式的字符串字面量

var a = 1;
var b = 1;
console.log(`Two is ${a + b} and not ${2 * a + b}.`);
//"Fifteen is 15 and not 20."

3.2 新的函数

1. repeat函数

返回包含指定字符串的指定数量副本的新字符串,不会改变原字符串

let two = "abc".repeat(2);
console.log(two);//abcabc

2. includes函数

用来判断一个数组是否包含一个指定的值

如果在数组中找到了则返回 true,否则为false(如果传入了第二个参数 ,表示在第二个参数指定的索引后寻找)

two.includes('a', 2)//true

3. startsWith函数

用来判断当前字符串是否以另外一个给定的子字符串开头

如果在字符串的开头找到了给定的字符则返回true;否则返回false(如果传入了第二个参数 ,表示在第二个参数指定的索引后判断)

4. endsWith函数

用来判断当前字符串是否是以另外一个给定的子字符串结尾的

如果传入的子字符串在搜索字符串的末尾则返回true;否则将返回 false(如果传入了第二个参数 ,表示要判断的字符串的长度)

two.startsWith('b', 1);//true
two.endsWith('c', 3);//true

5. String.raw函数

用来获取模板字符串的原始字符串;会将字符串中特殊字符转义输出

let fok = "lks"
console.log(String.raw`name is ${fok}`);

4. ES6-Array

4.1 新的函数

1. Array.of函数

用于将一组值,转换成数组Array.of(1, 2, 3, 5, 4);返回数组[1,2,3,5,4]

2. Array.from函数

用于从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

可用于:伪数组对象和可迭代对象;可以后接函数用来处理新数组

Array.from([1, 2, 3], x => x + x);返回数组[2,4,6]

3. find/findIndex函数

用于找出数组中满足提供的测试函数的第一个元素的值/索引

let array1 = [5, 12, 8, 130, 44];
let foundv = array1.find(element => element > 10);
let foundi = array1.findIndex(element => element > 10);
console.log(foundv);//12
console.log(foundi);//1

4. fill函数

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,不包括终止索引。

let array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));//[1,2,0,0]

5. entries / keys / values 函数

entries:返回一个新的Array迭代器对象;它的原型(__proto__:Array Iterator)上有一个next方法,可用于遍历迭代器取得原数组的[key,value]

keys :返回一个包含数组中每个索引键的Array迭代器对象

values :返回一个包含数组中每个索引值的Array迭代器对象

let array1 = ['a', 'b', 'c'];
let iterator1 = array1.entries();
console.log(iterator1.next().value);//Array [0, "a"]
console.log(iterator1.next().value);//Array [1, "b"]
 

__EOF__

 
  • 本文作者: ReCreyed
  • 本文链接: https://www.cnblogs.com/recreyed/p/es601.html

    
    相关教程