es6 -- 语法(扩展)
变量的扩展
/*
* 变量的扩展
* 1. let 在es6新的声明变量的关键字
* 特性: 1.没有与解析
* 2. 不允许重复声明
* 3. 块级作用域 {} 称之为代码块
* 2. const
* 1. 常量 固定的值 不能被修改
* 2. 对象obj 属性可以修改的
* */
<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>Documenttitle>
<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.对象属性名一定要对上
<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>Documenttitle>
<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+/g
pattern = /a+/y ===> 不能过滤除匹配字符以外的字符.
从上次匹配的地方开始匹配 的
* 第一次: aaa 剩余的部分 _aa_a
* 第二次 _aa_a 开始匹配
<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>Documenttitle>
<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() 求勾股定理的第三边
*/
<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>Documenttitle>
<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 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('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 : 结束位置(下标).
<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>Documenttitle>
<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 )
<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>Documenttitle>
<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() 判断参数是否相等;
<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>Documenttitle>
<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>
函数的扩展
<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>Documenttitle>
<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>