var 声明变量
* let 声明的变量是在当前的作用于内有效 const 声明的是只读变量 (常量)
* let const 声明的变量不存在变量的声明提前
* 声明变量不能重复声明
* 代码块 按块区分代码 就是一个一组大括号 {}
{
var a = 10;
let b = 20;
let b=30; error
const c = 9.8;
c=100; error c变量是常量 只读
console.log(c);
}
console.log(a);
console.log(b);
console.log(c);
举例
for (var i = 0; i < 10; i++) {
(function (a) {
setTimeout(function () {
console.log(a);
}, 1);
})(i);
}
for (let i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 1);
}
变量的解构赋值 ----按照对应的结构进行赋值
{
es6 声明多个变量
let [a,b,c,d]=[1, 2, 3, ["a", "b"]];
console.log(a, b, c, d);
下面这种情况也是对应取值
let [a,b]=[1, 2, 3, 4, 5];
console.log(a, b);
结构统一 按照位置取值
let [a,[b],[[c]]]=[1, [2], [[3]]];
console.log(a, b, c);
解构赋值 也可以设置默认值
let [a=10,b]=[,2];
console.log(a,b);
对象解构赋值
let {name,sex}={name: "张三", sex: "男"};
console.log(name, sex);
举例对象的解构赋值 Math
let {abs,floor,random}=Math;
console.log(random());
console.log(abs(-1));
let {log}=console;
log("abc");
字符串的解构赋值
let [a,b,c,d]="save";
console.log(a,b,c,d);
字符串 String 对象
let {length : len}="save";
console.log(len);
**扩展符 es6 ...**
扩展符 在解构赋值里面 放在最后一位
let [a,b,...c]=[1, 2, 3, 4, 5];
let {log}=console;
log(a, b, c);
es6 里面的字符串遍历器
for of 类似es5 里面的for for in
{
let [a,...b] =["hello",1,2,3,4,5] ;
for (let char of a) {
console.log(char);
}
for(let str of b)
{
console.log(str);
}
模板字符串 ${} 字符串拼接的
将字符串 修改为 反引号(`)里面写模板字符串
let [a,b,obj]=["abcd", "efgh", {name: "毛豆"}];
let c = `我是第一个字符串:${a},我是第二个字符串:${b},我的名字叫:${obj.name}。`;
let { log }=console;
log(c);
模板字符串里面放置 javascript表达式 <%.....%>
let obj = [
{"name": "张三"},
{"name": "李四"},
{"name": "王伟"},
{"name": "马六"}
];
下面的这种格式在ejs 模板语法中在 node 中编译
let complete = `
<ul class="namelist">
<% for(let i=0;i<${obj.length};i++){%>
<li><%= ${obj[i].name}%></li>
<%}%>
</ul>
`;
console.log(complete);
}
函数的扩展
{
1.函数默认值的问题
function method(a, b) {
console.log(a, b);
}
method(1, 2);
es6 给函数的形参带入了默认值的问题
function method(a="a", b=2) {
console.log(a, b);
}
method();
函数传参合解构赋值连用
function method({a,b=2}) {
console.log(a, b);
}
method({});
method({a: 1, b: 3});
扩展符合函数的使用
function method([a,...b]){
console.log(a,b);
}
method([1,2,3,4,5,6]);
/es6 里面的箭头函数 =>
es5 的函数
var method=function (val){
return val;
}
es6 箭头函数
let method=(val)=>val;
console.log(method(1));*/
如果箭头函数返回对象 返回值上添加()
let fun=()=>({name:1,age:20});
console.log(fun());
let fun1=()=>[1,2,3];
console.log(fun1());
let a=["a","b","c","d"];
map 映射
let b=a.map((val,index)=>{
return val+index
});
let b=a.map((val,index)=>val+index);
console.log(b);
在实用性箭头函数的时候一定要注意内部的this 指针问题
因为箭头函数 保持上下文this一致 内部this 和 外部this一致
console.log(this);
let a=["a","b","c","d"];
map 映射
let b=a.map((val,index)=>{
console.log(this);
if(index%2==0)
{
return val+index;
}
else {
return val;
}
});
console.log(b);
let fun=function (){
}
let fun=()=>{
}
}
}
数组的扩展
**扩展运算符 ...**
扩展运算符 拆开数组
console.log(...[1,2,3,4,5]);
扩展运算符和函数的使用
function fun(array,...item){
array.push(...item);
}
let array=[];
fun(array,...[1,2,3,4,5]);
console.log(array)
扩展运算符
替换apply args 数组型
function f1(a,b,c){
console.log(a,b,c);
}
let m=[1,2,3];
//f1.apply(null,m);
f1(...m);
扩展运算符 复制数组
let a=[1,2,3];
let b=a;
b[0]="a";
console.log(b,a);
//修改其中一个数组 另一个数组也会发生变化
//扩展运算符 复制数组 修改其中一个 另一个不会发生变化
let a=[1,2,3];
let b= [...a];
b[0]="a";
console.log(a, b);
扩展运算符合并数组
let a=[1,2];
let b=[3,4];
let c= [...a,...b];
console.log(c)
数组的扩展方法 Array.from(); 将类数组对象 转化为正真的数组
let a={
0:"a",
1:"b",
length:2
}
console.log(Array.from(a))
数组的扩展方法 Array.of() 将一组值转化为数组
console.log(Array.of(1, 2, 3, 4, 5));
find() 找出数组里面满足条件的第一个成员直接返回 findIndex 找出符合条件的第一个值的索引 如果没有则返回-1 扩展的数组方法
let a=[1,2,3,4,5];
console.log(a.find((n)=>{
return n%2==0;
}));
console.log(a.findIndex((value,index,arr)=>{
return value%6==0;
}));
对象的扩展
* es6 允许直接在对象内部声明属性和方法 方法简写
let obj={
name:"",
sleep(){
console.log("我在睡觉");
}
};
obj.sleep();
允许 通过字面量定义对象的属性
let _sex="Sex";
let a="age";
let b="Now";
let obj={
name:"毛豆",
[_sex]:"男",
[a+b]:20
};
console.log(obj);
console.log(obj['name']);
console.log(obj[_sex]);
console.log(obj[a+b]);
let obj = {
name: "张三",
sex: "男"
}
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
configurable: true | 可配置 |
---|---|
enumerable: true | 可枚举 |
value: “张三” | 数据值 |
writable: true | 可读写性 |
修改上面对象的配置
Object.defineProperty(obj, "sex", {
configurable: true,
enumerable: false,
value: "张三",
writable: true
});
Object.keys() 返回当前对象里面的键
在获取键的时候 如果键的enumerable 可枚举设置false 则会忽略该属性
console.log(Object.keys(obj))
扩展的super 指向当前对象的原型对象 this 指向当前对象
super 指向当前对象的原型对象
super 只能写在对象的方法内部 不能直接写在属相上 和 方法 的返回值上
let proto={
sleep(){
console.log("睡觉");
}
}
let person={
name:"张三",
logproto(){
super.sleep();
}
}
person.prototype=proto;设置原型对象
Object.setPrototypeOf(person,proto);
person.logproto()
对象的扩展方法
Object.assign() 合并对象 一定是可枚举属性
{
let ob1={
name:"张三"
};
let ob2={
name:"李四",
age:20
};
console.log(Object.assign({}, ob1, ob2));
}
Object.assign 可以复制对象
let obj={a:1,b:2,c:{m:2}};
let b=Object.assign({},obj);
obj.a=10;
obj.c.m=30;
console.log(b,obj);
下面的方法获取取决于对象属性的可枚举性 true false该属性会被忽略
Object.keys 获取对象的所有的键
Object.values 获取的对象的所有键值
Object.entries 获取对象的键值 返回是一个数组
let obj = {
name: "1",
sex: "2"
};
let ob = {
eat()
{
console.log("吃饭");
}
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));
__proto__ 获取当前对象的原型对象
console.log(obj.__proto__);
设置对象的原型对象
Object.setPrototypeOf(obj, ob);
console.log(obj.__proto__);
获取对象的原型对象的
console.log(Object.getPrototypeOf(obj));
Object.is() 严格判断两个对象相等 类似===
let a = {};
let b = {};
let c = a;
console.log(Object.is(1, 1));//true
console.log(Object.is(null, null)); //true
console.log(Object.is("1", 1));//false
console.log(Object.is([], []));//false
console.log(Object.is({}, {}));//false
console.log(Object.is(a, c));//true