一、声明
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>
原文地址:https://www.cnblogs.com/davina123/p/12023901.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。