javascript 基础学习（ES6）（二）

一、let和const

let 特性：

• 用来声明变量，只在它所在的代码块中有效，所以在此块级作用域中不可重复声明；
• 不存在变量提升，声明后必须使用；
• 块级作用域中未声明就是用会报错（暂时性死区）；；

// var 存在变量提升，undefined是一种数据类型
console.log(foo); // 输出undefined
var foo = 2;

// let 不声明就使用会报错
console.log(bar); // 报错ReferenceError
let bar = 2;

const 特性：

• 具有上面 let 的三个特性；
• 声明后所指向的内存地址不会变动： 声明的简单类型的数据（数值、字符串、布尔值）等同于常量，复合类型的数据（比如对象、数组）只保存指针，原数据的数据结构是不是可变的，不能控制，

const a = {value:1}
a.value = 2
console.log(a) //{value:2}

const b =[1,2,3]
b.push(4)
console.log(b) //[1,2,3,4]

二、解构赋值

1、解构(Array)

基本
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略
let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

不完全解构
let [a = 1, b] = []; 
// a = 1, 
// b = undefined

剩余运算符
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

2、字符串解构(String)

let [a, b, c, d, e] = 'hello';
 // a = 'h' // b = 'e' // c = 'l' // d = 'l' // e = 'o' ```

3、对象解构(Object)

基本
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

可嵌套
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'

可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

三、Map和Set

1、Map

Map中的key

key 是字符串
var myMap = new Map();
var keyString = "a string";  
myMap.set(keyString, "和键'a string'关联的值");   	 // "和键'a string'关联的值"
myMap.get("a string");							   // "和键'a string'关联的值"
myMap.get(keyString);                     			// 因为 keyString === 'a string'

key 是对象
var myMap = new Map();
var keyObj = {}; 
myMap.set(keyObj, "和键 keyObj 关联的值");    
myMap.get({});							  // "和键 keyObj 关联的值"
myMap.get(keyObj);                          // undefined, 因为 keyObj !== {}

key 是函数
var myMap = new Map();
var keyFunc = function () {}; 					  // 函数 
myMap.set(keyFunc, "和键 keyFunc 关联的值"); 
myMap.get(keyFunc); 							// "和键 keyFunc 关联的值"
myMap.get(function() {}) 		// undefined, 因为 keyFunc !== function () {}

key 是 NaN
var myMap = new Map();
myMap.set(NaN, "not a number"); 
myMap.get(NaN); 							// "not a number" 
var otherNaN = Number("foo");
myMap.get(otherNaN); 	 // "not a number"

Map的迭代

for...of

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
 
// 将会显示两个log。 一个是 "0" 另一个是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
 
// 将会显示两个log。 一个是 "zero" 另一个是 "one"
for (var value of myMap.values()) {
  console.log(value);
}

forEach()

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

Map对象操作

Map 与 Array的转换
var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
 
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);


Map 的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
 
console.log(original === clone); 
// 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。


Map 的合并
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

2、Set

1. Set 对象存储的值总是唯一的

2. +0 与 -0 在存储判断唯一性的时候是恒等的，所以不能重复；

3. undefined 与 undefined 是恒等的，所以不能重复；

4. NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不能重复。

类型转换

Array转Set
var mySet = new Set(["value1", "value2", "value3"]);
// 用...操作符，将 Set 转 Array
var myArray = [...mySet];


String转Set
var mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}
// 注：Set 中 toString 方法是不能将 Set 转换成 String

Set对象作用

数组去重
var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

并集
var a = new Set([1, 2, 3]); 
var b = new Set([4, 3, 2]); 
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

交集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set(
  [...a].filter(x => b.has(x))
); // {2, 3}

四、字符串

子串的识别

let string = "apple,banana,orange";  //均可接受两个参数，（需要搜索的字符串，可选的搜索起始位置索引）
string.includes("banana");     // true  //返回布尔值，判断是否找到参数字符串
string.startsWith("apple");    // true  //返回布尔值，判断参数字符串是否在原字符串的头部
string.endsWith("apple");      // false  //返回布尔值，判断参数字符串是否在原字符串的尾部
string.startsWith("banana",6)  // true  //返回子串的位置使用indexOf、lastIndexOf

字符串重复

repeat()：返回新的字符串，表示将字符串重复指定次数返回。

//一般使用
console.log("Hello,".repeat(2));  // "Hello,Hello,"
//如果参数是小数，向下取整
console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello,"
//如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次
console.log("Hello,".repeat(-0.5));  // "" 
//如果参数是 NaN，等同于 repeat 零次
console.log("Hello,".repeat(NaN));  // "" 
//如果参数是负数或者 Infinity ，会报错:
console.log("Hello,".repeat(-1));  // RangeError: Invalid count value
console.log("Hello,".repeat(Infinity));  // RangeError: Invalid count value
//如果传入的参数是字符串，则会先将字符串转化为数字
console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2"));  // "Hello,Hello,"

字符串补全

padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。

padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

//一般使用
console.log("h".padStart(5,"o"));  // "ooooh"
console.log("h".padEnd(5,"o"));    // "hoooo"
console.log("h".padStart(5));      // "    h"
//如果指定的长度小于或者等于原字符串的长度，则返回原字符串:
console.log("hello".padStart(5,"A"));  // "hello"
//如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串:
console.log("hello".padEnd(10,",world!"));  // "hello,worl"
//常用于补全位数：
console.log("123".padStart(10,"0"));  // "0000000123"

模板字符串

模板字符串相当于加强版的字符串，用反引号 `

//普通字符串
let string = `Hello'\n'world`;
console.log(string); 
// "Hello'
// 'world"
    
//多行字符串:
let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?
    
//字符串插入变量和表达式，变量名和表达式写在 ${} 中
let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.
    
//字符串中调用函数：
function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

标签模板

标签模板，是一个函数的调用，其中调用的参数是模板字符串

alert`Hello world!`;
// 等价于
alert('Hello world!');

function f(stringArr,...values){
  let result = "";
  for(let i=0;i<stringArr.length;i++){
    result += stringArr[i];
    if(values[i]){
      result += String(values[i]).replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
    }
   }
   return result;
 }
 name = '<Amy&MIke>';
 f`<p>Hi, ${name}.I would like send you some message.</p>`;
 // <p>Hi, &lt;Amy&amp;MIke&gt;.I would like send you some message.</p>

五、Math的扩展

Math.cbrt	//用于计算一个数的立方根。
Math.imul	//两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。
Math.hypot	//用于计算所有参数的平方和的平方根。
Math.clz32	//用于返回数字的32 位无符号整数形式的前导0的个数
Math.trunc	//用于返回数字的整数部分。
Math.fround	//用于获取数字的32位单精度浮点数形式。
Math.sign	//判断数字的符号（正、负、0）
Math.expm1()//用于计算 e 的 x 次方减 1 的结果，即 Math.exp(x) - 1 。
Math.log1p(x)//用于计算1 + x 的自然对数，即 Math.log(1 + x) 。
Math.log10(x)//用于计算以 10 为底的 x 的对数。
Math.log2()	//用于计算 2 为底的 x 的对数。
//双曲函数方法
Math.sinh(x): //用于计算双曲正弦。
Math.cosh(x): //用于计算双曲余弦。
Math.tanh(x): //用于计算双曲正切。
Math.asinh(x): //用于计算反双曲正弦。
Math.acosh(x): //用于计算反双曲余弦。
Math.atanh(x): //用于计算反双曲正切。
//指数运算符
1 ** 2; // 1
// 右结合，从右至左计算
2 ** 2 ** 3; // 256
// **=
let exam = 2;
exam ** = 2; // 4

六、数组

Array.of()

//将参数中所有值作为元素形成数组。
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
 
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
 
// 参数为空时返回空数组
console.log(Array.of()); // []

Array.from()

将类数组对象或可迭代对象转化为数组。

console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

数组扩展方法

1、查找

find()
查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素

findIndex()
查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

2、填充

fill()
将一定范围索引的数组元素内容填充为单个指定的值。

copyWithin()
将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

3、遍历

entries()
遍历键值对。

keys()
遍历键名。

values()
遍历键值。

4、包含

includes()
数组是否包含指定值。

5、嵌套数组转一维数组

flat()
console.log([1 ,[2, 3]].flat()); // [1, 2, 3]

数组缓冲区

数组缓冲区是内存中的一段地址，是定型数组的基础，实际字节数在创建时确定，之后只可修改其中的数据，不可修改大小

创建数组缓冲区

let buffer = new ArrayBuffer(10);
console.log(buffer.byteLength); // 10
分割已有数组缓冲区
let buffer = new ArrayBuffer(10);
let buffer1 = buffer.slice(1, 3);
console.log(buffer1.byteLength); // 2

定型数组

• 数组缓冲区的特定类型的视图。

  可以强制使用特定的数据类型，而不是使用通用的 DataView 对象来操作数组缓冲区。

• 创建

  通过数组缓冲区生成

let buffer = new ArrayBuffer(10),    
view = new Int8Array(buffer);
console.log(view.byteLength); // 10

扩展运算符

复制数组

let arr = [1, 2],
arr1 = [...arr];
console.log(arr1); // [1, 2]
 
// 数组含空位
let arr2 = [1, , 3],
arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

合并数组

console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]