一、声明
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 </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>
三、字符串
方法：
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>