定义数组：
var arr = [];
var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array(1, 2, 354);
console.log(arr) //[]
console.log(arr1) //[]
console.log(arr2) //[empty × 3]
console.log(arr3) //[1, 2, 354]
//数组的长度 (从尾部删除元素)
var arr = [1, 2, 3, 4];
console.log(arr.length = 2); //长度为2
console.log(arr) //[1, 2]
// 数组转字符串 (每一项逗号隔开)
var arr = [1, 2, 3, 4];
console.log(arr.toString()) //字符串 1,2,3,4
console.log(arr.toLocaleString()) ////字符串 1,2,3,4
// 字符串转数组 (参数为分割符 分隔符可为空字符串，用字间距做分割)
var arr = '1, 2, 3, 4';
console.log(arr.split()) //数组["1, 2, 3, 4"]
console.log(arr.split(' ')) //数组 ["1,", "2,", "3,", "4"]
//将数组中所有元素转为字符串连接到一起，返回最后生成的字符串 (默认逗号拼接 拼接符)
var arr = [1, 2, 3, 4];
console.log(arr.join()) //字符串 1,2,3,4
console.log(arr.join(' ')) //字符串 1 2 3 4
// 数组的反转 (会改变原数组)
console.log(arr.reverse()) //[4, 3, 2, 1]
//数组的排序
var arr = [1, 3, 5, 4];
console.log(arr.sort(function(a, b){
// return a - b //从小到大 [1, 3, 4, 5]
return b - a //从大到小 [5, 4, 3, 1]
}))
//拼接数组 不会改变原数组 ，返回一个新的数组
var arr = [1, 2, 3, 4];
var arr1 = [2, 3, 4, 5]
console.log(arr.concat(arr1)) //[1, 2, 3, 4, 2, 3, 4, 5]
//通过元素找下标
var arr = [1, 2, 3, 4];
// 从前往后找
console.log(arr.indexOf(3)) //2
console.log(arr.indexOf(1, 2)) //-1
// 第一个参数： 需要查找的元素
// 第二个参数：起始下标(从某个下标开始找)
// 找不到返回-1
// 从后往前找
// console.log(arr.lastIndexOf(1,2))
// 数组的截取方法
var arr = [1, 2, 3, 4];
console.log(arr.slice(1)) //[2, 3, 4]
//传入一个参数 截取的起始值
//返回截取后的数组
//不会改变原数组
//插入新元素
var arr = [1, 2, 3, 4];
console.log(arr.splice(2, 0, 5));
console.log(arr); //[1, 5, 2, 3, 4]
// 第一个参数：起始下标
// 第二个参数：删除元素个数
// 第三个参数：需要插入的元素
// 会改变原数组
push：
1 封装一个函数，这个函数的名字叫做 push
2 这个函数的参数，第一个是一个数组，第二个以后是任意的数据
3 调用这个函数，那么会把第二个以后的所有参数，依次放到第一个参数也就是那个数组的最后一个位置。
4 这个函数返回值，是放入这些数据之后数组的长度。
var arr = ['a','b','c'];
function push(arr){
var arg = arguments;
for(var i = 1; i<arg.length; i++){
arr[arr.length] = arg[i];
}
return arr;
}
push(arr,1,2,3)
console.log(arr); // (6) ["a", "b", "c", 1, 2, 3]
封装 unshift（向第一个添加）
1 封装一个函数，这个函数的名字叫做 unshift
2 这个函数的参数，第一个是一个数组，第二个以后是任意的数据 * 3 调用这个函数，那么会把第二个以后的所有参数，依次放到第一个参数也就是那个数组的开头的位置。
3 这个函数返回值，是放入这些数据之后数组的长度。
function unshift(arr){
var arg = arguments, len = arg.length;
for(var j=1; j<len; j++){
for(var i=arr.length; i>0; i--){
arr[i] = arr[i-1];
}
arr[0] = arg[j];
}
return arr.length;
}
var arr = [1, 2, 3];
console.log(unshift(arr, 'a', 'b', 'c', 'd'));
console.log(arr);
// ===> [1, 1, 2, 3];
// for(var i=arr.length; i>0; i--){
// arr[i] = arr[i-1];
// }
// arr[3] = arr[2] ==> [1, 2, 3, 3];
// arr[2] = arr[1] ==> [1, 2, 2, 3];
// arr[1] = arr[0] ==> [1, 1, 2, 3];
// arr[0] = 4; // ===> [4, 1, 2, 3]
//
// console.log(arr);
pop（删除最后一个）
1 封装一个函数，名字叫做pop
2 pop函数的参数是唯一的数组
3 调用pop函数，删除数组中最后一个数据
4 如果这个数组是空，那么调用这个函数，返回值是 undefined
5 如果不是空数组返回值为被删除的数据
// var arr = [1, 2, 3];
function pop(arr){
var len = arr.length, last = arr[len-1];
if(!len) return;
arr.length--;
return last;
}
// console.log(pop(arr)); // 3
// console.log(arr); // [1, 2]
shift (删除第一个)
1 封装一个函数，名字叫做 shift
2 shift函数的参数是唯一的数组
3 调用shift函数，删除数组中第一个数据
4 如果这个数组是空，那么调用这个函数，返回值是 undefined
5 如果不是空数组返回值为被删除的数据
function shift(arr){
var len = arr.length, first = arr[0];
if(!len) return;
for(var i=0; i<len-1; i++){
arr[i] = arr[i+1];
}
arr.length--;
return first;
}
var arr = ['a', 'b', 'c'];
console.log(shift(arr)); // 'a'
console.log(arr); // ['b', 'c']
indexOf
1 封装一个函数叫 indexOf
2 indexOf 函数的第一个参数为要查找的数组，第二个参数为要查找的数据
3 调用这个函数，如果要查找的数据未找到，那么函数的返回值为-1，如果找
到那么返回这个数据的位置
function indexOf(arr, item){
for(var i=0,len=arr.length; i<len; i++){
if(arr[i] === item){
return i;
}
}
return -1;
}
var arr = [1, 2, 'a', 4];
console.log(indexOf(arr, 'a')); // 2
console.log(indexOf(arr, 10)); // -1
spliceOne
1 封装一个函数叫做 spliceOne
2 该函数的第一个参数是数组，第二个参数是索引
3 调用这个函数，可以删除这个索引对应的数据
4 如果是空数组，那么返回undefined，否则返回这个被删除的数据
function spliceOne(arr, index){
var len = arr.length, ret = arr[index];
if(!len) return;
for(var i=index, j=i+1; j<len; i++,j++){
arr[i] = arr[j];
}
arr.length--;
return ret;
}
var arr = [1, 2, 3, 4];
console.log(spliceOne(arr, 2)); // 3
console.log(arr); // [1, 2, 4];
join(将数组转换成字符串)
1 封装一个函数叫做 join
2 join函数的第一个参数是一个数组，第二个参数是分割符
3 调用join，那么数组中的每一项就会被指定的分割符链接起来，如果不指定分隔符，默认就是 ‘,’，如果分隔符传入的不是一个字符串，那么就返回false
4 返回值为字符串，原数组不变。
function join(arr, spliter){
if(typeof spliter === 'undefined'){
return arr.toString();
}
if(typeof spliter !== 'string'){
return false;
}
for(var i=0, str='', len = arr.length; i<len; i++){
str += i<len-1 ? arr[i] + spliter : arr[i];
}
return str;
}
var arr = [1, 2, 3];
console.log(join(arr)); // '1,2,3'
console.log(join(arr, '')); // '123'
console.log(join(arr, '--')); //'1--2--3';
console.log(join(arr, 123)); // false
console.log(arr); // [1, 2, 3];
reverse(反转)
1 封装一个函数叫做reverse
2 该函数的参数是一个数组
3 调用这个函数，那么数组将会反转
4 返回反转后的数组
function reverse(arr){
var len = arr.length;
if(len < 2) return arr;
for(var i=0; i<len; i++){
var indexA = i;
var indexB = len - i - 1;
if(indexA < indexB){
var middle = arr[indexA];
arr[indexA] = arr[indexB];
arr[indexB] = middle;
}
}
return arr;
}
var arr = [1, 2, 3];
console.log(reverse(arr)); // [3, 2, 1]
console.log(arr); // [3, 2, 1]
filter
1 封装一个函数叫做filter
2 该函数的第一个参数是要过滤的数组，第二个参数是一个函数成为过滤函数
3 调用这个方法，会对数组进行遍历
4 每次遍历，都会把数组的当前这项和索引值当作参数传给过滤函数
5 这个过滤函数的规则一旦符合就返回这个值
6 filter函数最终返回所有符合条件的数据的集合，一个新数组。
function push(arr){
var arg = arguments, len = arg.length;
for(var i=1; i<len; i++){
arr[arr.length] = arg[i];
}
return arr.length;
}
function filter(arr, cb){
var result = [], len = arr.length;
for(var i=0; i<len; i++){
var ret = cb(arr[i], i);
if(ret){
push(result, arr[i]);
}
}
return result;
}
var arr = [11, 4, 7, 12, 17, 9];
var result = filter(arr, function (item, i){
console.log(i);
return item > 10;
});
console.log(result); // [11, 12, 17];
封装简单的css 函数
1 封装一个函数名字叫做css
2 这个函数的参数有3个，对应：元素、元素的样式、样式对应的值
3 如果只传前2个参数，那么是获取元素的样式，如果传了3个参数，那么是设置这个元素对应的样式。
'width',
'height',
'left',
'top',
'bottom',
'right',
'marginLeft',
'marginTop',
'marginBottom',
'marginRight'
];
var box = document.querySelector('.box');
function indexOf(arr, item){
for(var i=0,len=arr.length; i<len; i++){
if(arr[i] === item){
return i;
}
}
return -1;
}
function css(ele, attr, val){
// 如果attr是一个字符串并且val不存在，那么才是获取某个属性对应的值
if(typeof val === 'undefined'){
var ret = getComputedStyle(ele)[attr];
// return indexOf(normalAttr, attr) !== -1 ? parseFloat(ret) : ret * 1 === ret * 1 ? ret*1 : ret;
if(indexOf(normalAttr, attr) !== -1){
return parseFloat(ret);
}else{
return ret * 1 === ret * 1 ? ret * 1 : ret;
}
}
function setAttr(attr, val){
if(indexOf(normalAttr, attr) !== -1){
ele.style[attr] = val + 'px';
}else{
ele.style[attr] = val;
}
}
// 批量设置
if(typeof attr === 'object'){
for(var key in attr){
setAttr(key, attr[key]);
}
return;
}
setAttr(attr, val);
}
css(box,'background','yellow');
网友评论