JavaScript 索引、关联、对象数组增删改查循环

索引数组

//1、索引数组
let arr=[1,2,3,4,5];
console.log(arr);

增

let arr=[1,2,3,4,5];
arr.push(10);
arr[11]=33;
console.log(arr);

删

let arr=[1,2,3,4,5];
delete arr[1];
console.log(arr);

改

let arr=[1,2,3,4,5];
arr[2]=99;
console.log(arr);

查

let arr=[1,2,3,4,5];
console.log(arr[0]); // 1

循环

let arr=[1,2,3,4,5];
for(let i=0;i32;
});

console.log(val); // 2

Array.of() 将一组值转变为数组，参数是要转换成数组的值，返回值是新的数组实例

作用：将一组值转变为数组 参数：要转换成数组的值，elementN 返回值：新的数组实例

let arr=Array.of(1,3,'123',true);
console.log(arr); // [1, 3, "123", true]

Array.from() 类数组转换为数组

Array.from() 方法的作用是将类数组或可迭代对象转换为数组，比如 String、Map、伪数组等，必带的参数是 arrayLike（想要转换成数组的伪数组对象或可迭代对象），Array.from()方法的返回值是新的数组实例，不影响原结构。

作用：将类数组或可迭代对象转换为数组 参数：必带的 arrayLike（想要转换成数组的伪数组对象或可迭代对象） 返回值：新的数组实例 是否影响原结构：不影响

1、从 String 生成数组

let arr1=Array.from('foo');
console.log(arr1);// [ "f", "o", "o" ]

2、从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
let arr2=Array.from(set);
console.log(arr2);// [ "foo", "bar", "baz" ]

3、从 Map 生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
console.log(map);// {1 => 2, 2 => 4, 4 => 8}

let arr3=Array.from(map);
console.log(arr3);// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
console.log(mapper);// {"1" => "a", "2" => "b"}

let arr4=Array.from(mapper.values());
console.log(arr4);// ['a', 'b'];

let arr5=Array.from(mapper.keys());
console.log(arr5);// ['1', '2'];

从类数组对象（arguments）生成数组

function f() {
	console.log(arguments);
	console.log(Array.from(arguments)); // [ 1, 2, 3 ]
}

console.log(Array);
console.log(Array.from);
console.log(Array.prototype);
console.log([]);

f(1, 2, 3);

reduce 为数组中的每一个元素依次执行回调函数

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）

1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

var arr = [1, 2, 3, 4];

var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})

console.log(arr, sum);

var  arr = [1, 2, 3, 4];

var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值

console.log(arr, sum);

打印结果：

0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

这个例子 index 是从 0 开始的，第一次的 prev 的值是我们设置的初始值 0，数组长度是 4，reduce 函数循环 4 次。

结论：如果没有提供 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。

如果提供 initialValue，从索引0开始。

注意：如果这个数组为空，运用 reduce 是什么情况 ？

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//报错，"TypeError: Reduce of empty array with no initial value"

但是要是我们设置了初始值就不会报错，如下：

var  arr = [];

var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)

console.log(arr, sum); // [] 0

reduce 的简单用法

当然最简单的就是我们常用的数组求和，求乘积了。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)

console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})

console.log(nameNum); // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

数组去重

let arr = [1,2,3,4,4,1]

let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])

console.log(newArr);// [1, 2, 3, 4]

将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]

let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])

console.log(newArr); // [0, 1, 2, 3, 4, 5]

将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]

const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur) ? newArr(cur) : cur),[])
}

console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);

console.log(sum) //60

es5中新增了5个迭代方法 forEach() 遍历数组

作用：遍历数组 参数：回到函数，arr.forEach(callback(currentValue [, index [, array]])) 返回值：无（undefined） 是否影响原数组：不影响

let arr=[5,54,12,4,1,23,111];
arr.forEach(function (value,index,array) {
    console.log(value);
    console.log(index);
    console.log(array);
});

forEach() 方法遍历 非连续数组

let arr=[];
	arr[1]='a';
	arr[5]='g';
	arr[10]='h';
	arr.forEach(function (value,index) {
	    console.log(index);
	    console.log(value);
	});

map 方法遍历加工数组

let arr=[5,54,12,4,1,23,111];
let new_arr=arr.map(function (value,index,array) {
    // console.log(value);
    // console.log(index);
    // console.log(array);
    return value+1000;
});

console.log(arr);
console.log(new_arr);

filter 方法遍历过滤数组

let arr=[5,54,12,4,1,23,111];
let new_arr=arr.filter(function (value,index,array) {
    return value>10;
});

console.log(arr);
console.log(new_arr);

some 方法检测数组中是否有元素（some）满足条件

let arr=[5,54,12,4,1,23,111];
let bool_val=arr.some(function (value,index,array) {
    return value>10;
});

console.log(arr);
console.log(bool_val);

every 方法检测数组中是否所有（every）元素满足条件

let arr=[5,54,12,4,1,23,111];
let bool_val=arr.every(function (value,index,array) {
    //return value>10;
    return value {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

JSON.stringify() 和 JSON.parse()

JSON.stringify() 的作用是将 JavaScript 对象转换为 JSON 字符串，而 JSON.parse() 可以将JSON字符串转为一个对象。

localStorage/sessionStorage 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 json.stringify() 将对象转为字符串，而在取缓存时，只需配合 json.parse() 转回对象即可。

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
typeof JSON.stringify(arr);//string

let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object

在使用 JSON.parse() 需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：

let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a));// Array [1,2]
console.log(JSON.parse(b));// 报错

上面例子中变量b就无法转换，因为格式不符合。

1、判断数组是否包含某对象，或者判断对象是否相等

//判断数组是否包含某对象
let data = [
	    {name:'echo'},
	    {name:'听风是风'},
	    {name:'天子笑'},
    ],
    val = {name:'天子笑'};
    
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

//判断两数组/对象是否相等
let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

2、localStorage/sessionStorage可以存储对象

localStorage/sessionStorage 默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用 json.stringify() 将对象转为字符串，而在取缓存时，只需配合 json.parse() 转回对象即可。

//存
function setLocalStorage(key,val){
    window.localStorage.setItem(key,JSON.stringify(val));
};

setLocalStorage('demo',[1,55,3]);

//取
function getLocalStorage(key){
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};

let  a = getLocalStorage('demo');//[1,2,3]

数组遍历的练习

var arr=[
    {name:'贾宝玉',score:58},
    {name:'林黛玉',score:98},
    {name:'薛宝钗',score:90},
    {name:'贾环',score:45},
    {name:'贾政',score:88},
    {name:'袭人',score:59}
];

function getPeople(arr) {
    var new_arr=[];

    //操作：将arr数组中得分不及格的对象提取出来，添加到new_arr数组中
    //1、遍历arr数组
    //i 是index
    for (var i=0;i=aMeng.score.chinese){
            console.log(jingXiang);
        }else{
            console.log(aMeng);
        }
    }

对象 json 写法

var zhubajie={
    'name':'猪八戒',
    age:999,
    pet:{
        name:'哮天犬',
        age:18
    }
};
console.log(zhubajie);

for 杨辉三角

for(var i=0;i