没事的时候学习一下吧。欢迎加我技术交流QQ群 :811956471
该笔记会持续更新..........
特别注意:JavaScript 引擎会将 "{} "理解成一个代码块,千万不要将大括号写在行首;
有时候不得不写在首行,变通的做法是 :({})
一 . let 和 const 命令:
let 总结:不存在变量提升,不允许重复声明,相同作用域不存在变量覆盖,具有块级作用域特性,只在let命令所在的代码块内有效。
let 声明的变量不属于window
eg:function f1() {let n = 5;if (true) {let n = 10;}console.log(n); // 5}
const总结:const声明一个只读的常量。一旦声明,常量的值就不能改变,旦声明变量,就必须立即初始化,不能留到以后赋值。
二、变量的解构赋值
(一)数组的解构赋值
1. 可以这样给变量赋值:let [a, b, c] = [1, 2, 3]; console.log(a)//1
2. ... 运算符 let [a,...b] = [1, 2, 3];console.log(a)//1;console.log(b)//[2,3]
3. 可以给默认值:let [a=1,b]=[,2] console.log(a)//1 console.log(b)//2
4.默认值可以是一个表达式、可以是引用解构赋值的其他变量
(给默认值需要注意:如果有默认值且赋值是 null、undefined时:则赋值无效,还是默认值;原因:ES6 内部使用严格相等运算符(===),判断一个位 置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效)
(二)对象的解构赋值
1. let{foo,bar}={foo:'aaa',bar:'bbb'}; foo // "aaa" ; bar // "bbb" //对象的属性没有次序,变量必须与属性同名,才能取到正确的值
2.如果变量名和属性名不一致:let { first: f, last: l } = { first: 'hello', last: 'world' }; console.log(f) //hello console.log(l)//world
3.对象解构实际是简写:let{foo:baz}={foo:'aaa',bar:'bbb'};console.log(foo) //undefined console.log(baz) //aaa ; foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。
(三)字符串的解构赋值
1.let [a,b,...c]="hellow" ; console.log(a) //h ; console.log(b) //e ; console.log(c) //剩余的
2. 可以将length属性解构赋值:let {length:lng}="hellow" //console.log(lng) // 6
(四)解构赋值的其他用途
1.交换变量的值:let x=1;let y=2; [x,y]=[y,x]
2.从函数返回多个值:
(1)返回一个数组: function re_fn(){ return [1,2,3] } let [a,b,c]=re_fn(); console.log(a)
(1)返回一个对象: function re_fn(){ return {a:1,b:2,c:3} } let {a,b,c}=re_fn(); console.log(a)
三、字符串的扩展
(一)字符串的遍历器接口
1. for....of 语法:for (let str of 'abc') { console.log(str) // a b c } ;
2.模板字符串语法:之接动态创建html 只能用 + 配合引号去使用 ,现在:`模板${变量}内容` 支持换行 模板字符串中嵌入变量,需要将变量名写在${}之中;这个变量可以是一个函数
四、字符串新增方法
1、includes(), startsWith(), endsWith()
includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let str ="hellow";
console.log( str.includes("p") )// false str中是否包含 p字符串
console.log( str.startsWith("h") )// true str中是否是h开头的
console.log( str.endsWith("w") )// true str中是否是h结尾的
//以上方法 都支持第二个参数:即 查找匹配的位置
//endsWith的行为与其他两个方法有所不同,其他查找下标从0开始 ,endsWith从1开始
console.log( str.startsWith("o",4) ) //表示从第5位开始搜索
console.log( str.endsWith("o",5) ) //表示从第5位开始搜索
2、repeat 将一个字符串重复N 次
'x'.repeat(3) // "xxx" ; 'hello'.repeat(2) // "hellohello" ; 'na'.repeat(0) // ""
3、padStart(),padEnd()
字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
console.log(str.padStart(4,"abc") )//astr
console.log(str.padStart(10,"abc") )//abcabcastr
console.log(str.padEnd(4,"abc") )//stra
4、trimStart(),trimEnd()
trimStart()和trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串
五、数值的扩展
1、Number.isNaN()
用来检查一个值是否为NaN。 如果参数类型不是NaN,Number.isNaN一律返回false。
注意:console.log(Number.isNaN("asds"))//新方法 false ;console.log(isNaN("asds"))// 传统方法 true,个人理解:Number.isNaN 在判断的时候 属于绝对判断 即 ===关系 而 isNaN方法是 ==关系 存在隐式转换number后再判断类型的一个过程
2、Number.isInteger() 用来判断一个数值是否为整数。
注意: console.log(Number.isInteger(3.0000000000000002) )// true 数的精度达到了小数点后16个位,导致最后的那个2被丢弃。也就是说小数点15后以后的会自动舍弃掉;对数据精度的要求较高,不建议使用Number.isInteger()判断一个数值是否为整数。
3、Math.trunc方法用于去除一个数的小数部分,返回整数部分。 同:parseInt
六、箭头函数
注意:箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。只有多去使用才能发现它的好处哦
下面是几个基础例子: 原文地址
var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];
elements.map(function(element) { return element.length; }); // 返回数组:[8, 6, 7, 9]
// 上面的普通函数可以改写成如下的箭头函数 elements.map((element) => { return element.length; }); // [8, 6, 7, 9]
// 当箭头函数只有一个参数时,可以省略参数的圆括号 elements.map(element => { return element.length; }); // [8, 6, 7, 9]
// 当箭头函数的函数体只有一个 `return` 语句时,可以省略 `return` 关键字和方法体的花括号 elements.map(element => element.length); // [8, 6, 7, 9]
// 在这个例子中,因为我们只需要 `length` 属性,所以可以使用参数解构 // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称,而 `lengthFooBArX` 则只是个变量名, // 可以替换成任意合法的变量名 elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
七、数组的扩展
(一)、扩展运算符 ...
1、序列化数组: console.log(...[1,2,3]) // 1 2 3
2、用于函数调用:
function add(x, y) {return x + y;}const numbers = [4, 38];console.log(add(...numbers)) // 42
3.代替 apply方法:
(1).将数组转为函数的参数:
// ES5 的写法function f(x, y, z) { // ...}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) { // ...}let args = [0, 1, 2];f(...args);
(2).应用Math.max方法,简化求出一个数组最大元素的写法:
es5 方法: console.log(Math.max.apply(null, [14, 3, 77])) // 77
es6方法:console.log(Math.max(14, 3, 77)) //77 ;或者:Math.max(...[14, 3, 77])
(3).将一个数组添加到另一个数组的末尾:
let arr1 = [0, 1, 2];let arr2 = [3, 4, 5]; arr1.push(...arr2);
4.扩展运算符在数组中的运用:
(1)复制数组:const a1 = [1, 2]; const a2 = [...a1];
(2)合并数组:onst arr1 = ['a', 'b'];const arr2 = ['c']; [...arr1, ...arr2] //["a", "b", "c"]
(二)、Array.from() 将一个类数组对象或者可遍历对象转换成一个真正的数组、将字符串转换成数组
1、 要将一个类数组对象转换为一个真正的数组,必须具备以下条件:
(1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
(2)该类数组对象的属性名必须为数值型或字符串型的数字
let array = { 0: 'name', 1: 'age', 2: 'sex', 3: ['user1','user2','user3'], 'length': 4}
let arr = Array.from(array )console.log(arr) // ['name','age','sex',['user1','user2','user3']]
如果对象名不是数字类型:
let array = { 'name': 'name', 'age': 'age', 'sex': 'sex', 'length': 4}
let arr = Array.from(array )console.log(arr) // [ undefined, undefined, undefined ]
2.将字符串转换为数组:
let str = 'world!'; console.log(Array.from(str)) // ["w", "o", "r", "l", "d", "!"]
(三)、Array.of() 用于将一组值,转换为数组
console.log(Array.of(3, 11, 8)) // [3, 11, 8] ; console.log(Array.of(3, 8).length) // 2
(四)、 find() 和 findIndex()
(1)、find:let arr = [1, 4, -5, 10] let eq= arr.find((n) =>n>0) console.log(eq) //1
该方法用于从数组第一位开始查找符合回调函数条件的成员,未找到时返回undefined
回调函数有三个参数。value:当前的数组元素。index:当前索引值。arr:被查找的数组
(2)、findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
(五) fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
可以接受三个参数:
['a', 'b', 'c','e','d'].fill("要填充的内容","填充开始位置下标从0开始","填充结束位置下标从1开始")
感觉有点像:splice(2,1,'aa'); 第几处开始 替换个数 替换内容
(六)数组实例的 entries(),keys() 和 values() 只能用于 for( item of 数组.方法){}
eg: let arr = ["a", "b", "c"];
1.entries()方法循环数组的每个键值对
for (let item of arr.entries()) { console.log(item)//[0, "a"] [1, "b"] [2, "c"] }
2.keys()方法循环数组的每个键
for (let item of arr.keys()) { console.log(item)//0,1,2 }
3.values()方法循环数组的每个值 也是默认情况
for (let item of arr.values()) { console.log(item)//a,b,c }
(七)数组实例的 includes() 返回布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似 判断是否包含给定值时 是绝对等于关系,即值的类型必须一样才返回true
eg: let arr = ["a", "b", "c",0];
console.log(arr.includes(88)) //false
console.log(arr.includes("0")) //false
console.log(arr.includes(0)) //true 类型必须一样才返回true
console.log(arr.includes("a")) //true
注意:该方法还有第二个参数:arr.includes("a",开始查找的位置--从0开始)
(八)数组实例的 flat(),flatMap()
(1)flat() 方法将多维数组变成一维数组 ,flat(参数) ,该参数表示展开数组层级数量 默认1
(2)flatMap() eg: [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
八、对象的扩展
(一)对象的简洁表达
(1)、属性的简写
const foo='bar';
const baz={foo}; console.log(baz)// {foo: "bar"} 等同于const baz={foo:foo};
(2)、对象内部函数的简写(省略 :function 这部分)
const o={method(){return"Hello!";}}; 同 :const o={method:function(){return"Hello!";}};
用于函数的返回值:
let birth = '2000/01/01';
const Person = {
name: '张三',
birth,
hello() {
return "我的名字是", this.name
}
};
console.log(Person.hello())//张三
(二)属性表达式
let obj={};
let b="B";
obj['a' + b] = 123;
console.log(obj)
es6 支持属性名是一个表达式,动态参数值
九、对象新增方法
1、Object.is() 比较两个值是否相等:类似于 === 绝对等于的关系;
2、合并对象:如果合并对象中有属性名相同的、则后者会覆盖前者
let obj1 = { a: "a" } ; let obj2 = { b: "B", a: "A" } console.log(Object.assign(obj1,obj2))//Object {a: "A", b: "B"}
3、遍历对象方法:Object.keys(),Object.values(),Object.entries() 用法同数组方法
(1)、Object.keys(),遍历对象的键名,返回一个数组:
var obja = { foo: 'bar', baz: 42 };
console.log("keys:", Object.keys(obja)) //keys: (2) ["foo", "baz"]
(2)、Object.values(),遍历对象的键值,返回一个数组:
var obja = { foo: 'bar', baz: 42 };
console.log("values:", Object.values(obja))//values: (2) ["bar", 42]
注意:如果键名是数值,遍历后的键值是按照 键名从小到大的顺序排列
var obja = { "3": 'bar', "5": 42, "1": 410 };
console.log("values:", Object.values(obja)) // [410, "bar", 42]
(3)、Object.entries(),遍历对象的键值对,返回一个数组:
var obja = { foo: 'bar', baz: 42 };
console.log("entries:", Object.entries(obja)) //entries: 0: (2) ["foo", "bar"] 1: (2) ["baz", 42]
(4)、还可以用 for...of..语法进行遍历对象
let obj = { a: 1, b: 2, c: 3 };
遍历键名:for (let key of Object.keys(obj)) { console.log(key); // 'a', 'b', 'c' }
遍历键值:for (let values of Object.values(obj)) { console.log(values); // 1, 2, 3 }
遍历键值对:for (let entries of Object.entries(obj)) { console.log(entries); // ['a', 1], ['b', 2], ['c', 3] }
(5)、Object.fromEntries() Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象
let arr1 = ['foo', 'bar']; let arr2 = ['baz', 42];
let arr = Object.fromEntries([ arr1, arr2 ]) console.log(arr)//{foo: "bar", baz: 42}
十、Set 和 Map 数据结构
(一)Set
注意:set 是一种全新的数据结构 类似数组缺不是数组 可用Array.from 转换成数组;Set 结构的键名就是键值(两者是同一个值)
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items); console.log(array)
1、可以用来数组去重:返回一个对象和一个数组
let arr=[1,1,2,3,4,3] let s=new Set(arr) console.log(s)//1, 2, 3, 4
2、用于对字符串的去重:返回一个对象和一个数组
let srt="aabacadd" let s=new Set(srt) console.log(Array.from(s))//["a", "b", "c","d"]
3、add(value):添加某个值,返回 Set 结构本身; delete(value):删除某个值,返回一个布尔值,表示删除是否成功。has(value):返回一个布尔值,表示该值是否为Set的成员。clear():清除所有成员,没有返回值。
let srt = "aabc"; let s = new Set(srt);
console.log(s.add("a"). add("d") )//"a", "b", "c" , "d"
console.log(s.add("d"))//"a", "b", "c", "d"
console.log(s.has("m"))//false
console.log(s.has("a"))//true
console.log(s.delete("a"))//true
console.log(s.clear())//undefined
4、可以用 keys(),values(),entries() 进行遍历
由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致
5、可以用 forEach()遍历
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value)) // 1 : 1 4 : 4 9 : 9
6、Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);console.log(union)
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));console.log(intersect)
// 差集
let difference = new Set([...a].filter(x => !b.has(x))); console.log(difference)
(一)Map:解决传统对象中只能用字符串作为键名的问题;转换数组可用:...和Array.from(),可以转换成数组、对象、json
set(key, value) 添加 ; get(key)获取;has(key);判断里面是否有某值,返回布尔值;size:返回数据长度;delete() 删除某个值;lear方法清除所有成员,没有返回值
const m = new Map(); const o = { p: 'Hello World' };
首先定义一个 m为Mpa()对象类型和一个传统的o对象,接着:
m.set(o, 'content')
console.log(m) // key: {p: "Hello World"} value: "content"
也可以set进去一个数组:
const m = new Map(); const o = [ ['name', '张三'], ['title', 'Author'] ] m.set(o) console.log(m)
1.前面会覆盖后面:键名不可以重复,值可以重复
const map = new Map();
map.set(1,'aaa').set(2,'bbb').set(2,'ccc');
console.log(map) //0: {1 => "aaa"} 1: {2 => "ccc"}
网友评论