JS语法笔记

1.map(提取数组对象中的某个属性值，并返回一个新数组)

//实例一：单纯的提取数组对象中的某个属性值，返回一个数组
var detailList = [
   {id:1, name:'张三' },
   { id:2, name:'李四' },
   { id:3, name:'王五' },
]
var result = detailList.map(function(item) {
     return item.name;
 });
console.log(result, '新数组');//['张三'，'李四','王五']

//实例二：提取数组对象中的某个属性值，并返回一个带有属性名的新数组
var detailList = [
    { id:1, name:'张三' },
    { id:2, name:'李四' },
    { id:3, name:'王五' },
 ]
var result = detailList.map(item =>({
    bossName:item.name,
    bossId:item.id
}))
console.log(result, '新数组');//[{bossName:'张三',bossId:1},{bossName:'李四',bossId:2},{bossName:'王五',bossId:3}]

2.some(判断数组对象中是否存在某个属性值)

var list = [
    { id:1, name:'张三' },
    { id:2, name:'李四' },
    { id:3, name:'王五' },
]
var result = list.some(function (item) {
     if(item.name==='李四'){
         return true
     }
   })
  console.log(result) //true/false

3.find/filter(根据数组对象中的某个属性值，取它整个对象)

var list = [
    { id:1, name:'张三' },
    {id:2, name:'李四' },
    { id:3, name:'王五' },
]
var result = list.find(item=>item.name==='李四');
var id = result && result.id

console.log(id) //2

//还可以用filter
var result = list.filter(item=>item.name==='李四');
console.log(result ) //[{id:2,name:'李四'}]

4.forEach/push(循环向数组对象中添加属性)

let arr = this.list
let data= []
arr.forEach((item, index) => {
    data.push(Object.assign({}, item, { 'selected': true }))
  })
this.list = []
this.list = data
console.log(this.list)

5.for…in用法

var a = ['A', 'B', 'C'];
for (var i in a) {
 alert(i); // '0', '1', '2'
 alert(a[i]); // 'A', 'B', 'C'
}

6.for…of用法

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
 alert(x);//'A', 'B', 'C'
}
for (var x of s) { // 遍历Set
 alert(x);//'A', 'B', 'C'
}
for (var x of m) { // 遍历Map
 alert(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}

7.async…await

1.await后面接一个会return new promise的函数并执行它
2.await只能放在async函数里

使用async和await获取成功的结果

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

获取失败的结果

function 摇色子(猜测){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
            if(猜测 === '大'){
                resolve(sino)
            }else{
                reject(sino)
            }
        }else{
            if(猜测 === '大'){
                reject(sino)
            }else{
                resolve(sino)
            }
        }
        setTimeout(()=>{
            resolve(sino)
        },300)
    })
}
async function test(){
    try{
        //把await及获取它的值的操作放在try里
        let n =await 摇色子('大')
        console.log('赢了' + n)
    }catch(error){
      //失败的操作放在catch里
        console.log('输了' + error)
    }
}
test()

8.三点运算符

1.数组的复制

1.创建一个数组
var number = ['吃饭', '玩游戏', '聊天', '看电影'];
 // console.log(...number); // 吃饭 玩游戏 聊天 看电影
 var arr = [...number];
 // console.log(arr); ['吃饭', '玩游戏', '聊天', '看电影']

2.对象的复制

//对象的深拷贝
 var obj = { name: '明明', age: 20 };
 // console.log(...obj); //不能直接打印对象，会报错
 var obj1 = { ...obj };
 // console.log(obj1);
 obj1.age = 22;
 // console.log(obj); // { name: '明明', age: 20 }   不影响原有对象的值

3.对象的合并

var obj2 = { name: '宝宝' };
var obj3 = { age: 22 };
var obj4 = { ...obj2 , ...obj3 };
// console.log(obj4); // {name: "宝宝", age: 22}

4.在函数中的使用

//1.实参中的使用
//需要将数组里的元素，分割为单个实参传递
function fn(x, y, z) {
    console.log(x, y, z);
}
// fn(1, 2, 3);
var arr = ['aa', 'abb', 'cdd'];
// fn(...arr);

//2.作为形参时
//将传递的多个实参，转化为数组
function fn1(...arr2) {
   console.log(arr2); // ["aabb", "ccdd", "nnmm"]
}
fn1("aabb", "ccdd", "nnmm");

8.前端几种本地缓存机制

1.Cookie的特点

1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。

//写入方法
function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires="