es6 -- 语法(扩展)
来源：互联网 发布：linux服务器ftp服务开 编辑：程序博客网 时间：2024/06/10 03:39
变量的扩展
/** 变量的扩展* 1. let 在es6新的声明变量的关键字* 特性: 1.没有与解析* 2. 不允许重复声明* 3. 块级作用域 {} 称之为代码块* 2. const* 1. 常量 固定的值 不能被修改* 2. 对象obj 属性可以修改的* */<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style> </head><body><script type="text/javascript"> /* * 变量的扩展 * 1. let 在es6新的声明变量的关键字 * 特性: 1.没有与解析 * 2. 不允许重复声明 * 3. 块级作用域 {} 称之为代码块 * 2. const * 1. 常量 固定的值 不能被修改 * 2. 对象obj 属性可以修改的 * */ // console.log(a);// defined // let a = "2130"; //var 会先找.undefined. // let a = 1; //不允许重复声明 /* for (var i = 0; i < 3; i++) { //平常要输出 012. 需要闭包 (function(a){ var j = a; setTimeout(function () { console.log(j); },300) })(i) }; for (let i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }) } { let a = ""; } console.log(a)//defined; */ // const b = "常量"; // b = "不能修改"; // 例外 对象的属性可以被修改. const obj = { name : "狗蛋", say : function(){ console.log(1); } } obj.name = "二狗"; obj.say = function(){ console.log(2); } console.log(obj.name); console.log(obj.say);</script></body></html>赋值的扩展
结构赋值: 可以按照一定的结构进行赋值 !!结构对上 1.对象属性名一定要对上<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style> </head><body><script type="text/javascript"> /* 赋值的扩展 结构赋值: 可以按照一定的结构进行赋值 结构对上 1.对象属性名一定要对上 */ // let [a,b] = [1,2]; // console.log(a,b); // let [a,[c],b] = [1,[2],3]; // console.log(a,b,c);//1 3 2 // 对象 // let obj = { // name:"狗蛋", // fn : "二狗" // }; // let {name,fn} = obj; // console.log(name,fn); //变量的值互换. var a = "狗蛋"; var b = "二狗"; var [a,b] = [b,a]; console.log(a,b); //</script></body></html>字符串的扩展
1.用反引号``声明 ${}可以拼接变量. ${}内可以运算 可以换行,识别换行2.字符串的查找 返回bool includes("w") 是否存在 第二参数 从第几位开始. startsWith() 开头是否是 从末尾位开始 endsWith() 结尾是否是 repeat() 复制几遍 ,自身不会改变.pattern = /a+/gpattern = /a+/y ===> 不能过滤除匹配字符以外的字符. 从上次匹配的地方开始匹配 的 * 第一次: aaa 剩余的部分 _aa_a * 第二次 _aa_a 开始匹配<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style> </head><body><script type="text/javascript"> /* 字符串的扩展 用反引号``声明 ${}可以拼接变量. ${}内可以运算 可以换行,识别换行 */ /* let a = 10; let b = `${a+1} goudan`; console.log(b); */ /* 字符串的查找 返回bool includes("w") 是否存在 第二参数 从第几位开始. startsWith() 开头是否是 从末尾位开始 endsWith() 结尾是否是 repeat() 复制几遍 ,自身不会改变. */ // let str = "goudan"; // // console.log(str.includes('gou'));//true // console.log(str.startsWith('go'));// // console.log(str.endsWith('an')); // console.log(str.repeat(10)); // console.log(str); /* pattern = /a+/g pattern = /a+/y ===> 不能过滤除匹配字符以外的字符. 从上次匹配的地方开始匹配 的 * 第一次: aaa 剩余的部分 _aa_a * 第二次 _aa_a 开始匹配 */ // let str = "baaabaaaabaa"; // let pattern = /a+/g; // let pattern2 = /a+/y; // console.log(pattern.exec(str)); // console.log(pattern.exec(str)); // console.log(pattern2.exec(str)); // console.log(pattern2.exec(str));//null</script></body></html>数学方法的扩展
/* Math.trunc() 取整(去掉小数点) Math.sign() 判断是否是正数还是负数. 返回值 正 1 负 -1 0 -0; Math.hypot() 求勾股定理的第三边 */<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style> </head><body><script type="text/javascript"> /* Math.trunc() 取整(去掉小数点) Math.sign() 判断是否是正数还是负数. 返回值 正 1 负 -1 0 -0; Math.hypot() 求勾股定理的第三边 */ let num = 1.23213; console.log(Math.trunc(num)); console.log(Math.sign(-0)); console.log(Math.hypot(3,4));</script></body></html>数组的扩展
1.扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 —摘自阮一峰
console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]作为展开数组的方法。 不再需要apply方法，将数组转为函数的参数了
// 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); Array.from() ,将类数组 变成 数组. Array.of(param) ,将param 变成数组 arr.find() 遍历数组 将第一个符合条件的值返回出去, 无则返回-1; arr.findIndex() 返回下标. arr.fill() 在数组原来的内容上替换. 可以多个. 参数1 : 填充的内容 eg:[2,5) 参数2 : 开始位置(下标). 参数3 : 结束位置(下标).<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style></head><body> <div></div> <div></div> <div></div> <script type="text/javascript"> /* 数组的扩展 Array.from() ,将类数组 变成 数组. Array.of(param) ,将param 变成数组 arr.find() 遍历数组 将第一个符合条件的值返回出去, 无则返回-1; arr.findIndex() 返回下标. arr.fill() 在数组原来的内容上替换. 可以多个. 参数1 : 填充的内容 eg:[2,5) 参数2 : 开始位置(下标). 参数3 : 结束位置(下标). */ /*Array.from(): var divs = document.querySelectorAll("div"); // var str = "goudan"; // var arr2 = str.split(""); // var arr = [].slice.call(divs); var arr = Array.from(divs); var arr2 = Array.from("goudan"); console.log(arr,arr2);*/ // Array.of //console.log(Array.of(1,2,3,4)); // arr.find() findIndex() arr.fill() let arr = [1,2,3,4,5,6]; // let n = arr.find(function(value,i){//值,下标 // return i>3; // }) let n = arr.findIndex(function(value,i){//值,下标 return value>3; }); console.log(n); arr.fill(2,0,6); //[2,2,2,2,2,2] arr.fill(3,1,6); //[2,3,3,3,3,3] console.log(arr);</script></body></html>循环的扩展
循环的扩展 for (let/var of )<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style></head><body> <script type="text/javascript"> /* 循环的扩展 for (let/var of ) */ // 遍历str 的 值 /*let str = "goudan"; for(let value of str){ value = ` ${value}`; console.log(value); } console.log(str);//不改变*/ let arr = ["goudan","ergou","shagou"]; /*for(let value of arr){ value = value.substring(0,2); console.log(value); }*/ // 遍历下标 /*for(let i of arr.keys()){ arr[i] = "123"; console.log(i); }*/ // 对象的遍历Object.values(obj) Object.keys(obj) let obj = { name : "goudan", say : function(){ console.log(1); } } // var arr1 = Object.values(obj); //返回是数组. // console.log(arr1); /*// 遍历值Object.values(obj) for(let value of Object.values(obj)){ console.log(value); if(typeof value === "function"){ value(); } }*/ // 遍历属性名 for(let key of Object.keys(obj)){ console.log(key); } </script></body></html>对象的扩展
1.对象的代理 new Proxy(obj,{ get(){ }, set(){ } }); 参数1: //被代理的对象 参数2: 对象 {被访问时触发的函数get(),修改对象属性时触发的函数set()} 2.定义对象的方法扩展 3.Object.is() 判断参数是否相等;<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style> </head><body><script type="text/javascript"> /* 1.对象的代理 new Proxy(obj,{ get(){ }, set(){ } }); 参数1: //被代理的对象 参数2: 对象 {被访问时触发的函数get(),修改对象属性时触发的函数set()} */ /*let obj = { name : "goudan", a : 10, b : 100 } let p1 = new Proxy(obj,{ // 被访问时触发. get(obj,key){//key访问的属性名. if(key != "name"){ return obj[key]; } }, // 修改对象属性的值时触发. set(obj,key,value){ //value修改的值 if(key != "name"){ obj[key] = value; } } }); console.log(p1.a); console.log(p1.b); // console.log(p1.name); //undefined // 修改 p1.a = 123; console.log(p1.a); // p1.name = "ergou"; // console.log(p1.name);*/ /* 2.定义对象的方法扩展 */ /*let obj = { name : "goudan", say(){ console.log(1); }, ["w"+"w"]:"213" } obj.say(); console.log(obj.ww);*/ /* Object.is() 判断参数是否相等; */ /*console.log(Object.is(0,-0));//false console.log(0 === -0);//true console.log(Object.is(NaN,NaN));//true console.log(NaN === NaN);//false*/ /* Object.assign() 将多个对象合并到第一个, 第一个参数 被赋值的对象 剩下的所有参数 赋值的对象 如果重复 后面覆盖前面的 */ /*let obj = {}; let obj1 = { name: "hou" },obj2 = { name: "gou", say(){ conosole.log(1); } }; Object.assign(obj,obj1,obj2); console.log(obj);*/ /* 获取对象的prototype 通过创建的对象去获取 Object.getPrototypeOf(创建的对象) 替换. Object.setPrototypeOf() */ function Cat(names){ if(this instanceof Cat){ this.name = names; }else{ return new Cat(names); } } Cat.prototype.say = function(){ console.log(this.name); }; function Dog(names){ if(this instanceof Dog){ this.name = names; }else{ return new Dog(names); }; } Dog.prototype.replace = function(){ console.log("cat"); } let a = Cat("goudan"); let b = Dog("ergou"); a.say(); Object.setPrototypeOf(b,Cat.prototype); //替换. console.log(Object.getPrototypeOf(a)); console.log(Object.getPrototypeOf(b)); //只是创建的这个对象改变了 console.log(Dog.prototype); //不影响.</script></body></html>函数的扩展
<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> * {margin: 0; padding: 0;} a {text-decoration: none;} ul,li {list-style: none;} body {font-family: "Microsoft yahei";} </style> </head><body><script type="text/javascript"> /* 参数: 1.多余参数. (argument) 多余的参数用...param(自定名)接收 2.默认参数. 3.箭头函数 ==> */ // 1.多余参数. (argument) /*function fn(a,...param){ console.log(a); console.log(param)//[] } fn(1,12,{"name":1},function(){ alert(1); });*/ // 2.默认参数. /*function fn(a,b = "goudan"){ // var b = b || "goudan";// 平常 console.log(a,b); }; fn("123");*/ // 3.箭头函数. (不能当作真正的函数) // 如果一行代码可以省略{}; // 一个参数可以省略(); // var Fn = function(){}; // let fn = (a) => console.log(a); // fn("123456"); // 与真正的函数的区别 // 1.不能用new // 2.arguments不存在. // 3.this指向始终指向定义的那个对象. let obj = { name: "goudan", say:function(){ setTimeout(()=>{ console.log(this); //obj. }) } }; let obj1 = { name: "goudan", say:function(){ setTimeout(function(){ console.log(this);//window. }) } }; obj.say(); obj1.say();</script></body></html> 0 0
- es6 -- 语法(扩展)
- es6语法-字符串扩展
- ES6之对象字面量扩展语法（Enhanced Object Literals)
- ES6语法
- es6语法
- ES6学习——新的语法：对象字面量扩展（Object Literal Extensions）
- ES6学习——新的语法：数值字面量扩展（Number Literal Extensions）
- ES6学习——新的语法：对象字面量扩展（Object Literal Extensions）
- 如何理解es6语法的，对象前面加三个点(...) 对象的解构赋值和扩展
- ES6--函数扩展
- es6函数的扩展
- ES6-Math对象扩展
- ES6 数组的扩展
- 【ES6】字符串的扩展
- 【ES6】正则的扩展
- 【ES6】数组的扩展
- ES6对象的扩展
- es6 字符扩展
- LeetCode:36. Valid Sudoku，数独是否有效 :
- Yii2 使用Event -2 ，如何使用事件_@TERRY
- 自己实现一个bubble_sort(冒泡排序)，可以完成不同类型数据的排序
- Linux中确定CPU的情况
- 原码反码补码
- es6 -- 语法(扩展)
- Yii2 使用Event -1 ，如何使用事件_@TERRY
- 0507 #22 NYISTOJ 素数求和问题
- Yii2 自带事件的用法_@foreach
- 应用统计学与R语言实现学习笔记（五）——参数估计
- Python Numpy Tutorial: 列表
- 实现一个通讯录； 通讯录可以用来存储1000个人的信息，每个人的信息包括： 姓名、性别、年龄、电话、住址 提供方法： 1. 添加联系人信息 2. 删除指定联系人信息 3. 查找指定
- codeforces 791B
- Composer 学习笔记
