【复习】javascript 数组，string对象，循环相关方法

1.数组

1.1.数组的创建方式

字面量创建

//底层实现： new Array();
var arr = [];

 数组构造函数创建

var arr1 = new Array();

 

1.2.js内置数组对象的方法

•  toString()    将数组中的每一项拿出来，使用逗号隔开，变成一个字符串
•  valueOf()    返回数组本身

•  join()           使用一个字符将数组分割成一个字符串；join方法不传入参数，默认使用逗号分割

• concat()       连接数组之后会返回一个新数组，例如[].concat(arr,arr1)

• push()         在数组最后添加项；返回新数组的长度   可以添加多项数据，例如添加多项数据：arr.push(100,200,300,'哈哈哈','嘻嘻嘻')

• pop()          删除数组最后一项；返回被删除的最后一项的值   只能删除最后一项

• shift()          删除数组第一项； 返回被删除这项的值  每次只能删除一个

• unshift()      在数组最前面添加数据项；返回数组的长度 ；’可以添加多项；例如添加多项：arr.unshift('熊大','熊二','光头强')

• splice()       删除数组的中指定项；有三个参数  删除数组中的数据项，原数组会被改变；不传入参数，就是将数组中的所有数据项全删除；传入一个值：表示的时候要删除的数据项的索引开始位置，一直到结束；两个参数的时候：第一个表示要删除的数据项的索引开始的位置，第二个值表示：要删除的个数；三个参数的时候：第1个表示要删除的数据项的索引开始位置，第二个值表示要删除的个数，后面的参数是替换删除掉是数据的位置；返回的是被删除的数据组成的数组

• slice()       复制，用原来的数组中去复制一份数据出来  原数组中不会受影响；没有参数，相当于将原数组完整的复制了一份；一个参数，表示复制数组中的数据项的索引开始的位置，一直到数组结束位置；两个参数的时候，第一个表示复制数据项的索引开始的位置，第二个表示结束的索引的位置（但是这个位置上的值取不到）；返回赋值的数组

• reverse()   数组翻转，会改变原数组，返回翻转后的数组

• indexOf     获取数组元素的索引；一个参数时，表示查找该字符串的索引；两个参数时，，第二个参数表示查找的索引的开始位置；查找不到返回-1

• includes()   检查数组中是否包含某一个数据 Array.prototype.incloudes()  是es7(es2016)的一个方法

 

1.3.string对象的方法

• charAt()        根据索引获取对应位置的字符

• concat()        拼接字符串；是对象的一个方法，要使用的时候一定要使用对象名.方法名()；例如：str.concat(str1)

• split()            用来将字符串分割成一个数组的；返回的是一个数组

• slice()           截取字符串中的某一部分；不会影响原来的字符串，返回一个新的字符串；当参数是一个值的时候，表示截取索引的开始位置；两个参数时第一个表示截取索引开始的位置，第二个表示索引结束的位置（这个位置上的字符取不到）；当传入一个负数的参数，从字符串的后面第一个开始算，第一个的索引就是-1.  一直截取到最后

• substring()   截取字符串;不能使用负数，使用负数是无效

• substr()        截取字符串；如果是一个参数表示截取字符串索引的开始位置；如果是两个参数，第一个表示截取字符串索引开始的位置，第二个参数表示截取的个数

• replace()       字符串替换；第一个采纳数表示旧的字符串；第二个参数表示新的字符串，多个字符串只会替换一次

 

1.4.循环 

forEach()

           arr.forEach(function(item,index) {
                 //item：表示循环的数组中的每一项
                 //index: 表示的时候每一项的索引
                 console.log(item+'--------------'+index);
           })

 filter() 过滤器

        // ES6中提供的一个叫过滤器的函数   filter()   过滤   筛选：根据一定的条件来做筛选
        // 使用： filter(函数)    传入的函数中定义了一些筛选的条件
        // filter这个方法会返回一个新的数组
        var arr = [2000,3000,1500,1800,6000,5800];

        var res = arr.filter(function(item) {
            //item表示的就是arr这个数组中的每一项数据
            return item>2000;  //筛选条件， 返回arr数组中数据项值大于2000的数据项
        })

        console.log(res);

 map()    映射

         // ES6中的映射map方法
        // 从后台过来一条数据：
        var arr = ['家用电器','手机','保健食品','护肤产品','空调']

        //  <li><a href=#>家用电器</a></li>

        //map方法也会返回一个新的数组    map方法底层实际上已经做了数组的循环遍历了

        var res = arr.map(function(item) {
            return '<li><a href=#>'+item+'</a></li>'
        })

        console.log(res);

 some()  用于检测数组中的元素是否满足指定条件;如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false；some() 不会对空数组进行检测

        var arr = [100, 200, 300, 400];
		// some能够查看是否找到，但是不能够取出这个数据
		var newArr = [];

		arr.some(function (val, index) {
			console.log( index );
			// 查找200，并且取出200;如果找到200就存到数组中
			if ( val >= 200 ) {
				// 满足这个条件的val就是我们要找的值，吧这个值拿出来装到newArr
				newArr.push(val);
				return true;
			}
			
		});

  every()  用于检测数组所有元素是否都符合指定条件；如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

 1.5.其他

 1.5.1扩展运算符(展开运算符) 

  输出数据 

// 输出数据
// 展开运算符其实是将里面的元素, 展开成逗号分隔的语法形式
// 展开运算符可以说一个语法糖, 本身并没有真正的作用
let arr = [1,2,3];
console.log(...arr);// 输出 1,2,3

 借助concat()方法来复制数组 

// // 数组是一个引用型的对象, 经常会有数据污染的困扰,
// // 如果通过展开运算符生成一个新数组, 两个数组之间就是互相独立的了

// 复制数组(原生)
let arr2  = arr.concat([]);
console.log(...arr2);//1 2 3

 借助展开运算符合并数组

// 合并数组（es6）
let arr4 = [...arr,...arr2];
console.log(arr4);//[ 1, 2, 3, 1, 2, 3 ]

 

  1.5.2.数组去重

  借助set中元素不能重复的特点来帮助数组去重

// 数组去重
//使用set对象去重  set元素不能重复
let arrReply = [1,2,3,3,4,5,5];
let arr5 = [...new Set(arrReply)]
console.log(arr5);//[ 1, 2, 3, 4, 5 ]

// 数组生成set
let set = new Set(arr5);
console.log(set);

// set转化为数组
let arr6 = [...set];
console.log(arr6);

  

   1.5.3. 合并对象

  借助Object.assign()浅拷贝方法处理单层对象的合并

// 合并对象
// Object.assign 可以进行对象的合并
// 这个函数只要传入对象作为参数即可
let obj3 = {name:'tom'};
let obj4 = {age:17};
// 将后面的参数合并到第一个对象中,修改第一个对象
Object.assign(obj3,obj4);
console.log(obj3);

  借助Object.assign()浅拷贝方法还可以处理单层对象的赋值

let obj7 = Object.assign({},obj6);
console.log(obj7);

  

 1.5.4.解构

var student = {
    name: 'tom',
    age: 12,
    school: {
        name: 'xxx',
        address: 'yyy'
    }
}

// 解构对象内部对象的属性
// 解构语法方便这种从一个对象中提取属性, 赋值给变量的操作, 只需要一个花括号即可
let {name} = student.school;
console.log(name);

let {age, address} = student;
console.log(age,address);

 

 1.5.5.遍历对象

   for in 循环 

let stu = {a:1, b:2, c:3};
// 4.1. for in 循环
for(let key in stu){
    console.log(stu[key]);
}

 获取key值的集合 

// 获取到所有key
let keyArr = Object.keys(stu);
console.log(keyArr);

keyArr.forEach(key=>{
    console.log(stu[key]);
});

 综合示例

map很适合变更已有数据结构

let students = [
    { name: "小明", age: 18 },
    { name: "小红", age: 18 },
    { name: "小天", age: 18 },
]

// 1. 优先考虑, 不要影响原数组, 可以使用 map 映射
let newStus = students.map((item)=>{
    // 不要影响遍历出来的对象, 这个时候可以使用展开运算符进行复制
    return{
        ...item,
        school:'xxxx'
    }
});

console.log(students);
console.log(newStus);