ES6--API

let是ES6中新增关键字。
它的作用类似于var,用来声明变量,但是所声明的变量,只在let命令所在的代码块内有效

if(true){
    var a = 1;
    let b = 2;
}
document.write(a);
document.write(b);  // 报错:ReferenceError: b is not defined

const命令
const 声明的是常量,一旦声明,值将是不可变的。

const PI = 3.1415;
PI // 3.1415

PI = 3;
PI // 3.1415

const PI = 3.1;
PI // 3.1415

const 也具有块级作用域

if (true) {
  const max = 5;
}
document.write(max);  // ReferenceError 常量MAX在此处不可得 

const 不能变量提升(必须先声明后使用)

if (true) {
  document.write(MAX); // ReferenceError
  const MAX = 5;
}

const 不可重复声明

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

const 指令指向变量所在的地址,所以对该变量进行属性设置是可行的(未改变变量地址),如果想完全不
可变化(包括属性),那么可以使用冻结。

const C1 = {};
C1.a = 1;
document.write(C1.a); // 1 
C1 = {};  // 报错  重新赋值,地址改变

//冻结对象,此时前面用不用const都是一个效果
const C2 = Object.freeze({}); 
C2.a = 1; //Error,对象不可扩展
document.write(C2.a);

是否包含字符串三种新方法
indexOf 方法,可以用来确定一个字符串是否包含在另一个字符串中
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

var str = "Hello world!";

str.startsWith("Hello") // true
str.endsWith("!") // true
str.includes("o") // true

这三个方法都支持第二个参数,表示开始搜索的位置。

var str = "Hello world!";

str.startsWith("world", 6) // true
str.endsWith("Hello", 5) // true
str.includes("Hello", 6) // false

使用第二个参数n时,endsWith 的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置
直到字符串结束。

repeat()原字符串重复

var str = "x";
str.repeat(3) // "xxx"

var str1 = "hello";
str1.repeat(2) // "hellohello"

模板字符串

let first = 'hubwiz';
let last = '汇智网';
document.write(`Hello ${first} ${last}!`);
// Hello hubwiz 汇智网!

标签模板

var a = 5;
var b = 10;

 //自定义标签模板函数
function tag(s, v1, v2) {
  document.write(s[0]);
  document.write(s[1]);
  document.write(v1);
  document.write(v2);

  return "OK";
}

tag`Hello ${ a + b } world ${ a * b}`;
//tag函数实际上以下面的形式调用。
//tag(['Hello ', ' world '], 15, 50)

// "Hello "
// " world "
// 15
// 50
// "OK"

模板字符串前面有一个标识名tag,它是一个函数。整个表达式的返回值,就是tag函数处理模板字符串后的返回值。

String.raw()
若使用String.raw 作为模板字符串的前缀,则模板字符串可以是原始(raw)的。反斜线也不再是特殊字符,\n 也不会被解释成换行符:

Number.isFinite()用来检查一个数值是否非无穷(infinity)。

Number.isNaN()用来检查一个值是否为NaN。

Number.isInteger()用来判断一个值是否为整数。
整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值。

Math.trunc():去除一个数的小数部分,返回整数部分。

Math.trunc(4.1) // 4
Math.trunc(-4.1) // -4
注意:对于空值和无法截取整数的值,返回NaN

Math.sign():判断一个数到底是正数、负数、还是零。
返回五种值:参数为正数,返回+1;参数为负数,返回-1;参数为0,返回0;参数为-0,返回-0;其他值,返回NaN

Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-0) // -0
Math.sign('hubwiz'); // NaN

Math.cbrt:计算一个数的立方根。

Math.fround:返回一个数的单精度浮点数形式。

Math.fround(1.337); // 1.3370000123977661

Math.hypot:返回所有参数的平方和的平方根。
如果参数不是数值,Math.hypot方法会将其转为数值。只要有一个参数无法转为数值,就会返回NaN。

Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

一个转换类数组对象到数组的一个示例:

let list = document.querySelectorAll('ul.fancy li');

Array.from(list).forEach(function (li) {
  console.log(li)
});

querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。
任何有length属性的对象,都可以通过Array.from方法转为数组
let array = Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
document.write(array);    // [ "a", "b" , "c" ]

Array.from()还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理。
Array.from()的一个应用是,将字符串转为数组,然后返回字符串的长度。这样可以避免JavaScript将大于
\uFFFF的Unicode字符,算作两个字符的bug。

let array = [0,1,2,3,4];
let arrNew = Array.from(array, x => x * x);
console.log(arrNew);

lambda 表达式 x => x * x 指定名为 x 的参数并返回 x 的平方值
            参数列表 => 语句或语句块
// 等同于
let arrNew = Array.from(array).map(x => x * x);

Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
Array() // []
Array(3) // [undefined, undefined, undefined]
Array(3,11,8) // [3, 11, 8]

find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调
函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回
undefined。

let array = [1, 4, -5, 10].find((n) => n < 0);
document.write("array:", array);

//find 参数:当前的值、当前的位置和原数组。
let array = [1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) 
document.write(array);  // 10

findIndex方法,用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合
条件,则返回-1。

let index = [1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) 
document.write(index);  // 2

以上两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足

fill()使用给定值,填充一个数组

let arr = ['a', 'b', 'c'].fill(7)
document.write(arr);  // [7, 7, 7]

let newArr = new Array(3).fill(7)
document.write(newArr);  // [7, 7, 7]

fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
ES6提供三个新的方法:

entries()
keys()
values()

用于遍历数组。它们都返回一个遍历器,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、
values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
  document.write(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  document.write(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  document.write(index, elem);
}
// 0 "a"
// 1 "b"
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值