push等方法继承于Array这个构造函数.prototype属性上的方法
(1) 数组
1. 声明数组 (三种方式)
三种方式构造出来的数组都继承于 Array.prototype 的方法和属性
var arr1 = [] //数组字面量声明var arr2 = new Array();// 通过系统内置的Array构造函数声明数组 不推荐使用var arr3 = Array();// 这种不使用// 相较于对象var obj1 = {};// 对象字面量声明var obj2 = new Object();// 通过系统内置的Object构造函数声明对象var obj3 = Object();arr = [1, 2, 3, 4, 5];// index 数组元素的下标(索引值) 从 0 开始// js 中数组是对象的一种形式var obj = {0: 1,1: 2,2: 3,3: 4,4: 5,}var arr = [, , ,]//最后一个是空值,会自动截掉最后一个逗号var arr = [, 2, , 4];// 稀松数组var arr1 = new Array(, 2, 1,,, 3, 1,);//用内置的构造函数构造的时候不能有空值,使用构造函数传的是参数var arr1 = new Array(5); // [, , , , ,] 3只填一个数字的时候就是创建数组的长度
2. 数组的操作
读取
var arr = [1,2,3,4,5,6];console.log(arr[6]);console.log(arr[5]);
写入
var arr = [1, 2, 3, 4, 5, 6];arr[6] = 'a';console.log(arr);//[1, 2, 3, 4, 5, 6, "a"]
修改
var arr = [1, 2, 3, 4, 5, 6];arr[5] = 'a';console.log(arr)// [1, 2, 3, 4, 5, "a"]
3.数组方法
这些方法是修改原数组
push unshift 添加
pop shift 删除
reverse
splice
sort
添加
arr.push(参数) 在数组最后添加
- 在数组的最后一位加,可以加多个值
- 返回值:经过处理以后的数组长度
**push()**方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。var arr = [2, 3, 4];arr.push(5)// 在数组的最后一位加,可以加多个值arr.push(5, 6, 7) //返回值是处理之后数组的长度 7console.log(arr); //[2, 3, 4, 5, 5, 6, 7]
push原理
//重写push方法var arr = [2,3,4];Array.prototype.myPush = function(){for(var i=0;i<arguments.length;i++){this[this.length] = arguments[i];}return this.length;}
arr.unshift(参数) 在数组的第一位添加
在数组的第一位加,可以加多个值
- 返回值:经过处理以后的数组长度
unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。var arr = [2, 3, 4];arr.unshift(5);// 在数组的第一位加,可以加多个值arr.unshift(6,7,8);//返回值是处理之后数组的长度 7console.log(arr); //[6, 7, 8, 5, 2, 3, 4]
删除
arr.pop() 删除数组最后一位
剪切掉最后一位的值,没有参数
- 返回值:返回被删除的值
**pop()**方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。var arr = [2, 3, 4];arr.pop() //返回值是4 [2,3]console.log(arr); //[2,3]
arr.shift() 删除数组第一位
剪切掉当前数组的第一位的值,没有参数
- 返回值:返回被删除的值
**shift()**方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
var arr = [2, 3, 4];arr.shift() //返回值是2 [3,4]console.log(arr); //[3,4]
倒序
arr.reverse()
**reverse()**方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。剪切
arr.splice(开始项的下标,剪切的长度,剪切以后最后一位开始添加的数据)
splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。// 开始项的下标 0代表第一位 -1代表倒数第一位var arr = [1,2,3,4,5,6,7];arr.splice(3,2); // arr[1,2,3,6,7]arr.splice(3,0,'a','b'); // arr[1,2,3,'a','b',6,7];arr.splice(-1,0,'c'); // arr[1,2,3,'a','b',6,'c',7];
splice() 原理
//重写splice方法function splice(arr,index){return index+=index>=0?0:arr.length;}
4.数组排序sort()
sort() 返回值: 返回排序之后的结果
- sort 是按 ascii 码进行排列的
1.参数a,b
2.返回值:<br /> 负值 a就排在前面<br /> 正值 b就排在前面<br /> 0 保持不动
sort(function(a, b){ }) //1.参数a,b //2.返回值: //负值 a就排在前面 //正值 b就排在前面 //0 保持不动 var arr = [-1, -5, 8, 0, 2]; arr.sort(); //[-1, -5, 0, 2, 8] var arr2 = [27, 49, 5, 7]; // arr2.sort(); // console.log(arr2);//[27, 49, 5, 7] arr2.sort(function(a,b){ if(a>b){ return 1; }else{ return -1; } // return a - b; // 升序排列 // return b - a; // 降序排列 }) console.log(arr2);随机排序
var arr = [1, 2, 3, 4, 5, 6]; // Math.randon() -> 0-1 ;开区间 arr.sort(function (a, b) { var rand = Math.random(); if (rand - 0.5 > 0) { return rand; } else { return -1; } return Math.random() - 0.5; }) console.log(arr)对一个对象中的属性进行排序
var arr = [{ name: "小明", age: 12, score: 100 }, { name: "小红", age: 13, score: 80 }, { name: "小花", age: 11, score: 90 } ]; arr.sort(function(a,b){ return b.age - a.age; }); console.log(arr);引用:
var arr = [ { son:'Jenny', age:18 }, { son:'Jone', age:10 }, { son:'Jone2', age:11 }, { son:'Jone3', age:13 }, { son:'Jone4', age:9 } ] function sortBy(field) { return function(a,b) { return a[field] - b[field]; } } arr.sort(sortBy("age")); console.log(arr);作业:
1.重写数组的原型上的unshift方法
自身写法
var arr = [2,3,4]; Array.prototype.myUnshift = function(){ val = arguments.length-1; for(var i = val;i>=0;i--){ this.splice(0,0,arguments[i]); } return this.length; } arr.myUnshift(1,2,3); console.log(arr);解题思路:
使用splice()方法从实参的最后一位开始每次将一个元素放进新数组的第一位 ,数组最后一位的下标为length-1 倒数第二位为 **length-1 —
老师写法 ```javascript var arr = [‘a’,’b’,’c’]; Array.prototype.myUnshift = function(){for(var i=0;i<arguments.length;i++){ this.splice(i,0,arguments[i]); //在数组第i位插入实参第i的值 //splcie 返回新数组 } return this.length //unshift 也是返回数组长度} arr.myUnshift(‘1’,’2’,’3’); console.log(arr);
**_解题思路: _**<br />**_使用splice()方法从实参的最后一位开始每次将一个元素放进新数组的第一位 ,数组最后一位的下标为length-1 倒数第二位为 _****_length-1 --_**<br />**<br />_**写法二 concat()**_
```javascript
var arr = ['a','b','c'];
Array.prototype.myUnshift = function(){
var arrArr = Array.prototype.slice.call(arguments);
var newArr = arrArr.concat(this);
return newArr;
}
var newArr = arr.myUnshift('a','b',1);
console.log(newArr);
解题思路: 使用concat方法
难点:类数组没有concat方法
解决方案: 用 **Array.prototype.slice.call()**将具有length属性的对象转成数组
2.请按照字节数排序下列数组[‘我爱你’,’OK’,’Hello’,’你说WHAT’,’可以’]
arr.sort(function(a,b){
return getBytes(a) - getBytes(b); //进行字节比较
})
function getBytes(str){
var bytes = str.length; //假设全是英文字符
for(var i=0;i<str.length;i++) //下标从0-到length-1 所以循环i<str.length
{
if(str.charCodeAt(i)>255){
bytes++;
}
}
return bytes;
}
解题思路: 使用 **charCodeAt方法 计算**字节数 再用sort进行排序
计算字节数
1.计算字节数假设字符串全是英文即字符串长度等于所占字节数: var bytes = str.length;
2.再进行循环判断每个数组元素字符串的具体字节数 __i=0;i<str.length** if(str.charCodeAt(i)>255)
若是中文字符 字节数 比英文字节数位数多1 则 bytes++ 假若__中文字符 字节数 比英文字节数位数多2
则bytes+=2;
3.返回每个数组元素字符串的具体字节数
sort排序
升序排列: return a - return b;
降序排列 __return b - return a;
arr.sort(function(a,b){
return getBytes(a) - __ getBytes(b)
})
**
