1.变量声明let与const(注意与var的区别)
/** * 声明变量let和const */ //let声明的变量不存在预解析 //报错 flag is not defined console.log(flag); let flag = 123; //let声明的变量不允许重复(在同一个作用域内) //报错Identifier ‘flag‘ has already been declared let flag = 123; let flag = 456; console.log(flag); //ES6引入了块级作用域,而之前在浏览器中的JS是不存在块级作用域的 if (true) { //var flag = 123; //用var声明的flag变量在for循环外也可以正常打印出来 let flag = 123; //用let声明的flag变量在for循坏外面打印报错:flag is not defined } console.log(flag);
//const用来声明常量 //const声明的常量不允许重新赋值 //报错:Assignment to constant variable. const n = 1; n = 2; //const声明的常量必须初始化 //报错:Missing initializer in const declaration const a;
2.变量的解构赋值
/** * 变量的解构赋值 */ /* var a = 1; var b = 2; var c = 3; */ //或者var a = 1, b = 2, c = 3; //ES6中数组的解构赋值 //var [a,b,c] = [1,2,3]; //打印结果:1 2 3 //let [a,b,c] = [,123,]; //打印结果:undefined 123 undefined let [a = 111,b,c] = [,123,]; //打印结果:111 123 undefined console.log(a,b,c); //对象的解构赋值 //对象的赋值与顺序没有关系,是通过对象的名称进行赋值 //let {foo,bar} = {foo:‘hello‘,bar:‘hi‘}; let {foo,bar} = {bar:‘hi‘,foo:‘hello‘}; console.log(foo,bar); //对象的属性别名(如果有了别名,那原来的名字就无效了) let {foo:abc,bar} = {bar:‘hi‘,foo:‘hello‘}; //打印结果:hello hi //let {foo:abc,bar} = {bar:‘hi‘,abc:‘hello‘}; //打印结果:undefined ‘hi‘ console.log(abc,bar); //正常打印 //console.log(foo,bar); //报错:foo is not defined 内置对象Math(Math是对象,不是函数) let {cos,sin,random} = Math; //字符串的解构赋值 //[]里面声明的叫变量,这种方法不能获取字符串的长度 let[a,b,c,d,e] = "hello"; console.log(a,b,c,d,e); //打印结果:h e l l o let[a,b,c,d] = "hello"; console.log(a,b,c,d); //打印结果:h e l l //{}里面声明的是对象,即对象的解构赋值 let {length} = "hello"; console.log(length); //打印结果:5 //对象的解构赋值指定默认值 let {foo:abc = ‘hello‘,bar} = {bar:‘hi‘}; console.log(abc,bar);
3.字符串扩展
/** * 字符串相关扩展 * 几个常用的API: * includes():判断字符串中是否包含指定的子串,有的话返回true,否则返回false * 参数一:匹配的字符串;参数二:从第几个开始匹配 * startsWith():判断字符串是否以特定的字符串开始 * endsWith():判断字符串是否以特定的字符串结束 * * 模板字符串 */ /* console.log(‘hello world‘.includes(‘world‘)); //true console.log(‘hello world‘.includes(‘world1‘)); //false console.log(‘hello world‘.includes(‘world‘,6)); //true console.log(‘hello world‘.includes(‘world‘,7)); //false */ /* let url = ‘admin/index.php‘; console.log(url.startsWith(‘admin‘)); console.log(url.endsWith(‘php‘)); */ let obj = { username:‘xiaoming‘, age:‘24‘, gender:‘male‘ } let tag = ‘<div><span>‘+obj.username+‘</span><span>‘+obj.age+ ‘</span><span>‘+obj.gender+‘</span></div>‘; console.log(tag); //模板字符串:注意:用的是反引号(键盘上数字1左边的) //反引号表示模板,模板中的内容可以有格式,通过${}方式填充数据 //支持一些简单的表达式运算,也支持函数调用 let fn = function(info){ return info; } let tpl = ` <div> <span>${obj.username}</span> <span>${obj.age}</span> <span>${obj.gender}</span> <span>${1+1}</span> <span>${fn(‘hello‘)}</span> </div> `; console.log(tpl);
4. 函数扩展
/** * 函数扩展: * 1.参数默认值 * 2.参数解构赋值 * 3.rest参数 * 4.扩展运算符:... */ //参数默认值 //以前的写法: function foo(param){ let p = param || ‘hello‘; //let p = ‘hello‘ || param; //注意,如果把‘hello‘赋值放在前面,则不管参数是什么都将打印hello console.log(p); } //foo(); //打印结果:hello foo(‘hi‘); //打印结果:hi //ES6的写法:在原来的基础上做了精简 function foo(param = ‘hello‘){ console.log(param); } //foo(); //打印结果:hello foo(‘hi‘); //打印结果:hi //参数的解构赋值(传入的参数就是一个对象了) function foo({name=‘xiaoming‘,age=24} = {}){ console.log(name,age); } foo(); //打印结果:xiaoming 24 foo({name:‘zhangsan‘,age:22}); //打印结果:zhangsan 22 //rest参数(剩余参数):将单个数据转化成数组 function foo(a,b,...param){ console.log(a); console.log(b); console.log(param); //剩余的参数用数组的形式打印出来 } foo(1,2,3,4,5,6); //扩展运算符 ... :将数组转化成单个数据 function foo(a,b,c,d,e){ console.log(a+b+c+d+e); } foo(1,2,3,4,5); //打印结果:15 let arr = [1,2,3,4,5]; foo.apply(null,arr); //打印结果:15 foo(...arr); //打印结果:15 //合并数组:rest参数的应用 let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr3 = [...arr1,...arr2]; console.log(arr3); //打印结果:[ 1, 2, 3, 4, 5, 6 ]
/** * 箭头函数 */ //普通函数: function foo(){ console.log(‘hello‘); } //箭头函数: let foo = () => console.log(‘hello‘); //带一个参数的普通函数: function foo(v){ return v; } //带一个参数的箭头函数: let foo = v => v; //多个参数的箭头函数参数必须用()包住,函数体内有多行代码的必须用{}包住 let foo = (a,b) => {let c=a+b; console.log(c);} /** * 箭头函数的注意事项 */ //1.箭头函数中的this取决于函数的定于,而不是调用 function foo(){ //使用call调用foo时,这里的this其实就是call的第一个参数 console.log(this); //打印结果:{ num: 1 } setTimeout(() => {console.log(this.num)},100); //打印结果:1 } foo.call({num:1}); //2.箭头函数不可以new let foo = () => {this.num = 123;} new foo(); //报错:foo is not a constructor //3.箭头函数不可以使用arguments获取参数列表,可以使用rest参数代替 let foo = (a,b) => { console.log(arguments); //打印出来的对象 } let foo = (...param) => { console.log(param); //打印结果:[ 123, 456 ] } foo(123,456);
原文地址:https://www.cnblogs.com/zcy9838/p/11582832.html
时间: 2024-11-08 21:48:31