一、声明
1. let(变量)
可以只声明不给值（默认为undefined）,或者是先声明后给值，但是必需声明后再使用,可以重复赋值，可以防止变量泄露；
同一作用域里不能重复的声明，不同作用域里可以，不会被预解析；
声明的变量不再属于window的属性
2. const(常量)
必需先声明后使用，声明的时候必需要赋值；声明后不能进行修改，但是const声明的对象中的属性可以修改；
同一作用域里不能重复的声明，不同作用域里可以，不会被预解析；
具有块级作用域，声明的变量不再属于window的属性
<script>
let a;
console.log(a); //undefined a = 'dvaina';
console.log(a, window.a); //dvaina undefined const b = 10;
const obj = {
c: 10,
d: 20
}
obj.d = 30;
console.log(b, obj.c, obj.d); //10 10 30
</script>
二、结构赋值
允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解析。
1、数组的解构赋值
<script>
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1 2 3 // 前后的模式必须匹配，如果前面声明的是二维数组，后面的也是二维数组
let [d, [e]] = [1, [2]];
console.log(d, e);////1 2 //前少后多，用上拓展运算符，不定参数解构赋值
let [g, ...h] = [1, 2, 3, 4];
console.log(g, h); //1 (3) [2, 3, 4] //前少后多，省略赋值
let [i, , j] = [11, 2, 3];
console.log(i, j); //11 3 let [k, l] = [1, 2, 3];
console.log(k, l) //1 2 //前多后少的情况下，某些变量只声明未定义
let [m, n] = [2];
console.log(m, n); //2 undefined
</script>
2、对象和函数的解构赋值
<script>
//根据key值进行匹配
let { a, b, c } = { a: 'lisa', b: 'davina' }
console.log(a, b, c) //lisa davina undefined //变量提前被声明，变量也可以设置默认值
let name, age;
({ name, age, love='reading' } = { name: 'davina', age: 18 })
console.log(name, age, love); //davina 18 reading
</script>
<script>
//变量设置默认值
function fn(a, b, c = 5) {
console.log(a, b, c); //4 5 5
console.log(arguments) //[4,5]
}
fn(4, 5);
</script>
3、字符串，数值，和布尔值的解构赋值
<script>
//字符串的解构赋值，字符串，被转成一个类似数组的对象,未声明为undefined，有length属性
const [a, b, c, d, e, f, g] = 'davina';
console.log(a, b, c, d, e, f, g); //d a v i n a undefined
console.log([a, b, c, d, e, f, g].length) //7 //数值和布尔值的解构赋值,如果等号右边是数值或者是布尔值会先转为对象
let { toString: s } = 123;
console.log(s === Number.prototype.toString); //true let { toString: S } = false;
console.log(S === Boolean.prototype.toString); //true
//undefined和null无法转为对象，所以对它们进行解构赋值,报错
</script>
4、解析赋值的用途
<script>
//交接变量的值
let x = 3;
let y = 4;
[x, y] = [y, x];
console.log(x, y); //4 3 //从函数返回多个值
function test() {
return [1, 2, 3]
}
let [a, b, c] = test();
console.log(a, b, c) //1 2 3 function test2() {
return {
foo: 1,
bar: 2
}
}
let { foo, bar } = test2();
console.log(foo, bar); //1 2 //快速的提取json值
let json = {
'id': 2,
'name': 'peng',
'sex': 'male',
'date': [1, 2]
}
let { id, name, sex, date } = json;
console.log(id, name, sex, date); //2 "peng" "male" (2) [1, 2] //函数参数的默认值
//遍历Map结构
</script>
5、扩展运算符
扩展运算符（...）主要用于函数的调用，也可以将某些数据结构转为数组。
<script>
//扩展运算符
console.log(1, [2, 3, 4], 5); //1 (3) [2, 3, 4] 5
console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5 //函数调用
var arr = [1, 2, 3];
function fn(arr) {
return [...arr];
}
console.log(fn(arr)); //(3) [1, 2, 3]
function fn1(a, b, c) {
return a + b + c;
}
console.log(fn1(...arr)); //6 //扩展运算符后面还可以放置表达式
let x = 2;
console.log(...(x > 0 ? ['a'] : [])); //a //如果扩展运算符后面是一个空数组不产生任何效果
console.log(...[], 3); //3 //函数中的参数用...x 代表实参为数组
function show(y, ...x) {
console.log(x)
}
show(1, 2, 3, 4) //[2, 3, 4]
//
let a = `<div></div>`;
document.write(a.repeat(5));
console.log([...document.querySelectorAll('div')]); //[div, div, div, div, div]
</script>
扩展运算符的作用
<script>
//复制数组
const arr = [1, 2, 3]; // const arr1 = arr;
// arr[2] = 0;
// console.log(arr, arr1); //(3) [1, 2, 0] (3) [1, 2, 0]
// //从中我们可以看出，arr1并不是arr的克隆，它只复制了指向底层数据结构的指针，如是arr1变化，那arr也会改变。 //es5中要想实现克隆如下:
const arr3 = arr.concat();
arr3[2] = 4;
console.log(arr3, arr); //(3) [1, 2, 4] (3) [1, 2, 3] //es6中可以用到...
const arr2 = [...arr];
console.log(arr2); //(3) [1, 2, 3] //合并数组
let a = [1, 2];
let b = [3]; //es5中
console.log(a.concat(b)); //(3) [1, 2, 3]
//es6中
console.log([...a, ...b]); //(3) [1, 2, 3] //与解构赋值结合，可以生成新的数组
const [num1,...numn]=[1,2,3,4,5,6];
console.log(num1,numn); //1 (5) [2, 3, 4, 5, 6] //将字符串转成真正的数组
console.log([...'davina']); //(6) ["d", "a", "v", "i", "n", "a"]
</script>
实例：用es6中新学的内容写选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
display: none;
} div:first-of-type {
display: block;
}
</style>
</head>
<body>
<input type="button" value="vlaue1">
<input type="button" value="value2">
<input type="button" value="value3">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
//选项卡
[...document.querySelectorAll('input')].find((x, y) => {
x['onclick']= () => {
[...document.querySelectorAll('div')].find(d => {
d.style.display = 'none';
});
[...document.querySelectorAll('div')][y].style.display = 'block';
}
})
</script>
</body>
</html>
三、字符串
方法：
1. fromCharCode / charCodeAt 接受 Unicode 值，返回一个字符串 / 返回 Unicode 编码
<script>
let name = '';
for (let i = 0x4e00; i < 0x9fa5; i++) {
name += String.fromCharCode(i);
};
console.log(name.length); //20901
</script>
2 . repeat 字符串复制指定次数
<script>
let div = '<div></div>';
console.log(div.repeat(4)); //<div></div><div></div><div></div><div></div>
</script>
3. includes(有点像indexOf) 判断一个数组是否包含一个指定的值，如果是返回 true，否则false 第一个参数 要找的内容 第二个参数 从第几位开始
<script>
var ua = window.navigator.userAgent;
console.log(ua.includes('Chrome')); //true
</script>
4. startsWith/endsWith 检查字符串是否是以指定子字符串开头/结尾，还回布尔值 第一参数：判断的字符 第二参数：从第几位开始
<script>
let str = 'dafjdfdfjad3r34jfk32435fdgjiera';
console.log(str.startsWith('p', 4), str.endsWith('a')); //false true
</script>
5. padStart/padEnd 用于补全头部/尾部，返回补全后的字符串。第一参数：补全后字符串最大长度，第二个是要补的字母
<script>
let str = 'davina';
let str1 = 'dvaina'
console.log(str.padStart(10, 'love')); //lovedavina;
console.log(str1.padEnd(7)); //dvaina 没有第二个参数时用空格替代
console.log(str1.padStart(5, 'love')) //dvaina 原字符串长度大于第一个参数还回原字符串
</script>
模版（`${}`）
es6中的模版字符串替代了原有的字符串拼接的功能，字符串越长，或字符串中有特殊字符这种方法就更加的好用。
用法：“``”: 使用反引号将要拼接的模版包起来。“${}”: 使用${}将变量包起来
<script>
//es5中拼接方法 ：用到+号
let name = 'davina';
const age = 18;
let str = '我的名字是\'' + name + '\'，我今年' + age + '岁。'
console.log(str) //我的名字是'davina'，我今年18岁。 //es6中
let str1 = `我的名字是'${name}'，我今年${age}岁。`;
console.log(str1) //我的名字是'davina'，我今年18岁。 let json={
'div':`<div></div>`,
'spna':`<span></span>`
}
document.write(`${json.div+json.spna}`)
</script>
四、数组
1. find 参数为函数，函数可以接收3个参数，值x、索引i、数组arr，回调函数默认返回值x
<script>
let arr = [1, 'davina', 2, 4];
arr.find((x, y, z) => {
console.log(x, y, z);
console.log(z[y]);
})
</script>
2. filter 过滤，筛选。 参数为函数。返回新新数组，不会对原数组有影响，可以遍历完数组。（es5）
<script>
let arr = [1, 'davina', 2, 4];
var arr2 = arr.filter(item => {
return typeof item === 'number';
})
console.log(arr2); //(3) [1, 2, 4]
</script>
3. reduce/reduceRight 返回最后一次调用函数获得累积结果 参数：prev:上一次调用函数时返回的结果，cur当前元素，index 当前索引，arr：循环数组 reduceRigth是从右往左开始。
<script>
//元素相加
let arr = [1, 2, 3, 4, 5];
var arr2 = arr.reduce((prev, cur, index, arr) => {
return prev + cur;
});
console.log(arr2); //15
//合并数组
const arr3 = [[0, 1], [3, 4], [5, 6]].reduce((a, b) => {
return a.concat(b);
})
console.log(arr3); //(6) [0, 1, 3, 4, 5, 6]
//数组去重
var arr4 = [12, 43, 1, 2, 54, 1, 2, 234, 4, 5, 54, 45];
var arr5 = arr4.sort().reduce((prev, cur) => {
if (prev.length === 0 || prev[prev.length - 1] !== cur) {
prev.push(cur);
}
return prev;
}, [])
</script>
4. map 返回新数组，原来的数组不会改变，可以在原有的基础上做运算(es5)
<script>
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map((num) => {
return num * 2
})
console.log(arr2); //[2, 4, 6, 8, 10] var arr3 = [
{ name: 'davina', age: 18, sex: '女' },
{ name: 'lisa', age: 20, sex: '女' },
{ name: 'amy', age: 21, sex: '女' }
]
var arr4 = arr3.map((name) => {
return name.name;
})
console.log(arr4); //["davina", "lisa", "amy"]
</script>
5. for...of 数组的遍历
arr.keys() 方法是对key值进行遍历
arr.values()方法是对value值进行遍历
arr.entries()方法是对键值对进行遍历
<script>
let arr = ['davina', 'lisa', 'amy'];
for (let item of arr) {
console.log(item); //davina lisa amy
} for (let index of arr.keys()) {
console.log(index); //0 1 2
} for (let [index, val] of arr.entries()) {
console.log(index, val); //0 "davina" 1 "lisa" 2 "amy"
}
</script>
6. Array.of 将一组转化为数组
<script>
arr = Array.of(3, 4, 'dvaina', 'lisa');
console.log(arr.length);//4
console.log(arr[2]); //dvaina
</script>
7. Array.from 将类数组对象和可遍历的对象转换成真正的数组，第一个参数：类数组对象或者可遍历对象，第二参数：函数，第三个参数：第二个参数所代表的回调函数的this值。如果是一个真正的数组，Array.from会返回一个一样的新数组
<script>
let person = {
'0': 'davina', //key值必须是0，1，2...可以是数字或者是字符串
'1': 'lisa',
length: 2, //必须要有这个特殊的属性
} //es5写法
var array1 = [].slice.call(person);
console.log(array1); //
//es6写法
let array = Array.from(person);
console.log(array); // ["davina", "lisa"] console.log(Array.from('davina')); //["d", "a", "v", "i", "n", "a"] //只要部署了Iterator接口的数据结构都可以被转化成真正的数组
let set = new Set(['a', 'b']);//字符串和 Set 结构都具有 Iterator 接口
console.log(Array.from(set)) //["a", "b"]
</script>
8. copyWithin 在当前数组内部，将指定位置的成员复制到其它位置（会覆盖原数据），返回当前数组。会修改当前的数组。第一个参数：从该位置开始替换的数组，第二个参数：可选，从该位置开始读取数据默认为0负值为倒数，第三参数：可选 到该位置前停止读取，默认为数组长度
<script>
let arr = [1, 2, 3, 4, 5];
//console.log(arr.copyWithin(4)); [4, 5, 3, 4, 5]
//console.log(arr.copyWithin(4,3)); //[1, 2, 3, 4, 4]
console.log(arr.copyWithin(2, 1, 4)); // [1, 2, 2, 3, 4]
</script>